关注微信公众号 太平洋学习网 扫描二维码
最新消息:关注【太平洋学习网】微信公众号,可以获取全套资料,【全套Java基础27天】【JavaEE就业视频4个月】【Android就业视频4个月】

jquery模块化开发的好处介绍

JS/CSS 太平洋学习网 浏览 评论

jquery模块化是什么?为什么我们应该使用jquery模块化来开发项目,下面让作者来介绍一下。

我们都知道jquery使用非常的简单,比起javascript来说,不管是jquery函数,还是jquery选择器,都是javascript无法可比拟的,我们可能只是少量的使用一些javascript事件来处理一些简单的问题。

jquery虽然好用,但是如果你的项目很大的时候,也需要用到一种开发模式来写js,如果js函数非常非常多的时候,你就很容易搞混,于是我们就用到了jquery 模块化的开发模式来开发我们的项目。

还记得java或者别的语言的点语法吗?只要用一个类,然后输入一个“点”,就会自动弹出这个类里面所有的方法,这个现在好一点的编程软件都会有代码自动提示功能,而使用了jquery模块化开发的话,我们不仅不会搞混我们写的方法,还能够非常容易的调用我们曾经写过的东西,或者别人写好的方法,直接告诉我们类名我们就会用了。

举个简单的例子,如果我们新建了两个页面,一个是对user人员列表页面,需要对人员进行增删改查的操作;另外一个是article文章列表页面,也是需要对文章进行增删改查,如果我们的页面非常非常的多,那么我们就会很容易忘记自己写过了什么。

下面是jquery模块化开发模式,可以解决我们大项目所面临的一些困扰,如user页面,可以新建一个user.js文件,增删改查方法。

var user = (function() {
    var add = function(){
    }
    var delete = function(id){
    }
    var update = function(id){
    }
    var find = function(id){
    }
   return { //return必须要,否则方法会不起作用
        add : add,
        delete : delete,
        update : update,
        find : find
   };
})();

然后再定义一个article文章页面的jquery模块,如下。

var article = (function() {
    var add = function(){
    }
    var delete = function(id){
    }
    var update = function(id){
    }
    var find = function(id){
    }
   return {
        add : add,
        delete : delete,
        update : update,
        find : find
   };
})();

然后在需要用到上面方法的html界面中引入上面的js文件,然后就可以使用我们定义的方法了,如下所示。

user.add()
user.delete(id)
user.update(id)
user.find(id)

article.add()
article.delete(id)
article.update(id)
article.find(id)

使用jquery模块即使是同样的方法名称,也不会有搞混的现象,并且在大项目中使用更方便,无需知道内部怎么写,只需要用“类名.方法”的形式即可直接弹出来。

来源网站:太平洋学习网,转载请注明出处:http://www.tpyyes.com/a/js_css/2017/1113/376.html