ES6 import和export

export

在es6中一个文件可以默认为一个模块,模块通过export向外暴露接口,实现模块间交互等功能

1. export相关语法

exportDemo.js文件

export var m = 1;
// 等价于
var m = 1;
export { m }

// 导出多个
var a = 1;
var b = 2;
var c = 3;
export { a, b, c }
// 导出对象
export const student = {
  name: 'Megan',
  age: 18
}
// 导出函数
export function add(a, b) {
  return a + b;
}

错误写法1

var k = 1;
export k;

对应正确写法

export { k }

错误写法2

const obj = {
  id: 1,
  value: 'lalala'
};
export obj;

对应正确写法

export { obj };

错误写法3

function sum(a, b){
  return a + b;
}
export sum;

对应正确写法

export { sum };

导出接口别名

const person = {
  name: '张呆',
  age: 18,
  gender: "male"
}
export { person as boy }
2. export default

exportDemo.js

//一个文件即模块中只能存在一个export default语句,导出一个当前模块的默认对外接口
export default var i = 0;
3. import

以上述exportDemo.js为例,在importDemo.js中利用import进行导入

import variable from './exportDemo';
console.log(variable); // 0;

代码解释:上述import语句仅仅导入了exportDemo.js文件中定义为默认的接口即i = 0,所以打印输出0

import variable, { sum, boy } from './exportDemo';
console.log(variable); // 0;
console.log(sum);// function(a, b) { return a + b; }
console.log(boy); // { name: '张呆', age: 18, gender: male}
4. 相关注意

import和export只能出现在模块的最外层(顶层)结构中,否则报错

由于es6模块是静态加载的,因此import和export不能出现在判断等动态语句中

5. ES6 Module

es6 module 中模块加载方式是静态加载,因此import和export不能出现在判断等动态语句
采用import获取的是模块接口的引用,当模块内部发生改变是,import出的接口也会对应改变【与commonjs规范不同,commonjs中获得的是接口运行结果的缓存】
es6 module内部自动采用严格模式
对于es6 module的其他详细内容参考阮一峰老师的 ES6 Module

6. commonjs规范

commonJS规范规定,每一个模块内部,module变量代表当前模块,这个变量是一个对象,它的exports属性(即module.exports)是对外的接口,加载某个模块其实就是加载module.exports属性

// test.js
var x = 5;
var add = function(a, b){
  return a + b;
}
module.exports = {x, add}

在另一个文件中加载test.js

var test = require('./test.js');
console.log(test.x); // 5
console.log(test.add(1, 2)); // 3

使用import语法加载commonjs模块

// commonjsDemo.js
const textConst = {
  COPY: "复制",
  RUN: "运行"
}
module.exports textConst
// importCommonjsDemo.js
import { COPY, RUN } from './commonjsDemo'
console.log(COPY); // 复制
console.log(RUN); // 运行
6.1 module对象

Node中提供了一个Module构建函数,所有模块都是Module的实例

function Module(...){
  this.id = id;
 this.exports = {};
 this.parent = parent;
 // ....
}

每个模块内部,都有一个module对象,表示当前模块,具有以下属性

module.id 模块的识别符,通常是带有绝对路径的模块文件名
module.filename 模块的文件名,带有绝对路径
module.loaded 返回一个布尔值,表示模块是否已经加载完成
module.parent 返回一个对象,表示调用该模块的模块
module.children 返回一个数组,表示该模块要用到的其他模块
module.exports 表示模块对外输出的值

module.exports
  该属性表示当前模块对外的接口,其他模块加载时,实际上是读取module.exports变量
exports
 为了方便,node为每个模块提供了一个exports变量,指向module.exports。这等同于在每个模块的头部,存在这样一行命令
var exports = module.exports;
 这样做的结果就是在输出接口的同时,可以向exports对象上添加方法;需要注意的是不要将exports重新指向别的值,否则将会切断exports和module.exports之间的联系

6.2 require命令

基本功能是读入并执行一个javascript文件,并返回该模块的exports对象,如果没有指定模块路径,则报错
require的加载规则
后缀默认为.js
当nodejs中遇到require(X)时,按照下面的顺序进行处理

如果X为内置模块,返回该模块,不再继续执行
如果X以"./"或者"/"或者"../"开头
 根据X所在父模块确定X的绝对路径
 将X当成文件,依次查找下面的问题件,只要其中一个存在,则返回存在的文件,不再继续执行
  X
  X.js

X.json
  X.node
 将X当成目录,依次查找下面文件,只要其中一个存在,就返回该文件,不再继续执行
  X/package.json
  X/index.js
  X/index.json
  X/index.node
如果X不带路径
 根据X所在的父模块,确定X可能的安装目录
 依次在每个目录中,将X当做文件名或者目录名加载
抛出"not found"

参考:http://www.ruanyifeng.com/blog/2015/05/require.html
参考:http://javascript.ruanyifeng.com/nodejs/module.html
本文目的仅仅是为了个人查找阅读等提供方便

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,616评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,020评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,078评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,040评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,154评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,265评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,298评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,072评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,491评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,795评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,970评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,654评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,272评论 3 318
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,985评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,223评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,815评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,852评论 2 351

推荐阅读更多精彩内容

  • 在ES6之前,模块加载方案,最主要的有CommonJS和AMD两种。前者用于服务器,后者用于浏览器。ES6实现了模...
    oWSQo阅读 518评论 0 0
  • 概述 历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用...
    emmet7life阅读 616评论 0 0
  • [TOC] 参考阮一峰的ECMAScript 6 入门参考深入浅出ES6 let和const let和const都...
    郭子web阅读 1,775评论 0 1
  • 谁为你琢磨如此灵动的双眼 是雪花落在睫上的冬天 还是春花凋零的那一瞬间 白纱被吹进云朵旁边 你落地成仙 和风中你微...
    石应语_Vince阅读 175评论 0 1
  • 原创申明:本文参加“守望先锋周年庆典有奖征文”,本人承诺文章内容为原创。 寒霜相伴 冰雪相依 美人容颜如玉 冰墙挡...
    电竞周美灵阅读 294评论 0 4