js模块化进化史

---

1. 全局function模式

/**
 * 全局函数模式: 将不同的功能封装成不同的全局函数
 * 问题: Global被污染了, 很容易引起命名冲突
 */

let data = "hello world";
function foo() {
    console.log('foo() '+data);
}
function bar() {
    console.log('bar() '+data);
}

2. namespace模式

/**
 * namespace模式: 简单对象封装
 * 作用: 减少了全局变量
 * 问题: 不安全(数据不是私有的, 外部可以直接修改)
 */
let obj ={
   msg : 'hello',
    foo:()=>{
        console.log(msg);
   }
}

3.IIFE模式

/**
 * IIFE模式: 匿名函数自调用(闭包)
 * IIFE : immediately-invoked function expression(立即调用函数表达式)
 * 作用: 数据是私有的, 外部只能通过暴露的方法操作
 * 问题: 如果当前这个模块依赖另一个模块怎么办?
 */
//IIFE模式

(function (window) {
    let msg = 'hello world';
    let foo = function () {
        console.log('IIFE--->'+msg);
    };
    window.foo = foo;
})(window)

IIFE模式增强 : 引入依赖
这就是现代模块实现的基石