js开发的模块化就是module处理
简单理解js模块化的开发就是让我们的web项目对js进行分类的处理
我们在开发网站的时候,里面会用要很多的类库,如jquery,还会有到基于jq各种插件,还会有其他类库,还有自己写的js或者jq代码等。一个html页面会有n多个script标签对外部js的引用,是不是感觉这样的页面会非常的混乱,如果我们可以只用一个script标签载入一个js文件,这个js文件把其他需要的js文件能全部加载进去,并且按着之间依赖关系执行,是不是一个页面就非常的整洁和容易扩展处理。
js的开发规范有AMD,典型代表就是require.js
CMD,典型代表就是sear.js
Commonjs规范我们已经接触过,在nodejs的安装和使用中我们在页面里运用require()请求原生模块、第三方模块和export定义我们第三方模块就是在运用commonjs的规范开发
我们的requirejs就是典型的amd规范处理,实现html页面中head.appendchild("script")的加载和内部依赖顺序处理
amd是异步加载模块化开发,采用异步的载入方式,也就是我们虽然先引用了require.js,下面的js文件也可能先执行处理,如果对上面有依赖,也可能失效。
我们通过参考requriejs的手册,去实践到我们的网页开发中去,利用amd模块化的技术去开发我们的网页。
requirejs文档地址 http://www.requirejs.cn/
requirejs下载地址 http://apps.bdimg.com/libs/require.js/2.1.11/require.min.js
咱们不去学习那么多的高级处理,基础功能已经足够我们的项目开发,一切为了开发去使用
下载requirejs,加载到html页面中,通过script标签的src属性加载require.js
<!DOCTYPE html> <head> <title>requirejs</title> <meta charset="utf-8" /> </head> <body> <div class="aa">requirejs</div> </body> <script src="js/require.js" type="text/javascript"></script> </html>
requirejs不使用多个script在html页面去加载所有js文件,通过require去做我们这种顺序加载处理
<script>标签含有一个特殊的属性data-main,require.js使用它来启动脚本加载过程
我们给页面添加data-main属性,指定我们的这个主要js控制加载的文件(都是对js的处理,所以省略了.js后缀)
<!DOCTYPE html> <head> <title>requirejs</title> <meta charset="utf-8" /> </head> <body> <div class="aa">requirejs</div> </body> <script src="js/require.js" data-main="js/config.js" type="text/javascript"></script> </html>
和我们的require的路径一样,都是放在了js这个文件下面,现在的目录
requ.html
js/reruire.js
js/config.js
我们已经知道,config.js就是我们的控制文件(文字自定义),在这里面我们定义和处理对其他文件的顺序加载
我们给config.js写入如下代码
requirejs.config({ baseUrl: ‘js/modules/‘, paths: { jquery: ‘jquery‘ } }); require([‘jquery‘], function(jq) { });
我们利用reruirejs的config方法去定义我们依赖的外部文件,
baseUrl属性:是定义外部文件加载的基本路径(比如我们的依赖js都在js/modules下)
paths属性:是定义加载外部文件的文件名,后缀.js省略(名字叫jquery.js,赋给指定键名jquery)
require方法:是请求加载我们的外部依赖文件,第一个参数是请求路径,这里就是jquery类库(目录js/modules/jquery.js),
jquery这个键值会自动拼接成 baseUrl+paths的路径进行加载
第二个参数是回调函数,里面的回调参数被赋值为请求的依赖文件
我们先看一下我们下载的目录结构:
requ.html
js/reruire.js
js/config.js
js/modules
js/modulesjquery.js
我们会把大量的外部放置在modules文件夹下面,html利用requirejs通过script加载外部文件,那么大量文件的基本目录就是:js/modules
我们浏览器打开html页面,firebug插件页面结构
我们的html页面其实只定义了require.js的引用,通过对config上面的设置,我们发现html页面已经加载了config.js和jqurey.js文件了!
config.js路径和data-mian的设置一样,
<script src="js/require.js" data-main="js/config.js" type="text/javascript"></script>
jquery.js的路径就是我们设置里面的baseUrl+paths
我们可以看出,我们config对路径的处理是站在html页面的角度去引用,如果站在config文件的角度去引用就错了,因为是给html页面去顺序加载js文件的
基本路径属性很好理解,就是相对html的路径,
文件属性的设置我们需要给他设置一个键名,键名的后面是引入文件的名字
require()方法:可以通过你的键名去请求加载外部文件的,看上面的path设置
我们通过config()定义了依赖文件
现在通过require()得到依赖,并且在回调函数中赋给了回调参数$
我们在回调函数内添加我们的jq处理代码,config.js修改如下
requirejs.config({ baseUrl: ‘js/modules/‘, paths: { jquery: ‘jquery‘ } }); require([‘jquery‘], function($) { alert($(window).height()); $("body").append("<div>append</div>") });
页面弹出了窗口高度并且插入了div,我们利用requirejs加载jq类库,和基于jq的代码处理就完成了!!!
我们可以自己定义模块,用于依赖加载处理,
我们的依赖文件代码要放置在define()中。作为模块的定义,这样requirejs才可以加载依赖
我们创建自定义依赖文件,叫做ex.js(目录js/modules/ex.js)
modules创建ex.js,
define(function() { var ex="我是依赖" return ex; });
config.js设置引入
requirejs.config({ baseUrl: ‘js/modules/‘, paths: { jquery: ‘jquery‘, ex: ‘ex‘ } }); require([‘jquery‘,"ex"], function($,ex) { alert(ex) });
我们浏览器打开HTML页面,会弹出“我是依赖”。
在js文件,我们将定义的内容反之在define里面,我们在config方法设置路径,require请求到,返回到到回调函数,我们回调函数的参数就会赋值为define里的内容
对于当前的ex.js文件就是在回调函数中 ex=function() { var ex="我是依赖"; return ex; }
我们把ex的代码就行处理,不用原生js的处理代码,使用jq的代码,修改如下:
define(function() { var ex=$(window).height(); return ex; });
审查报错了,因为你定义的模块不知道$是什么,define提供依赖的支持,我们修改如下:
define(["./jquery"],function($) { var ex=$(window).height(); return ex; });
和require方法类似,可以先进行依赖请求,然后回调到回调参数中,这样定义的代码就对jq识别了,我们可以成功运行
我们看到,define加载依赖的路径是相对于当前js文件的,
我们既然在定义模块可以加载依赖,好了把ex.js修改为jq插件的形式,我们在以前文章写过jq的插件,我们以tab切换为案例
ex.js引入jq类库依赖,放入插件代码:
define(["./jquery"],function($) { return $.fn.extend({ tab:function(){ return this.each(function () { var obj = $(this); obj.find(".tabnav").children().click(function(){ $(this).addClass("fou").siblings().removeClass("fou"); $(this).parent().parent().find(".tabbox").children().eq($(this).index()).show().siblings().hide(); }); }); } }); });
我们直接把插件的代码放入define里面就好了,我们的config.js代码引用插件
requirejs.config({ baseUrl: ‘js/modules/‘, paths: { jquery: ‘jquery‘, ex: ‘ex‘ } }); require([‘jquery‘,"ex"], function($,ex) { $(".tab1").tab(); });
这时候ex回调参数其实没有什么意义,因为我们依赖是jq的插件,他会自动加上新的功能,我们html加上tab切换的html代码
<!DOCTYPE html> <head> <title>requirejs</title> <meta charset="utf-8" /> <style type="text/css"> /*reset*/ *{ padding:0; margin:0} body{ height: 100%; width: 100%; font-size:12px; color:#333;} /*demo*/ .tab1{height:400px; width:400px;} .tabnav{height:50px; line-height:50px;} .tabnav span{ cursor:pointer; margin:0 10px;} .tabnav .fou{ color:#36F;} .tabbox{height:350px; } </style> </head> <body> <div class="tab1"> <div class="tabnav"> <span class="fou">111</span> <span>222</span> <span>333</span> </div> <div class="tabbox"> <div>111111</div> <div style="display:none;">22222222222</div> <div style="display:none;">33333333</div> </div> </div> </body> <script src="js/require.js" data-main="js/config.js" type="text/javascript"></script> </html>
浏览器打开修改的页面,我们的tab效果成功执行了。
我们的插件里面放置了依赖,其实config里面可以放弃对jq类库的引用的
config修改如下
requirejs.config({ baseUrl: ‘js/modules/‘, paths: { ex: ‘ex‘ } }); require(["ex"], function(ex) { $(".tab1").tab(); });
还是可以正确执行!插件里面加载了jq类库,当前没有加载!
我们如果在外部define定义模块加载了模块,那么我们这里引用外部文件会把define定义的代码和他的依赖都加载进去html页面
我们通过require加载的依赖,就是把整个js依赖放入在html中,我们config.js如下处理
requirejs.config({ baseUrl: ‘js/modules/‘, paths: { jquery: ‘jquery‘ } }); require(["jquery"], function() { alert($(window).height()) });
我们的jq一样有效,请求到后,那么在回调内部就可以进行处理!
我们创建一个完整的项目,结构如下
requ.html ?我们的静态页面
js/reruire.js ?require文件
js/config.js ?主要配置文件
js/modules ?存放jq类库和插件文件的文件夹
js/modules/jquery.js ? jq类库
js/handle/ys.js? 原生js文件,匿名函数返回消息
js/handle/ysfun.js ?原生js文件,匿名函数返回工具函数
html页面代码:
<!DOCTYPE html> <head> <title>requirejs</title> <meta charset="utf-8" /> <style type="text/css"> /*reset*/ *{ padding:0; margin:0} body{ height: 100%; width: 100%; font-size:12px; color:#333;} /*demo*/ .tab1{height:400px; width:400px;} .tabnav{height:50px; line-height:50px;} .tabnav span{ cursor:pointer; margin:0 10px;} .tabnav .fou{ color:#36F;} .tabbox{height:350px; } </style> </head> <body> <div class="tab1"> <div class="tabnav"> <span class="fou">111</span> <span>222</span> <span>333</span> </div> <div class="tabbox"> <div>111111</div> <div style="display:none;">22222222222</div> <div style="display:none;">33333333</div> </div> </div> </body> <script src="js/require.js" data-main="js/config.js" type="text/javascript"></script> </html>
ex.js代码:
define(["./jquery"],function($) { return $.fn.extend({ tab:function(){ return this.each(function () { var obj = $(this); obj.find(".tabnav").children().click(function(){ $(this).addClass("fou").siblings().removeClass("fou"); $(this).parent().parent().find(".tabbox").children().eq($(this).index()).show().siblings().hide(); }); }); } }); });
ys.js代码:
define(function() { var ys="我是就是一个消息!"; return ys; });
ysfun.js代码:
define(function() { var tools={}; tools.norepeat=function(arr){ arr.sort(); var newarr=[]; for(var i=0;i<arr.length;i++){ if(arr[i]==arr[i+1]){ continue; }else{ newarr.push(arr[i]); } }; return newarr; }; tools.strindex=function(str,arr){ var index; for(var i=0;i<arr.length;i++){ if(arr[i]==str){ index=i; } }; return index; }; return tools; });
config.js代码:
requirejs.config({ baseUrl: ‘js‘, paths: { jquery: ‘modules/jquery‘, ex: ‘modules/ex‘, ys: ‘handle/ys‘ , ysfun: ‘handle/ysfun‘ } }); require(["jquery","ex","ys","ysfun"], function($,ex,ys,ysfun) { $(".tab1").tab(); alert(ys); var arr1=["123","44","55","66","789","44"]; alert(ysfun.norepeat(arr1)); alert(ysfun.strindex("66",arr1)); });
页面依赖jq类库,依赖jq的插件,还有其他js处理,一个基本页面的js引用大概就这些!
大概的实现:
- define定义模块,
- config设置依赖
- require请求加载依赖,回到参数可以接收依赖返回内容,回调函数内做进一步处理
- Commonjs规范在nodejs有体现,我们看看利用nodejs建站就知道了!