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 相关文章推荐
JavaScript中的Screen屏幕对象
Jan 16 Javascript
javascript之通用简单的table选项卡实现(二)
May 09 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
Nov 23 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
教你如何在Node.js中使用jQuery
Aug 28 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 Javascript
Vue自定义指令详解
Jul 28 Javascript
深入理解node.js http模块
Jan 24 Javascript
微信小程序实现星级评价
Nov 20 Javascript
vue中touch和click共存的解决方式
Jul 28 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
thinkphp路由规则使用示例详解和伪静态功能实现(apache重写)
2014/02/24 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
PHP获取当前相对于域名目录的方法
2015/06/26 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
面向对象的编程思想在javascript中的运用上部
2009/11/20 Javascript
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
web前端开发也需要日志
2010/12/09 Javascript
iframe如何动态创建及释放其所占内存
2014/09/03 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
Bootstrap CSS组件之按钮组(btn-group)
2016/12/17 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
angular6的响应式表单的实现
2018/10/10 Javascript
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
JS中的继承操作实例总结
2020/06/06 Javascript
一篇文章看懂JavaScript中的回调
2021/01/05 Javascript
详解Python命令行解析工具Argparse
2016/04/20 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
Python3爬取英雄联盟英雄皮肤大图实例代码
2018/11/14 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
Python自动化运维之Ansible定义主机与组规则操作详解
2019/06/13 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
python 协程中的迭代器,生成器原理及应用实例详解
2019/10/28 Python
详解Django admin高级用法
2019/11/06 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
采购员岗位职责
2013/11/15 职场文书
劳动实践课感言
2014/02/01 职场文书
家长会学生演讲稿
2014/04/26 职场文书
学风建设演讲稿
2014/09/12 职场文书
承兑汇票延期证明
2015/06/23 职场文书
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB