import export

这两个家伙对应的就是es6自己的 module功能。

我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小工程,再用一种简单的方法把这些小工程连接在一起。

这有可能导致两个问题:

  1. 一方面js代码变得很臃肿,难以维护

  2. 另一方面我们常常得很注意每个script标签在html中的位置,因为它们通常有依赖关系,顺序错了可能就会出bug

在es6之前为解决上面提到的问题,我们得利用第三方提供的一些方案,主要有两种CommonJS(服务器端)和AMD(浏览器端,如require.js)

ES6中的 import 和 export 和Java中的 import 和 export 用法基本一样。

而现在我们有了es6的module功能,它实现非常简单,可以成为服务器和浏览器通用的模块解决方案。

ES6模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS和AMD模块,都只能在运行时确定这些东西。

看一个案例:

回顾下require.js的写法。假设有两个js文件: index.jscontent.js,现在想要在index.js中使用content.js返回的结果。

ES6前的引用写法

首先定义

//content.js
define('content.js', function(){
return 'A cat';
})

然后require

//index.js
require(['./content.js'], function(animal){
console.log(animal); //A cat
})

CommonJS写法

//index.js
var animal = require('./content.js') //content.js
module.exports = 'A cat'

ES6写法

//index.js
import animal from './content' //content.js
export default 'A cat'

export命令除了输出变量,还可以输出函数,甚至是类(react的模块基本都是输出类)

//content.js

export default 'A cat'
export function say(){
return 'Hello!'
}
export const type = 'dog'
//index.js

import { say, type } from './content'
let says = say()
console.log(`The ${type} says ${says}`) //The dog says Hello

这里输入的时候要注意:大括号里面的变量名,必须与被导入模块(content.js)对外接口的名称相同。

如果还希望输入content.js中输出的默认值(default), 可以写在大括号外面。

//index.js

import animal, { say, type } from './content'
let says = say()
console.log(`The ${type} says ${says} to ${animal}`)
//The dog says Hello to A cat

as 修改变量名

在开发中可能遇到变量名重名或需要修改变量名时,ES6中可以用关键字 as 一键更名。

//index.js

import animal, { say, type as animalType } from './content'
let says = say()
console.log(`The ${animalType} says ${says} to ${animal}`)
//The dog says Hello to A cat

本篇参考资料

ES6学习笔记目录

ES6学习笔记<一> let const class extends super

ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring

ES6学习笔记<三> 生成器函数与yield

ES6学习笔记<四> default、rest、Multi-line Strings

ES6学习笔记<五> Module的操作——import、export、as

ES6学习笔记<五> Module的操作——import、export、as的更多相关文章

  1. MongoDB学习笔记(五) MongoDB文件存取操作

    由于MongoDB的文档结构为BJSON格式(BJSON全称:Binary JSON),而BJSON格式本身就支持保存二进制格式的数据,因此可以把文件的二进制格式的数据直接保存到MongoDB的文档结 ...

  2. ES6学习笔记五(promise异步)

    知识点1:rosolve是执行下一步then() // Promise { let ajax=function(){ console.log('执行2'); return new Promise(fu ...

  3. ES6学习笔记五:Promise异步任务

    一:Promise对象 Promise对象代表一个异步操作,有三种状态:Pending(进行中).Resolved(已完成,又称 Fulfilled)和Rejected(已失败). 二:创建与使用 v ...

  4. ES6学习笔记<四> default、rest、Multi-line Strings

    default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...

  5. ES6学习笔记<三> 生成器函数与yield

    为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...

  6. ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring

    接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...

  7. ES6学习笔记<一> let const class extends super

    学习参考地址1  学习参考地址2 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015:也 ...

  8. C#可扩展编程之MEF学习笔记(五):MEF高级进阶

    好久没有写博客了,今天抽空继续写MEF系列的文章.有园友提出这种系列的文章要做个目录,看起来方便,所以就抽空做了一个,放到每篇文章的最后. 前面四篇讲了MEF的基础知识,学完了前四篇,MEF中比较常用 ...

  9. python学习笔记之module && package

    个人总结: import module,module就是文件名,导入那个python文件 import package,package就是一个文件夹,导入的文件夹下有一个__init__.py的文件, ...

随机推荐

  1. 自然语言处理工具HanLP被收录中国大数据产业发展的创新技术新书《数据之翼》

    在12月20日由中国电子信息产业发展研究院主办的2018中国软件大会上,大快搜索获评“2018中国大数据基础软件领域领军企业”,并成功入选中国数字化转型TOP100服务商. 图:大快搜索获评“2018 ...

  2. Linux平台下停止后台进程脚本编写

    1.场景说明 [root@master ~]# jps -m 33050 Jps -m 3299 NameNode 3747 ResourceManager 9028 ConsoleConsumer  ...

  3. golang GBK与UTF-8互转的例子

    package main import ( "code.google.com/p/mahonia" "fmt" ) func main() { //" ...

  4. 删除右键菜单中的Git

    在打开的注册表中找到:HKEY_CLASSES_ROOT,并点HKEY_CLASSES_ROOT前面的小三角:找到Directory,点击前面的小三角:找到Background,点击前面的小三角:打开 ...

  5. vi快捷键使用大全

    光标控制命令 命令 光标移动 h或^h 向左移一个字符 j或^j或^n 向下移一行 k或^p 向上移一行 l或空格 向右移一个字符 G 移到文件的最后一行 nG 移到文件的第n行 w 移到下一个字的开 ...

  6. 两招解决异常_Cannot find any information on property 'XXX' in a bean of type 'XXX'的问题

    第一招 在进行Java Web项目开发的时候,我碰到过下面这个异常: Cannot find any information on property 'XXX' in a bean of type ' ...

  7. PAT 甲级 1011 World Cup Betting (20)(20 分)

    1011 World Cup Betting (20)(20 分)提问 With the 2010 FIFA World Cup running, football fans the world ov ...

  8. 滚动效果marquee的用户体验不好,很少被用到,一般用jquery替代

    滚动效果marquee的用户体验不好,很少被用到,一般用jquery替代

  9. Java-Runoob-高级教程-实例-时间处理:02. Java 实例 - 获取当前时间

    ylbtech-Java-Runoob-高级教程-实例-时间处理:02. Java 实例 - 获取当前时间 1.返回顶部 1. Java 实例 - 获取当前时间  Java 实例 以下实例演示了如何使 ...

  10. jQuery 事件的命名空间简单了解

    原文地址:http://www.jb51.net/article/43626.htm   用 jQuery 绑定和解绑事件监听器都是非常简单的,怎样精确地解绑其中一个监听器?我们需要了解一下事件的命名 ...