// 1 commonjs
特点:
每个js文件都可以当做一个模块
服务端: 模块加载是同步的
浏览器: 需要进行编译打包处理
语法:
暴露: 暴露的都是exports这个对象
module.exports = value --> 相当于对exports对象重新赋值
exports.xxx = value --> 相当于对exports对象添加属性
引入: require(xxx)
编译: Browserify: 编译打包工具
使用: 全局安装: npm install -g browserify 局部安装: npm install -g browserify --save-dev
语法: 命令行 browserify js/src/main.js -o js/dist/bundle.js 1.main.js 入口文件 2.bundle.js 输出文件
在html中使用:
<script type="text/javascript" src="js/dist/bundle.js"></script>
// 2 AMD
特点:
专门用于浏览器端
模块的加载是异步的
语法:
暴露: 一般向外暴露一个对象
没有依赖: define(function() {
return 模块
})
有依赖: define(['module1', 'module2'], function(m1, m2) {
注: 形参m1 = module1模块的暴露 m2 = module2模块的暴露
return 模块
})
引入: require(['module1', 'module2'], function(m1, m2) {
注: 形参m1 = module1模块的暴露 m2 = module2模块的暴露
使用m1/m2
})
实现: requirejs
定义入口文件main.js或app.js
在入口文件的开头配置requirejs
require.config({
baseUrl: 'demo/', // 定义paths中模块相对地址
paths: {
jquery: 'lib/jquery.min', // 第三方模块建议放在lib文件夹下
demoModel: 'modules/demoModel' // 自定义模块建议放在modules文件夹下
}
})
// 引入各模块
require([jquery, 'module2'], function($, m2) {
//使用各模块
})
在html中使用
<script type="text/javascript" data-main="js/script/main" src="demo/lib/require.js"></script>
其中src指向requir.js文件 data-main指向定义的入口文件
// 3 CMD
特点:
专用于浏览器端
模块的加载可以是异步的
模块使用时才会被加载
语法:
暴露: 理解为commonjs与AMD的组合
// 固定写法
无依赖
define(function(require, exports, module) {
// 向外暴露使用commonjs规范
module.exports = value
exports.xxx = value
})
有依赖
define(function(require, exports, module) {
// 同步引入
let module1 = require("./modules/module1")
// 异步引入
require.async("./modules/module2", function(m2) {
// 引入成功后的回调函数
})
// 向外暴露使用commonjs规范
module.exports = value
exports.xxx = value
})
引入:
define(function(require) {
let m1 = require("./modules/module1"); // 引入
m1.sayHello(); // 使用
})
实现: sea.js
在html中使用:
<script type="text/javascript" src="demo/lib/sea.js"></script>
<script type="text/javascript">
seajs.use('./modules/main.js');
</script>
// 4 ES6
特点:
语法简洁
避免引入时的层层依赖
浏览器不支持需要编译
语法:
暴露:
分别暴露
export function fun() {};
export let msg = '测试';
export let obj = {};
统一暴露
function fun() {};
let msg = '测试';
let obj = {};
export {
fun,
msg,
obj
}
默认暴露
export default 任意类型 建议暴露一个对象
引入:
分别暴露与统一暴露都需要解构引用
import { fun, msg, obj } from './modules/demo.js'
默认暴露
import demoModel from './modules/demo.js'
demoModel根据类型直接使用
编译:
使用babel进行编译
npm i babel-cli browserify -g;
npm i babel-preset-es2015 --save-dev
定义.babelrc文件 该文件为json文件后缀不写 作用: 告诉babel要干什么
{
"babel": ["es2015"]
}
使用:
1 命令行运行babel demo/src -d demo/lib 将es6转为es5
2 使用browserify编译成浏览器可以用的文件 browserify demo/lib/main.js -o demo/dist/bundle.js
在html中使用:
<script type="text/javascript" src="demo/dist/bundle.js"></script>