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遇到html5的一些表单属性
Jul 05 Javascript
jQuery Select下拉框操作小结(推荐)
Jul 22 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
微信小程序如何获取用户手机号
Jan 26 Javascript
React Native自定义控件底部抽屉菜单的示例
Feb 08 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
vuex实现的简单购物车功能示例
Feb 13 Javascript
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
vue  elementUI 表单嵌套验证的实例代码
Nov 06 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 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中抽象类和接口的概念以及区别
2013/06/27 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
微信支付开发动态链接Native支付
2016/07/12 PHP
jQuery生成asp.net服务器控件的代码
2010/02/04 Javascript
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
批量修改标签css样式以input标签为例
2014/07/31 Javascript
jQuery实现获取绑定自定义事件元素的方法
2015/12/02 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
Vue实现计算器计算效果
2020/08/17 Javascript
JSONObject与JSONArray使用方法解析
2020/09/28 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
Python入门_条件控制(详解)
2017/05/16 Python
Python实现向服务器请求压缩数据及解压缩数据的方法示例
2017/06/09 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
解决Python对齐文本字符串问题
2019/08/28 Python
解析python实现Lasso回归
2019/09/11 Python
pandas将多个dataframe以多个sheet的形式保存到一个excel文件中
2019/10/10 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
奖学金自我鉴定范文
2013/10/03 职场文书
生产部岗位职责范文
2014/02/07 职场文书
行政文秘岗位职责范本
2014/02/10 职场文书
合伙经营协议书
2014/04/18 职场文书
趣味运动会策划方案
2014/06/02 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
青年教师听课心得体会
2016/01/15 职场文书
python实现批量提取指定文件夹下同类型文件
2021/04/05 Python
防止web项目中的SQL注入
2021/12/06 MySQL
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS