普通模块化：
模块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>
缺点：全局变量污染、html中引入需要顺序
CommonJs规范
1、 基于node的服务端：
模块1 module1.js
exports.foo = function () {
console.log('这是module1模块的 foo函数')
};
exports.bar = function () {
console.log('这是module1模块的 bar函数')
};
模块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();
运行 node app.js
2、浏览器端：浏览器不能识别CommonJs中的语法，所以需要Browserify 用来编译打包
创建 src目录（开发源代码文件夹） 和 dist目录（打包后的生产文件夹）
下载 全局安装 npm install browserify -g
本地安装：npm install browserify --D
运行 browserify js/src/app.js -o js/dist/bundle.js
然后在index.html中引入 dist/bundle.js文件即可
AMD规范：
依赖于 requirejs
下载 requirejs并放在libs文件夹下
专门用于浏览器端的规范，加载模块是异步
定义模块 用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: {//每个模块的定义
aa: './modules/aa',
bb: './modules/bb',
jquery: './libs/jquery-3.4.1.min'//jquery模块支持amd规范，但只可以小写
}
}
);
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规范：
因现在很多浏览器依然不能识别es6语法，所以需要编译成浏览器都可识别的es5的语法，用 babel 编译器
babel：是JavaScript编译器，主要是用于将es2015( es6 )以上版本的语法，转换成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-预设，代表将babel中用于转换es6到es5的所有工具打包下载下来 )
npm install babel-preset-es2015 -D
配置 ：根目录下创建 .babelrc 文件 ( rc 代表 run control，表示这是运行时控制文件,既运行时需要读的文件 )，
.babelrc文件中配置 { " presets " : [ " es2015 " ] }
导出：
常规导出方式：export function fn(){ ----- } export var as = ' ' ;
默认导出方式：export default function(){ ----- }
导入：
常规导出的接收方式：import { a, b } from ' ./modules/modules1 '
默认导出的接收方式：import module3 from ' ./modules/modules2 '
运行代码去转换成 babel ./js/src -d ./js/build ( 将src文件夹下所有文件转换成es5语法 )
此时 仍不可直接引用，会报错找不到 require，这是因为浏览器不能识别Commonjs语法，此时需要 browserify
npm install browserify -g
npm install browserify -D
browserify ./js/build/main.js -o ./js/dist/bundle.js
( 将转换后的main.js文件编译成浏览器可识别的bundle.js文件)
此时 方可在index.html中引用 dist/bubdle.js 文件了
<script src=" ./js/dist/bundle.js ''></script>
