本文实例讲述了ES6知识点整理之模块化的应用。分享给大家供大家参考，具体如下：
目前浏览器还不能完全支持模块化，需要引入很多编译环境，下面在nodejs中来模拟ES6中的模块化
nodejs中针对模块化演示的配置
npm install --save babel-cli babel-preset-node6./node_modules/.bin/babel-node.js --presets node6 ./your_script.js{ "presets": [ "node6" ]}添加了这个文件，无需在运行时添加 presets参数
导出变量的三种模式
test1模块：
// 写法1export var a = "I am a";// 写法2var b = "I am b";export {b};// 写法3var c = "I am c";export {c as d} // 将c重名为d, 外部也同样需要 import dindex 模块：
import {a, b, d} from './test1';console.log(a); // I am aconsole.log(b); // I am bconsole.log(d); // I am c异步导出模块的测试
test2模块 ：
// 异步写法var m = "I am m";export {m};setTimeout(()=>{ m = "I am mm";},1000);index模块
import {m} from './test2';console.log(m); // I am msetTimeout(()=>{ console.log(m); // I am mm},1500);多模块分别导出
test3 模块
var A = 1111, B = 2222, C = 3333;var M = 'M';export default M;export {A as A1, B as B1, C as C1};index 模块 ：
import M, {A1, B1, C1} from './multi';console.log(A1); // 1111console.log(B1); // 2222console.log(C1); // 3333console.log(M); // M对象的导出
User 模块 ：
export class User{ constructor(name){ this.name = name; } get uname() { return this.name; } set uname(name) { this.name = name; }}index 模块 ：
import {User} from './User';var user = new User('Joh');console.log(user.uname); // Johuser.uname = 'Lily';console.log(user.uname); // Lily导出函数模块
func 模块
export function Log(str) { console.log(str);}index 模块
Log("I am log"); // I am log重命名默认模块
rename 模块：
export default "rename";
index 模块：
import {default as nr} from './rename';console.log(nr); // rename默认模块和其他模块一起导出的方式
combine 模块：
export var a = 1;export default 111;
方式1：
index 模块：
import {default as com, a as comA} from './com';console.log(com); // 111console.log(comA); // 1方式2：
index 模块：
import t, { a as comA} from './com';console.log(t); // 111 备注这里t可以以任何名称命名console.log(comA); // 1其他注意事项
export default var name = ‘Joh'; 这样是不对的import * 导出全部模块，这样非常不好，不利于优化{} 导入的不是默认模块，默认模块不需要带{}更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
新闻热点
疑难解答
