您现在的位置:首页 >> 网页设计 >> JavaScript >> 内容

ES6知识点整理之模块化的应用详解

时间:2019-4-16 10:54:43

  核心提示:nodejs中针对模块化演示的配置环境的安装:$ npm install --save babel-cli babel-preset-node6运行:$ ./node_modules/.bin/bab...

nodejs中针对模块化演示的配置

  • 环境的安装:$ npm install --save babel-cli babel-preset-node6
  • 运行:$ ./node_modules/.bin/babel-node.js --presets node6 ./your_script.js
  • 添加.babelrc文件, 编辑如下
1
2
3
4
5
{
 "presets": [
    "node6"
 ]
}

添加了这个文件,无需在运行时添加–presets参数

导出变量的三种模式

test1模块:

1
2
3
4
5
6
7
8
// 写法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 模块:

1
2
3
4
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模块 :

1
2
3
4
5
6
// 异步写法
var m = "I am m";
export {m};
setTimeout(()=>{
 m = "I am mm";
},1000);

index模块

1
2
3
4
5
import {m} from './test2';
console.log(m); // I am m
setTimeout(()=>{
 console.log(m); // I am mm
},1500);

多模块分别导出

test3 模块

1
2
3
4
5
6
var A = 1111,
 B = 2222,
 C = 3333;
var M = 'M';
export default M;
export {A as A1, B as B1, C as C1};

index 模块 :

1
2
3
4
5
import M, {A1, B1, C1} from './multi';
console.log(A1); // 1111
console.log(B1); // 2222
console.log(C1); // 3333
console.log(M); // M

对象的导出

User 模块 :

1
2
3
4
5
6
7
8
9
10
11
export class User{
 constructor(name){
  this.name = name;
 }
 get uname() {
  return this.name;
 }
 set uname(name) {
  this.name = name;
 }
}

index 模块 :

1
2
3
4
5
import {User} from './User';
var user = new User('Joh');
console.log(user.uname); // Joh
user.uname = 'Lily';
console.log(user.uname); // Lily

导出函数模块

func 模块

1
2
3
export function Log(str) {
 console.log(str);
}

index 模块

1
Log("I am log"); // I am log

重命名默认模块

rename 模块:

1
export default "rename";

index 模块:

1
2
import {default as nr} from './rename';
console.log(nr); // rename

默认模块和其他模块一起导出的方式

combine 模块:

1
2
export var a = 1;
export default 111;

方式1:

index 模块:

1
2
3
import {default as com, a as comA} from './com';
console.log(com); // 111
console.log(comA); // 1

方式2:

index 模块:

1
2
3
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导出的是一个数字变量,即使在其他地方修改了,它也不会被修改,保持原值不变

Java免费学习   Java自学网 http://www.javalearns.com

关注微信号:javalearns   随时随地学Java

或扫一扫

随时随地学Java

作者:不详 来源:网络
    你是从哪里知道本网站的?
  • 网友介绍的
  • 百度搜索的
  • Google搜索的
  • 其它搜索过来的
  • 网址输错了进来的
  • 太忙了不记得了
共有评论 0相关评论
发表我的评论
  • 大名:
  • 内容:
  • java学习网(www.javalearns.com) © 2014 版权所有 All Rights Reserved.
  • Email:javalearns@163.com 站长QQ:1356121699 晋ICP备14003680号-3
  • java学习网部分内容来自网络或网友发布,如侵犯了您利益,请发邮件至:javalearns@126.com,我们尽快处理!
  • Java学习网
  • 网站统计
  • 晋公网安备 14042902000001号