JavaScript模块化简单记录

JavaScript

记录一下JavaScript的各种模块化

0.不使用模块化时期

1. 大量充斥着全局变量，易出现命名冲突
2. 因为是全局变量，全局均可访问，易污染

1. 利用闭包（揭示式模块化）

简单来说就是下面这样：

var moduleName = (function (anotherName){
    var innerValue = 10;
    function innerMethod(num){
        return innerValue * num;
    }
    return{
        value: innerValue,//指向innerValue这个值
        myMethod: innerMethod//指向innerMethod这个函数的指针
    }
})(injectValue);

moduleName就是暴露在全局的模块名，模块通过把内部变量与函数的指针写进对象字面量，return到全局变量moduleName
优点：接口清晰，简单易写
缺点：

• 难管理模块间的依赖。
• 若直接注入，只能一对一，而且需要注意注入顺序。
  
  • 改进：可通过pub/sub模式达到模块间的交互。
• 实际上还是没有解决命名空间冲突的问题

2.1 CommonJS ---诞生于浏览器之外的解决方案

CommonJS规范采用同步加载模块的策略

Node.js就是采用CommonJS规范来实现模块依赖的。

该规范规定每个JavaScript文件就是一个独立的模块上下文，在这个文件中默认创建的属性都是私有的
向外暴露借口时，通过module.exports对象来暴露（此处module对象时CommonJS规范规定的类似global的对象）
优点：

• 避免了全局命名空间的污染，require时可以赋值给自己随意命名的局部变量中。
• 模块间依赖更清晰。

缺点：

• 在浏览器中同步加载多个模块网络读写时间长（服务端因为是从硬盘或者内存加载所以没这个问题）
  
  • 改进：用webpack等工具可打包成一个单独的js文件
• require时是引入整个js文件，当只需要该模块某个方法时会引入大量无用代码（尤见于各种大型库中）

2.2 AMD ---浏览器端的模块化异步解决方案

直接来看AMD模块的使用方式吧：

define(['myModule', 'myOtherModule'], function(myModule, myOtherModule) {
  console.log(myModule.hello());
});

典型的通过回调实现异步加载的方式。

通过define函数，传入两个参数。第一个参数是要所需依赖组成的数组，第二个参数是回调函数，以前面那个数组的元素作参数。

同时，define 既是一种引用模块的方式，也是定义模块的方式。

2.3 UMD ---通用模块定义

简单来说就是先判断是否支持AMD，再判断是否支持CommonJS，否则为window环境

3 ES6模块

官方原生支持的模块化手段。

浏览器虽然没完全支持，但已可以通过Babel编译实现

ES6原生模块功能语法简约，支持异步加载、支持循环依赖、支持部分方法导出等