zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    初识python 2.x与3.x 区别
    装饰器
    函数的进阶
    Spring Boot启动问题:Cannot determine embedded database driver class for database type NONE
    22.Spring Cloud Config安全保护
    23.Spring Cloud Bus 无法更新问题(踩坑) Spring cloud config server Could not fetch remote for master remote
    24.Spring Cloud之Spring Cloud Config及Spring Cloud Bus
    Spring Boot整合Spring Data Elasticsearch 踩坑
    项目中Spring Security 整合Spring Session实现记住我功能
    32.再谈SpringBoot文件上传
  • 原文地址:https://www.cnblogs.com/xuepei/p/6475811.html
Copyright © 2011-2022 走看看