`

es6 中的export

 
阅读更多
https://juejin.im/post/5998625f518825244d20327c

什么是模块

自动运行在严格模式下并且没有办法退出运行的 JavaScript 代码。在模块的顶部, this 的值是 undefined;模块不支持 HTML 代码风格的代码注释。模块仅导入和导出你需要的绑定。

导出

用 export 导出


// 导出数据
export const NAME = "柚子";

  // 这个 age 变量是此模块私有的
let age = 18;

  // 导出函数
export function add(a, b) {
     return a + b;
}

function subtract(a, b) {
     return a - b
}
  // 导出引用
export subtract;
任何未显式到处的变量、函数或类都是模块私有的,外部无法访问。

导入

用 import 导入

语法:

import { NAME, add, subtract } from './example.js';
// 此语句的含义是,从 example.js 文件中导入需要的标识符。
// 可以导入一个或多个

add(1, 2) // 3

NAME = 1; // 抛错,不能给导入的绑定重新赋值
导入整个模块

    import * as example from './example.js';

    cconsole.log(example.NAME); // 柚子
    example.add(1, 2) // 3
这种导入格式被称为命名空间导入;在 example.js 文件中不存在 example 对象,所以它作为 example.js 中所有导出成员的命名空间对象而被创建。

  import { NAME } from './example.js';
  import { add } from './example.js';
  import { subtract } from './example.js';
不管 import 语句中把一个模块写了几次,该模块都只对执行一次。

注意: export 语句不允许出现在 if 语句中,也不能在一条语句中使用 import,只能在顶部使用它。

if(isTrue) {
     export add; // 这样写会报错
}
function importSomething() {
     import { add } from './example.js'; // 这样写会报错
}
重命名

通过 as 关键字来指定函数在模块外应该被叫做什么名字

// example.js
function sum(a, b) {
    return a + b
}
export { sum as add }; // 这里 sum 是本地名称,add 是导出时使用的名称

// app.js
import { add } from './example.js';
// 在导入的时候,必须要使用 add
// example.js
export function sum(a, b) {
    return a + b
}

// app.js
import { sum as add } from './example.js';
// 在导入时用 add 来重命名 sum

add(1, 2) // 3
默认值

每个模块只能有一个默认的导出值。
default 表示这是一个默认的导出。

// 导出默认值
export default function(a, b) {
    return a + b;
}
也可以是:

// 导出默认值
function sum(a, b) {
    return a + b;
}
export default sum;
如果要导入默认值的话,就不能加中括号了:

import sum from './example.js';
如果文件中既有默认值,也有非默认值:

export let age = 18;

export default function(a, b) {
     return a + b;
}
那么导入的时候就需要这样写:

import add, { age } from './example.js';
// 在 import 语句中,默认值必须排在非默认值之前
结尾

所以,看完了上面的解析之后,现在知道下面的写法是什么意思了吧。

import React, { Component, PropTypes } from 'react';

export default class App extends Component {

}
分享到:
评论

相关推荐

    JavaScript ES6中export、import与export default的用法和区别

    ES6 import和export的用法 ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范。commonjs主要应用于服务器,实现同步加载,如nodejs。AMD规范应用于浏览器,如requirejs,为异步加载。同时还有CMD规范...

    浅谈es6中export和export default的作用及区别

    下面小编就为大家分享一篇浅谈es6中export和export default的作用及区别,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

    ES6使用export和import实现模块化的方法

    主要介绍了ES6使用export和import实现模块化的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    node.js的exports、module.exports与ES6的export、export default深入详解

    但是引入模块我看到用 require的方式,再联想到咱们的ES6各种export 、export default。 阿西吧,头都大了…. 头大完了,那我们坐下先理理他们的使用范围。 require: node 和 es6 都支持的引入 export / import : ...

    cjs2es6export:将 CommonJS 模块赋值转换为 ES6 模块导出语句

    cjs2es6export 将 CommonJS/ 分配的子集转换为声明。 用法: var cjs2es6export = require('cjs2es6export'); var src = "module.exports = function() { return 42; };" var newSrc = cjs2es6export(src); // ...

    详解ES6 export default 和 import语句中的解构赋值

    解构赋值 有如下 config 对象 const config = { host: 'localhost', port: 80 } 要获取其中的 host 属性 ...export default { host: 'localhost', port: 80 } 在 app.js 中 import config.js // app.j

    es6常用方法.txt

    es6的常用方法,es6初学者可以看下:关于箭头函数与function的区别,reduce() 方法说明及应用,export 与import是es6中新增模块功能最主要的两个命令,es6基础系列二:Number

    ES6模块化的import和export用法方法总结

    ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范。commonjs主要应用于服务器,实现同步加载,如nodejs。AMD规范应用于浏览器,如...import用于在一个模块中加载另一个含有export接口的模块。 也就

    MEVN-ES6-Template:使用ES6 importexport语法的MEVN堆栈模板

    MEVN-ES6-模板使用ES6导入/导出语法的MEVN堆栈模板。设置github操作自动客户端构建工作流。 只需将“ NAME”和“ EMAIL”添加到“设置/秘密”即可。 工作流设置为删除先前的/ server / public文件夹并构建新的客户端...

    jasmine-es6:使用 ES6 编写 Jasmine 规范

    茉莉花 & ES6 ES6 源代码和 Jasmine 规范的简单示例。 确保您的系统上有节点,然后: npm install && npm test

    ES6模块import导入导出export.md

    es6 语法 模块化 适合框架开发的小白

    ES6+ 开发电商网站的账号体系 JS SDK

    本章主要对后面用到最多的几个ES6+语法进行前置讲解,包括import和export,let和const,箭头函数等。使用html-bundler搭建课程环境,讲解一些webpack和babel一些最新的相关插件和配置 第5章 登录模块开发-骨架及...

    ES6中module模块化开发实例浅析

    本文实例讲述了ES6中module模块化开发。分享给大家供大家参考,具体如下: 多人开发JavaScript时伴随着命名冲突等问题,先后有了模拟块级作用域、命名空间、模块...2. 模块中可以使用import和export。 导入和导出 我们

    NodeJS模块与ES6模块系统语法及注意点详解

    1.ESM规范 就是ES6 Module 各浏览器和服务端 目前常用的就是浏览器端的RequireJS、NodeJS、以及ESM CommonJS语法分析 module.export 关键 1.module.exports实质上是一个对象,最后模块导出的对象就是这个引用指向...

Global site tag (gtag.js) - Google Analytics