首页  思维导图  详情

前端JS模块化

2021-09-28 15:00:36   26  举报





AI智能生成

前端JS模块化 CommonJS/AMD/CMD/ES6模块

模块化

前端

js基础总结

面试

作者其他创作

大纲/内容

1. 什么是模块/模块化?

将一个复杂的程序依据一定的规则（规范）封装成几个块（文件），并组合在一起

块的内部数据/实现是私有的，只是向外部暴露一些接口（方法）与外部其它模块通信

2. 为什么要模块化?

面临的问题：

网站应用趋于复杂化

代码复杂度越来越高

开发人员希望代码被高度解耦

运维人员希望减少http请求，优化代码架构，提升用户体验

模块化的好处：

避免命名冲突（减少命名空间污染）

更好地分离，按需加载

更高复用性

高可维护性

3. 模块化的发展

1. 最早，全部在一个文件中或是简单的分成几个文件

Global被污染，很容易命名冲突

2. 简单封装：Namespae模式（命名空间）

减少Global上的变量数目

本质是对象，外部可以修改对象的属性，不安全

3. 匿名闭包：IIFE模式

4. 增强闭包模式，引入依赖，但还没有规范

现代模块化实现的基石

5. 模块化规范

没有规范的问题

没有规范的代码

1. 请求过多

2. 依赖模糊

3. 难以维护

模块化规范的发展

CommonJs

AMD

CMD

ES6

4. CommonJS

规范

说明

CommonJS规范

每个文件都当做一个模块

服务端：模块的加载是运行时同步加载的

浏览器端：模块需要提前编译打包处理

基本语法

暴露模块

module.exports = value

exports.xxx = value

问题：暴露的模块到底是什么？

引入模块

require(xxx)

第三方模块：xxx为模块名

自定义模块： xxx为模块文件路径

实现

服务端实现

Nodejs

http://node.js.cn

浏览器端实现

Browserify

https://browserify.org

也称为CommonJS的浏览器端的打包工具

Node与Browserify的区别

Nodejs运行时动态加载模块（同步）

Browserify是在转译（编译）时就会加载打包（合并）require的模块

5. AMD

规范

说明

Asynchronous Module Definition(异步模块定义)

https://github.com/amdjs/amdjs-api/wiki/AMD

专门用于浏览器端，模块的加载是异步的

基本语法

暴露模块

// 定义没有依赖的模块
define(function(){
return 模块
})

// 定义有依赖的模块
define(['module1', 'module2'], function(m1, m2) {
return 模块
})

引入模块

require(['module1', 'module2'],function(m1, m2)){
使用模块m1, m2
}

实现（浏览器端）

Require.js

http://www.requirejs.cn/

http://www.ruanyifeng.com/blog/2012/11/require_js.html

6.CMD

规范

说明

Common Module Define（通用模块定义）

https://github.com/seajs/seajs/issues/242

专门用于浏览器端，模块的加载是异步的

模块使用时才会加载执行

基本语法

暴露模块

// 定义没有依赖的模块
define(function(require, exports, module){
exports.xxx = value
module.exports = value
})

// 定义有依赖的模块
define(function(require, exports, module) {
  // 引入依赖模块(同步)
  var module2 = require('./module2')
  // 引入依赖模块（异步）
  require.async('./module3', function (m3) {
    // 引入后的回调
  })
  // 暴露模块
  exports.xxx = value
})

引入模块

define(function(require){
  var m1 = require('./module1')
  var m2 = require('./module2')
  m1.show()
  m2.show()
})

实现(浏览器端)

Sea.js

http://www.zhangxinxu.com/sp/seajs/

7. ES6

规范

说明

http://es6.ruanyifeng.com/#docs/module

依赖模块需要打包编译处理

语法

暴露模块: export