介绍
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规范
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 通过给script添加type=module属性， 就可以以esModule的标准执行其中js代码 -->
<script type="module">
console.log('这是一个esmodue')
</script>
<!-- 自动采取严格模式， 忽略 ’use strict‘, 严格模式中，不能再全局直接使用this -->
<script type="module">
console.log(this) // undefined
</script>
<!-- 每一个ES Module都是运行在单独的私有作用域中 -->
<script type="module">
var fot = 100;
console.log(fot)
</script>
<script type="module">
console.log(fot) // 访问不到
</script>
<!-- ESModule 通过CORS 的方式请求外部 JS模块的 -->
<script type="module" src='https://www.baidu.com'></script>
<!-- ESModule会延迟执行 脚本 相当于 defer -->
<script defer type="module"></script>
</body>
</html>
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：生产阶段尽量不要使用，影响页面加载效率
常用的模块化打包工具
网友评论