以前我们可能会这样做代码分工
modules.js -----
var moduleA = {......}
var moduleB = {......}
var moduleC = {......}
然后每个页面都引入JS
<script src="modules.js"></script>
不管这个页面用到了几个模块,你都要把整个文件加载进来,于是我们就想,不如分开吧
然后我们的代码变成了这样:
moduleA.js -----
var moduleA = {......}
moduleB.js -----
var moduleB = {......}
moduleC.js -----
var moduleC = {......}
但是,由于各个模块之间存在相互引用的依赖关系,所以我们这样引入JS:
<script src="jquery.js"></script>
<script src="moduleB.js"></script>
<script src="moduleC.js"></script>
<script src="moduleA.js"></script>
假设A引用了C,而C引用了B,ABC里面都用到了JQ,你必须小心翼翼的确保它们的加载顺序是正确的
于是require.js出现了
按照requireJS当中的规范要求,你只需加载一个文件就可以,但同时需要带上一个配置文件config.js
第一步:
<script data-main ="config.js" src ="require.js" ></script>
这个require.js你可以从官网下载,这个config.js你必须自己完成。不用担心,它写起来非常简单:
config.js -----
requirejs.config({
baseUrl : "js",
paths : {
"jquery": "jquery/jquery.1.11.3"
}
});
baseUrl的意思就是说你所有的路径都是基于它基础上的。
看的出来,我们正在配置一个文件的路径
"jquery": "jquery/jquery.1.11.3"
左边蓝色的是我们定义的模块名称,右边红色则是文件路径,注意文件没有后缀名,因为在require看来所有的模块都是JS
紧接着,我们可以定义自己的模块文件了,moduleB.js
首先mouduleB.js也是一个模块,但是我们必须对这个JS改造一下,让它符合require的规范要求,才能使用
moduleB.js -----
define(["jquery"],function(jq){
//根据我们之前的设定,模块B需要使用Jquery
//define函数中的第一个参数,用来表明,我们即将引用哪个模块。
//由于之前我们已经定义过了jquery模块,所以这里可以直接使用
//注意,你如果不写声明,这里是用不了jQuery的
//你如果注意到第一个参数是一个数组,那就应该猜到,其实我们可以一次引用好多模块
//jq变量就是jquery,你如果不习惯,把名字改回$就是了
return {
start: function(){
jq("#box").show(1000);
console.log("模块B提供的start方法");
//为什么这里要return呢? 因为我们定义的模块要被其他人使用
//那又为什么要return对象呢?为了更符合模块化思维以及面相对象的原则
//我们返回一个对象而不是函数,使用会更方便(待会讲完怎么调用你就知道了)
}
}
});
好了,模块B定义完了,我们可以来试试。当然,用之前别忘了修改配置
config.js -----
requirejs.config({
baseUrl : "js",
paths : {
"jquery": "jquery/jquery.1.11.3",
"moduleb" : "ms/moduleB"
}
});
注意:配置路径时,排名不分先后,顺序可以任意。
我们有一个index.html页面,包含一个index.js文件。
index.js -----
require(["config",function(){ //config默认从项目根目录找,由于我们的config.js就是放在根目录下的
//只有先引用config,才能引用配置好的所有模块
require(["jquery","moduleb"],function($,mb){
//我们引用两个模块jquery、moduleb
mb.start(); //mb就是我们刚才在模块B中返回的对象
})
})
根据我们一开始的设定(A引用了C,而C引用了B,ABC里面都用到了JQ )
和上面的讲解,你能否自己完成moduleC.js和moduleA.js?
moduleC.js -----
define(["moduleb","jquery"],function(mb,$){
return {
.......
}
});
moduleA.js -----
define(["modulec","jquery"],function(mc,$){
return {
.......
}
});
别忘了配置:
config.js -----
..............
paths: {
"jquery": "jquery/jquery.1.11.3",
"modulea" : "ms/moduleA",
"moduleb" : "ms/moduleB",
"modulec" : "ms/moduleC"
}
..............
一些问题:
问:加载配置文件的路径问题?
根据你目前的页面的业务JS文件的位置来决定,也就是说,复杂加载config的JS在哪里,路径就从哪里开始
例如index.js在根目录,config也在根目录:
require(["config"],function(){...});
例如index.js在js目录中,config在根目录
require(["../oncfig"], function(){...});
例如index.js在根目录中,config在js目录
require(["js/config", function(){...}];
问:是不是所有要加载的模块,都必须写define函数,为什么jquery就没写,一样可以加载?
谁说JQ没写呢?这是jquery的部分源代码。
......
if ( typeof define === "function" && define.amd ) {
define( "jquery", [], function() {
return jQuery;
});
}
......
所以,所有的JS都必须遵循require的规范,才能够正确的加载
问:我自己写了一大堆的工具函数,请问怎么加载?
首先,工具函数也可以用对象来表示
common.js -----
define(function(){
return {
getStyle : function(){ ........ },
randomColor : function(){ ......... }
}
});
当然如果你比较任性,非要写成这个样子:
common.js -----
function getStyle(){ ......... }
function randomColor(){ ........ }
解决办法也是有的:
请百度requireJS, shim配置
问:有一些插件,本身没有导出任何对象或核心函数,只是对某个框架的扩展,例如 my.jquery.scroll.js 该怎么用?
官方文档给出的答案是使用shim配置
config.js -----
require.config({
baseUrl: "js",
paths: {
"jquery" : "jquery.1.11.3",
"jquery.scroll" : "my.jquery.scroll"
},
shim: {
"jquery.scroll": {
deps: ["jquery"],
exports: "jQuery.fn.scroll"
}
}
});
这是第一种方式, deps表示它依赖了哪个模块,exports表示它输出哪个函数,函数名字要和插件代码里保持一致
使用方式:
index.js -----
require(["config",function(){
require(["jquery","jquery.scroll"],function($){
$("#box").scroll(500);
})
})
=====================================================
第二种配置方式:
config.js -----
require.config({
baseUrl: "js",
paths: {
"jquery" : "jquery.1.11.3",
"jquery.scroll" : "my.jquery.scroll"
},
shim: {
"jquery.scroll": ["jquery"]
}
});
使用方法同上
But! 官方文档又说,这样使用可能导致错误! 请参考原文:
所以,终极解决方案是,把插件改成define调用.........
问:如果我用到了两个框架,Jquery和Zepto,他们的核心函数都叫$ ,那该怎么办呢?
require(["jquery","zepto"],function(jq,zepto){
// 改个名字就不冲突了
})
说一说好处:
讲了这么多,requirejs所倡导的模块化开发,好处在哪里呢?
1 你有没有发现,整个项目当中,再也没有出现一个全局变量?
2 你有没有发现,你再也没有考虑过加载顺序的问题?
3 你有没有发现,即使两个框架名字冲突了也没关系?
4 而且你肯定没有发现,所有的JS文件的加载过程,已经变成了异步。
5 最后,你还发现,用了requireJS,你的代码想不写成面相对象都难??
关于AMD和CMD
总在网上看大家讨论AMD和CMD,到底是什么东西呢?
AMD就是require所倡导的模块化开发的方式
还有一个叫CommonJS的,不过还是和requireJS有些区别,主要针对NODE后端开发
另外还有一个大名鼎鼎的SeaJS,作者是淘宝的玉伯,于是诞生了CMD规范
根据作者自己的介绍,SeaJS各方面都比requireJS强大
这个就不做评价了
至于区别呢?
AMD推崇的是依赖前置:
define(["a","b","c"],function(a,b,c){ //我们把所有依赖提前写好了
a.doSomething (); //这里直接使用
b.doSometing();
})
CMD推崇的是依赖就近:
define(function(require, exports, module) {
var a = require(‘./a‘);
a.doSomething();
.........
var b = require(‘./b‘) // 依赖可以就近书写,用到的时候再加载
b.doSomething()
})
当然requireJS也支持CMD的写法,不过作者本人是不推荐这么写的