JS模块化规范及进化史

模块化规范及进化史

按照功能和需求分成各个模块，最后再把所有模块合并在一起。当然现在基于webpack vue/react，模块化开发很重要。某个功能板块单独写成一个模块，然后把模块合在一起，最后把整个页面的功能实现。方便团队管理

小插曲：reduce

第2项传不传，决定了x的初始值和迭代从哪一项开始

Array.prototype.myReduce=function(callback,initial){
    let sum=typeof initial==='undefined'?this[0]:initial
    let start=typeof initial==='undefined'?1:0,len=this.length;
    for(;start
        sum=callback(sum,this[start],start)
    }
    return sum;
}
t1=[1,2,3,4].myReduce((prev,item)=>{
    prev+=item;
    return prev;
},0)
console.log(t1)
t1=[5,2,3,4].myReduce((prev,item)=>{
    prev+=item;
    return prev;
})
console.log(t1)

引出来了一个话题：

在我们用script导入js的时候

1. 我们要尤其关注它们相互之间的依赖关系，而且需要手动分析，没有什么模块规范
2. 如果不基于闭包，全局变量污染和冲突
3. 模块间的相互引用

AMD按需引入

requireJS

1. 定义一个模块用define。需要依赖的模块前置导入
2. 导入模块：require(['A', 'B'])

require内部会去梳理模块与模块之间的依赖关系，不需要我自己去分析依赖

CommonJS

node中规范

真正的按需导入：随用随导

有空看下三、了解前端模块化系列 - 知乎

ES6Module

具体语法：

export 声明变量并赋值;

export default 值;

本质上都是导出一个Module对象

JavaScript 模块导入导出（export与import）用法_js export class_离奇6厘米的博客-CSDN博客

总结：

创建一个js就是创建一个模块，每个模块都是私有的，不需要拿闭包包起来

供外部使用，支持导出/导入方式。

js可运行环境