一袒炉、CommonJS
1、規(guī)范
-
說明
每一個文件都可以當做一個模塊
在服務(wù)器端：模塊的加載是運行時同步加載的
在瀏覽器端：模塊需要提前編譯打包處理。（因為瀏覽器不認識其引入的語法，所以需要事先編譯打包成瀏覽器能夠認識的語法才能夠運行） -
基本語法
暴露模塊：
module.exports=value
exports.xxx=value
暴露的本質(zhì)是exports這個對象现斋。exports原本是一個空對象，通過暴露為其添加新的屬性值亿昏。引入模塊：
require(xxx)
引入第三方模塊時浑测，xxx為模塊名；引入自定義模塊時赎败，xxx為模塊文件路徑
2秕衙、實現(xiàn)
-
服務(wù)端實現(xiàn)步驟
（1）下載安裝node.js
（2）創(chuàng)建項目結(jié)構(gòu)
/-modules /-module1.js /-module2.js /-module3.js /-app.js /-package.json（3）下載第三方模塊（可選）
npm install uniq --save（4）進行模塊化編碼
-
瀏覽器端實現(xiàn)步驟
（1）創(chuàng)建項目結(jié)構(gòu)
/-js /-dist //打包生成文件的目錄 /-src //源碼所在的目錄 /-module1.js /-module2.js /-module3.js /-app.js //應用主源文件 /-index.html /-package.json（2）下載browserify
先全局安裝：
npm install browserify -g再局部安裝：
npm install browserify --save-dev（3）進行模塊化編碼
（4）打包處理js
browserify js/src/app.js -o js/dist/build.js
上面的命令意思是將app.js文件進行編譯，輸出為build.js文件（5）頁面引入
<script src="./js/dist/build.js"></script>
二僵刮、AMD
AMD（Asynchronous Module Definition据忘，異步模塊定義），專門用于瀏覽器端搞糕，模塊的加載是異步的勇吊。
1、基本語法
（1）定義暴露模塊
-
定義沒有依賴的模塊
define(function(){ return 模塊 })
-
定義有依賴的模塊
define(["module1","module2"],function(m1,m2){ return 模塊 })
（2）引入暴露模塊
require(["module1","module2"],function(m1,m2){
使用m1/m2
})
2窍仰、實現(xiàn)步驟
（1）下載require.js
官網(wǎng)：https://requirejs.org/
將require.js引入到項目中：js/libs/require.js
（2）創(chuàng)建目錄結(jié)構(gòu)
/-js
/-libs
/-require.js
/-modules
/-alerter.js
/-dataService.js
/-main.js
/-index.html
（3）定義require.js的模塊代碼
三汉规、CMD
CMD（Common Modules Definition，通用模塊定義）驹吮，專門用于瀏覽器端针史，模塊的加載是異步的，模塊在使用時才會加載碟狞。這種方式在開發(fā)中用的比較少啄枕。
1、基本語法
（1）定義暴露模塊
-
定義沒有依賴的模塊
define(function(require,exports,module){ exports.xxx=value; module.exports=value; })
-
定義有依賴的模塊
define(function(require,exports,module){ //引入依賴模塊（同步） var module2=require("./module2"); //引入依賴模塊（異步） require.async("./module3",function(m3){ }); //暴露模塊 exports.xxx=value; })
（2）引入暴露模塊
define(function(require){
var m1=require("./module1");
var m2=require("./module2");
m1.show();
m2.show();
})
2篷就、實現(xiàn)步驟
（1）下載sea.js并引入
官網(wǎng)：https://seajs.github.io/seajs/docs/#intro
將sea.js導入項目：js/libs/sea.js
（2）創(chuàng)建項目模塊
/-js
/-libs
/-sea.js
/-modules
/-module1.js
/-module2.js
/-module3.js
/-main.js
/-index.html
（3）定義sea.js的模塊代碼
四射亏、ES6
1、創(chuàng)建目錄結(jié)構(gòu)
/-js
/-src
/-module1.js
/-module2.js
/-module3.js
/-index.html
/-package.json
2竭业、安裝babel-cli, babel-preset-es2015 和 browserify:
第一步：全局安裝 npm install babel-cli browserify -g
(cli: command line interface 命令行接口工具)
第二步：局部安裝 npm install babel-preset-es2015 --save-dev
注：如果已經(jīng)安裝了browserify智润，可以在第一步中去除browserify
3、創(chuàng)建.babelrc文件（給babel指定具體的任務(wù)）
文件內(nèi)容如下：
{
"presets":["es2015"]
}
4未辆、編碼
- 分別暴露
/*js/src/module1.js*/
export let data="dexter";
export function demo(){
console.log("我是module1中的demo函數(shù)",data.toLocaleUpperCase());
}
export function test(){
console.log("我是module2中的test函數(shù)",data.toLocaleLowerCase());
}
- 統(tǒng)一暴露
/*js/src/module2.js*/
export {demo2,test2}
let arr=[1,2,3,4,5]; //私有數(shù)據(jù)
function demo2(){
console.log("我是module2中的demo2函數(shù)",arr);
}
function test2(){
console.log("我是module2中的test2函數(shù)",arr);
}
- 默認暴露
/*js/src/module3.js*/
export default{
name:"peiqi",
age:18,
speak(){
console.log("我的名字是${this.name},我的年齡是${this.age}");
}
}
5窟绷、模塊的引入
-
分別暴露與統(tǒng)一暴露的引入方式
import {foo,bar} from "./module1"; import {fun1,fun2} from "./module2"; -
默認暴露的引入方式
import module3 from "./module3"; -
第三方模塊引入方式
import $ from "jquery";
6、編譯源代碼
首先要確保已經(jīng)進入ES6-Babel-Browserify所在的文件夾
第一步：使用Babel將ES6編譯為ES5代碼
命令為：babel js/src -d js/build 咐柜，表示編譯src文件夾下的所有js文件兼蜈，保存到build文件中
第二步：使用Browserify編譯js上一步生成的js
命令為：browserify js/build/app.js -o js/build/build.js
注：第一步操作后Babel將es6的模塊化語法轉(zhuǎn)換成了CommonJS模塊化語法（瀏覽器不識別）攘残，因此需要執(zhí)行第二步對進過babel編譯的app.js文件通過browerify進一步編譯才可以執(zhí)行。
7为狸、html文件載入
<script src="./js/build/appbuild.js"></script>
