九、react-native的export笔记

发表于 | 分类于

export是我们接触最多的一个js关键字了。每个js文件要供其他文件使用，都需要导出自己。被导出的对象可以是：函数，类以及var、let或const声明的变量。

  1. 一个js文件可以有多个export语句：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    //------ lib.js ------
    export const sqrt = Math.sqrt;
    export function square(x) {
    	return x * x;
    }
    export function add (x, y) {
    	return x + y;
    }
     
    //------ main.js ------
    import { square, add } from 'lib';
    console.log(square(10)); //100

  2. 一个js文件可以用一个export导出多个对象

    1
    2
    3
    4
    5
    6
    7
    8
    9
    //------ lib.js ------
    const sqrt = Math.sqrt;
    function square(x) {
    	return x * x;
    }
    function add (x, y) {
    	return x + y;
    }
    export {sqrt, square, add}

可以直接导入整个模块，此时的main.js模块将变成这样

1
2
3
4
//------ main.js ------
import * as lib from 'lib';
console.log(lib.square(10)); //100
console.log(lib.add(2,4));  //6

  1. 一个模块(一个js文件)只可以有一个默认导出：
    1
    2
    3
    4
    5
    6
    //------ myFunc.js ------
    export default function() {...};
     
    //------ main.js ------
    import myFunc from 'myFunc';
    myFunc();

但可以有多个export:

1
2
3
4
5
6
//------ lib.js ------
export default function() {...};
export function each() {...};
 
//------ main.js ------
import _,{ each } from 'lib';

  1. 为了解决导出命名冲突的问题，ES6为你提供了重命名的方法解决这个问题，当你在导入名称时可以这样做

    1
    2
    3
    4
    // 这两个模块都会导出以`flip`命名的东西。
    // 要同时导入两者，我们至少要将其中一个的名称改掉。
    import {flip as flipOmelet} from "eggs.js";
    import {flip as flipHouse} from "real-estate.js";

  2. 同样，当你在导出的时候也可以重命名。你可能会想用两个不同的名称导出相同的值，这样的情况偶尔也会遇到：

    1
    2
    3
    4
    5
    6
    7
    8
    function v1() { ... }
    function v2() { ... }
     
    export {
      v1 as streamV1,
      v2 as streamV2,
      v2 as streamLatestVersion
    };

  3. 对于默认导出，只是导出了一个特殊的名字叫 default，你也可以就直接用他的名字，把它当做命名导出来用，下面两种写法是等价的：

    1
    2
    import { default as foo } from 'lib';
    import foo from 'lib';

  4. 作为中转模块导出： 有时候为了避免上层模块导入太多的模块，我们可能使用底层模块作为中转，直接导出另一个模块的内容如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    //------ myFunc.js ------
    export default function() {...};
     
    //------ lib.js ------
    export * from 'myFunc';
    export function each() {...};
     
    //------ main.js ------
    import myFunc,{ each } from 'lib';