模块化介绍

Posted 2020-08-17

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了模块化介绍相关的知识，希望对你有一定的参考价值。

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();
        })