js模块化进化史

来源:互联网 发布:淘宝学习zz px 编辑:程序博客网 时间:2024/05/27 00:50

  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模式增强 : 引入依赖
这就是现代模块实现的基石