模块化介绍

1. 为何要学习模块化开发

1.1. 为何要学习模块化

了解模块化思想
    为后面的node学习打基础

1.2. 什么是模块化

• 生活中的模块化
  • 组装电脑
  • google的模块化手机（流产了，moto继承了）
  • 乐高积木
• 软件开发中的模块化
  • 日期模块
  • 数学计 算模块
  • 日志模块
  • 登陆认证模块
  • 报表展现模块
• 模块化的好处
  • 生产效率高
  • 方便维护

2. 模块化的演变过程

2.1. 非模块化带来的问题

命名冲突
    文件依赖

2.2. 全局函数

• 问题：命名可能会冲突（变量污染）
• 代码

2.3. 对象封装

• 解决：解决命名冲突 （相似命名空间的方式）
• 新问题：没有本身的私人空间(不能设置私有成员)
• 代码

2.4. 隔离私有空间

• 解决：不能设置私有成员问题
• 新问题：如何扩展一个功能？
• 代码

2.5. 模块的扩展

• 对扩展开放，对修改封闭
• 解决：扩展一个求平方的功能
• 代码

2.6. 依赖第三方模块

• 封装到js文件中
• 代码

2.7. 使用模块化开发的价值

https://github.com/seajs/seajs/issues/547

3. 模块化开发框架seajs

3.1. 浏览seajs官网（文档）

http://seajs.org

3.2. 使用seajs的步骤

• 导入seajs
• define() 定义一个模块，define的回调的三个参数名字不可更改

define(function (require, exports, module) {});

• exports或者module.exports将模块中的成员暴露出来
• seajs.use 使用一个模块
• config() 配置一些基本信息（别名、路径）

3.3. seajs.use使用模块

//使用单个模块，回调函数中的obj就是模块中的exports对象
    seajs.use("modules/demo1/calc.js", function (obj) {
        console.log(obj.add(5,6));

        console.log(obj.mul(5,6));
    });

//使用多个模块
    seajs.use(["modules/demo1/calc.js","modules/demo1/power.js"] , function (o1,o2)
    {
        //o1 对应calc模块中的exports对象
        console.log(o1.add(1,2));
        //o2 对应power模块中的exports对象
        console.log(o2.power(5));
    });

3.4. 导出模块中的成员

• 使用exports导出成员

define(function (require, exports, module) {
        exports.add = function (a, b) {
            return a + b;
        }
        exports.sub = function (a, b) {
            return a - b;
        }
    });

• 使用module.exports导出

//使用module.exports导出成员和exports用法同样
    define(function (require, exports, module) {
        module.exports.add = function (a, b) {
            return a + b;
        }
        module.exports.sub = function (a, b) {
            return a - b;
        }
    });

//使用module.exports导出对象，exports不能够
    define(function (require, exports, module) {
        //能够使用module.exports导出对象
        module.exports = {
            add: function (a, b) {
                console.log("module");
                return a + b;
            },
            sub: function (a, b) {
                return a - b;
            }
        };
    });

• exports和module.exports的关系
  • exports = module.exports = {};
  • 画图解释
  • 不能为exports直接赋值，可是能够动态添加成员

3.5. 模块之间的依赖

• require() 引用另外一个模块

define(function (require, exports, module) {
        //依赖另外一个模块，js后缀能够省略
        var o = require("./power");

        module.exports = {
            add: function (a, b) {
                console.log("module");
                return a + b;
            },
            sub: function (a, b) {
                return a - b;
            },
            three: function (a) {
                return o.power(a) * parseInt(a) ;
            }
        };
    });

3.6. config

• config的做用就是为了简化调用模块
  • base 设置路径
  • alias 设置模块的别名，简化调用

seajs.config({
        //设置路径
        base: "modules/demo4",
        //设置别名
        alias: {
            c: "calc",
            p: "power"
        }
    });

3.7. seajs原理

function loadJS(path, callback) {
            var head = document.getElementsByTagName("head")[0];
            var node = document.createElement("script");
            node.src = path;
            head.appendChild(node);
            //浏览器兼容处理
            var supportOnload = "onload" in node;
            if(supportOnload) {
                node.onload = function () {
                    callback();
                }
            }else{
                node.onreadystatechange = function () {
                    if(node.readyState == "loaded" || node.readyState == "complete") {
                        callback();
                    }
                }
            }
        }

        //调用
        loadJS("js/test.js", function () {
            test();
        })

4. 模块化框架requireJS

5. 模块化规范

5.1. CMD规范

• seajs遵照CMD规范
• CMD规范的地址 https://github.com/seajs/seajs
• CMD规范的特色 全部的require()都是懒加载模式，用到的时候才去加载，提高初始化时加载的性能

5.2. AMD规范

• requirejs遵照AMD规范 requirejs官网 http://www.requirejs.org/
• AMD规范的地址
• AMD规范的特色 全部的require()都是一个预加载模式

5.3. CMD规范和AMD规范区别

CMD是懒加载
AMD是预加载

6. 路径问题

• seajs中使用相对路径
  • demo 和 ./demo在seajs中稍有不一样
  • demo 通常表示相对于当前引入的sea.js文件的位置
  • ./demo 通常表示相对当前编写的文件的位置