对前端模块化的认识

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。

CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

AMD是提前执行，CMD是延迟执行。

AMD 推荐的风格通过返回一个对象做为模块对象，CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的。

CMD模块方式 :

define(function(require, exports, module) {

      // 模块代码

    });

---

requirejs 快速学习

RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。

requirejs 的原理实现

1. 我们在使用requireJS时，都会把所有的js交给requireJS来管理，也就是我们的页面上只引入一个require.js，把data-main指向我们的main.js。
2. 通过我们在main.js里面定义的require方法或者define方法，requireJS会把这些依赖和回调方法都用一个数据结构保存起来。
3. 当页面加载时，requireJS会根据这些依赖预先把需要的js通过document.createElement的方法引入到dom中，这样，被引入dom中的script便会运行。
4. 由于我们依赖的js也是要按照requireJS的规范来写的，所以他们也会有define或者require方法，同样类似第二步这样循环向上查找依赖，同样会把他们村起来。
5. 当我们的js里需要用到依赖所返回的结果时(通常是一个key value类型的object),requireJS便会把之前那个保存回调方法的数据结构里面的方法拿出来并且运行，然后把结果给需要依赖的方法。

requirejs 的运用

正常的写法：

    
        
    
    
      body
    


//a.js
function fun1(){
  alert("it works");
}
fun1();

会出现的问题：alert执行的时候，html内容是一片空白的，就是JS阻塞浏览器渲染导致的结果。

requirejs的写法：

    
        
        
    
    
      body
    


// a.js
define(function(){
    function fun1(){
      alert("it works");
    }
    fun1();
})

requirejs的优点：

• 防止js加载阻塞页面渲染
• 使用程序调用的方式加载js，防出现如下丑陋的场景