js模块化进程

发布于 2021-1-26 14:18
浏览
0收藏

js的模块化进程


现在前端技术日新月异,对于同一个问题痛点,各个时段有各自的解决方案,这就带来了很大差异。今天我就打算梳理js模块化的历史进程,讲一讲这些方案要做什么,怎么做。

 

js模块化进程的起因


现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。当一个项目开发的越来越复杂的时候,你会遇到一些问题:命名冲突(变量和函数命名可能相同),文件依赖(引入外部的文件数目、顺序问题)等。

JavaScript发展的越来越快,超过了它产生时候的自我定位。这时候js模块化就出现了。

 

什么是模块化


模块化开发是一种管理方式,是一种生产方式,一种解决问题的方案。他按照功能将一个软件切分成许多部分单独开发,然后再组装起来,每一个部分即为模块。当使用模块化开发的时候可以避免刚刚的问题,并且让开发的效率变高,以及方便后期的维护。

 

js模块化进程


一、早期:script标签
这是最原始的 JavaScript 文件加载方式,如果把每一个文件看做是一个模块,那么他们的接口通常是暴露在全局作用域下,也就是定义在 window 对象中。

缺点:


1.污染全局作用域
2.只能按script标签书写顺序加载
3.文件依赖关系靠开发者主观解决

 

二、发展一:CommonJS规范


允许模块通过require方法来同步加载(同步意味阻塞)所要依赖的其他模块,然后通过module.exports来导出需要暴露的接口。

// module add.js
module.exports = function add (a, b) { return a + b; }

// main.js
var {add} = require('./math');
console.log('1 + 2 = ' + add(1,2);

 

CommonJS 是以在浏览器环境之外构建JavaScript 生态系统为目标而产生的项目,比如在服务器和桌面环境中。

 

三、发展二:AMD/CMD


(1)AMD


AMD 是 RequireJS 在推广过程中对模块定义的规范化产出(异步模块定义)。

AMD标准中定义了以下两个API:

  • require([module], callback);
  • define(id, [depends], callback);
    require接口用来加载一系列模块,define接口用来定义并暴露一个模块。
    	define(['./a', './b'], function(a, b) {  
    		// 依赖必须一开始就写好   
    		a.add1()    
    		...  
    		b.add2()    
    		...
    	}) 
    ​

优点:
1、适合在浏览器环境中异步加载模块 2、可以并行加载多个模块

 

(2)CMD
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。(在CommomJS和AMD基础上提出)

define(function (requie, exports, module) { 
    //依赖可以就近书写 
    var a = require('./a'); 
    a.add1(); 
    ... 
    if (status) { 
        var b = requie('./b'); 
        b.add2(); 
    } 
}); 

优点:
1、依赖就近,延迟执行 2、可以很容易在服务器中运行

 

(3)AMD 和 CMD 的区别

AMD和CMD起来很相似,但是还是有一些细微的差别:

 

1、对于依赖的模块,AMD是提前执行,CMD是延迟执行。

2、AMD推崇依赖前置;CMD推崇依赖就近,只有在用到某个模块的时候再去require。

3、AMD 的 API 默认是一个当多个用,CMD 的 API 严格区分,推崇职责单一

 

四、发展三:ES6模块化


EcmaScript6 标准增加了JavaScript语言层面的模块体系定义(关键字)。

在 ES6 中,我们使用export关键字来导出模块,使用import关键字引用模块。

// module math.jsx
export default class Math extends React.Component{}

// main.js
import Math from "./Math";

 

ES6 模块与 CommonJS 模块的差异

 

  1. CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。
  2. CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。


即 CommonJS 先加载整个模块,输出一个对象,取对象内相应的值,输出后内部不会再变化;ES6 是静态编译命令,先加载一个引用,等执行时再根据引用到加载模块内取值输出,动态引用不缓存。

 

目前很少JS引擎能直接支持 ES6 标准,因此 Babel 的做法实际上是将不被支持的 import 翻译成目前已被支持的 require。

已于2021-1-26 14:18:28修改
收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐