在使用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

End
菜单加载中...

JavaScript ES6 module 模块的更多相关文章

  1. ECMA Script 6_模块加载方案 ES6 Module 模块语法_import_export

    1. 模块加载方案 commonJS 背景: 历史上,JavaScript 一直没有模块(module)体系, 无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来. 其他语言都有这项功能: ...

  2. (转)关于ES6的 模块功能 Module 中export import的用法和注意之处

    关于ES6的 模块功能 Module 中export import的用法和注意之处 export default 的用法 export default命令用于指定模块的默认输出.显然,一个模块只能有一 ...

  3. 实现javascript下的模块组织

    前面的话 java有类文件.Python有import关键词.Ruby有require关键词.C#有using关键词.PHP有include和require.CSS有@import关键词,但是对ES5 ...

  4. ES6 的模块系统

    原文地址:https://hacks.mozilla.org/2015/08/es6-in-depth-modules/ ES6 是 ECMAScript 第 6 版本的简称,这是新一代的 JavaS ...

  5. 深入 CommonJs 与 ES6 Module

    目前主流的模块规范 UMD CommonJs es6 module umd 模块(通用模块) (function (global, factory) { typeof exports === 'obj ...

  6. 再次梳理AMD、CMD、CommonJS、ES6 Module的区别

    AMD AMD一开始是CommonJS规范中的一个草案,全称是Asynchronous Module Definition,即异步模块加载机制.后来由该草案的作者以RequireJS实现了AMD规范, ...

  7. 通过ES6 Module看import和require区别

    前言 说到import和require,大家平时开发中一定不少见,尤其是需要前端工程化的项目现在都已经离不开node了,在node环境下这两者都是大量存在的,大体上来说他们都是为了实现JS代码的模块化 ...

  8. JavaScript ES6中export、import与export default的用法和区别

    前言 相信很多人都使用过export.export default.import,然而它们到底有什么区别呢? 在看他们之间的区别之前,我们先来看看它们的用法. ES6 import和export的用法 ...

  9. 前端模块化IIFE,commonjs,AMD,UMD,ES6 Module规范超详细讲解

    目录 为什么前端需要模块化 什么是模块 是什么IIFE 举个栗子 模块化标准 Commonjs 特征 IIFE中的例子用commonjs实现 AMD和RequireJS 如何定义一个模块 如何在入口文 ...

随机推荐

  1. 【转】彻底理解js中this的指向,不必硬背。

    首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然 ...

  2. WKWebView强大的新特性

    iOS11对WKWebView的功能进一步完善,新增如下功能: Manager Cookies Fileter unwanted content Provide custom resources 下面 ...

  3. C盘里的桌面文件移到E盘里了,然后E盘里的文件都显示到桌面上了,怎么将桌面文件还原回C盘

    1 . 直接按Windows键+R,打开"运行"对话框,在输入框中输入"regedit"命令,会打开注册表编辑窗口: 2.打开注册表文件将HKEY_CURREN ...

  4. 给 Android 开发者的一点福利:免费模拟面试

    写在前面 大家好,我是「南尘」,一个爱分享爱学习的 Android 技术控.目前在 GitHub 上有着差不多 6k 的个人项目 Star 数,之前也为其他开源库贡献过大量的源码.在各大博客网站上也有 ...

  5. Appium dmg 安装:[TypeError: Cannot read property 'replace' of undefined]

    问题原因:appium dmg 版本没有默认node.js 解决方案:安装稳定版的node.js.(官网下载安装即可.) 验证:命令行输入:node -v  查看版本号 npm -v  查看版本号

  6. 3、ABPZero系列教程之拼多多卖家工具 项目修改及优化

    本篇内容杂而简单,不需要多租户.不需要多语言.使用MPA(多页面).页面加载速度提升…… 刚登录系统会看到如下界面,这不是最终想要的效果,以下就一一来修改. 不需要多租户 AbpZeroTemplat ...

  7. react 开发知识准备

    react react使用教程 babel babel 可用于ES6转换为ES5,jsx转换为原生js. ES6 ES6 语法 webpack webpack打包工具,它把不同的.相互依赖的静态资源都 ...

  8. 备份的一些小tip

    // npm官方镜像 npm config set registry=http://registry.npmjs.org // 亚马逊S3 host 219.76.4.4 github-cloud.s ...

  9. 为什么vertical-align不起作用

    先看一段代码 <style> .title { margin:50px; color:blue; } .title span { font-size:24px; } .title span ...

  10. 属性getter和setter

    我们知道,对象属性是由名字.值和一组特性(attribute)构成的.在ECMAScript5 中,属性值可以用一个或两个方法替代,这两个方法就是getter和setter.由getter和sette ...