介绍
js模块化规范当下最重要的前端开发范式之一
为了解决,作用域,变量冲突,代码组织的问题,早期是没有模块化,随着前端日益复杂,代码组织越来越困难,出现了一系列模块化规范
功能不同,划分为不同模块 ,是一种思想,并不包含实现
演变介绍
1.基于文件划分
最原始 ,单独存放在不同文件,通过script将文件引用到代码中,
没有私用空间,都是全局变量,容易引起命令冲突,无法管理依赖关系,完全依靠约束
2.命名空间
将每个对象包裹在不同的函数模块内
任然没有私用空间,依赖关系任然没解决
3.IIFE 立即执行函数方式提供私用空间
image.png
标准和规范
1.Common.js
nodejs提出的一套标准,nodejs遵循此规范,通过module.exports导出模块,通过require导入
浏览器使用有问题,通过同步方式加载模块,如果在浏览器中导致降低效率
2.AMD (Asynchronous Module Definition) 异步模块加载规范
request.js实现了AMD规范 强大的模块加载器
AMD使用方式
//定义一个模块 定义一个私有空间
define('module1', ['jqury', './module2' ], function($, moudle2){
return { // 导出一些成员
start: function(){
$('body').animate({ margin: '200px' })
module2()
}
}
})
载入一个模块
require(['module1', function(module1){
module1.start()
}]
目前绝大多数第三库支持AMD规范
缺点:请求次数多,页面效率低
同期一个淘宝推出规范类似AMD
sea.js CMD
目前模块化已经比较成熟,主要浏览器使用 esModule, nodejs使用Common.js
image.png
Common.js nodejs内置的模块系统
esModule
最主流的浏览器模块管理工具
ECMAScript2015(es6)新出的模块规范
esModuel特性
目前大多数浏览器已经支持esModule规范
Document
esmodule导入和导出
module.js
var str = 'esmodule'
export {str}
app.js
import {str} from './module.js'
由于esModule是新出的规范,一些浏览器(IE,国产的小型浏览器)还不支持此规范,所以需要考虑兼容,polyfill
可以使用插件# es-module-loader
image.png
如果ie报不支持promise则还需要引用 promise-polyfill
Tip:生产阶段尽量不要使用,影响页面加载效率
常用的模块化打包工具