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 相关文章推荐
ExtJS 2.0实用简明教程 之Ext类库简介
Apr 29 Javascript
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
Jun 05 Javascript
jQuery Ajax异步处理Json数据详解
Nov 05 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
jQuery CSS3自定义美化Checkbox实现代码
May 12 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 Javascript
vue+element导航栏高亮显示的解决方式
Nov 12 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
JavaScript实现放大镜效果代码示例
Apr 29 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生成缩略图的类代码
2008/10/02 PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
php颜色转换函数hex-rgb(将十六进制格式转成十进制格式)
2013/09/23 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
PHP中define() 与 const定义常量的区别详解
2019/06/25 PHP
javascript事件模型代码
2007/07/01 Javascript
javascript 简练的几个函数
2009/08/29 Javascript
js中更短的 Array 类型转换
2011/10/30 Javascript
使用js 设置url参数
2013/07/08 Javascript
JS对象转换为Jquery对象实现代码
2013/12/29 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
js删除指定位置超链接中含有百度与360的标题
2021/01/06 Javascript
[01:25]DOTA2自定义游戏灵园鬼域等你踏足
2015/10/30 DOTA
python网络编程示例(客户端与服务端)
2014/04/24 Python
用Python输出一个杨辉三角的例子
2014/06/13 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
JAVA的事件委托机制和垃圾回收机制
2014/09/07 面试题
中学教师培训制度
2014/01/31 职场文书
致跳远运动员广播稿
2014/02/11 职场文书
2014学雷锋活动总结
2014/03/09 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
优秀教师事迹材料
2014/12/15 职场文书
先进教师事迹材料
2014/12/16 职场文书
如何书写读后感?(附范文)
2019/07/26 职场文书
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL