Skip to content

Latest commit

 

History

History
102 lines (67 loc) · 3.59 KB

前端模块化.md

File metadata and controls

102 lines (67 loc) · 3.59 KB
Raw

前端模块化

为什么要有模块化

  • 解决代码作用域混乱
  • 代码可以根据逻辑或者功能来组织模块，也就是按可以按文件区分职责
  • 代码复用问题，常用代码可以被封装定义成模块，给其它功能引入使用

模块化方案

  • CommonJS
  • AMD
  • CMD
  • ES6模块管理
模块化方案 安装环境 使用环境 同步还是异步 定义方式 引入方式 兼容方式 支持静态依赖分析
CommonJS node node命令行触发 同步 CommonJS定义 CommonJS引入方式 CommonJS与ES6兼容 否
AMD 第三方库request.js HTML页面或node命令行 异步 AMD定义 AMD引入方式 请参考CommonJS与ES6兼容 否
CMD 第三方库seaJS.js HTML页面或node命令行 异步 CMD定义 CMD引入方式 请参考CommonJS与ES6兼容 否
ES6模块管理 ES6环境支持 HTML页面（Babel转）或node命令行 同步/异步 ES6模块管理定义 ES6模块管理引入方式 CommonJS与ES6兼容 是

CommonJS定义

  • module.exports = ‘test
  • exports.test = ‘test

需要注意的是，如果exports是一个函数，需要使用module.exports来定义，因为exports修改值，并不会修改module.exports，而取值exports是从module.exports取值的

CommonJS引入方式

var test_module = require('/test.js’)

AMD定义

使用第三方库requestJS的define函数来定义模块

define(id?, dependencies?, factory)
define(function () {
    var add =function (a, b) {
        return a + b;
    }
    return {
    	add: add
    }
}

AMD引入方式

var requires=require("requires");
requires(['math'l, function(math) {
    console. log (math)
    console. log (math. add(1, 2));
}
  • AMD会先加载所有依赖，然后再执行自己的request的回调函数，并且依赖的库都已经异步加载好了

CMD定义

与AMD相似

CMD引入方式

image-20201220230027539

就不再拷贝文字了，如上图，它是异步执行自己的逻辑，然后让用户再使用seajs的request来请求加载模块的

ES6模块管理定义

ES6主要是使用export和export default

default会在没有指定的时候，进去默认导入

image-20201220230418366

ES6模块管理引入方式

  • import
  • export..from..

CommonJS与ES6兼容

  • 根据文件名来限制加载方式
  • 根据package.json来指定文件的加载方式
  • JS定义模块内部声明多种写法来兼容其它的导入模块

参考

https://segmentfault.com/a/1190000022599809

https://www.ruanyifeng.com/blog/2020/08/how-nodejs-use-es6-module.html