ES6-模块导入导出

基本用法

命名导出(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)); // 121
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

转载于:https://www.cnblogs.com/xuepei/p/6475811.html

ES6-模块导入导出相关推荐

前端学习（1524）：ES6模块导入和导出
nodejs模块导入导出
为了让Node.js的文件可以相互调用,Node.js提供了一个简单的模块系统. 创建 hello.js 文件 exports.world = function () {console.log('He ...
模块定义文件导出类_浓缩的就是精华——ES6模块精炼讲解
概述在 ES6 前, 实现模块化使用的是 RequireJS 或者 seaJS(分别是基于 AMD 规范的模块化库, 和基于 CMD 规范的模块化库). ES6 引入了模块化,其设计思想是在编译时就 ...
你真的搞懂ES6模块的导入导出规则了吗
前言模块作为ES6规范的核心部分之一,在实际项目开发中经常会看到它的身影,那么我们是否真正了解它的相关规则呢,今天就带大家一起了解一下模块的导入导出规则导入 ES6模块的导入(即import)大致 ...
关于JavaScript的模块（CommonJS, AMD, CMD, ES6模块）的理解
Javascript模块化就是解决将代码进行分隔,作用域隔离,模块之间的依赖管理等多个方面问题. 这样的优点不言而喻:1.可维护性2.命名空间私有化,可以避免污染全局环境3.代码重用,通过模块可以方便 ...
ES6的导入和导出模块
ES6的导入和导出模块 1.导出模块 1.1普通的export导出方式 //先定义后导出 var name = 'zjl' var age = 18 function test1(){...} fun ...
ES6 导入导出总结
1.nodejs - 采用CommonJs规范规范要求导出和导入使用关键字: 导出: module.exports 或 exports (导出的就是对象以及里面的key和value值) m ...
ES6模块化（默认导入导出、按需导入导出、直接导入）
一.介绍ES6模块化 ES6 模块化规范是浏览器端与服务器端通用的模块化规范,ES6模块化的出现前端开发者不再需要额外的学习其他的模块化规范. 二.ES6 模块化规范中定义: 1.每个 js 文件都 ...
boost::multiprecision模块实现导入/导出 cpp_int 的位到 8 位无符号值的向量相关的测试程序
boost::multiprecision模块实现导入/导出 cpp_int 的位到 8 位无符号值的向量相关的测试程序实现功能 C++实现代码实现功能 boost::multiprecisio ...
让模块支持“导入”“导出”功能
让模块支持"导入""导出"功能 DNN模块可以支持导入导出功能,通过将模块内容导入到XML文件可以便于模块内容备份和转移,也可将模块内容事先以XML格式保存通过 ...

ES6-模块导入导出

ES6-模块导入导出相关推荐

最新文章

热门文章