模块
commonjs amd cmd umd es6
- commonjs nodejs 模块规范 语法有 require() exports.a=b; exports.default={}
1// foobar.js
2
3//私有变量
4var test = 123;
5
6//公有方法
7function foobar () {
8
9 this.foo = function () {
10 // do someing ...
11 }
12 this.bar = function () {
13 //do someing ...
14 }
15}
16
17//exports对象上的方法和变量是公有的
18var foobar = new foobar();
19exports.foobar = foobar;
1//require方法默认读取js文件，所以可以省略js后缀
2var test = require('./boobar').foobar;
3
4test.bar();
- amd: Asynchronous Module Definition 异步模块定义 推崇依赖前置 相关实现库 requirejs，语法 define(id?, dependencies?, factory)
- cmd: Common Module Definition 推崇依赖就近 类似 amd 相关实现库 seajs
1//AMD
2define(['./a','./b'], function (a, b) {
3
4 //依赖一开始就写好
5 a.test();
6 b.test();
7});
8
9//CMD
10define(function (requie, exports, module) {
11
12 //依赖可以就近书写
13 var a = require('./a');
14 a.test();
15
16 ...
17 //软依赖
18 if (status) {
19
20 var b = requie('./b');
21 b.test();
22 }
23});
- umd Universal Module Definition 通用模块定义,是 AMD 和 CommonJS 的糅合 UMD 先判断是否支持 Node.js 的模块（exports）是否存在，存在则使用 Node.js 模块模式。在判断是否支持 AMD（define 是否存在），存在则使用 AMD 方式加载模块
1(function (window, factory) {
2 if (typeof exports === 'object') {
3
4 module.exports = factory();
5 } else if (typeof define === 'function' && define.amd) {
6
7 define(factory);
8 } else {
9
10 window.eventUtil = factory();
11 }
12})(this, function () {
13 // module ...
14});
- ES6：语言标准的模块化，取代 UMD，服务器和浏览器都能使用
es6
模块导入与导出
| 操作 |
语法 |
重命名 |
对应导入 |
对应导入重命名 |
| 直接导出 |
export var a=2;or export function a(){}; |
no |
import {a} from 'x'; |
import {a as b} from 'x'; |
| 先申明,再导出 |
var a=2,b=3;export {a,b};or function a(){};export {a}; |
export {a as c,b}; |
import {a,b} from 'x'; |
import {a as c,b} from 'x'; |
| 默认导出 |
export default function(){};or export default 44; |
不需要 |
import a from 'x'; |
不需要 |
| 先申明,再默认导出 |
function a(){};export default a;or var a=2;export default a; |
不需要 |
import a from 'x'; |
不需要 |
- 总结： 默认导入导出不需要重命名,因为导入的名字可以随便取;非默认导入导出 {}里都支持重命名
export import 复合写法
- 如果在一个模块之中，先输入后输出同一个模块，import 语句可以与 export 语句写在一起
1export { foo, bar } from 'foo';//导出foo中的foo bar
2export { default } from 'foo';//导出foo中的默认输出
3export * from 'foo';//export *命令会忽略foo模块的default方法
- 注意：import 和 export 命令只能在模块的顶层，不能在代码块之中，JavaScript 引擎静态分析，先于模块内的其他语句执行。
评论