RequireJS 使用详解
require.js 主要解决两个问题 :
1> 实现js文件的异步加载，避免网页失去响应
2> 管理模块之间的依赖性，便于代码的编写和维护
官网 : http://requirejs.org/
GitHub : https://github.com/requirejs/requirejs
require.js的加载
1> 引入 require.js 文件
async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上
2> 加载自己的 js 文件
data-main属性的作用是，指定网页程序的主模块。在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main
主模块是整个网页的入口代码，它有点像C语言的main()函数，所有代码都从这儿开始运行
主模块的写法
主模块不依赖任何其他模块，那么可以直接写入javascript代码
// main.js
alert("加载成功！");
常见的情况是，主模块依赖于其它模块，这时就要使用AMD规范定义的的require()函数
// main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
// some code here
});
require()函数接受两个参数。第一个参数是一个数组，表示所依赖的模块，上例就是['moduleA', 'moduleB', 'moduleC']，即主模块依赖这三个模块；第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块
require()异步加载moduleA，moduleB和moduleC，浏览器不会失去响应；它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题
注 :
默认情况下，require.js与这三个模块在同一个目录，其对应
moduleA.js，moduleB
.js
和 moduleC
.js，然后自动加载
模块的加载
使用 require.config()方法，可以对模块的加载行为进行自定义。require.config()就写在主模块 (main.js) 的头部。参数就是一个对象，这个对象的paths属性指定各个模块的加载路径
require.config({
paths: {
// baseUrl: "js/lib", 指定基目录
"backbone": "backbone.min",
"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min”,
// 直接指定网址
"underscore": "lib/underscore.min",
}
});
require.js要求，每个模块是一个单独的js文件，可以使用 require.js 优化工具将多模块合并
define 函数
模块不同于传统的脚本文件，它良好地定义了一个作用域来避免全局名称空间污染。它可以显式地列出其依赖关系，并以函数 (定义此模块的那个函数) 参数的形式将这些依赖进行注入，而无需引用全局变量。RequireJS的模块是模块模式的一个扩展，其好处是无需全局地引用其他模块。 RequireJS的模块语法允许它尽快地加载多个模块，虽然加载的顺序不定，但依赖的顺序最终是正确的。同时因为无需创建全局变量，甚至可以做到在同一个页面上同时加载同一模块的不同版本
在定义一个模块的时候，方法的第一行写一个 “use strict”，用于表示 严格模式，这种模式使得 JavaScript 在更严格的条件下运行，其优点 :
1> 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为
2> 消除代码运行的一些不安全之处，保证代码运行的安全
3> 提高编译器效率，增加运行速度
1> 简单的值对模块 : 把文件名称作为name参数传入，若依赖该组件那么返回的就是一个对
define({
name
:
"hehe"
,
age
:
"18"
});
2> 简单的函数模块 : 和上面一样文件名称作为默认的 name，与上面的差异是，可以提前执行返回值外的代码
define(
function
() {
return
{
name
:
"hehe"
,
age
:
"18"
};
});
3> 依赖函数模块 : 和上面一样，关键是依赖模块是以返回值作为入参的形式传入，如果加载错误或者没有找到对应的模块，那么得到的入参是Undefiend
define([
'angular'
,
'jsUtil'
,
'modules/meet/modules'
,
'modules/meet/services/Meet'
,
'modules/meet/services/MeetRemoteService'
],
function
(require) {
'use strict'
;
var
module
= angular.module(
'meet.services'
);
module
.factory(
'MeetService'
,
function
(Meet, MeetRemoteService) {
var
service
= {
name
:
'hehe'
,
age
:
'18'
};
return
service
;
});
});
4> 返回函数模块 : 和上面一样，这里返回的是函数，在依赖模块中把它作为函数对象调用即可，其实这是一个简单的闭包
define([
'angular'
,
'jsUtil'
,
'modules/meet/modules'
,
'modules/meet/services/Meet'
,
'modules/meet/services/MeetRemoteService'
],
function
(require) {
'use strict'
;
var
module
= angular.module(
'meet.services'
);
module
.factory(
'MeetService'
,
function
(Meet, MeetRemoteService) {
var
service
= {};
service
.
getWeekOfMeet
=
function
(weekFlag, date) {
return
MeetRemoteService.
get
(weekFlag, date).
then
(
function
(data) {
data.
content
= Meet.sortMeet(data.
content
);
return
data;
});
}
return
service
;
});
});
5> 完整定义 : 下面就是完整定义，有名称，有依赖，有回调，内部还有common 的形式引入依赖对象
define(
'sample3'
, [
'sample'
,
'sample1'
],
function
(sample, sample1) {
var
sample4
= require(
'sample4'
);
return function
() {
alert
(sample.
name
+
':'
+ sample.sayhell());
}
});
define函数 name 和 require函数 依赖名称之间的关系
define(name, [], callback) : 这个name可以省掉，默认是文件名称；当然也可以自定义，一旦定义name，根据源代码可以发现 define函数内部其实就是把这个 name以及依赖模块、回调函数作为一个对象存储在全局的数组当中，也就是 defQueue.push([name, deps, callback])；那么这个name就是这个组件注册的的ID
require([name, name2], callback) : 系统首先会在全文检索path中是否对应的路径，如果没有自然把他作为路径拼接在 baseUrl 上去异步加载这个js文件，加载时从源代码中可以看到 ,var data = getScriptData(evt)；返回的 data.id 其实就是name，然后执行contex.completeLoad(node.id)，其内部就很清楚了，把define中注册的name和这里得到的name进行比较如果相等就执行。所以道理就是：require 和 define 的 name 必须保证一致
AMD模块的写法
require.js加载的模块，采用AMD规范，也就是说，模块必须按照AMD的规定来写。具体来说，模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中，如下代码 :
// math.js
define(function (){
var add = function (x,y){
return x+y;
};
return { add: add };
});
加载方法如下 :
// main.js
require(['math'], function (math){
alert(math.add(1,1));
});
如果这个模块还依赖其它模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性 :
define(['myLib'], function(myLib){
function foo(){
myLib.doSomething();
}
return { foo : foo };
});
当require()函数加载上面这个模块的时候，就会先加载myLib.js文件
注 : 1> jQuery 符合 AMD规范
2> 每个文件只能有一个
define 方法，且
define 方法定义的 Module 与文件名称相同
加载非规范的模块
在加载非规范的模块调用 require() 加载之前，要先用 require.config()方法，定义一些特征，如下代码 :
require.config({
baseUrl: '/public/js',
paths: {
jquery: 'lib/jquery/jquery'
},
shim : {
'underscore' : {
exports : '_'
},
'backbone' : {
deps : ['underscore', 'jquery'],
exports : 'Backbone'
},
'jquery.scroll' : {
deps : ['jquery'],
exports : 'jQuery.fn.scroll'
},
'hello' : {
init : function() {
return {
hello: hello,
hello2: hello2
}
}
}
}
});
require(['hello'], function(hello) {
hello.hello1();
hello.hello2();
});
require.config() 接受一个配置对象，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义
1> exports值 (输出的变量名)，表明这个模块外部调用时的名称
2> deps数组，表明该模块的依赖性
使用 shim ，将某个依赖中的某个全局变量暴露给requirejs，当作这个模块本身的引用
注 : 1> require.config 配置 shim 中 exports 的值，一定要与相关文件中暴露出全局变量名称一致。如果暴露出多个全局变量，那么 exports 可以指定其中任何一个，作为模块的返回结果。最好只使用一个全局变量，来减少冲突的可能性
2> 若要暴露多个变量则不能使用
exports，必须换成 init 函数
requirejs一共提供了两个全局变量 :
1> requirejs/require : 用来配置requirejs及载入入口模块，如果其中一个命名被其它库使用了，可以用另一个
2> define : 定义一个模块
注 : 1> 当一个 js 文件已经和一个模块绑定，当该 js 再次绑定一个模块使用的时候会报错
2> 对于经常使用的模块，在
require.config 中设置成有主，这样防止多次引入
如何完全不让jquery污染全局的$
require.js 插件
1> domready插件 : 让回调函数在页面DOM结构加载完成后再运行
require(['domready!'], function (doc) {
// called once the DOM is ready
});
2> text和image插件 : 允许require.js加载文本和图片文件
define([
'text!review.txt’,
'image!cat.jpg’
],
function(review, cat){
console.log(review);
document.body.appendChild(cat);
}
);
合并与压缩
RequireJS 可以将 JavaScript代码轻易的分割成苦干个模块(module)并且保持你的代码模块化与易维护性。这样，将获得一些具有互相依赖关系的 JavaScript文件。仅仅需要在的HTML文档中引用一个基于 RequireJS 的脚本文件，所有必须的文件都将会被自动引用到这个页面上
但是，在生产环境中将所有的 JavaScript文件分离，这是一个不好的做法。这会导致很多次请求(requests)，即使这个些文件都很小，也会浪费很多时间。 可以通过合并这些脚本文件，以减少请求的次数达到节省加载时间的目的
另一种节省加载时间的技巧是缩小这些被加载文件的大小，相对小一些的文件会传输的更快一些。这个过程叫作最小化 (minification) ，它是通过小心的改变脚本文件的代码结构并且不改变代码的形为(behavior)和功能(functionality)来实现的。例如这些：去除不必要的空格，缩短(mangling，或都压缩)变量(variables)名与函数(methods，或者叫方法)名，等等。这种合并并压缩文件的过程叫做代码优化( optimization)。这种方法除了用于优化(optimization)JavaScript文件，同样适用于CSS文件的优化
RequireJS有两个主要方法(method): define()和require()。这两个方法基本上拥有相同的定义(declaration) 并且它们都知道如何加载的依赖关系，然后执行一个回调函数(callback function)。与require()不同的是， define()用来存储代码作为一个已命名的模块。 因此define()的回调函数需要有一个返回值作为这个模块定义。这些类似被定义的模块叫作AMD (Asynchronous Module Definition，异步模块定义)
使用 RequireJS Optimizer(RequireJS优化器) 来压缩优化项目
RequireJS Optimizer 依赖于 node.js 可以在 https://nodejs.org/ 下载
1> 去 http://requirejs.org/docs/optimization.html#download 下载 r.js
2> 进入到工程 目录，并执行压缩指令
$ cd /Users/mew/Desktop/AllMyFile/CompanyReposity/Study/Webstorm/Test1/js
## 进入到项目根目录
$ node /Users/mew/Desktop/r.js -o build.js
## 编译项目
build.js 文件中的内容
({
appDir
:
"./"
,
// 应用程序的目录（即），在这个文件夹下的所有文件将会被复制到dir参数标注的文件夹下
baseUrl
:
"./"
,
// 存放模块的根目录，相对于appDir，代表查找文件的锚点(that represents the anchor path for finding files)
dir
:
"./dist"
,
// 输出目录，所有的应用程序文件将会被复制到该文件夹下
modules
: [
// 一个包含多个对象的数组，每个对象代表一个将被优化的模块(module)
{
name
:
"main"
// 模块的入口文件
}
],
// fileExclusionRegExp: /^(r|build)\.js$/, // 任何与此规则匹配的文件或文件夹都将不会被复制到输出目录。由于我们把r.js和build.js放置在应用程序目录下。若希望优化器（optimizer）排除这两个文件，因此可以这样设置/^(r|build)\.js$/
optimizeCss
:
"standard"
,
// RequireJS Optimizer会自动优化应用程序下的CSS文件。这个参数控制CSS最优化设置。允许的值： “none”, “standard”, “standard.keepLines”, “standard.keepComments”, “standard.keepComments.keepLines”
// removeCombined: true, // 如果为true，优化器(optimizer)将从输出目录中删除已合并的文件
paths
: {
// 模块(modules)的相对目录，和
require.config 中的 paths 蕾丝
"angular"
:
"../lib/angular/angular"
,
// 左边的是 module名称，右边的是路径
"angular-animate"
:
"../lib/angular/angular-animate"
,
"angular-touch"
:
"../lib/angular/angular-touch"
,
"angular-cookies"
:
"../lib/angular/angular-cookies"
,
"ui-router"
:
"../lib/angular-ui/angular-ui-router"
,
"ui-bootstrap"
:
"../lib/angular-ui/ui-bootstrap-tpls-2.5.0"
,
"ng-file-upload"
:
"../lib/ng-upload/ng-file-upload.min"
,
"hammer"
:
"../lib/hammer/hammer.min"
,
"ctrls"
:
"../js/ctrls"
,
"services"
:
"../js/services"
,
"directives"
:
"../js/directives"
,
"filters"
:
"../js/filters"
},
shim
: {
// 为那些没有使用define()声名依赖关系及设置模块值的模块，配置依赖关系与“浏览器全局”出口的脚本
，和
require.config 中的 shim 类似
"angular"
: {
exports
:
"angular"
},
"angular-animate"
: {
// 原模块名称
deps
: [
"angular"
],
// 当前模块的依赖性
exports
:
"angular-animate"
// 模块外部调用时的名称
},
"angular-touch"
: {
deps
: [
"angular"
],
exports
:
"angular-touch"
},
"angular-cookies"
: {
deps
: [
"angular"
],
exports
:
"angular-cookies"
},
"ui-router"
: {
deps
: [
"angular"
],
exports
:
"angular-ui"
},
"ui-bootstrap"
: {
deps
: [
"angular"
,
"angular-animate"
],
export
:
"ui-bootstrap"
},
"ng-file-upload"
: {
deps
: [
"angular"
]
}
}
})
目录结构截图