建站
咨询
售后
建站咨询
ES6知识点整理之模块化的应用详解
本文实例讲述了ES6知识点整理之模块化的应用。分享给大家供大家参考，具体如下：
创新互联建站是一家专注于做网站、网站建设与策划设计,晋中网站建设哪家好?创新互联建站做网站,专注于网站建设十年,网设计领域的专业建站公司;建站业务涵盖:晋中等地区。晋中做网站价格咨询:13518219792
目前浏览器还不能完全支持模块化，需要引入很多编译环境，下面在nodejs中来模拟ES6中的模块化
nodejs中针对模块化演示的配置
- 环境的安装：$
npm install --save babel-cli babel-preset-node6 - 运行：$
./node_modules/.bin/babel-node.js --presets node6 ./your_script.js - 添加.babelrc文件, 编辑如下
{
"presets": [
"node6"
]
}
添加了这个文件，无需在运行时添加–presets参数
- 参考链接：https://stackoverflow.com/questions/33604470/unexpected-token-import-in-nodejs5-and-babel
导出变量的三种模式
test1模块：
// 写法1
export var a = "I am a";
// 写法2
var b = "I am b";
export {b};
// 写法3
var c = "I am c";
export {c as d} // 将c重名为d, 外部也同样需要 import d
index 模块：
import {a, b, d} from './test1';
console.log(a); // I am a
console.log(b); // I am b
console.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 m
setTimeout(()=>{
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); // 1111
console.log(B1); // 2222
console.log(C1); // 3333
console.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); // Joh
user.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); // 111
console.log(comA); // 1
方式2：
index 模块：
import t, { a as comA} from './com';
console.log(t); // 111 备注这里t可以以任何名称命名
console.log(comA); // 1
其他注意事项
- 定义export时必须在顶层定义，其他地方是不能定义的，如函数内部
- default后面不能带var导出，如：
export default var name = ‘Joh';这样是不对的 - 不要
import *导出全部模块，这样非常不好，不利于优化 {}导入的不是默认模块，默认模块不需要带{}- 通过default导出的不会再次被修改，如果default导出的是一个数字变量，即使在其他地方修改了，它也不会被修改，保持原值不变
- http://es6.ruanyifeng.com/#docs/module 这里有其他一些注意事项的总结
更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
网站标题：ES6知识点整理之模块化的应用详解
当前链接：http://scgulin.cn/article/psgsch.html
