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对象与DOM对象之间的转换方法
Apr 15 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
计算世界完全对称日的js代码,粗糙版
Nov 04 Javascript
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
javascript中parentNode,childNodes,children的应用详解
Dec 17 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 Javascript
javascript瀑布流式图片懒加载实例
Jun 28 Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 Javascript
限时抢购-倒计时的完整实例(分享)
Sep 17 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 Javascript
js 函数性能比较方法
Aug 24 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中利用XML技术构造远程服务(下)
2006/10/09 PHP
十天学会php之第六天
2006/10/09 PHP
深入PHP数据缓存的使用说明
2013/05/10 PHP
探讨捕获php错误信息方法的详解
2013/06/09 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
用JavaScript页面不刷新时全选择,全删除(GridView)
2009/04/14 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
微信小程序 图片边框解决方法
2017/01/16 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
nodejs基础之多进程实例详解
2018/12/27 NodeJs
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
jQuery实现简单弹幕效果
2019/11/28 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
2019/12/20 jQuery
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
Python正则表达式知识汇总
2017/09/22 Python
Python批量更改文件名的实现方法
2017/10/29 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
俄罗斯女装店:12storeez
2019/10/25 全球购物
有创意的广告词
2014/03/18 职场文书
小学红领巾广播稿(3篇)
2014/09/13 职场文书
银行自荐信范文
2015/03/25 职场文书
工程技术员岗位职责
2015/04/11 职场文书
2019年亲子运动会口号
2019/10/11 职场文书
Java8中Stream的一些神操作
2021/11/02 Java/Android