标签：
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建站就知道了！
标签：
原文地址：http://my.oschina.net/u/2352644/blog/494404
