JS基础知识-es6(7)-export&import

模块是使用不同方式加载的JS文件

  • 模块代码只在严格模式下运行
  • 模块是个局部作用域,不会影响到全局
  • 模块顶级作用域this是个undefined
  • 模块里不能用html风格的注释
  • 模块可以导入导出,导出时使用exprot,是暴露给外部使用。任何没有被显示导出的变量、函数或类都会在模块内保持私有;导出时使用import

当同一个模块被import多次时,被import的模块只会产生一个模块实例,就是example.js这个文件只会被执行一次

// 在js中console只会打印一次
import { age } form './example.js';
import { sex } form './example.js'
import { name } form './example.js'

模块语法的限制:不能在其他语句或者表达式里使用,就是不能被包在任何代码块内

1. export
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

或者写成:

var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export {firstName, lastName, year};

可以导出函数

export function multiply(x, y) {
  return x * y;
}

导入时必须写大括号将模块名对应 :

import {firstName, lastName, year} from './modules';
2. 如果需要对导出的模块重命名 ( as )
function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
};

外面接收时就需要使用

import {streamV1, streamV2} from './moudules';
3. export必须要有对外的接口
// 报错
export 1;

// 报错
var m = 1;
export m;  

因为没有提供对外的接口(使用一个变量保存)。第一种写法直接输出1,第二种写法通过变量m,还是直接输出11只是一个值,不是接口。正确的写法是下面这样。

// 写法一
export var m = 1;  // 将1保存至m变量中导出

// 写法二
var m = 1;
export {m};        // 将1保存至m变量中导出

// 写法三
var n = 1;
export {n as m};   // 将1保存至m变量中导出
4. export default

不需要定义变量来专门保存,因为他会默认把模块输出到一个叫做default的变量或方法上。系统允许重命名

export default function () {
  console.log('foo');
}

export default {
    emoji: 2,
    a: 3
}

导入的时候可以自己定义名字接收:

import emoji from './modules';

使用的时候就可以通过自定义的名字来访问export default出来的属性和方法

emoji.a    // 3
5. export default 和 export的对比

(1) 一个模块可以有多个export,但只可以有一个export default

export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
export default {
    kimi : 2,
    a    : 3
}

(2)export default后面不能跟变量声明语句。
因为export default命令其实只是输出一个叫做default的变量,所以不可以重复定义。

// 正确
export var a = 1;

// 正确
var a = 1;
export default a;

// 错误
export default var a = 1;

(3)export default可以直接导出数值
export必须将数值保存到变量中,然后导出变量。

// 正确
export default 42;

// 报错
export 42;

(4)导入的时候,接收export default可以自定义名称,而export需要一一对应名称

// 接收模块中的emoji方法
import {emoji} from './modules'  

// 接收export default 并且自定义名称为emoji
import emoji from './modules'   
6. import
// 接收模块中的emoji方法
import {emoji} from './modules'  

// 接收export default 并且自定义名称为emoji
import emoji from './modules'   

需要重命名时:

// 将模块中的lastName重命名为surname使用
import { lastName as surname } from './profile';  

全部加载export的方法时,可以使用:

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

推荐阅读更多精彩内容