介紹
js模塊化規(guī)范當(dāng)下最重要的前端開發(fā)范式之一
為了解決，作用域，變量沖突，代碼組織的問題，早期是沒有模塊化，隨著前端日益復(fù)雜，代碼組織越來越困難，出現(xiàn)了一系列模塊化規(guī)范
功能不同，劃分為不同模塊 ，是一種思想，并不包含實(shí)現(xiàn)
演變介紹
1.基于文件劃分
最原始 ，單獨(dú)存放在不同文件，通過script將文件引用到代碼中,
沒有私用空間，都是全局變量，容易引起命令沖突，無(wú)法管理依賴關(guān)系，完全依靠約束
2.命名空間
將每個(gè)對(duì)象包裹在不同的函數(shù)模塊內(nèi)
任然沒有私用空間，依賴關(guān)系任然沒解決
3.IIFE 立即執(zhí)行函數(shù)方式提供私用空間
標(biāo)準(zhǔn)和規(guī)范
1.Common.js
nodejs提出的一套標(biāo)準(zhǔn)，nodejs遵循此規(guī)范，通過module.exports導(dǎo)出模塊，通過require導(dǎo)入
瀏覽器使用有問題，通過同步方式加載模塊，如果在瀏覽器中導(dǎo)致降低效率
2.AMD (Asynchronous Module Definition) 異步模塊加載規(guī)范
request.js實(shí)現(xiàn)了AMD規(guī)范 強(qiáng)大的模塊加載器
AMD使用方式
//定義一個(gè)模塊 定義一個(gè)私有空間
define('module1', ['jqury', './module2' ], function($, moudle2){
return { // 導(dǎo)出一些成員
start: function(){
$('body').animate({ margin: '200px' })
module2()
}
}
})
載入一個(gè)模塊
require(['module1', function(module1){
module1.start()
}]
目前絕大多數(shù)第三庫(kù)支持AMD規(guī)范
缺點(diǎn)：請(qǐng)求次數(shù)多，頁(yè)面效率低
同期一個(gè)淘寶推出規(guī)范類似AMD
sea.js CMD
目前模塊化已經(jīng)比較成熟，主要瀏覽器使用 esModule, nodejs使用Common.js
Common.js nodejs內(nèi)置的模塊系統(tǒng)
esModule
最主流的瀏覽器模塊管理工具
ECMAScript2015(es6)新出的模塊規(guī)范
esModuel特性
目前大多數(shù)瀏覽器已經(jīng)支持esModule規(guī)范
<!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的標(biāo)準(zhǔn)執(zhí)行其中js代碼 -->
<script type="module">
console.log('這是一個(gè)esmodue')
</script>
<!-- 自動(dòng)采取嚴(yán)格模式， 忽略 ’use strict‘, 嚴(yán)格模式中，不能再全局直接使用this -->
<script type="module">
console.log(this) // undefined
</script>
<!-- 每一個(gè)ES Module都是運(yùn)行在單獨(dú)的私有作用域中 -->
<script type="module">
var fot = 100;
console.log(fot)
</script>
<script type="module">
console.log(fot) // 訪問不到
</script>
<!-- ESModule 通過CORS 的方式請(qǐng)求外部 JS模塊的 -->
<script type="module" src='https://www.baidu.com'></script>
<!-- ESModule會(huì)延遲執(zhí)行 腳本 相當(dāng)于 defer -->
<script defer type="module"></script>
</body>
</html>
esmodule導(dǎo)入和導(dǎo)出
module.js
var str = 'esmodule'
export {str}
app.js
import {str} from './module.js'
由于esModule是新出的規(guī)范，一些瀏覽器（IE，國(guó)產(chǎn)的小型瀏覽器）還不支持此規(guī)范，所以需要考慮兼容，polyfill
可以使用插件# es-module-loader
如果ie報(bào)不支持promise則還需要引用 promise-polyfill
Tip：生產(chǎn)階段盡量不要使用，影響頁(yè)面加載效率
常用的模塊化打包工具
