js模块化之require.js

简单理解模块化

大多数前端开发者都用过jquery，那么用jquery之前我们首先要把jquery加载进页面，然后在之后的js之中才可以使用$,这里面我们知道了两个道理，一个是我们不能把所有js代码都放到一个文件里，有些东西可以单独提出来成为一个模块，比如jquery。另外一个道理，一部分js是依赖另一部分js的，比如$依赖jquery文件的载入。其实require.js主要做的事情就是这两点。

当你的js项目足够大，足够复杂，依赖的库足够多，你完全需要这样一种工具去做这些js的管理，否则你的项目扩展性很差，结构很糟糕，要找到想修改的地方会很困难。

模块化诞生-require.js

它就是这样带着使命诞生了。可以帮我们解决这些问题：

1、require.js是属于异步加载，A、B、C的js文件加载的时候谁也不影响谁，也不会影响网页其他文件，只要A、B、C文件都加载好了，才会回调function

require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
　　　　// some code here
});

2、看上面结构便知道了，模块对A、B、C三个文件有依赖关系，就调用这三个文件即可，如果这个模块依赖10份js文件，就调用10个js即可，这样就很好的管理了每个模块的依赖，就不会很混乱了。

如何使用require.js

1) 加载模块化。在html中导入require.js，data-main属性的作用是，指定网页程序的主模块main.js。

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

2) data-main和baseUrl的关系：
data-main没有指定baseUrl也没有写，那么baseUrl默认是页面所在目录。
data-main指定了而baseUrl没有指定，那么baseUrl默认是data-main所指定的模块所在目录。
data-main指定了baseUrl也指定了，那么baseUrl必须从页面所在目录开始写起。

3) 手动定义require.config，一般在main的最顶上定义。

requirejs.config({ baseUrl: 'js/lib',
    paths: { jquery:'jquery-2.2.3.min', backbone:'backbone', underscore:'underscore' }, shim:{ 'backbone': { deps: ['underscore', 'jquery'], exports: 'Backbone' }, 'underscore': { exports: '_' }
    }
});

通过如上定义，就可以在require模块中使用jq和backbone了。paths相对于baseUrl指定的路径的js文件。shim是加载一些没按照require.js要求来的常用js类库，放到shim中指定一下，就可以使用了。shim下的exports是指调用该类库，所指定的变量名。deps是指它所需要的依赖。

上面这种是关于可以返回变量名，带exports的shim指定，还有一些插件库是不需要返回变量名的，可以这么写：

requirejs.config({
  shim: {
  'jquery.ui.core': ['jquery'],
  'jquery.ui.widget': ['jquery'],
  'jquery.ui.mouse': ['jquery'],
  'jquery.ui.slider':['jquery']
    },
  paths : {
    jquery : 'jquery-2.1.1/jquery',
    domReady : 'require-2.1.11/domReady',
    'jquery.ui.core' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.core',
    'jquery.ui.widget' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.widget',
    'jquery.ui.mouse' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.mouse',
    'jquery.ui.slider' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.slider'
  }
});


require([ 'jquery', 'domReady','jquery.ui.core','jquery.ui.widget','jquery.ui.mouse','jquery.ui.slider'],
    function($) {
      $("#slider" ).slider({
           value:0,
           min: 0,
           max: 4,
           step: 1,
           slide: function( event, ui ) {}     
      });       

    });

3) 模块定义。 config配置好了以后，就要开始在main中写标准的模块定义了。require标准模块定义用define。

main.js
define(["./b"], function(b) {
       //主程序中调用b模块
       console.log(b.good)
    }
);

//a.js a中没有依赖
define(function() {
       var obj = {
           ok : function(){
               return 111;
           }
        };
        return obj;
    }
);

//b.js b中依赖a
define(["./a"], function(a) {
        var bb = {
            good : a.ok;
        }
        return bb;
    }
);

总结一下：
1) 导入require.js
2) 配置config
3) 给各个需要加载的模块定义define
4) 那么，就可以实现各个模块互相调用，也可以实现加载一些常用类库了。