阅读 2339

前端模块化规范详细总结

模块化就是将一个复杂的应用程序,按照规范拆分成几个相互独立的文件,这些文件里面完成共同的或者类似的逻辑,通过对外暴露一些数据或者调用方法,与外部整合

这样每个文件彼此独立,我们开发者更容易开发和维护代码,特别是当开发的项目越来越大,代码复杂性也不断增加,这对于模块化的需求也会越来越大

模块化主要特点是:可复用性可组合性独立性中心化

所以使用模块化可以帮我们解决什么问题呢?

  • 解决了命名冲突:因为每个模块是独立的,所以变量或函数名重名不会发生冲突
  • 提高可维护性:因为每个文件的职责单一,有利于代码维护
  • 性能优化:异步加载模块对页面性能会非常好
  • 模块的版本管理:通过别名等配置,配合构建工具,可以实现模块的版本管理
  • 跨环境共享模块:通过 Sea.js 的 NodeJS 版本,可以实现模块的跨服务器和浏览器共享

目前前端主流的模块化标准有:

  • CommonJS
  • AMD
  • CMD
  • UMD
  • ES6

下面一一展开详细总结

CommonJS

Node 用的就是 CommonJS 模块化规范

规范是这样的,每一个文件都是一个模块,有单独的作用域、变量和方法等,并且对其他文件是不可见的,这也是独立性的体现

在每个模块内部有一个 module 对象,代表当前模块,通过它来导出当前模块里的 API,module 有几个属性:

  • exports : 是对外的接口,加载某个模块,就是加载该模块的 module.exports 属性
  • loaded: 返回一个布尔值,表示该模块是否已完成加载
  • parent: 返回一个对象,表示调用该模块的模块
  • children:返回一个数组,表示该模块被用到了其他模块的集合
  • filename:模块的文件名,带有绝对路径
  • id:模块的标识符,一般是带有绝对路径的模块文件名

CommonJS 规范的特点:

  • 每个文件都是独立的模块,有独立的作用域,不会污染全局空间
  • 文件可以被重复引用、加载。第一次加载时会被缓存,之后再引用就直接读取缓存
  • 加载某个模块时,module.exports 输出的是值的拷贝,一旦这个值被输出,模块内再发生变化不会影响已经输出的值

用法是这样的:

导出

module.exports.foo = function(){ ... } // 只能输出一个
或 可以输出多个
exports.a = 1
exports.foo = function(){ ... }
复制代码

exports 可以理解为是 module.exports 的引用,所以上面两种方式结果是一样的。阮一峰老师说过,如果两个不好区分,那就放弃exports,只用 module.exports 就好

导入

const foo = require("./xxx") // 如果没有写文件名后缀,会自动按照 .js、.json、.node的顺序补齐查找
复制代码

加载过程如下:

  • 先从缓存里找,有就加载
  • 缓存没有就检查是不是全局模块,是就直接加载
  • 不是就检查模块路径有没有该文件,有就解析路径并定位文件,然后执行加载
  • 如果以上都不是,就沿当前路径向上层逐级递归查找,直到根目录 node_modules

AMD

和 CommonJS 一样都是模块化,只不过 CommonJS 规范加载模块是同步加载,只有加载完成,才能执行后面的操作,而 AMD 是异步加载模块,可以指定回调函数

因为 Node.js 运行在服务器上,所有的文件一般都存在本地硬盘里,不需要再去请求异步加载。可如果放在浏览器环境下,就需要去请求从服务器获取模块文件,这时如果再使用同步加载显然就不合适了,所以才有了完全贴合浏览器的 ADM 规范,该规范的实现就是 require.js

它的使用方法就是通过一个全局函数 define,把代码定义为模块,再用 require 方法加载模块

define 接收三个参数

  • 第一个是模块名称,也可以不填,默认就是文件名
  • 第二个参数必须是一个数组,定义了该模块依赖的模块列表
  • 第三个参数是模块初始化要执行的函数或对象。如果是函数,只会被执行一次,如果是对象,那这个对象应该作为模块的输出值

看个栗子

define("myModule", ["require", "exports", "beta"],  function(require, exports, beta){
    exports.foo = function(){
        return beat.foo()
    }
})
复制代码

就是创建了一个名为 myModule 的模块,该模块依赖 require、exports 和 beta 三个模块,并导出 foo 函数

导出

module.exports = { ... }
复制代码

导入

const foo = require("./xxx")
复制代码

CMD

CMD 规范整合了上面说的 CommonJS 规范和 AMD 规范的特点,CMD 规范的实现就是 sea.js

CMD 规范最大的特点就是懒加载,不需要在定义模块的时候声明依赖,可以在模块执行时动态加载依赖,并且同时支持同步和异步加载模块

CMD 和 AMD 的主要区别是

  • AMD 需要异步加载模块,而 CMD 可以同步加载(require),也可以异步加载(require.sync)
  • CMD 遵循依赖就近原则,AMD 遵循依赖前置原则。就是说在 AMD 中我们需要把模块需要的依赖都提前在依赖数组里声明,而在 CMD 里我们只需要在具体代码逻辑内,把需要使用的模块 require 进来就可以了

用法和 require.js 差不多,通过定义一个全局函数 define 来实现,不过只能接受一个参数,可以是函数或者对象。如果是对象,模块导出的就是对象,如果是函数,那这个函数会被传入三个参数

define( function(require, exports, module){
    ...
})
复制代码

三个参数分别是:

  • require:可以引用其他模块,也可以用 require.async 异步调用其他模块
  • expxort:是一个对象,定义模块的时候,需要通过参数 export 添加属性来导出 API
  • module:是一个对象,它有三个上属性
    • uri: 模块完整的 URI 路径
    • dependencies:模块的依赖
    • exports:模块需要被导出的 API

看个栗子

define( function(require, export, module){
    const add = require("math").add
    exports.increment = function(val){
        return add(val, 1)
    }
    module.id = "increment"
})
复制代码

就是定义一个名为 increment 的模块,引用 math 模块里的 add 方法,经过处理后,再导出 increment 函数

UMD

UMD 没有专门的规范,而是集合了上面说的三个规范于一身,它可以让我们在合适的环境选择合适的模块规范

比如在 Node.js 环境中用 CommonJS 模块规范管理,在浏览器端支持 AMD 的话就采用 AMD 模块规范,不支持就导出为全局函数

看实现代码

(function(root, factory){
    if(typeof define === "function" && define.amd){
        define(["xxx"], factory)
    }else if(typeof exports === "object"){
        module.exports = factory( require("xxx") )
    }else{
        root.returnExports = factory( root.xxx )
    }
}(this, ($) => {
    return { ... }
}))
复制代码

判断过程是这样的

  • 先判断支不支持 AMD (define 是否存在),存在就使用 AMD 方式加载模块
  • 再判断支不支持 Node.js 模块格式(export 是否存在),存在就用 Node.js 模块格式
  • 如果前两个都不存在,就将模块公开到全局,window 或 global

ES6 模块化

CommonJS 和 AMD 都是在运行时确定依赖关系,也就是运行时加载,CommonJS 加载的是拷贝,而 ES6 module 是在编译时就确定依赖关系,所有的加载都是引用,这样做的好处是可以执行静态分析和类型检查

ES6 Module 和 CommonJS 的区别

  • ES6 Module 的 import 是静态引入,CommonJS的 require 是动态引入
  • Tree-Shaking 就是通过 ES6 Module 的 import 来进行静态分析,并且只支持 ES6 Module 模块的使用。Tree-Shaking 就是移除掉 JS 上下文中没有引用的代码,比如 import 导入模块没有返回值的情况下,webpack 在打包编译时 Tree-Shaking 会默认忽略掉此文件
  • ES6 Module 是对模块的引用,输出的是值的引用,改变原来模块中的值引用的值也会改变;CommonJS 是对模块的拷贝,修改原来模块的值不会影响引用的值
  • ES6 Module 里的 this 指向 undefined;CommonJS 里的 this 指向模块本身
  • ES6 Module 是在编译时确定依赖关系,生成接口并对外输出;CommonJS 是在运行时加载模块
  • ES6 Module 可以单独加载某个方法;CommonJS 是加载整个模块
  • ES6 Module 不能被重新赋值,会报错;CommonJS 可以重新赋值(改变 this 指向)

静态分析是啥?什么是静态引入?什么是动态引入?

// CommonJS / AMD 中动态引入的写法
const foo = require( `all/${["f","o","o"].join("")}` )
const foo = require( "all/FOO".toLowerCase() )
const foo = require( (()=>"foo")() )
const foo = xx.get( require("foo") )

// ES6 Module 中静态引入的写法
import foo from "xxxx/xxx"
import { foo1, foo2 } from "xxxx/xxx"
复制代码

结论:动态==可以拼接,静态==不准拼接,哈哈哈 ~~~ ,不是 === 哈,简单理解一下,原理就不拓展了

不能拼接,ES6 Module 自然就可以很容易分析出使用了哪些模块,这就是静态分析,可以在不运行代码的情况下,对代码扫描检测分析

ES6 Module 的用法,看下代码

导出

// 方式一 可以输出多个
export const a = 1
export function foo(){}

//方式二 只能输出一个
const a = 1
function foo(){}
export default {
    a, 
    foo 
}

// 注意
export { a as b }  // as 的意思就是重命名
复制代码

还有 export default 会导出默认输出,用 vue 的应该特别熟悉,就是不需要知道模块中输出的名字,在导入的时候再自定义名字

// 导出
export default function(){ ... }

// 引入
import "./xxx"  这样只是加载,没有输出,也就不能调用
// 下面这样就可以使用
import funName1 from "./xxx"
import { funName1 as foo } from "./xxx"
import { funName1, funName2 } from "./xxx"

// 加载整个模块  会忽略 default 输出
import * as myModule from "./xxx"
// 使用
myModule.a
myModule.foo()

// 模块的继承
import * from "./xxx" // 在当前模块里这样引入别的模块,就把 xxx 模块里导出的全部继承过来了
复制代码

在浏览器中使用 ES 模块化

只需要在 script 标签中添加 type="module" 属性就行,目前各大浏览器较新版本都已支持,如果是不支持的浏览器通过添加 nomodule 属性来执行其他方案

<script type="module">
    import module1 from "./xxx"
</script>
<script nomodule>
    alert("您的浏览器暂不支持 ES 模块,请先升级浏览器版本")
</script>
复制代码

在 Node.js 中使用 ES 模块化

Node.js 从 9.0 版本开始支持 ES 模块

可以在执行脚本需要启动时加上 --experimental-modules,需要文件后缀名必须为 .mjs

node --experimental-modules module1.mjs

//使用
import module1 from "./xxx"
复制代码

或者也可以安装 babel-clibabel-preset-env,配置 .babelrc 文件后,执行

./node_modules/.bin/babel-node
复制代码

npx babel-node
复制代码

其他

Webpack 本身维护了一套模块系统,兼容了几乎所有前端历史下的模块规范,上面说的模块化全都有

结语

点赞支持、手留余香、与有荣焉

感谢你能看到这里!

文章分类
前端