RequireJS-模块化开发框架
2015-01-18 16:47 臭小子1983 阅读(422) 评论(0) 编辑 收藏 举报一、equireJS 和 SeaJS 都是很不错的模块加载器,两者区别如下
1. 两者定位有差异。RequireJS 想成为浏览器端的模块加载器,同时也想成为 Rhino / Node 等环境的模块加载器。SeaJS 则专注于 Web 浏览器端,同时通过 Node 扩展的方式可以很方便跑在 Node 服务器端
2. 两者遵循的标准有差异。RequireJS 遵循的是 AMD(异步模块定义)规范,SeaJS 遵循的是 CMD
RequireJS会让你以不同于往常的方式去写JavaScript。你将不再使用script标签在HTML中引入JS文件,以及不用通过script标签顺序去管理依赖关系。也不会有阻塞(blocking)的情况发生
二、RequireJS的模块入口
script标签上一个自定义属性:data-main="main",等号右边的main指的main.js。这个main指主模块或入口模块。
main.js中就两个函数调用require.config和require。
require.config用来配置一些参数,它将影响到requirejs库的一些行为。
require.config的参数是一个JS对象,常用的配置有baseUrl,paths等。
<script data-main="js/main" src="require.js.js"></script>
main.js
1 require.config({ 2 paths: { 3 jquery: 'jquery-1.7.2' 4 } 5 }); 6 7 require(['jquery'], function($) { 8 alert($().jquery); 9 });
paths参数,使用模块名“jquery”,其实际文件路径jquery-1.7.2.js(后缀.js可以省略)。
我们知道jQuery从1.7后开始支持AMD规范,即如果jQuery作为一个AMD模块运行时,它的模块名是“jquery”。注意“jquery”是固定的,不能写“jQuery”或其它。
注:如果文件名“jquery-1.7.2.js”改为“jquery.js”就不必配置paths参数了。
三、定义模块和读取模块
1、定义模块
selector.js
1 define(function() { 2 function query(selector,context) { 3 alert(selector, context); 4 } 5 return query; 6 });
2、读取模块
参数1为获取的js文件可以不写扩展名,第二个参数要执行的事
1 require(['selector'], function(query) { 2 var els = query('.wrapper'); 3 console.log(els) 4 });
四、模块的依赖
<script data-main="main.js" src="require.js"></script>
主模块main
1 require.config({ 2 baseUrl: 'js', // baseUrl指的模块文件的根目录,可以是绝对路径或相对路径。这里用的是相对路径。 3 parth: { 4 $: "http://public.zgzcw.com/shared/jquery-1.7.1.min.js?v=20140717123" 5 } 6 }); 7 8 // 引用模块 9 require(['lab', "event"], function(query, e) { 10 var els = query('#tagName'); 11 e.bind(); 12 e.unbind(); 13 });
lab.js
1 // 定义一个模块 2 define(function(){ 3 4 function tag(id){ 5 $(id + " li").click(function(){ 6 if($(this).hasClass("active")){ 7 $(this).removeClass("active"); 8 } 9 else{ 10 $(this).addClass("active"); 11 } 12 }) 13 } 14 15 return tag; 16 })
event.js
1 define(["lab"], function(lab){ // 引用lab.js 2 3 var bind = function(){ 4 5 } 6 7 var unbind = function(){ 8 9 } 10 11 return { 12 bind: bind, 13 unbind: unbind 14 } 15 })