专栏首页BeJavaGod以最简单的登录为例,诠释JS面向对象的简单实例

以最简单的登录为例,诠释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),作者:李晨翔

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Shiro系列(0) - 权限管理在J2EE企业级开发中的应用与实战

    其实也是应大家要求,讲一下权限管理,之前有讲过,但是没有拿出来细讲,这次索性录了视频从头到尾把shiro讲一遍。后续spring security会另外找个时间...

    风间影月
  • ZooKeeper 一二事 - 搭建ZooKeeper伪分布式及正式版集群 提供集群服务

    集群真是好好玩,最近一段时间天天搞集群,redis缓存服务集群啦,solr搜索服务集群啦,,,巴拉巴拉 今天说说zookeeper,之前搭建了一个redis集...

    风间影月
  • 安全框架 - Shiro的注解以及JSP标签

    Shiro想必大家都知道了,之前的文章我也有提过,是目前使用率要比spring security都要多的一个权限框架,本身spring自己都在用shiro,之前...

    风间影月
  • 略懂Java编程(一):Java世界里的对象

    我们每天都与机器打交道,我们的眼里只有if、else,或者Exception。然而,回归了到真实的世界,总是那么的复杂,那么多的纠结。但是,回到...

    open
  • poj 1426 Find The Multiple (广搜)

    http://poj.org/problem?id=1426 题意:求n的倍数m,对于m的要是求所有位的数必须是0或1  a nonzero multiple ...

    用户1624346
  • 1760:菲波那契数列(2)

    1760:菲波那契数列(2) 总时间限制: 1000ms 内存限制: 65536kB描述菲波那契数列是指这样的数列: 数列的第一个和第二个数都为1,接下来每个数...

    attack
  • P3908 异或之和

    题目描述 求 的值。  即AA , BB 按位异或。 输入输出格式 输入格式: 1 个整数NN。 输出格式: 1 个整数,表示所求的值。 输入输出样例...

    attack
  • Hoax or what UVA - 11136(multiset的应用)

    刚开始把题意理解错了,结果样例没过,后来发现每天只处理最大和最小的,其余的不管,也就是说昨天的元素会影响今天的最大值和最小值,如果模拟的话明显会超时,故用mul...

    _DIY
  • 啥?选择排序还能这样写,太强!

    我的《算法刷题日记》知识星球,Day2 星球内的朋友们打卡非常积极,截止目前已经有 100多 位提交代码打卡。下面是今天部分打卡的截图:

    double
  • 史上最全Windows安全工具锦集

    近日,深信服安全团队整理了一些常见的PE工具、调试反汇编工具、应急工具、流量分析工具和WebShell查杀工具,希望可以帮助到一些安全行业的初学者。

    FB客服

扫码关注云+社区

领取腾讯云代金券