ES6中export , export default , import模块系统总结
最近在学习使用Webpack3的时候发现,它已经可以在不使用babel的情况下使用ES6的模块加载功能了。(不包括webpack.config.dev.js文件。
因为它是是webpack的配置文件,是nodejs直接运行处理的。所以仍需使用CommonJS规范,其他被webpack编译的js模块可以使用es6写法。)
说到ES6的模块加载功能,我们先复习一下CommonJS规范吧:
一 . CommonJS规范规定,在每个模块内的module
变量代表当前模块。这个变量的module.exports属性
是对外开放的接口。
加载某个模块,其实是加载此模块的module.exports
属性。
exampleA.js
var x = 5;
var addX = function (value) {
return value + x;
};
module.exports.x = x;
module.exports.addX = addX;
上面代码通过module.exports对外暴露
出变量x
和函数addX
。
每个模块的module对象默认拥有这些属性:
module.id
模块的识别符,通常是带有绝对路径的模块文件名。
module.filename
模块的文件名,带有绝对路径。
module.loaded
返回一个布尔值,表示模块是否已经完成加载。
module.parent
返回一个对象,表示调用该模块的模块。
module.children
返回一个数组,表示该模块要用到的其他模块。
module.exports
表示模块对外输出的值。
二 . export变量:为了方便,每个模块内都有一个指向module.exports的对象 exports。
三 .require
方法:用于加载模块。
读取并执行一个JavaScript文件,然后返回该模块的exports对象。
exampleB.js
var exampleA = require('./exampleA.js');//加载上文的模块 console.log(exampleA.x); //
console.log(exampleA.addX(1)); //
以上是Commonjs的常用功能。其他功能参考阮大神的:http://javascript.ruanyifeng.com/nodejs/module.html。
ES6中模块规范:
一 . export方法:
用法1:
// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
用法2:
// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export { firstName, lastName, year};
//export { firstName as obj1, lastName as obj2, year as obj3};//可以使用as
关键字重命名
与CommonJS不同的是:export
语句的输出接口,与其对应的值是动态绑定关系,即通过该接口,可以取到模块内部实时的值。
二 . import方法
import {firstName, lastName, year} from './profile.js';
//import { lastName as surname } from './profile.js';
//import * as profile from './profile.js';
import
命令具有提升效果,会提升到整个模块的头部,首先执行。
三 . export default 方法
// export-default.js
export default function () {
console.log('foo');
}
//其他模块加载该模块时,import
命令可以为该匿名函数指定任意名字。
// import-default.js
import customName from './export-default';
customName(); // 'foo'
上面的import方法
,可以用任意名称指向export-default.js(指向)
输出的方法,这时就不需要知道原模块输出的函数名。
这时import
命令后面,不使用大括号。
如果想在一条import
语句中,同时引入default接口和其他接口,可以写成下面这样。
import _, { each, each as forEach } from 'lodash';
四 . import() 方法
动态加载模块,返回一个 Promise 对象。(nodejs中使用require.ensure实现)
import('./someModules.js')
.then(module => {
console.log(module);
})
.catch(err => {
console.log(err);
});
ES6模块与CommonJS模块的区别:
一 . CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。
CommonJS 模块是运行时加载js文件,ES6 模块是编译时加载模块,输出接口。
二 . 第二个差异是因为 CommonJS 加载的是一个对象(即module.exports
属性),该对象只有在脚本运行完才会生成。而 ES6 模块不是对象,
它的对外接口只是一种静态定义,在代码静态解析阶段就会生成。(然而nodejs中对ES6模块的实现任是基于自身的CommonJS 并没有实现静态加载)
CommonJS 模块输出的是值的拷贝,也就是说,一旦输出一个值,模块内部的变化就影响不到这个值。
//CommonJS
// lib.js
var counter = 3;
function incCounter() {
counter++;
}
module.exports = {
counter: counter,
incCounter: incCounter,
};
上面代码输出内部变量counter
和改写这个变量的内部方法incCounter
。然后,在main.js
里面加载这个模块。
//CommonJS
// main.js
var mod = require('./lib'); console.log(mod.counter); //
mod.incCounter();
console.log(mod.counter); //
上面代码说明,lib.js
模块加载以后,它的内部变化就影响不到输出的mod.counter
了。这是因为mod.counter
是对模块内counter对象值的拷贝。
除非写成一个函数,才能实时获取mod.counter的变动。
//CommonJS
// lib.js
var counter = 3;
function incCounter() {
counter++;
}
module.exports = {
get: counter() {
return counter
},
incCounter: incCounter,
};
ES6模块:
// lib.js
export let counter = 3;
export function incCounter() {
counter++;
} // main.js
import { counter, incCounter } from './lib';
console.log(counter); //
incCounter();
console.log(counter); //
结果说明,ES6 模块输入的变量counter
是活的(闭包),完全反应其所在模块lib.js
内部的变化。
注:参考阮一峰大神的《ECMAScript6入门》。
ES6中export , export default , import模块系统总结的更多相关文章
- JavaScript ES6中,export与export default
自述: 本来是对new Vue()和export default比较懵的,查了一下,发现我理解错了两者的关系,也没意识到export与export default的区别,先简单的记录一下基本概念,后续 ...
- ES6中的export,import ,export default
ES6模块主要有两个功能:export和importexport用于对外输出本模块(一个文件可以理解为一个模块)变量的接口import用于在一个模块中加载另一个含有export接口的模块.也就是说使用 ...
- ES6中的export以及import的使用多样性
模块功能主要由两个命令构成:export和import.export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能. 一.export导出模块使用部分的几种方式 一个模块就是一 ...
- ES6中的export和import
1.ES6中的模块加载 ES6 模块是编译时加载,编译时就能确定模块的依赖关系,以及输入和输出的变量,相比于CommonJS 和 AMD 模块都只能在运行时确定输入输出变量的加载效率要高. 1.1.严 ...
- 解决es6中webstrom不支持import的一个简单方法
代码如下: export_one.js的代码如下: export function one() { console.log('one'); } export function two() { cons ...
- JavaScript ES6中export、import与export default的用法和区别
前言 相信很多人都使用过export.export default.import,然而它们到底有什么区别呢? 在看他们之间的区别之前,我们先来看看它们的用法. ES6 import和export的用法 ...
- JavaScript ES6中export及export default的区别以及import的用法
本文原创地址链接:http://blog.csdn.net/zhou_xiao_cheng/article/details/52759632,未经博主允许不得转载. 相信很多人都使用过export.e ...
- JavaScript ES6中export及export default的区别
相信很多人都使用过export.export default.import,然而它们到底有什么区别呢? 在JavaScript ES6中,export与export default均可用于导出常量.函 ...
- ES6中export及export default的区别
相信很多人都使用过export.export default.import,然而它们到底有什么区别呢? 在JavaScript ES6中,export与export default均可用于导出常量.函 ...
随机推荐
- SQL Server授权购买简单介绍
SQL Server授权购买简单介绍 之前有同事问我,使用盗版序列号的SQL Server到底有没有性能限制,之前本人一直没有深入研究过,后来经过一番资料搜集和查证,汇总成这篇文章 微软的SQL Se ...
- Kafka的基本概念与安装指南(单机+集群同步)
最近在搞spark streaming,很自然的前端对接的就是kafka.不过在kafka的使用中还是遇到一些问题,比如mirrormaker莫名其妙的丢失数据[原因稍后再说],消费数据offset错 ...
- Python个人项目--豆瓣图书个性化推荐
项目名称: 豆瓣图书个性化推荐 需求简述:从给定的豆瓣用户名中,获取该用户所有豆瓣好友列表,从豆瓣好友中找出他们读过的且评分5星的图书,如果同一本书被不同的好友评5星,评分人数越多推荐度越高. 输入: ...
- C#图解教程第一章 C#和.NET框架
1.1 在.NET之前 C#发音:see shap 1.1.1 20世纪90年代后期的Windows编程 20世纪90年代后期各语言缺点: 1.纯Win32 API不是面向对象的,而且工作量比M ...
- redmine 安装(Centos 6.5 x64)
参考:http://www.linuxidc.com/Linux/2015-03/115545.htm 平台搭建 1)基础环境 yum -y install libyaml-devel zlib-de ...
- and,or
where语句的and or 连接 $map['_logic'] = 'and'; $map['_logic'] = 'or';
- swift中的AnyHashable
AnyHashable是调和objc和Swift的产物 典型的场景是,objc下无泛型的NSDictionary到了Swift下,会变成什么?(典型例子是苹果来的推送消息) [Any: Any],这肯 ...
- 2017 年的 人生 hard 模式终于结束了,2018年回归初心(二)
今天周末, 深圳的天气简直好的不像话.好了,我们继续之前的话题往下聊. >>>猎头 : 关于猎头这个行业,以笔者的感觉来说 一般你工作年限未超过三年的话,你是很难遇到猎头来推送你的简 ...
- C# Main函数详解
2018-01-15 22:10:59 一.Main()方法的简介 1.唯一性.一般情况下,一个C#可执行程序只有一个Main函数,作为程序入口.但是在某些情况(如单元测试中),程序拥有多个Main ...
- from Require.js to Webpack(why)
写在前面: 本文主要参考 From Require.js to Webpack - Part 1 (the reasons),原文作者将项目从 require.js 转移到了 webpack 并详细说 ...