什么是?？榛?？
前端开发中，起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果，后来js得到重视，应用也广泛起来了，jQuery，Ajax，Node.Js，MVC，MVVM等的助力也使得前端开发得到重视，也使得前端项目越来越复杂，然而，JavaScript却没有为组织代码提供任何明显帮助，甚至没有类的概念，更不用说?？椋╩odule）了，那么什么是?？槟兀?/p>
一个?？榫褪鞘迪痔囟üδ艿奈募?，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么?？?。?？榭⑿枰裱欢ǖ墓娣叮裨蚓投悸姨琢?。
根据AMD规范，我们可以使用define定义?？椋褂胷equire调用?？椤?/p>
目前，通行的js模块规范主要有两种：CommonJS和AMD。
AMD规范
AMD 即Asynchronous Module Definition，中文名是“异步?？槎ㄒ濉钡囊馑?。它是一个在浏览器端?？榛⒌墓娣?，服务器端的规范是CommonJS
?？榻灰觳郊釉?，?？榧釉夭挥跋旌竺嬗锞涞脑诵?。所有依赖某些?？榈挠锞渚胖迷诨氐骱?。
AMD是RequireJS在推广过程中对?？槎ㄒ宓墓娣痘牟?。
define() 函数
AMD规范只定义了一个函数define，它是全局变量。函数的描述为：
define(id?, dependencies?, factory);
参数说明：
id：指定义中模块的名字，可选；如果没有提供该参数，?？榈拿钟Ω媚衔？榧釉仄髑肭蟮闹付ń疟镜拿?。如果提供了该参数，?？槊匦胧恰岸ゼ丁钡暮途缘模ú辉市硐喽悦郑?/p>
依赖dependencies：是一个当前?？橐览档模驯荒？槎ㄒ宓哪？楸晔兜氖樽置媪?。
依赖参数是可选的，如果忽略此参数，它应该默认为["require","exports","module"]。然而，如果工厂方法的长度属性小于3，加载器会选择以函数的长度属性指定的参数个数调用工厂方法。
工厂方法factory，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为?？榈氖涑鲋怠?/p>
?？槊母袷?/p>
?？槊美次ㄒ槐晔抖ㄒ逯心？?，它们同样在依赖性数组中使用：
模块名是用正斜杠分割的有意义单词的字符串
单词须为驼峰形式，或者"."，".."模块名不允许文件扩展名的形式，如“.js”
?？槊梢晕?相对的"或"顶级的"。如果首字符为“.”或“..”则为相对的模块名
顶级的?？槊痈占涞母拍钅？榻馕?/p>
相对的?？槊?require"书写和调用的?？榻馕?/p>
使用 require 和 exports
创建一个名为"alpha"的?？?，使用了require，exports，和名为"beta"的?？?
define("alpha", ["require","exports","beta"],function(require, exports, beta) {
exports.verb =function() {returnbeta.verb();//Or:returnrequire("beta").verb();
}
});
require API介绍：https://github.com/amdjs/amdj...
AMD规范中文版：https://github.com/amdjs/amdj...
目前，实现AMD的库有RequireJS 、curl 、Dojo 、Nodules等。
CommonJS规范
CommonJS是服务器端?？榈墓娣?，Node.js采用了这个规范。Node.JS首先采用了js?？榛母拍睢?/p>
根据CommonJS规范，一个单独的文件就是一个模块。每一个?？槎际且桓龅ザ赖淖饔糜?，也就是说，在该?？槟诓慷ㄒ宓谋淞?，无法被其他?？槎寥。嵌ㄒ逦猤lobal对象的属性。
输出?？楸淞康淖詈梅椒ㄊ鞘褂胢odule.exports对象。
var i =1;
varmax=30;module.exports=function() {for(i -=1; i++
console.log(i);
}max*=1.1;
};
上面代码通过module.exports对象，定义了一个函数，该函数就是?？橥獠坑肽诓客ㄐ诺那帕?。
加载?？槭褂胷equire方法，该方法读取一个文件并执行，最后返回文件内部的module.exports对象。
CommonJS规范：http://javascript.ruanyifeng....
RequireJS和SeaJS
RequireJS由James Burke创建，他也是AMD规范的创始人。
define方法用于定义模块，RequireJS要求每个?？榉旁谝桓龅ザ赖奈募?。
RequireJS和Sea.js都是?？榧釉仄鳎寄？榛⒗砟?，核心价值是让JavaScript的模块化开发变得简单自然。
SeaJS与RequireJS最大的区别:
SeaJS对?？榈奶仁抢林葱? 而RequireJS对?？榈奶仁窃ぶ葱?/p>
不明白？看这篇图文并茂的文章吧：http://www.douban.com/note/28...
RequireJS API:http://www.requirejs.cn/docs/...
RequireJS的用法：http://www.ruanyifeng.com/blo...
为什么要用requireJS
试想一下，如果一个网页有很多的js文件，那么浏览器在下载该页面的时候会先加载js文件，从而停止了网页的渲染，如果文件越多，浏览器可能失去响应。其次，要保证js文件的依赖性，依赖性最大的?？椋ㄎ募┮旁谧詈蠹釉兀币览倒叵岛芨丛拥氖焙?，代码的编写和维护都会变得困难。
RequireJS就是为了解决这两个问题而诞生的：
（1）实现js文件的异步加载，避免网页失去响应；
（2）管理?？橹涞囊览敌?，便于代码的编写和维护。
RequireJS文件下载：http://www.requirejs.cn/docs/...
AMD和CMD
CMD（Common Module Definition） 通用?？槎ㄒ?。该规范明确了模块的基本书写格式和基本交互规则。该规范是在国内发展出来的。AMD是依赖关系前置，CMD是按需加载。
在 CMD 规范中，一个模块就是一个文件。代码的书写格式如下：
define(factory);
factory为函数时，表示是?？榈墓乖旆椒āＶ葱懈霉乖旆椒?，可以得到模块向外提供的接口。factory 方法在执行时，默认会传入三个参数：require、exports 和 module：
define(function(require, exports,module){
// ?？榇?/p>
});
require是可以把其他?？榈既虢吹囊桓霾问鴈xport是可以把?？槟诘囊恍┦粜院头椒ǖ汲龅摹?/p>
CMD规范地址：https://github.com/seajs/seaj...
AMD 是 RequireJS 在推广过程中对?？槎ㄒ宓墓娣痘?。CMD是 SeaJS 在推广过程中对?？槎ㄒ宓墓娣痘?。
对于依赖的?？椋珹MD是提前执行，CMD是延迟执行。
AMD:提前执行（异步加载：依赖先执行）+延迟执行CMD:延迟执行（运行到需加载，根据顺序执行）
CMD 推崇依赖就近，AMD 推崇依赖前置?？慈缦麓耄?/p>
// CMDdefine(function(require, exports, module) {vara= require('./a')a.doSomething()// 此处略去 100 行varb= require('./b')// 依赖可以就近书写b.doSomething()// ...})// AMD 默认推荐的是define(['./a','./b'], function(a, b) {// 依赖必须一开始就写好a.doSomething()// 此处略去 100 行b.doSomething()
...
})
另外一个区别是：
AMD:API根据使用范围有区别，但使用同一个api接口CMD:每个API的职责单一
AMD的优点是：异步并行加载，在AMD的规范下，同时异步加载是不会产生错误的。
CMD的机制则不同，这种加载方式会产生错误，如果能规范化?？槟谌菪问剑部梢?/p>
jquery1.7以上版本会自动?？榛?，支持AMD模式：主要是使用define函数，sea.js虽然是CommonJS规范，但却使用了define来定义?？?/p>
所以jQuery已经自动?？榛?/p>
seajs.config({'base':'/','alias':{'jquery':'jquery.js'//定义jQuery文件}
});
define函数和AMD的define类似：
define(function(require, exports,module{
//先要载入jQuery的模块var$ =require('jquery');//然后将jQuery对象传给插件?？閞equire('./cookie')($);//开始使用 $.cookie方法});
sea.js如何使用？
- 引入sea.js的库
- 如何变成?？椋?/p>
- define
-3.如何调用?？?？
-exports
-sea.js.use
-4.如何依赖?？?？
-require
define(function (require,exports,module) {//exports : 对外的接口//requires : 依赖的接口require('./test.js');//如果地址是一个?？榈幕埃敲磖equire的返回值就是?？橹械膃xports
})
sea.js 开发实例
鼠标拖拽的?？榛⑹导?div1{width:200px;height:200px;background:black;position:absolute;display:none;}#div2{width:30px;height:30px;background:yellow;position:absolute;bottom:0;right:0;}#div3{width:100px;height:100px;background:blue;position:absolute;right:0;top:0;}//A同事 ：seajs.use('./main.js');
A同事
//A同事写的main.js:define(function(require,exports,module) {varoInput =document.getElementById('input1');varoDiv1 =document.getElementById('div1');varoDiv2 =document.getElementById('div2');varoDiv3 =document.getElementById('div3');require('./drag.js').drag(oDiv3);
oInput.onclick =function() {
oDiv1.style.display ='block';require('./scale.js').scale(oDiv1,oDiv2);require.async('./scale.js',function(ex) {
ex.scale(oDiv1,oDiv2);
})
}
});
B同事
//B同事写的drag.js:define(function(require,exports,module){functiondrag(obj){vardisX =0;vardisY =0;
obj.onmousedown =function(ev){varev = ev ||window.event;
disX = ev.clientX - obj.offsetLeft;
disY = ev.clientY - obj.offsetTop;document.onmousemove =function(ev){varev = ev ||window.event;varL =require('./range.js').range(ev.clientX - disX ,document.documentElement.clientWidth - obj.offsetWidth ,0);varT =require('./range.js').range(ev.clientY - disY ,document.documentElement.clientHeight - obj.offsetHeight ,0);
obj.style.left = L +'px';
obj.style.top = T +'px';
};document.onmouseup =function(){document.onmousemove =null;document.onmouseup =null;
};returnfalse;
};
}
exports.drag = drag;//对外提供接口});
C同事
//C同事写的scale.js:define(function(require,exports,module){functionscale(obj1,obj2){vardisX =0;vardisY =0;vardisW =0;vardisH =0;
obj2.onmousedown =function(ev){varev = ev ||window.event;
disX = ev.clientX;
disY = ev.clientY;
disW = obj1.offsetWidth;
disH = obj1.offsetHeight;document.onmousemove =function(ev){varev = ev ||window.event;varW =require('./range.js').range(ev.clientX - disX + disW ,500,100);varH =require('./range.js').range(ev.clientY - disY + disH ,500,100);
obj1.style.width = W +'px';
obj1.style.height = H +'px';
};document.onmouseup =function(){document.onmousemove =null;document.onmouseup =null;
};returnfalse;
};
}
exports.scale = scale;
});
D同事
// D同事的range.js--限定拖拽范围
define(function(require,exports,module){functionrange(iNum,iMax,iMin){if( iNum > iMax ){returniMax;
}elseif( iNum < iMin ){returniMin;
}else{returniNum;
}
}
exports.range=range;
});
requirejs开发实例
require.config是用来定义别名的，在paths属性下配置别名。然后通过requirejs(参数一，参数二)；参数一是数组，传入我们需要引用的?？槊?，第二个参数是个回调函数，回调函数传入一个变量，代替刚才所引入的?？椤?/p>
main.js文件
//别名配置requirejs.config({
paths: {
jquery:'jquery.min'//可以省略.js}
});//引入模块，用变量$表示jquery模块requirejs(['jquery'],function($) {
$('body').css('background-color','red');
});
引入?？橐部梢灾恍磖equire()。requirejs通过define()定义模块，定义的参数上同。在此?？槟诘姆椒ê捅淞客獠渴俏薹ǚ梦实?，只有通过return返回才行.
define 模块
define(['jquery'],function($) {//引入jQuery?？閞eturn{
add:function(x,y){returnx + y;
}
};
});
将该模块命名为math.js保存。
main.js引入?？榉椒?/p>
require(['jquery','math'],function($,math) {console.log(math.add(10,100));//110});
没有依赖
如果定义的模块不依赖其他?？椋蚩梢裕?/p>
define(function() {return{name:"trigkit4",
age:"21"}
});
AMD推荐的风格通过返回一个对象做为?？槎韵?，CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露?？槎韵蟮哪康?/p>
