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