JavaScript ES6 module 模块
在使用JavaScript开发大型项目时,模块开发概念是一个必须考虑的问题。其目的就是通过命名空间对各类业务对象进行一定的封装,防止命名冲突。
本篇着重介绍ES6 module中的export和import概念。
1. ES5的模块支持方案
在ES6之前,JavaScript本身没有模块支持,但社区创造了令人印象深刻的解决方案。两个最重要的(也是不相容的)标准是:AMD 和 CommonJS。
1.1 AMD
说明:AMD,全称为Asynchronous Module Definition,即异步模块定义。
特点:其模块和依赖都可以进行异步加载。
// 定义AMD模块
define('User/UserGrid', // 模块ID
['UserM'], // 依赖文件
function(userM) { // 初始化函数,依赖文件以参数形式加入
}
); // 使用AMD模块
require(['User/UserGrid'],
function(userGrid) {
}
);
1.2 CommonJS
说明:CommonJS模块规范初衷是用于node.js服务器端,以提供额外的功能,如:IO、文件系统等功能。
特点:
①同步加载;只有加载完成,才能执行后面的操作。
②缓存加载;第一次加载时会把内容存入缓存,以后的加载都是从缓存获取。
示例:
// math.js(定义模块)
exports.add = function(a, b) {
return a + b;
}; // app.js(使用模块)
var math = require('./math'); var rs = math.add(1, 2);
console.log(rs);
了解更多AMD 与 CommonJS 知识可参考此文章:Writing Modular JavaScript With AMD, CommonJS & ES Harmony
2. ES6 module
ES6 module 结合了CommonJS和AMD的优点:类似CommonJS,具有简洁的语法,对循环依赖的支持;类似AMD,支持异步加载和有条件的模块加载。
ES6 module 使用 export 导出模块的内容,并使用 import 导入模块的内容。
2.1 浏览器原声支持
使用之前,先看下各浏览器对原生ES6 module的支持情况:Chrome61及61+、Edge16及16+版本都已支持
使用方式:
以Chrome为例,在引入ES6 module 的JS文件时,使用属性 type="module" 即可:
<script type="module" src="js/math.js"></script>
<script type="module" src="js/app.js"></script>
2.2 export 导出(定义模块)
创建ES6模块时,可使用export关键字导出(对外提供)模块的内容,如函数、对象以及原始变量等等。
export 导出方案有2种:Named exports(命名导出;每个模块可有多个)和 Default exports(默认导出;每个模块只能一个)。
1) Named exports 命名导出
说明:使用 export + 名称 的形式导出模块的内容。
注意:在 import 导入过程中,需指定这些名称。
语法:
// 1)声明时导出
export var myVar1 = 'a';
export let myVar2 = 'b';
export const MY_CONST = 'c';
export function myFunc() {} // 2)声明后导出
var myVar3 = 'a';
export { myVar3 }; // 3)别名导出
var myVar4 = 'a';
export { myVar4 as myVar };
示例:
// math.js
export function add(a, b) {
return a + b;
} // app.js:导入含有命名导出的模块时,需要指定成员名称
import { add } from './math.js';
console.log(add(1, 2)); // => 3 // demo.html
<script type="module" src="js/math.js"></script>
<script type="module" src="js/app.js"></script>
2) Default exports 默认导出
说明:使用 export default 导出模块默认的内容,每个模块只能有一个 export default。
语法:
// 1)声明时导出
export default expression;
export default function () {} // 2)别名设置为default导出
export default function name1() {}
export { name1 as default };
示例:默认导出声明的是一个表达式,通常没有名字,导入时需指定模块名称。
// math.js
export function add(a, b) {
return a + b;
}
export default function cube(x) {
return x * x * x;
} // app.js:导入默认导出的模块时,需要指定模块名称
import cube from './math.js';
console.log(cube(3)); // => 27
// 若想同时导入含有默认导出、命名导出的模块,只需要导入时用','隔开
// import cube, { add } from './math.js'; // demo.html
<script type="module" src="js/math.js"></script>
<script type="module" src="js/app.js"></script>
2.3 import 导入模块
使用 import 可导入创建的模块。
语法:
// 1)导入模块的默认导出内容
import defaultExport from 'module-name'; // 2)导入模块的命名导出内容
import { export1, export2 } from 'module-name';
import { export as alias } from 'module-name'; // 修改别名
import * as name from 'module-name'; // 导入模块内的所有命名导出内容 // 3)导入模块的默认导出、命名导出
import defaultExport, { export1, export2 } from 'module-name';
import defaultExport, * as name from 'module-name';
1) 导入默认导出
说明:导入默认导出的模块时,需要指定模块名称
示例:
// math.js
export default function cube(x) {
return x * x * x;
} // app.js:导入默认导出的模块时,需要指定模块名称
import cube from './math.js';
console.log(cube(3)); // => 27
2) 导入命名导出
说明:导入模块时可使用大括号包含指定命名成员;也可以用 * as moduleName 的形式把此模块的所有命名导出作为某个对象的成员。
示例:
// math.js
export function add(a, b) {
return a + b;
} // app.js:指定使用math模块的add命名导出
import { add } from './math.js';
console.log(add(1, 2)); // => 3 // 导入所有的命名导出作为math对象的成员
import * as math from './math.js';
console.log(math.add(1, 2)); // => 3
3) 仅导入模块
说明:仅导入模块时,只会执行模块的全局函数,不会导入任何成员。
示例:
// math.js
export function add(a, b) {
return a + b;
}
(function() {
console.log('hello math.js');
})(); // app.js
import { add } from './math.js'; // => hello math.js
4. 扩展阅读
ECMAScript 6 modules: the final syntax :http://2ality.com/2014/09/es6-modules-final.html
MDN export :https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
MDN import:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
JavaScript ES6 module 模块的更多相关文章
- ECMA Script 6_模块加载方案 ES6 Module 模块语法_import_export
1. 模块加载方案 commonJS 背景: 历史上,JavaScript 一直没有模块(module)体系, 无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来. 其他语言都有这项功能: ...
- (转)关于ES6的 模块功能 Module 中export import的用法和注意之处
关于ES6的 模块功能 Module 中export import的用法和注意之处 export default 的用法 export default命令用于指定模块的默认输出.显然,一个模块只能有一 ...
- 实现javascript下的模块组织
前面的话 java有类文件.Python有import关键词.Ruby有require关键词.C#有using关键词.PHP有include和require.CSS有@import关键词,但是对ES5 ...
- ES6 的模块系统
原文地址:https://hacks.mozilla.org/2015/08/es6-in-depth-modules/ ES6 是 ECMAScript 第 6 版本的简称,这是新一代的 JavaS ...
- 深入 CommonJs 与 ES6 Module
目前主流的模块规范 UMD CommonJs es6 module umd 模块(通用模块) (function (global, factory) { typeof exports === 'obj ...
- 再次梳理AMD、CMD、CommonJS、ES6 Module的区别
AMD AMD一开始是CommonJS规范中的一个草案,全称是Asynchronous Module Definition,即异步模块加载机制.后来由该草案的作者以RequireJS实现了AMD规范, ...
- 通过ES6 Module看import和require区别
前言 说到import和require,大家平时开发中一定不少见,尤其是需要前端工程化的项目现在都已经离不开node了,在node环境下这两者都是大量存在的,大体上来说他们都是为了实现JS代码的模块化 ...
- JavaScript ES6中export、import与export default的用法和区别
前言 相信很多人都使用过export.export default.import,然而它们到底有什么区别呢? 在看他们之间的区别之前,我们先来看看它们的用法. ES6 import和export的用法 ...
- 前端模块化IIFE,commonjs,AMD,UMD,ES6 Module规范超详细讲解
目录 为什么前端需要模块化 什么是模块 是什么IIFE 举个栗子 模块化标准 Commonjs 特征 IIFE中的例子用commonjs实现 AMD和RequireJS 如何定义一个模块 如何在入口文 ...
随机推荐
- 【转】彻底理解js中this的指向,不必硬背。
首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然 ...
- WKWebView强大的新特性
iOS11对WKWebView的功能进一步完善,新增如下功能: Manager Cookies Fileter unwanted content Provide custom resources 下面 ...
- C盘里的桌面文件移到E盘里了,然后E盘里的文件都显示到桌面上了,怎么将桌面文件还原回C盘
1 . 直接按Windows键+R,打开"运行"对话框,在输入框中输入"regedit"命令,会打开注册表编辑窗口: 2.打开注册表文件将HKEY_CURREN ...
- 给 Android 开发者的一点福利:免费模拟面试
写在前面 大家好,我是「南尘」,一个爱分享爱学习的 Android 技术控.目前在 GitHub 上有着差不多 6k 的个人项目 Star 数,之前也为其他开源库贡献过大量的源码.在各大博客网站上也有 ...
- Appium dmg 安装:[TypeError: Cannot read property 'replace' of undefined]
问题原因:appium dmg 版本没有默认node.js 解决方案:安装稳定版的node.js.(官网下载安装即可.) 验证:命令行输入:node -v 查看版本号 npm -v 查看版本号
- 3、ABPZero系列教程之拼多多卖家工具 项目修改及优化
本篇内容杂而简单,不需要多租户.不需要多语言.使用MPA(多页面).页面加载速度提升…… 刚登录系统会看到如下界面,这不是最终想要的效果,以下就一一来修改. 不需要多租户 AbpZeroTemplat ...
- react 开发知识准备
react react使用教程 babel babel 可用于ES6转换为ES5,jsx转换为原生js. ES6 ES6 语法 webpack webpack打包工具,它把不同的.相互依赖的静态资源都 ...
- 备份的一些小tip
// npm官方镜像 npm config set registry=http://registry.npmjs.org // 亚马逊S3 host 219.76.4.4 github-cloud.s ...
- 为什么vertical-align不起作用
先看一段代码 <style> .title { margin:50px; color:blue; } .title span { font-size:24px; } .title span ...
- 属性getter和setter
我们知道,对象属性是由名字.值和一组特性(attribute)构成的.在ECMAScript5 中,属性值可以用一个或两个方法替代,这两个方法就是getter和setter.由getter和sette ...