• 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

  • 相关阅读:
    地图校正方法心得
    投影的心得点滴
    android 打包 apk keystore
    scp命令详解
    ubuntu11.10真机调试nopermissions
    android adb server is out of date
    ubuntu删除默认jdk
    android 运行 错误 总结
    android file .apk is not a valid zip file adb install
    ubuntu系统目录结构
  • 原文地址:https://www.cnblogs.com/xuepei/p/6475811.html
Copyright © 2020-2023  润新知