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

 更新时间:2019年04月15日 14:42:22   作者:Johnny丶me  
这篇文章主要介绍了ES6知识点整理之模块化的应用,结合实例形式分析了基于node.js环境下模拟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导出的是一个数字变量,即使在其他地方修改了,它也不会被修改,保持原值不变
  • http://es6.ruanyifeng.com/#docs/module 这里有其他一些注意事项的总结

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • 精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)

    精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)

    这篇文章主要为大家分享了一个精彩的Bootstrap案例,涉及到了选项卡、栅格布局,关键重点在注释,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • js匿名函数使用&传参(实例)

    js匿名函数使用&传参(实例)

    下面小编就为大家带来一篇js匿名函数使用&传参(实例)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 原生js代码能实现call和bind吗

    原生js代码能实现call和bind吗

    这篇文章主要介绍了原生js代码能实现call和bind吗,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • JS ES6展开运算符的几个妙用

    JS ES6展开运算符的几个妙用

    这篇文章主要介绍了JS ES6展开运算符的几个妙用,想了解ES6的同学,可以参考下
    2021-04-04
  • 微信小程序接入腾讯云验证码的方法步骤

    微信小程序接入腾讯云验证码的方法步骤

    这篇文章主要介绍了微信小程序接入腾讯云验证码的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • 《JavaScript函数式编程》读后感

    《JavaScript函数式编程》读后感

    这里给大家分享的是个人在最近看《JavaScript函数式编程》一书的第一章之后的一些感触和理解,这里记录下来,有需要的小伙伴可以参考下
    2015-08-08
  • JavaScript高级程序设计 客户端存储学习笔记

    JavaScript高级程序设计 客户端存储学习笔记

    JavaScript高级程序设计 客户端存储学习笔记,在客户端用于存储会话信息
    2011-09-09
  • escape、encodeURI 和 encodeURIComponent 的区别

    escape、encodeURI 和 encodeURIComponent 的区别

    escape(), encodeURI()和encodeURIComponent()是在Javascript中用于编码字符串的三个常用的方法,而他们之间的异同却困扰了很多的Javascript初学者,今天我就在这里对这三个方法详细地分析与比较一下。
    2009-03-03
  • JavaScript事件循环及宏任务微任务原理解析

    JavaScript事件循环及宏任务微任务原理解析

    这篇文章主要介绍了JavaScript事件循环及宏任务微任务原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • JavaScript箭头函数中的this详解

    JavaScript箭头函数中的this详解

    这篇文章主要介绍了JavaScript箭头函数中的this详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,,需要的朋友可以参考下
    2019-06-06

最新评论