以最简单的登录为例,诠释JS面向对象的简单实例

JavaScript,是前端开发人员必须会的一门技术,从JS演变出来的有很多框架,先说说几个热门的框架吧:

JQuery:这个技术必须会,如果不会,那一定要会查api,知道怎么写,要看得懂英文文档,这个框架十分流行,不论是刚入坑的开发者还是老油条,其实也都是是需要会的

BackBone:这个技术还不错,曾经的项目中用到过多次,很方便,是个MVC的实用框架,用来渲染视图十分简便

AngularJS:是个MVVM框架,和JQuery完全不一样,JQuery是基于dom元素的,而angerlar却不是,很多从jquery过来的新手起初做angular会很不习惯

ReactJS:React是Facebook 的一个内部项目,自己写了一套来适用于自己公司的业务,其实很多公司都会这么做,因为市场上的框架普遍不适用自己,其实一般大公司都这样,后来他们自己的这套react十分好用,就开源了,react十分好用,性能也不错,代码逻辑相对来说也挺简单,所以很多人开始用,也有人说这是未来web的趋势

JQuery EasyUI:这是一个比较不错的框架,很轻便,用来开发后端管理系统再好不过了,提供了各种组件

ExtJS:这个就不多说了,刚出来的时候很牛,但是后来貌似收费了,这个我不清楚,我没用过,现在用这个框架的貌似有,可能不多,至少我接触到的项目都不用这个,要用也大多都是基于JQuery EasyUI

……还有很多各式各样的框架,如今前端正火,甚至还有很多前端游戏引擎的JS,十分强大,在这里就不多说了

好了,貌似有点废话了,那么入正题吧,写JS,其实也要面向对象,在08年小编我刚入坑工作的时候,JS并不受大家重视,甚至CSS都是让美工人员做的,现在已经大不一样,来看看一个简单的登录是如何用面向对象的方式做的吧:

先来看看登录页面的代码,十分简单,就是一个用户名和密码

重头戏在js部分,我单独写了份login.js

这是一个Login的对象,1为对象Login,2为这个对象中的属性,而这个属性是个function,主要两个作用,验证form以及登录成功后的跳转;最后这个Login对象返回一个init的函数,这个函数的作用是初始化对象中的所有方法

那么这个对象已经创建了,但是还没用,因为没有初始化,初始化必定是在dom完全加载完毕后

那么只要加入这段代码皆可以了,调用Login对象的init()方法,就可以初始化话所有对象函数,当然,有不同的属性都要写在init中,比如这样:

最后来看一下action吧,这个是用shiro来实现的,这里就不多说了,以后会单独拿出来再说说,也有可能直接上视频

最后的最后我来唠叨几句吧,前端对于后端开发人员来说也许是个坑,因为很多后端人员都不喜欢接触,其实不然,如今全栈工程师是趋势,尤其在国外,国内要成为全栈挺难,毕竟前端后端通吃的开发者少之又少,极品中的极品,而这样的牛人小编我认识一个,然后他已经去美国知名公司做开发多年!

作为后端人员,JS其实一定要会,那些页面的逻辑性脚本要会写,其次,jquery要能看懂,要能灵活运用,到最后,要去使用某个js插件的时候你就能灵活运用了,比如jqgrid啦,ztree啦,其实都是如出一辙。

原文发布于微信公众号 - BeJavaGod(wxleechenxiang)

原文发表时间:2016-11-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏FreeBuf

一枚邪恶的输入法浅析

“输入法”或许是计算机软件领域最伟大的发明之一了,也是我们日常的计算机使用中最常用到的软件,一款好的输入法能让我们事半功倍。随着计算机的软硬件不断发展,输入法的...

21560
来自专栏较真的前端

RxJS福利~~

1K50
来自专栏hightopo

数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇

57450
来自专栏静晴轩

如何写一手漂亮的 Vue

前几日听到一句生猛与激励并存,可怕与尴尬同在,最无奈也无解的话:“90后,你的中年危机已经杀到”。这令我很受触动。显然,这有些夸张了,但就目前这日复一日的庸碌下...

81960
来自专栏华章科技

100个iOS开发/设计程序员面试题汇总,你将如何作答?

无论是对于公司还是开发者或设计师个人而言,面试都是一项耗时耗钱的项目,本文作者CameronBanga从编程、设计、AppStore等各个方面对iOS开发者及设...

8640
来自专栏前端知识铺

入口文件开始,分析Vue源码实现

网上现有的Vue源码解析文章一搜一大批,但是为什么我还要去做这样的事情呢?因为觉得纸上得来终觉浅,绝知此事要躬行。

417120
来自专栏无原型不设计

给你灵感的23个优秀线框原型图示例

如何在产品初始阶段以最快的方式展示设计思路?我想大多数的UX/UI设计人员都会倾向于快速构建一个线框原型图。这的确是一个非常明智的选择。那么问题来了,设计师如何...

85660
来自专栏互联网杂技

JavaScript就要统治世界了?

" JavaScript 可以……" "嘛,不就是操作一下 DOM,可以让元素飞来飞去吗" "JavaScript 是……" "不就是用 jQuery 让网页动...

35260
来自专栏Jerry的SAP技术分享

在SAP UI中使用纯JavaScript显示产品主数据的3D模型视图

在Jerry写这篇文章时,通过Google才知道,SAP其实是有自己的3D模型视图显示解决方案的。

21320
来自专栏携程技术中心

干货 | Qreact,去哪儿网的迷你react方案

作者简介 钟钦成,网名司徒正美,著名的JavaScript专家,去哪儿网前端架构师。在GITHUB拥有复数个著名的轮子,著有《javascript框架设计》一书...

41080

扫码关注云+社区

领取腾讯云代金券