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表单验证插件formValidator(改进版)
Feb 03 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
Aug 02 Javascript
JS定时器用法分析【时钟与菜单中的应用】
Dec 21 Javascript
原生JS实现小小的音乐播放器
Oct 16 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
Aug 04 Javascript
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
Vue-axios-post数据后端接不到问题解决
Jan 09 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
Jun 01 Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 Javascript
详解如何运行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 301转向实现代码
2008/09/18 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
javascript模块化是什么及其优缺点介绍
2013/09/02 Javascript
js处理表格对table进行修饰
2014/05/26 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
koa中间件核心(koa-compose)源码解读分析
2020/06/15 Javascript
vue切换菜单取消未完成接口请求的案例
2020/11/13 Javascript
编程语言Python的发展史
2014/09/26 Python
python实现的守护进程(Daemon)用法实例
2015/06/02 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
navabi英国:设计师大码女装
2019/06/25 全球购物
史学专业毕业生求职信
2014/05/09 职场文书
员工升职自荐信
2015/03/27 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
2015年信息化建设工作总结
2015/07/23 职场文书
高中英语教学反思范文
2016/03/02 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis
PostgreSQL自动更新时间戳实例代码
2021/11/27 PostgreSQL