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


Posted in Javascript onApril 15, 2019

本文实例讲述了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参数

  • 参考链接: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程序设计有所帮助。

Javascript 相关文章推荐
jQuery 版元素拖拽原型代码
Apr 25 Javascript
Knockout text绑定DOM的使用方法
Nov 15 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 Javascript
动态设置form表单的action属性的值的简单方法
May 25 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
ES6数组的扩展详解
Apr 25 Javascript
vuejs事件中心管理组件间的通信详解
Aug 09 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
Vuejs实现购物车功能
Nov 05 Javascript
解决angular2 获取到的数据无法实时更新的问题
Aug 31 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
详解如何运行vue项目
Apr 15 #Javascript
vue单页面在微信下只能分享落地页的解决方案
Apr 15 #Javascript
vue--vuex详解
Apr 15 #Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
Apr 15 #Javascript
小程序数据通信方法大全(推荐)
Apr 15 #Javascript
前端面试知识点目录一览
Apr 15 #Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
Apr 15 #Javascript
You might like
php调用Google translate_tts api实现代码
2013/08/07 PHP
PHP魔术引号所带来的安全问题分析
2014/07/15 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
php生成Android客户端扫描可登录的二维码
2016/05/13 PHP
js 浮动层菜单收藏
2009/01/16 Javascript
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
2010/05/26 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
jQuery AJAX timeout 超时问题详解
2016/06/21 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
AngularJS之页面跳转Route实例代码
2017/03/10 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
[02:44]2014DOTA2 国际邀请赛中国区预选赛 大神红毯秀
2014/05/25 DOTA
[01:28:24]NAVI vs VG Supermajor 败者组 BO3 第三场 6.5
2018/06/06 DOTA
Python编程之多态用法实例详解
2015/05/19 Python
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
pycharm 安装JPype的教程
2019/08/08 Python
python实现的读取网页并分词功能示例
2019/10/29 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
《狼》教学反思
2014/03/02 职场文书
财务部绩效考核方案
2014/05/04 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
终止劳动合同协议书
2014/10/05 职场文书
机动车登记业务委托书
2014/10/08 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
python xlwt模块的使用解析
2021/04/13 Python
超级详细实用的pycharm常用快捷键
2021/05/12 Python