RequireJs整理入门

首先，Requirejs是一个库，利用它咱们能作什么，解决什么问题呢？(根据阮一峰老师的文章，本身总结写了一遍加深影响。)

原文连接：http://www.ruanyifeng.com/blog/2012/11/require_js.html

原先写Js文件都是集中在一个main.js的文件中，当代码量逐渐增大，以及拆分加载的时候就出现里不足。

1. 加载时须要中止网页的渲染，文件越多，浏览器失去响应的时间也越长，一直转圈圈。
2. 若是js之间存在依赖关系，须要严格指明加载顺序的，那么当依赖关系复杂时，代码的编写和维护都会变得很困难。

使用方法快速入门：

• HTML文件中引入

1  <script src="js/require.js" data-main="js/main"></script>  //data-main表示须要载入的入口Js文件，会被第一个加载

• require()函数

主模块依赖于其余模块，使用AMD规范定义的require函数。

1 // main.js
2 require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
3 // some code here
4 });

 

require()函数接受两个参数，第一个参数是一个数组，表示要依赖的模块，第二个参数是一个回调函数。当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就能够使用这些模块。

• require.config()方法

使用require.config()方法，咱们能够对模块的加载行为进行自定义。require.config()就写在主模块（main.js）的头部。参数就是一个对象，这个对象的paths属性指定各个模块的加载路径。

1 require.config({
2 　　　　paths: {
3 　　　　　　"jquery": "jquery.min",
4 　　　　　　"underscore": "underscore.min",
5 　　　　　　"backbone": "backbone.min"
6 　　　　}
7 　　});

1 //直接修改路径
2 require.config({
3 　　　　paths: {
4 　　　　　　"jquery": "lib/jquery.min",
5 　　　　　　"underscore": "lib/underscore.min",
6 　　　　　　"backbone": "lib/backbone.min"
7 　　　　}
8 　　});
9 //修改基目录

1 require.config({
2 　　　　baseUrl: "js/lib",
3 　　　　paths: {
4 　　　　　　"jquery": "jquery.min",
5 　　　　　　"underscore": "underscore.min",
6 　　　　　　"backbone": "backbone.min"
7 　　　　}
8 　　});

• 模块（AMD模块的编写）

require.js加载的模块，采用AMD规范。也就是说，模块必须按照AMD的规定来写。

// math.js
　　define(function (){
　　　　var add = function (x,y){
　　　　　　return x+y;
　　　　};
　　　　return {
　　　　　　add: add
　　　　};
　　});

加载该模块

1 // main.js
2 　　require(['math'], function (math){
3 　　　　alert(math.add(1,1));
4 　　});