模块化开发, 可以让代码易于扩展, 便于日后维护.
ES6 中的模块化
我们先了解一下 export(导出) 和 import(导入) 这两个关键字.
新建一个文件 a.JS 并且导出变量 test
export var test = "测试";
导入变量 test 来源是 a.JS 然后输出 test
- import {
- test
- } from './a.js';
- console.log(test);
如果想导出多个变量:
- var test = "测试 1";
- var test2 = "测试 2";
- export {
- test,
- test2
- }
- import {test,test2} from './a.js';
如果你不想暴露模块当中的变量名字, 可以通过 as 来进行操作:
- var test = "测试 1";
- var test2 = "测试 2";
- export {
- test as asTest,
- test2 as asTest2
- }
- import {asTest,asTest2} from './a.js';
默认导出 (export default)
一个模块文件只能有一个默认导出, 并且它的导入名称可以喝导出名称不一样.
- export default test = "哈哈";
- import test from './a.js';
- import noTest from './a.js';// 名字不一样也行
混合导入导出
- /* 导出文件 a.JS*/
- export var test = "Hello";
- export default yuki = "Yuki";
- /* 导入 */
- import yuki,{
- test
- } from './a.js';
- CommonJS
commonJs 是 Node 独有的规范, 一般是用于服务端. module.exports(导出) ,require(导入). 具体看示例
- module.exports = {
- test:'哈哈',
- yuki:'Yuki'
- }
- // 下面这种方式也可以导出 exports 不能直接赋值一个对象 也就说 exports = 对象 aaa 这种写法是无效的
- exports.test = "哈哈";
- exports.yuki = "Yuki";
- var obj = require('./a.js');
- console.log(obj.test);
- console.log(obj.yuki);
CommonJS 与 ES6 中模块化的区别
1.commonJs 支持动态导入, 也就说 require(${path}/xx.JS) , 但 ES6 不支持.
2.commonJs 是同步的, 并且一般用于服务端, 后者是异步的, 一般用于客户端 (浏览器).
- AMD
- // AMD
- define(['./a', './b'], function(a, b) {
- a.do()
- b.do()
- })
- define(function(require, exports, module) {
- var a = require('./a')
- a.doSomething()
- var b = require('./b')
- b.doSomething()
- })
来源: http://www.bubuko.com/infodetail-2972187.html