require.js的使用

刚刚接手的新项目中应用了require.js，本身就花了点时间了解了一下，这里给你们推荐一个教学视频 《阿当大话西游之Web组件》 ，视频我是看了前边几节介绍又结合了新的项目，所学的知识就已经够用了。

require.js 具体是什么？

RequireJS是一个工具库，主要用于客户端的模块管理。它可让客户端的代码分红一个个模块，实现异步或动态加载，从而提升代码的性能和可维护性。它的模块管理遵照AMD规范，模块与模块之间能够互相依赖，固然可能会有人会想，模块之间的依赖，要是无法正确地去按照特定顺序加载，会出现错误，AMD规范能够处理这种问题，AMD就是这样一种对模块的定义，使模块和它的依赖能够被异步的加载，但又按照正确的顺序。

AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。全部依赖这个模块的语句，都定义在一个回调函数中，等到加载完成以后，这个回调函数才会运行。

如何使用 require.js？

下载require.js，引入网站的首页，

<script data-main="js/framework/main.js" src="./lib/requirejs/require.js"></script>

这里首先会执行src中的require.js 的加载，随后require.js会查找data-main所指的文件路径，找到入口的js文件，注意这里能够去掉.js 的后缀名。

RequireJS有两种最主要的方法，define()是用来定义一个模块的，而require()方法是 用来加载模块的。

---

define 方法

使用define方法，能够将一个js文件写在此方法中，define(function(){ /*代码内容*/ });做为一个独立的模块。以下，新建一个模块名为mod1的js文件（mod1.js）：

define(function(){
    return {
        a:3
    }
})

这是一个很简单的模块，mod1经过 return一个对象，向外暴露一个变量 a=3 ；若是咱们在建立一个mod2的模块（mod2.js），要依赖mod1中的变量啊，则能够这么来：

define(['mod1'],function(m1){
    var a,
        b=2,
        c=3;
        a=c*m1.a;
      return {
        a:a,
        b:b
    }
})

分析上面的代码，咱们将mod1模块引入到mod2模块中，而function的参数 m1 就是mod1模块的返回值，也是mod1模块。m1.a就是mod1的return 对象a的值，为3，这样mod1和mod2的变量虽然存在a变量名同样的问题，可是互不影响，不冲突，这也是模块化的一个好处，不会担忧变量冲突问题。

---

require方法

接下来，咱们即可以经过require方法来使用前面咱们定义好的模块，，见其写在main.js中

require(['mod2'],function(m2){ 
       alert(m2.a)
    });

使用该方法加载mod2个模块，而mod2会去依赖mod1模块，因此也会加载mod1这个模块。
因为模块返回的都是对象，那咱们也能够new一个对象去调用加载模块中的方法和属性，见下：

//模块名为：treeview
  define(function(){ 
    function treeview(){ 
        this.name="treeview";
    };
    return { treeview:treeview };
})

    require(['treeview'],function(b){ 
        var tree = new b.treeview();
        alert(tree.name);
    });

若是模块中须要引入第三方的js文件，例如jquery，则应该：

//treeview.js
  define(['jquery'],function($){ 
    function treeview(){ 
        this.name="treeview";
    };
    return { treeview:treeview };
})


//main.js
//此时若是main.js这个应用层也须要用到jquery，虽然mian.js中依赖模块treeview中已经引入了jquery文件，可是应用层main.js中依然还须要引入一次，
    require(['treeview','jquery'],function(b,$){ 
        $('#div').click(fucntion(){..........})
        var tree = new b.treeview();
        alert(tree.name);
    });

---

模块路径 paths

在main.js,咱们须要去配置一下模块的路径，这里随便配置一下几个模块的路径，以下：

require.config({
　　　paths: {
　　　　　"tabview": "js/tabview",
　　　　　"animate": "js/animate",
　　　　　"treeview": "js/treeview"
　　　}
　});

//另外一种则是直接改变基目录（baseUrl）。后缀.js能够省略
require.config({
　　　　baseUrl: "js/lib",
　　　　paths: {
　　　　　　"jquery": "jquery.min",
　　　　　　"underscore": "underscore.min",
　　　　　　"backbone": "backbone.min"
　　　　}
});