普通模塊化：
模塊1 aa.js：
(function (w) {
var msg = '我是aa.js中的 msg';
function getMsg() {
console.log(msg);
}
w.aa = {getMsg};
})(window);
模塊2 bb.js
(function (w, a) {
var msg = '我是bb.js中的 msg';
function getMsg() {
console.log(msg);
a.getMsg();
}
w.bb = {getMsg: getMsg};
})(window, aa);
主文件 app.js
(function (b) {
b.getMsg();
})(bb);
index.html文件中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="aa.js"></script>
<script src="bb.js"></script>
<script src="app.js"></script>
</body>
</html>
缺點(diǎn)：全局變量污染、html中引入需要順序
CommonJs規(guī)范
1、 基于node的服務(wù)端：
模塊1 module1.js
exports.foo = function () {
console.log('這是module1模塊的 foo函數(shù)')
};
exports.bar = function () {
console.log('這是module1模塊的 bar函數(shù)')
};
模塊2 module2.js
module.exports = {
username: '張三',
say() {
console.log('我是module2模塊的say方法')
}
};
主文件 app.js
var m1 = require('./modules/module1');
var m2 = require('./modules/module2');
m1.foo();
m1.bar();
console.log(m2.username);
m2.say();
運(yùn)行 node app.js
2、瀏覽器端：瀏覽器不能識(shí)別CommonJs中的語法，所以需要Browserify 用來編譯打包
創(chuàng)建 src目錄（開發(fā)源代碼文件夾） 和 dist目錄（打包后的生產(chǎn)文件夾）
下載 全局安裝 npm install browserify -g
本地安裝：npm install browserify --D
運(yùn)行 browserify js/src/app.js -o js/dist/bundle.js
然后在index.html中引入 dist/bundle.js文件即可
AMD規(guī)范：
依賴于 requirejs
下載 requirejs并放在libs文件夾下
專門用于瀏覽器端的規(guī)范，加載模塊是異步
定義模塊 用define()
引入使用模塊用 requirejs()
模塊1 aa.js
define(function () {
var msg = 'aa中的msg';
function shown() {
return msg;
}
return {shown};
});
模塊2 bb.js
define(['aa'], function (a) {
var s = 'hello';
function showMsg() {
console.log(s, a.shown());
}
return {showMsg};
});
主文件 main.js
requirejs.config(
{
baseUrl: 'js/',//以下路徑都是基于本路徑
paths: {//每個(gè)模塊的定義
aa: './modules/aa',
bb: './modules/bb',
jquery: './libs/jquery-3.4.1.min'//jquery模塊支持amd規(guī)范，但只可以小寫
}
}
);
requirejs(['bb', 'jquery'], function (b, $) {
b.showMsg();
$('body').css('backgroundColor', 'red');
});
index.html中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script data-main="./js/main.js" src="./js/libs/require.js"></script> //引入文件
</body>
</html>
CMD:
http://caibaojian.com/cmd-cn.html](http://caibaojian.com/cmd-cn.html
ES6規(guī)范：
因現(xiàn)在很多瀏覽器依然不能識(shí)別es6語法，所以需要編譯成瀏覽器都可識(shí)別的es5的語法，用 babel 編譯器
babel：是JavaScript編譯器，主要是用于將es2015( es6 )以上版本的語法，轉(zhuǎn)換成es5的語法，來兼容瀏覽器
babel安裝：1、babel-cli( cli ：command line interface，若想要使用 babel的命令，則必須安裝 babel-cli )
npm install babel-cli -g ( 需要全局安裝 )
babel -v 可以返回版本就證明babel安裝成功了
2、babel-preset-es2015 ( preset-預(yù)設(shè)，代表將babel中用于轉(zhuǎn)換es6到es5的所有工具打包下載下來 )
npm install babel-preset-es2015 -D
配置 ：根目錄下創(chuàng)建 .babelrc 文件 ( rc 代表 run control，表示這是運(yùn)行時(shí)控制文件,既運(yùn)行時(shí)需要讀的文件 )，
.babelrc文件中配置 { " presets " : [ " es2015 " ] }
導(dǎo)出：
常規(guī)導(dǎo)出方式：export function fn(){ ----- } export var as = ' ' ;
默認(rèn)導(dǎo)出方式：export default function(){ ----- }
導(dǎo)入：
常規(guī)導(dǎo)出的接收方式：import { a, b } from ' ./modules/modules1 '
默認(rèn)導(dǎo)出的接收方式：import module3 from ' ./modules/modules2 '
運(yùn)行代碼去轉(zhuǎn)換成 babel ./js/src -d ./js/build ( 將src文件夾下所有文件轉(zhuǎn)換成es5語法 )
此時(shí) 仍不可直接引用，會(huì)報(bào)錯(cuò)找不到 require，這是因?yàn)闉g覽器不能識(shí)別Commonjs語法，此時(shí)需要 browserify
npm install browserify -g
npm install browserify -D
browserify ./js/build/main.js -o ./js/dist/bundle.js
( 將轉(zhuǎn)換后的main.js文件編譯成瀏覽器可識(shí)別的bundle.js文件)
此時(shí) 方可在index.html中引用 dist/bubdle.js 文件了
<script src=" ./js/dist/bundle.js ''></script>
