7.JavaScript模块的CommonJS、AMD、UMD、ES6 Module
目录
1.CommonJS
CommonJS以服务器为目标环境,能够一次性把所以模块加载到内存。
- 导入:require(‘路径’)
- 导出:module.exports和exports
//hello.js模块
'use strict';
var s = 'Hello';
function greet(name) {
console.log(s + ', ' + name + '!');
}
module.exports = greet;
'use strict';
// 引入hello模块:
var greet = require('./hello');
var s = 'Michael';
greet(s); // Hello, Michael!
module.exports = variable;
输出的变量可以是任意对象、函数、数组等等。
2.AMD(Asynchronous Module Definition)
AMD(异步模块定义)以浏览器为目标执行环境,这需要考虑网络延时的问题。
- 导入:require([‘模块名称’], function (‘模块变量引用’){// 代码});
- 导出:define(function (){return ‘值’);
define('moduleA',['moduleB'],function(moduleB) {
return {
stuff: module.doStuff();
};
});
3.UMD(Universal Module Definition)
UMD(统一模块定义)是为了统一CommonJS和AMD生态系统而生。
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
//AMD
define(['jquery'], factory);
} else if (typeof exports === 'object') {
//Node, CommonJS之类的
module.exports = factory(require('jquery'));
} else {
//浏览器全局变量(root 即 window)
root.returnExports = factory(root.jQuery);
}
}(this, function ($) {
//方法
function myFunc(){};
//暴露公共方法
return myFunc;
}));
4.ES6 Module
ES6 Module是ECMA-262引入的模块规范,可运用于浏览器或服务器环境。
- 导入:import {模块名A,模块名B…} from ‘模块路径’
- 导出:export(命名导出)和export default(默认导出)
import { foo } from './fooModule.js';
//命名导出多行形式
const foo = 'foo';
export { foo };
//命名导出单行形式
export const foo = ‘foo’;
//命名导出别名
const foo = 'foo';
export { foo as myFoo };
//默认导出多行形式
const foo = 'foo';
export default foo;
//默认导出单行形式
export { foo as default };
原创文章,作者:huoxiaoqiang,如若转载,请注明出处:https://www.huoxiaoqiang.com/basic/js/3556.html