ES6知识点整理之模块化的应用详解
程序员文章站
2022-06-23 14:22:25
本文实例讲述了es6知识点整理之模块化的应用。分享给大家供大家参考,具体如下:
目前浏览器还不能完全支持模块化,需要引入很多编译环境,下面在nodejs中来模拟es6...
本文实例讲述了es6知识点整理之模块化的应用。分享给大家供大家参考,具体如下:
目前浏览器还不能完全支持模块化,需要引入很多编译环境,下面在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参数
- 参考链接:
导出变量的三种模式
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导出的是一个数字变量,即使在其他地方修改了,它也不会被修改,保持原值不变
- 这里有其他一些注意事项的总结
更多关于javascript相关内容可查看本站专题:《javascript面向对象入门教程》、《javascript切换特效与技巧总结》、《javascript查找算法技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。