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)); //
- 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-模块导入导出的更多相关文章
- Node.js模块导入导出
这篇文章本来是想模块导入导出和事件循环一起写的,但是感觉一起写的话会太长了,所以就分开两篇文章写吧.下一篇会重点介绍一下js中的事件循环,js代码到底是以何种顺序去执行的呢?我相信你看懂了事件循环再去 ...
- ES6 模块导入import 导出export 和module.export
ES6中新增了模块的导入和导出功能 在实际过程中可以使用 import 和 export 对模块进行导入和导出操作,具体如下 1. 名字导入/导出 (导入名字必须与导出的一致,导入时需要用花括号) ...
- es6模块化导入导出
模块化指的就是将一个大程序拆分成若干个互相依赖的小文件,然后在用简单的方法拼装起来. 在 ES6 之前,JS没有模块化系统,社区制定了一些模块加载方案 最主要的有 CommonJS(Asynchron ...
- [vue]js模块导入导出export default
webstrom调试未授权问题解决 分es6语法和node语法 参考 参考 - export default s1 1.仅能出现1次default 2.导入时候可以随便命名 3,导出时候不必写{} - ...
- [转] ES6 import/export:模块导入导出方式
export导出语法 // default exports export default 42; export default {}; export default []; export defaul ...
- javascript模块导入导出
第一次知道javascript有模块的概念通常都是使用<script>标签进行引入,不过只能在html文件上使用 增加的模块就如同php里的include.require可以使用引入的内容 ...
- js模块导入/导出大全
说明 module.exports与exports是CommonJS的规范 export与export default是es6规范 require 是 AMD规范引入方式 import是es6的一个语 ...
- ES5与ES6常用语法教程之 ①函数写法、创建对象、导入导出模块方式
函数写法区别 计算a, b两个数字之和,有返回值 es5 写法 function add(a, b) { return a + b; } es6 写法(箭头函数) let add = (a, b) = ...
- 你真的搞懂ES6模块的导入导出规则了吗
前言 模块作为ES6规范的核心部分之一,在实际项目开发中经常会看到它的身影,那么我们是否真正了解它的相关规则呢,今天就带大家一起了解一下模块的导入导出规则 导入 ES6模块的导入(即import)大致 ...
- es6 中的模块导入与nodejs 中模块的导入的异同!
我们知道es6 的模块导入导出是通过import 和 export 来实现,而nodejs的模块导入导出是通过require 和module.exports 来实现,那么它们有什么异同吗? 请看如下: ...
随机推荐
- Spring Session解决分布式Session问题的实现原理
使用Spring Session和Redis解决分布式Session跨域共享问题 上一篇介绍了如何使用spring Session和Redis解决分布式Session跨域共享问题,介绍了一个简单的案例 ...
- resteasy上传单个文件/多个文件到阿里云服务器
代码如下: ExcelServerController.java package com.xgt.controller; import com.xgt.bean.bs.ExcelBean; impor ...
- 深入理解JavaScript系列(45):代码复用模式(避免篇)
介绍 任何编程都提出代码复用,否则话每次开发一个新程序或者写一个新功能都要全新编写的话,那就歇菜了,但是代码复用也是有好要坏,接下来的两篇文章我们将针对代码复用来进行讨论,第一篇文避免篇,指的是要尽量 ...
- 100个实用的CSS技巧,以及遇见的问题和解决方案。
前言 本篇文章将会持续更新,我会将我遇见的一些问题,和我看到的实用的CSS技巧记录下来,本篇文章会以图文混排的方式写下去.具体什么时候写完我也不清楚,反正我的目标是写100个. 本案例都是经本人实测 ...
- Java - 网络IO的阻塞
最近学习时碰到事件驱动和非阻塞的相关知识,随之想到了Java中的Reactor.io与nio的一些东西:在前辈的博客上翻了翻.复习复习,在此记录一番. 实在找不到比较大点的东西,于是随便弄了个压缩包, ...
- vs2017启动调试,点击浏览器或输入后回车浏览器闪退,调试中断
vs2017在启动调试后,浏览器运行,点击地址栏刚输入几个字符,mmmmm居然闪退了! 什么情况呢?测试一下,换其他浏览器进行调试,偶尔不会有问题, 可是第二天......还是一下 于是浏览器——ww ...
- poj 1141 Brackets Sequence ( 区间dp+输出方案 )
http://blog.csdn.net/cc_again/article/details/10169643 http://blog.csdn.net/lijiecsu/article/details ...
- C# 索引器的使用
索引器允许类或者结构的实例按照与数组相同的方式进行索引取值,索引器与属性类似,不同的是索引器的访问是带参的. 索引器和数组比较: (1)索引器的索引值(Index)类型不受限制 (2)索引器允许重载 ...
- ArcGIS DataStore手册——常见问题篇
第三章:ArcGIS DataStore常见问题处理 1.DataStore使用的数据库是什么? 从安装后的内容和配置完DataStore中Server Manager中的信息来看,DataStore ...
- Perl学习笔记(3)----遍历哈希表的一个容易疏忽的地方
今天做 Google的 Code Jam 上的一道题目:https://code.google.com/codejam/contest/351101/dashboard#s=p2,用Perl语言解答的 ...