为什么引入模块化？

恼人的命名冲突
烦琐的文件依赖
加载顺序控制

js模块化解决了什么问题？

实现js的异步加载，避免网页失去响应
管理模块间的依赖，便于代码的编写与维护

怎么实现js模板化？（实现方案&how to coding）

demoRequireMoudle目录：
/js/app/demo.js
/lib/require.js
/lib/jquery.min.js
config.js
index.html

1.加载require.js

<!--本地存在require.js-->
<script src="./xxx/require.js"></script>
or
<!--如果本地没有require.js,加载页面的时候会加载这个js(慢)-->
<script src="//cdn.bootcss.com/require.js/2.2.0/require.min.js"></script>

<!-- 创建index.html并添加-->
<script src="//cdn.bootcss.com/require.js/2.2.0/require.min.js"></script>

2.配置config.js

/*模板*/
require.config {
    baseUrl: ' ',
    paths: {
        ' ': ' ',   /*不用加js,因requirejs默认以.js结尾*/
        ' ': ' ',
        ......
    }
}

/*config.js*/
require.config {

    baseUrl: './',
    paths: {
        'jquery': 'lib/jquery.min',
        'demo': 'js/app/demo'
    }
}
require(['demo'])   /*入口文件，数组的形式(['array1','array2','...'])*/

/*之后在index.html中添加*/
<script src="./config.js"></script>

3.编写js模块

/*模板（我也不知道为啥 ^_^）*/
define(function(require) {

    // The module code goes here
    //遵循AMD规范

})

/*还有一种写法,但是不推荐这种写法。*/
define(funciton(require, exports, module) {

    // The module code goes here
    //这是seajs 的一种写法，可以参看seajs文档。
    //不推荐这种写法。遵循CMD规范

})

/*demo.js*/
define(function(require) {
    var $ = require('jquery')
    $(document.body).html(<h1>Because I like, so reluctantly, not so much why.</h1>)
})

结束语：为了督促自己学习，在往后学习中会不断更新，纠正。文中肯定有不足之处，还读者请斧正^_^。

参考文章：