基本用法

命名导出(named exports)

可以直接在任何变量或者函数前面加上一个 export 关键字,就可以将它导出。

例如:

export const sqrt = Math.sqrt;
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}

然后在另一个文件中这样引用:

import { square, diag } from 'lib';
console.log(square(11)); //
console.log(diag(4, 3));

但下面这种写法是错误的:

import lib from 'lib';
square = lib.square;

因为

import {square, dialog} from 'lib' ;

是import的特有语法,其实import的时候并不是直接把整个模块以对象的形式引入的。

如果你希望能通过 lib.square 的形式来写,你应该这样导入:

import * as lib from 'lib';
square = lib.square;

不过值得注意的一点是,如果你直接用babel编译,执行是会报错的。因为 babel 并不会完全编译 modules,他只是把 ES6 的modules语法编译成了 CMD 的语法,所以还需要用 browserify 之类的工具再次编译一遍。 
如果你发现 browserify 找不到 lib,可以改成 from ‘./lib’ 试试。

默认导出(default exports)

上面的写法需要指定一个名字。其实很多时候一个模块只导出一个变量,根本没必要指定一个名字。

还有一种用法叫默认导出,就是指定一个变量作为默认值导出:

/*------ myFunc.js ------*/
export default function () { ... }; /*------ main1.js ------*/
import myFunc from 'myFunc';
myFunc();

默认导出的时候不需要指定一个变量名,它默认就是文件名。

这里的区别不仅仅是不用写名字,而是导出的默认值就是模块本身,而不是模块下面的一个属性,即是 import myFunc from 'myFunc'; 而不是 import {myFunc} from 'myFunc';

命名导出结合默认导出

export default function (obj) {
...
};
export function each(obj, iterator, context) {
...
}
export { each as forEach };

上面的代码导出了一个默认的函数,然后由导出了两个命名函数,我们可以这样导入:

 import _, { each } from 'underscore';

注意这个逗号语法,分割了默认导出和命名导出

其实这个默认导出只是一个特殊的名字叫default , 你也可以直接用他的名字,把它当做命名导出来用,下面两种写法是等价的:

import { default as foo } from 'lib';
import foo from 'lib';

同样的,你也可以通过显示指定 default 名字来做默认导出, 下面两种写法是一样的:

//------ module1.js ------
export default 123; //------ module2.js ------
const D = 123;
export { D as default };

ES6仅支持静态导入导出

ES6规范只支持静态的导入和导出,也就是必须要在编译时就能确定,在运行时才能确定的是不行的,下面的代码就是不对的:

//动态导入
var mylib;
if (Math.random()) {
mylib = require('foo');
} else {
mylib = require('bar');
} //动态导出
if (Math.random()) {
exports.baz = ...;
}

为什么要这么做,主要是两点:

1. 性能,在编译阶段即完成所有模块导入,如果在运行时进行会降低速度

2.更好的检查错误,比如对变量类型进行检查;

转自:http://blog.csdn.net/lihongxun945/article/details/49031383

ES6-模块导入导出的更多相关文章

  1. Node.js模块导入导出

    这篇文章本来是想模块导入导出和事件循环一起写的,但是感觉一起写的话会太长了,所以就分开两篇文章写吧.下一篇会重点介绍一下js中的事件循环,js代码到底是以何种顺序去执行的呢?我相信你看懂了事件循环再去 ...

  2. ES6 模块导入import 导出export 和module.export

    ES6中新增了模块的导入和导出功能 在实际过程中可以使用 import 和 export 对模块进行导入和导出操作,具体如下 1. 名字导入/导出  (导入名字必须与导出的一致,导入时需要用花括号) ...

  3. es6模块化导入导出

    模块化指的就是将一个大程序拆分成若干个互相依赖的小文件,然后在用简单的方法拼装起来. 在 ES6 之前,JS没有模块化系统,社区制定了一些模块加载方案 最主要的有 CommonJS(Asynchron ...

  4. [vue]js模块导入导出export default

    webstrom调试未授权问题解决 分es6语法和node语法 参考 参考 - export default s1 1.仅能出现1次default 2.导入时候可以随便命名 3,导出时候不必写{} - ...

  5. [转] ES6 import/export:模块导入导出方式

    export导出语法 // default exports export default 42; export default {}; export default []; export defaul ...

  6. javascript模块导入导出

    第一次知道javascript有模块的概念通常都是使用<script>标签进行引入,不过只能在html文件上使用 增加的模块就如同php里的include.require可以使用引入的内容 ...

  7. js模块导入/导出大全

    说明 module.exports与exports是CommonJS的规范 export与export default是es6规范 require 是 AMD规范引入方式 import是es6的一个语 ...

  8. ES5与ES6常用语法教程之 ①函数写法、创建对象、导入导出模块方式

    函数写法区别 计算a, b两个数字之和,有返回值 es5 写法 function add(a, b) { return a + b; } es6 写法(箭头函数) let add = (a, b) = ...

  9. 你真的搞懂ES6模块的导入导出规则了吗

    前言 模块作为ES6规范的核心部分之一,在实际项目开发中经常会看到它的身影,那么我们是否真正了解它的相关规则呢,今天就带大家一起了解一下模块的导入导出规则 导入 ES6模块的导入(即import)大致 ...

  10. es6 中的模块导入与nodejs 中模块的导入的异同!

    我们知道es6 的模块导入导出是通过import 和 export 来实现,而nodejs的模块导入导出是通过require 和module.exports 来实现,那么它们有什么异同吗? 请看如下: ...

随机推荐

  1. Serverless+SCF=打倒服务器,解放程序员

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由云加社区技术沙龙 发表于云+社区专栏 "你做什么工作的?" "程序员." "那正好, ...

  2. Gradient Optimization

    Gradient Optimization Gradient Descent Batch Gradient Descent Mini-Batch Gradient Descent Stochastic ...

  3. Hbuilder编辑App时,ajax跨域访问失败问题

    今天试着用Hbuilder写app的前段显示页面,在第一步时就被打住了,ajax异步调用服务器的登录接口时,报错, 显示这样的错误 XMLHttpRequest cannot loadhttp://w ...

  4. 第三章 使用java实现面向对象 多态

    第三章 多态 一.编写父子类 1.多态是具有表现多种型生态的能力的特征,同一个实现接口,使用不同的实例而执行不同的操作 2.一个引用类型,使用不同的实例而执行不同操作.(父类引用子类对象) 使用多态的 ...

  5. PHP学习9——MySQL数据库

    主要内容: MySQL的启动 MySQL数据库操作 数据库表设计 创建和查看表 修改表结构 MySQL语句操作 数据库备份与恢复 PHP操作MySQL数据库 面向对象的数据库操作 MySQL数据库是目 ...

  6. Shiro - 关于Realm

    之前在Authentication和Authorization中也提到Realm. 无论是身份验证还是权限验证,无论数据以什么方式存在,我们都需要访问一些数据并将其转换为Shiro可以识别的格式. 通 ...

  7. OOP 第一章作业总结

    程序设计结构分析 类图分析 第一次作业 由于第一次作业完成的功能比较简单,而且出于对面向对象设计理念不熟悉(其实现在也不是很熟悉,逃),整个程序设计的非常简单.通过类图(见下)可以看出,程序只有两个类 ...

  8. swagger2配置和使用

    1.导入swagger2 <dependency> <groupId>io.springfox</groupId> <artifactId>spring ...

  9. JavaScript事件流--事件冒泡、目标与事件捕获

    1.事件冒泡 微软提出了名为事件冒泡的事件流.事件冒泡可以形象地比喻为把一颗石头投入水中,泡泡会一直从水底冒出水面.也就是说,事件会从最内层的元素开始发生,一直向上传播,直到document对象. 因 ...

  10. 第1章 初识CSS3

    什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主流浏览器chrome.safari.firefox.opera.甚至360都已经支 ...