JavaScript中的模块化

青旅半醒 2022-05-25 20:12 180阅读 0赞

## 一、什么是模块（module）？ ##

前端领域的模块一般指JavaScript模块，**往往表现为一个单独的js文件**，对外暴露一些属性和方法。

注意区分：“模块”和“组件”  
组件往往是业务层面的，可以看成一个可独立使用的功能实现，**往往表现为一个UI部件（并不绝对）**，如下拉菜单等。一个组件包含其所需要的所有资源，包括逻辑（JavaScript）、样式（CSS）、模板（HTML/Template），甚至字体和图片。

## 二、为什么要使用模块？ ##

有了模块，我们就可以方便的使用别人的代码，想要使用什么功能，就加载什么模块。

## 三、前端开发中的模块化方案？ ##

ES6之前：社区通过各种约定和妥协实现了模块化的特征。主要方案有**AMD**（用于浏览器）和**CommonJS**（用于服务器）

ES6出现之后，**ES6模块**完全可以取代AMD和CommonJS，成为浏览器和服务器通用的模块解决方案。**ES6模块的设计思想是尽量静态化，在编译时就确定模块的依赖关系，以及输入输出的变量。AMD和CommonJS在运行时才能确定这些东西。**  
1、CommonJS  
**实质：CommonJS模块是对象，输入时必须查找对象属性**  
Node采用CommonJS模块格式，浏览器不支持CommonJS格式，要想使浏览器支持CommonJS格式，可以使用[Browserify][]（一个CommonJS转化工具，让CommonJS格式的模块可以运行在浏览器端）

CommonJS模块的输出：

//a.js：
    module.exports={
            foo:'Hello',
            bar:'world'
    }

node会将module.exports视作默认输出，等价于

export default{ foo:"Hello", bar:"world" }

加载CommonJS模块：  
（1）require

let {foo,bar}=require("a.js");

等价于：

let _fs=require("a.js");
    let foo=_fs.foo;
    let bar=_fs.bar;

过程：整体加载a.js模块（加载模块内的所有变量、方法等），生成一个对象，再从对象上读取想要加载的变量和方法。  
这种加载成为**“运行时加载”**，因为只有在运行时才能得到这个对象，导致完全没办法在编译时进行“静态优化”

（2）import

import baz from "a.js"
    //baz={foo:"Hello",bar:"world"}

相当于

import {
       default as baz } from "a.js"

另一种写法：

import * as baz from "a.js"
    //baz.default={foo:"Hello",bar:"world"}

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

require([module],callback)

实现AMD规范的库：[require.js][]、[curl.js][]  
require.js的用法请参考：[require.js的用法][require.js 1]，之前在项目中也尝试过require.js的运用，请参考：[require.js在项目中的运用][require.js 2]  
3、ES6模块  
ES6模块实现较为简单，**使用编译时加载，使静态分析成为可能。**  
ES6模块自动采用严格模式，严格模式下的限制请参考：[JavaScript严格模式详解][JavaScript]，尤其要注意，**在ES6模块中，顶层this指向undefined，因此不应该在ES模块中使用this。**  
参考：[阮一峰 Module的语法][Module]、[Module的加载实现][Module 1]

[Browserify]: http://browserify.org/
[require.js]: http://requirejs.org/
[curl.js]: https://github.com/cujojs/curl
[require.js 1]: http://www.ruanyifeng.com/blog/2012/11/require_js.html
[require.js 2]: https://blog.csdn.net/liwenfei123/article/details/79478043
[JavaScript]: https://blog.csdn.net/liwenfei123/article/details/79964424
[Module]: http://es6.ruanyifeng.com/#docs/module
[Module 1]: http://es6.ruanyifeng.com/#docs/module-loader