欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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程序设计有所帮助。