js 模块化 commonJs AMD CMD ES Modul

2021-01-22  本文已影响0人  seaflyj

什么是模块化呢?

事实上模块化开发最终的目的是将程序划分成一个个小的结构；
这个结构中编写属于自己的逻辑代码，有自己的作用域，不会影响到其他的结构；
这个结构可以将自己希望暴露的变量、函数、对象等导出给其结构使用；
也可以通过某种方式，导入另外结构中的变量、函数、对象等；

上面说提到的结构，就是模块；按照这种结构划分开发程序的过程，就是模块化开发的过程

无论你多么喜欢JavaScript，以及它现在发展的有多好，我们都需要承认在Brendan Eich用了10天写出JavaScript的时候，
它都有很多的缺陷：
比如var定义的变量作用域问题；
比如JavaScript的面向对象并不能像常规面向对象语言一样使用class；
比如JavaScript没有模块化的问题；

所以 js 并不是一个完美的语言，他需要被优化，需要模块化来帮助开发者解决问题

于是利用函数调用表达式实现简单的模块化，即：

IIFE (Immediately Invoked Function Expression)

// aaa.js
var aaa = (function(){
   var name = "123"
   return {
       name
   }
})

// bbb.js
console.log(aaa.name)  // 123

通过这种方式实现了简单的模块化，但是依然存在着诸多问题，比如模块变量名冲突，比如需要在入口文件将所有的js文件全部引入，不能做到按需引入，所以就需要一个规范，JavaScript社区为了解决上面的问题，涌现出一系列好用的规范，如 commonJs

commonJs

我们需要知道CommonJS是一个规范，最初提出来是在浏览器以外的地方使用，并且当时被命名为ServerJS，后来为了体现它的广泛性，修改为CommonJS，平时我们也会简称为CJS。

所以，Node中对CommonJS进行了支持和实现，让我们在开发node的过程中可以方便的进行模块化开发

require("") 是同步加载，代码执行中需要先加载require中的包，再去执行后面的代码，因为服务端读取的是本地的资源，所以同步加载的影响并不明显，如果在前端使用的话，加载异步模块就会耗费大量加载时间，造成后面代码无法执行，进而系统卡死；所以为了解能在前端也使用这个规范，AMD 应运而生，

AMD

CommonJS是主要为了JS在后端的表现制定的，他是不适合前端的，AMD(异步模块定义)出现了，它就主要为前端JS的表现制定规范

AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

AMD也采用require()语句加载模块，但是不同于CommonJS，这里加载是异步的，不会阻塞后面的代码执行，加载成功之后的回调函数中执行相应的逻辑，这样，浏览器不会发生假死。所以很显然，AMD比较适合浏览器环境。目前，主要有两个Javascript库实现了AMD规范，require.js和curl.js。

define(['aaa','bbb'],function(aaa,bbb){...});

AMD 特点

对于依赖的模块，AMD推崇依赖前置，提前执行。也就是说，在define方法里传入的依赖模块(数组)，会在一开始就下载并执行，也称之为运行时执行；

CMD

CMD规范，全称”Common Module Definition”，称为 通用模块加载规范 。一般也是用在浏览器端。浏览器端异步加载库 Sea.js 实现的就是CMD规范。

AMD/CMD区别，虽然都是并行加载js文件，但还是有所区别，AMD是预加载，在并行加载js文件同时，还会解析执行该模块（因为还需要执行，所以在加载某个模块前，这个模块的依赖模块需要先加载完成）；而CMD是懒加载，虽然会一开始就并行加载js文件，但是不会执行，而是在需要的时候才执行。

CMD 特点

对于依赖的模块，CMD推崇依赖就近，延迟执行。也就是说，只有到require时依赖模块才执行。

ES Module

JavaScript没有模块化一直是它的痛点，所以才会产生我们前面学习的社区规范：CommonJS、AMD、CMD等，所以在ES推出了自己的模块化系统ES Module。

ES Module和CommonJS的模块化有一些不同之处：一方面它使用了import和export关键字；另一方面它采用编译期的静态分析，并且也加入了动态引用的方式；

如果你不熟悉严格模式可以简单看一下MDN上的解析；
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode

/** 定义模块 math.js **/
var basicNum = 0;
var add = function (a, b) {
    return a + b;
};
export { basicNum, add };
        
/** 引用模块 **/
import { basicNum, add } from './math';
function test(ele) {
    ele.textContent = add(99 + basicNum);
}

ES Module 与 CommonJS特点比较

CommonJS模块是运行时加载，ES6 Module是编译时输出接口；

CommonJS加载的是整个模块，将所有的接口全部加载进来，ES6 Module可以单独加载其中的某个接口；

CommonJS输出是值的拷贝，ES6 Module输出的是值的引用，被输出模块的内部的改变会影响引用的改变；

CommonJS this指向当前模块，ES6 Module this指向undefined;

上一篇下一篇

猜你喜欢

热点阅读