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插件tipswindown与hintbox冲突
Nov 05 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
jquery中使用ajax获取远程页面信息
Nov 13 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
JQuery中clone方法复制节点
May 18 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
Jan 22 Javascript
Window.Open打开窗体和if嵌套代码
Apr 15 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 Javascript
基于javascript原生判断DOM是否加载完毕
Oct 14 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自动选择 连接本地还是远程数据库
2010/12/02 PHP
Apache中php.ini的设置方法
2013/02/28 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
PHP fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
用javascript获取textarea中的光标位置
2008/05/06 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
layer ui 导入文件之前传入数据的实例
2019/09/23 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
php使用递归与迭代实现快速排序示例
2014/01/23 Python
Python中apply函数的用法实例教程
2014/07/31 Python
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
Python闭包函数定义与用法分析
2018/07/20 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
Anaconda+VSCode配置tensorflow开发环境的教程详解
2020/03/30 Python
python3 简单实现组合设计模式
2020/07/02 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
Amaze UI 文件选择域的示例代码
2020/08/26 HTML / CSS
意大利和国际最佳时尚品牌:Drestige
2019/12/28 全球购物
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
医学生实习自我鉴定
2013/09/27 职场文书
人力资源管理专业学生自我评价
2013/11/20 职场文书
办公室内勤岗位职责范本
2013/12/09 职场文书
2014年党员公开承诺书范文
2014/03/28 职场文书
活动总结报告格式
2014/05/09 职场文书
商铺门前三包责任书
2014/07/25 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书
家长对孩子的寄语
2015/02/26 职场文书