技术干货 | js模块化规范总结

module.exports = definition();

} else {
// 将模块的执行效果在window变量中，在浏览器中this指向window工具
this[name] = definition();
}
})('hello', function () {
var hello = function () {};
return hello;
});

ES2015|ES2016 Module规范

 

ES2015出来之后，终于有了自己的模块规范。下面我们直接从es6最先说。

 

界说模块化：

// test.js
let a = 'hello';
let b = 'word';
let year = 2018;

// 和CommonJS差别的是，这里export后面随着的不是工具，而是一系列代表出口的值
// 同样可以用as设置别名
// 例如：export{a as aName}

// 这类
export {a, b};

 

注：export后面可以直接跟一个函数，可是不能直接跟工具，工具都需要用{}框起来（export default输出差别）。

 

导入：
我们都知道CommonJS的模块是一个工具，es6的模块不是工具，是编译时执行的，使得编译时就能够确定依赖关系和输入输出的变量。
好比说：

// 从fs内里加载3个要领，其他要领不加载，这叫”编译时加载“，ES6可以在编译时就完成模块加载。

import { stat, exists, readFile } from 'fs';

引用的时间我们没法引用模块自己，由于它不是工具。

import {a, b, c} from './test';

import {a as name, b, c} from './test';

import * as ALLName from './test';

默认输出：

当我们并不知道模块的API，可以提供默认输出：

export default function () {
console.log('foo');
}

这时通过import导出则不需要{}，由于只有一个变量：

import name from './export-default';

// 例如我们在使用一些库
// import $ from 'jquery';

注：es6 Module和CommonJS有个本质的区别，CommonJS加载的模块是对值的拷贝，而ES6 Module是对值的引用，这样模块界说文件内部变量的转变会实时反映到依赖文件，而CommonJS差别。

 

总结

 

自从es2015出来之后，AMD和CMD规范用的越来越少了，可是并不代表这些完全失去了可用性，思量到浏览器的兼容性，虽然现在浏览器情况对es6的支持越来越完善了，但思量对一些低版本的浏览器支持，许多在写es6的时间照旧会使用babel对es6做一层转换，好比联合webpack设置去打包一个es6语法的js组件，打包出来会是UMD规范的，这是兼容性比力强的一种规范。

 

固然，现实上只是要各人尽可能养成模块化开发的头脑，天真的在差别情况下去运用好这些规范。

 

 2/2   首页 上一页 1 2