模块化演变历程

程序模块化开发的优点
+ 开发效率高
* 代码方便重用，别人开发的模块直接拿过来就可以使用，不需要重复开发类似的功能
+ 可维护性高
* 软件的声明周期中最长的阶段其实并不是开发阶段，而是维护阶段，
需求变更比较频繁，使用模块化的开发方式更容易维护

（一：演变历程）
1,全局函数
人为模块

 function sum(a,b){
            return parseInt(a) + parseInt(b);
        }

2，对象封装-命名空间法

 var obj = {};
        // obj.cal = {};
        // obj.cal.sum = function(){};
        // obj.cal.sum();
        obj.sum = function(a,b){
            return parseInt(a) + parseInt(b);
        }

3，公有私有成员分离

// 这里就形成了一个隔离环境
            // 隔离公有私有成员之后，降低了对全局作用域的污染，进一步降低了命名冲突的概率
var module = (function(){
             var obj = {};
            obj.sum = function(a,b){
                return parseInt(a) + parseInt(b);
            }
            return obj;
       })();

4，增强可维护可扩展性

  // 通过参数的形式划分了子模块，进一步增强了模块的可维护和可扩展性
   // 开闭原则：对修改封闭，对添加开放
var module = (function(m){
            m.sum = function(a,b){
                return parseInt(a) + parseInt(b);
            }
            return m;
       })(module || {});

5，添加第三方依赖

var module = (function(m,$){
            m.sum = function(a,b){
                return parseInt(a) + parseInt(b);
            }
             m.mod = function(a,b){
                $("#container").css('backgroundColor','lightblue');
                showInfo();
                return parseInt(a) % parseInt(b);
            }
            return m;
       })(module || {},jQuery);

（二：规范化标准）

CMD – seaJS 中国用的比较多，由阿里的玉伯

AMD – requireJS

commonJS

使用seajs的步骤：

• 引入seajs
• 如何定义模块
  
  • define // 参数的名字不允许修改，参数可以是多个
  • define(function(require, exports, module){});

• 如何公开模块成员

  • exports

  • seajs.use两个参数
    - 模块的路径
    - seajs.use两个参数

        - 模块的路径
        - 回调函数 -- 回调函数的参数指成的是exports
    

• 如何依赖模块
  
  • require()

Seajs模块定义参数分析

• exports 与 module.exports
  
  • 它们两个实际上是一个对象
  • exports 对外提供接口
  • module.exports 对外提供了整个接口
• require
  
  • 加载外部的模块
  • require 是一个方法，接受模块标识作为唯一参数，用来获取其他模块提供的接口
• exports
  
  • exports 是一个对象，用来向外提供模块接口。
• module
  
  • module 是一个对象，上面存储了与当前模块相关联的一些属性和方法。
• module有几种属性和方法
  
  • module.id(模块id，就是全路径了，一般情况下（没有在 define 中手写 id 参数时），module.id 的值就是 module.uri，两者完全相同。)
  • module.exports(对外接口，{}格式，exports 仅仅是 module.exports 的一个引用。)
  • module.dependencies(数组，当前模块依赖的模块)

exports 与 module.exports 的区别
其实，Module.exports才是真正的接口，exports只不过是它的一个辅助工具。
最终返回给调用的是Module.exports而不是exports。
所有的exports收集到的属性和方法，都赋值给了Module.exports。
当然，这有个前提，就是Module.exports本身不具备任何属性和方法。
如果，Module.exports已经具备一些属性和方法，那么exports收集来的信息将被忽略

• 如果导出的是单个成员，那么一般使用exports.成员名称 这种形式导出
• 如果导出的是一个对象，那么一般使用module.exports这种形式导出

Seajs异步加载模块
require.async(“模块地址”,function(){})

Seajs依赖jQuery

• 如何设置jQuery依赖

jQ结尾处：

if ( typeof noGlobal === strundefined ) {
        window.jQuery = window.$ = jQuery;
        if ( typeof define === "function" ) {
            define(function(){return jQuery});
        }
    }

• seaJS如何配置参数

seajs.config({
        alias : {
            jquery : "jquery-1.11.1.js"
        }
    })

Seajs模块加载原理分析
/@cc_on ….. @/之间的部分可以被ie识别并作为程序执行，同时启用ie的条件编译

CMD、AMD、ConmonJS的区别

- AMD
    + 预加载，预执行
    + 预加载就是把所有的 js 文件模块都下载下来
    + 预执行就是把每个加载成功一个执行一个


- CMD
    + 预加载，懒执行
    + 预加载就是把所有的 js 文件模块都下载下来
    + 懒执行就是等所有的js文件都加载完毕之后了才去执行


- ConmonJS
    + 执行到了哪里，就加载到哪里，然后执行哪里，
    + 同步加载，同步执行