ES6中module模块化开发实例浅析


Posted in Javascript onApril 06, 2017

本文实例讲述了ES6中module模块化开发。分享给大家供大家参考,具体如下:

多人开发JavaScript时伴随着命名冲突等问题,先后有了模拟块级作用域、命名空间、模块化开发等方法。

之前,模块化开发一直是由第三方库来模拟的,比较知名的有AMD规范和CMD规范。

两个规范分别对应requirejs和seajs。

而现在,ES6提出了自己的模块化统一标准。

一个ES6的模块是一个包含了js代码的文件。ES6里没有所谓的module关键字,一个模块就是一个普通的脚本文件,除了以下两个区别:

1. ES6中的模块自动开启严格模式。
2. 模块中可以使用import和export。

导入和导出

我们可以通过import和export关键字将函数或对象导入和导出模块
先来说说export,在模块中声明的任何东西都是默认私有的,如果想对其他模块public,必须将那部分代码export。最简单的方法就是添加一个export关键字:

// kittydar.js
export function detectCats(canvas, options) {
var kittydar = new Kittydar(options);
return kittydar.detectCats(canvas);
}
export class Kittydar {
... several methods doing image processing ...
}
// This helper function isn't exported.
function resizeCanvas() {
...
}
...

不再有跨文件或跨模块的全局变量,export声明的那部分就是这个模块的public API。而在另外一个文件中,我们可以导入这个模块并且使用detectCat方法:

// demo.js - Kittydar demo program
import {detectCats} from "kittydar.js";
function go() {
var canvas = document.getElementById("catpix");
var cats = detectCats(canvas);
drawRectangles(canvas, cats);
}

如果需要导入多个模块中的接口,如下:

import {detectCats, Kittydar} from "kittydar.js";

我们也可以通过一行代码将本模块所有需要public的方法公开:

export {detectCats, Kittydar};

这样就不用一个个地添加export关键字了。

命名冲突

上面介绍了模块中的导入和导出,那么如果导入的变量名和模块中的变量名冲突了应该如何是好呢?放心,ES6允许我们为导入的内容重命名

import {flip as flipOmelet} from "eggs.js";
import {flip as flipHouse} from "real-estate.js";

这样就将从eggs模块来的flip改为了flipOmelet,从real-estate模块来的flip改为了flipHouse,从而避免了冲突。

同样的,我们也可以在模块导出变量名时进行重命名:

function v1() { ... }
function v2() { ... }
export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};

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

Javascript 相关文章推荐
js或css实现滚动广告的几种方案
Jan 28 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
javascript特殊用法示例介绍
Nov 29 Javascript
jquery实现点击弹出层效果的简单实例
Mar 03 Javascript
PHPExcel中的一些常用方法汇总
Jan 23 Javascript
jQuery动画与特效详解
Feb 01 Javascript
Jquery promise实现一张一张加载图片
Nov 13 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
12条写出高质量JS代码的方法
Jan 07 Javascript
如何更好的编写js async函数
May 13 Javascript
在vue项目中引入vue-beauty操作方法
Feb 11 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 Javascript
ES6中class类用法实例浅析
Apr 06 #Javascript
ES6中Proxy代理用法实例浅析
Apr 06 #Javascript
ES6中Symbol类型用法实例详解
Apr 06 #Javascript
vue中mint-ui环境搭建详细介绍
Apr 06 #Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 #Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 #Javascript
ES6中的箭头函数实例详解
Apr 06 #Javascript
You might like
一个简单的php实现的MySQL数据浏览器
2007/03/11 PHP
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
推荐一些非常不错的javascript学习资源站点
2007/08/29 Javascript
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
2017/05/07 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
javaScript实现游戏倒计时功能
2018/11/17 Javascript
在微信小程序中使用图表的方法示例
2019/04/25 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
微信小程序实现锚点跳转
2020/11/23 Javascript
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
简洁的十分钟Python入门教程
2015/04/03 Python
详解Python中的序列化与反序列化的使用
2015/06/30 Python
python实现文本去重且不打乱原本顺序
2016/01/26 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
python中退出多层循环的方法
2018/11/27 Python
python 公共方法汇总解析
2019/09/16 Python
python调用摄像头的示例代码
2020/09/28 Python
python利用platform模块获取系统信息
2020/10/09 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
校班主任推荐信范文
2013/12/03 职场文书
小学竞选班干部演讲稿
2014/08/20 职场文书
婚内分居协议书范文
2014/11/26 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
教师教育心得体会
2016/01/19 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python
详细总结Python常见的安全问题
2021/05/21 Python