更多模块化的知识，请参考前端视频专题《前端为什么需要模块化》
第一步，下载RequireJS
下载过程略......
第二步，编写模块
//-----moduleA.js
define([],function(){
//通过return输出模块A
return {
f1(){ ... }，
f2(){ ... }
}
})//-----moduelB.js
//模块B引用了模块A
define(["moduleA"],function(ma){
//参数ma就是模块A,可以直接使用
return ...; //根据需要输出B模块
})//-----moduleC.js
//模块C引用了模块B，和模块jquery
define(["moduleB","jquery"],function(mb, $){
//参数mb对应模块B
//参数$对应模块jquery
//数组中声明的模块会被自动注入到参数中，编写时没有先后顺序
return ...; //根据需要输出模块C
})第三步，编写配置文件
requirejs({
baseUrl : "http://localhost:8000/myproject/",
paths : {
"vali" : "scripts/jquery.validate",
"jquery" : "scripts/jquery-2.0.3",
"swiper" : "scripts/swiper",
"moduleA" : "mymodules/inputauto",
"jq.cookie" : "scripts/jquery.cookie", //不符合AMD规范的JS
"bootstrap" : "scripts/bootstrap" //不符合AMD规范的JS
},
shim : { //对于不符合AMD规范的模块，需要使用shim配置
"jq.cookie" : {
deps : ["jquery"] //使用deps声明该模块依赖jquery
},
"bootstrap" : {
deps : ["jquery"]
}
}
})重要说明：
AMD规范要求
一个标准模块必须使用define函数来定义
就像上面的例子那样。
对于不符合AMD规范的代码，无法被视为一个标准的模块
这会带来一个问题，那就是它无法使用标准的方式来引入它需要的其它模块，例如jquery等
于是才有了shim配置
它可以有效地解决非规范模块的依赖问题
例如 jquery.cookie.js 文件
$.extend({
addCookie: function(){
console.log("add cookie");
},
getCookie: function() {
console.log("get cookie");
},
removeCookie : function(){
console.log("remove cookie");
}
})由于这个文件不符合AMD规范的写法
这个文件实际上依赖了jquery
但requireJS无法管理它的依赖
如果不使用shim进行配置，将会出现找不到$的错误
第四步，编写业务文件，使用这些模块
//-----home.js
//加载配置文件，使其生效，注意配置文件的路径要根据实际情况编写
require(["./conf/config.js"],function(){
//加载所有你需要的模块，模块名称需要跟配置文件中一致
//数组中声明的依赖模块会被自动加载，并注入到对应的参数中
require(["jquery","swiper","moduleA","jquery.cookie"], function($,Swiper,ma){
//$对应jquery模块，Swiper对应swiper模块，ma对应moduleA模块
//由于jquery.cookie模块本身没有输出内容
//只是对jquery的扩展，因此不需要写参数来接收
//编写正常的业务代码
})
})第五步，页面引入JS文件
到此为止，基本就可以使用了
不过在实战当中，这显然是不够完美的
因为我们的CSS还没有被模块化
第六步，下载样式处理文件css.js
该文件非官方提供，需要自行百度
或私聊我，发你
第七步，改造配置文件
requirejs({
baseUrl : "http://localhost:8000/myproject/",
paths : {
"vali" : "scripts/jquery.validate",
"jquery" : "scripts/jquery-2.0.3",
"swiper" : "scripts/swiper",
"moduleA" : "mymodules/inputauto",
"jq.cookie" : "scripts/jquery.cookie",
"bootstrap" : "scripts/bootstrap",
"css" : "scripts/css" //处理CSS样式的模块
},
shim : {
"jq.cookie" : {
deps : ["jquery"]
},
"swiper" : {
//css文件也可以被当成模块，直接声明依赖，自动加载
deps : ["css!styles/swiper.css"]
},
"bootstrap" : {
deps : [
"jquery",
//css文件也可以被当成模块，直接声明依赖，自动加载
"css!styles/bootstrap.css"
]
}
}
})通过css.js的处理，一个JS模块，可以自动依赖对应的样式文件
加载模块时，将更加的省力、省心
require(["swiper"],function(Swiper){
//除了swiper对应的js文件外
//由于之前做了shim配置，并声明了css依赖
//swiper.js和swiper.css将会被作为一个整体一起加载
//真正做到了模块化的思维方式
})