模块化开发

模块化概念

最开始 js 是没有模块化的概念的，就是普通的脚本语言放到 script 标签里，做些简单的校验，代码量比较少。随着 ajax 的出现，前端可以请求数据了，做的事情更多了，逻辑越来越复杂，就会出现很多问题。

• 全局变量冲突，因为大家的代码都在一个作用域，不同人定义的变量名可能重复，导致覆盖。
• 需要清楚相互的依赖关系，难以维护

模块化就是把复杂的问题分解成相对独立的模块，这样的设计可以降低程序复杂性，提高代码的重用，也有利于团队协作开发与后期的维护和扩展
其核心有三：

• 独立的作用域与依赖关系处理
• 如何导出模块内部数据
• 如果导入外部模块数据

JS模块化发展史

commonJS规范

模块内容及其导出：

commonjs.js

//模块内容
function sum(a,b){
    return a+b;
}
function sub(a,b){
    return a-b;
}
//模块导出
module.exports ={
    sum,
    sub
}

模块内容及其导入：

//模块引入（整个模块）
const math=require('./commonjs');
//模块内方法使用
const rs1=math.sub(2,1);

问题：
commonJS不适合浏览器端，它加载模块是同步的,会造成堵塞浏览器。

AMD规范

模块定义

独立模块（不需要依赖任何其他模块）

define({
        method1: function(){},
        method2: function(){},
    })
    
define(function(){
        returen {
            method1: function(){},
            method2: function(){},
        }
    })

非独立模块（需要依赖其他模块）

js复制代码    // 不带 .js 后缀
    define(['module1', 'module2'], function(m1, m2){
        returen {
            m1.methodA: function(){},
            m2.methodA: function(){},
        }
    })

模块调用

require(["a", "b"], function(a, b){
     a.methodA()
})

ES6模块化

导出模块内部数据

// 导出单个特性
    export let name1, name2, …, nameN;
    export let name1 = …, name2 = …, …, nameN;
    export function FunctionName(){...}
    export class ClassName {...}

    // 导出列表
    export { name1, name2, …, nameN };

    // 重命名导出
    export { variable1 as name1, variable2 as name2, …, nameN };

    // 默认导出
    export default expression;
    export default function (…) { … }
    export default function name1(…) { … }
    export { name1 as default, … };
    
    var a = 1;
    export default a;
    // export default a 的含义是将变量 a 的值赋给变量 default 。
    // 注意：正是因为export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句。
    // export default var a = 1; 错误的

导入模块内部数据

import defaultExport from "module-name";
import * as name from "module-name";//将整个模块引用为名为name的对象
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";