前端模块化

121 阅读2分钟

一、AMD(异步模块定义)

AMD是适用于浏览器端的,异步加载模块,是依赖前置模块。将需要用到该模块的函数,定义在其回调函数中,完成异步加载。在服务器端,可以承受同步加载,因为所有的文件都存储在硬盘中,但是在浏览器端会产生假死现象。所以,产生了AMD。主要有require.js和curl.js两种方式。其优点为:

  1. 自动处理依赖,无需考虑模块引入顺序
  2. 异步加载模块,避免阻塞
  3. 在同一个文件中可以定义多个模块

定义模块

define('modelName',['a','b','c'],function(a,b,c){ return }) 三个参数分别表示模块名称,模块依赖以及定义的回调函数或对象 注:模块名为驼峰格式,依赖模块不允许有文件扩展名

加载模块

require(['a','b','c'],function(x,y,z){}

指定各模块路径和引用名

require.config({ baseUrl:'js/lib', paths:{ "jquery":'jquery.min', } })

二、CMD(通用模块定义)

  1. 一个文件一个模块,所以经常用文件名作为模块名称
  2. 依赖就近,懒执行
  3. 相比于AMD,AMD用户体验好,因为没有延迟,依赖模块提前执行了。 CMD性能好,因为只有用户需要的时候才执行。CMD加载完某个依赖模块后并不执行,只是下载。在所有依赖模块加载完成后进行主逻辑,遇到require语句的时候才执行相应的模块。这样的执行顺序和书写顺序是完全一致的。

定义模块

define(function(require,exports,module)){}

三、CommonJS

服务端的模块管理机制

  1. 一个单独的文件就是一个模块,每一个模块都是单独的作用域
  2. 模块只有一个出口,module.exports对象
  3. 加载模块:加载模块使用require方法,该方法读取一个文件并执行,返回文件内部的module.exports对象 CommonJs使用同步的方式加载模块,在服务端,模型文件都存在本地磁盘,读取非常快。

四、ES6module

  1. export命令:用于规定模块的对外接口
  2. import命令:用于输入其他模块提供的功能 此外,ES6还提供了export default命令,为模块指定默认输出,对应的import语句不需要使用大括号。
  3. CommonJS模块输出的是一个值的拷贝,ES6模块输出的是值的引用
  4. CommonJS模块是运行时加载,ES6模块是编译时输出接口
  5. 在import时可以指定加载某个输出值,而不是加载整个模块