JavaScript模块详解(8)

日期：2020-05-11 栏目：程序人生浏览：次

4、由于import是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构。

/ 报错
import { 'f' + 'oo' } from 'my_module';

// 报错
let module = 'my_module';
import { foo } from module;

// 报错
if (x === 1) {
 import { foo } from 'module1';
} else {
 import { foo } from 'module2';
}

5、最后，import语句会执行所加载的模块，因此可以有下面的写法。

import 'lodash';
//上面代码仅仅执行lodash模块，但是不输入任何值。

默认导出(export default)

每个模块支持我们导出一个没有名字的变量，使用关键语句export default来实现.

export default function(){
   console.log("I am default Fn");
  }
//使用export default关键字对外导出一个匿名函数，导入这个模块的时候，可以为这个匿名函数取任意的名字

//取任意名字均可
import sayDefault from "./module-B.js";
sayDefault();
//结果：I am default Fn

1、默认输出和正常输出的比较

// 第一组
export default function diff() { // 输出
 // ...
}

import diff from 'diff'; // 输入

// 第二组
export function diff() { // 输出
 // ...
};

import {diff} from 'diff'; // 输入

//上面代码的两组写法，第一组是使用export default时，对应的import语句不需要使用大括号；第二组是不使用export default时，对应的import语句需要使用大括号。

export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能对应一个方法。

2、因为export default本质是将该命令后面的值，赋给default变量以后再默认，所以直接将一个值写在export default之后。

/ 正确
export default 42;

// 报错
export 42;

//上面代码中，后一句报错是因为没有指定对外的接口，而前一句指定外对接口为default。

3、如果想在一条import语句中，同时输入默认方法和其他变量，可以写成下面这样。

import _, { each } from 'lodash';

//对应上面代码的export语句如下
export default function (){
 //...
}
export function each (obj, iterator, context){
 //...
}

export 与 import 的复合写法

如果在一个模块之中，先输入后输出同一个模块，import语句可以与export语句写在一起。

export { foo, bar } from 'my_module';

// 等同于
import { foo, bar } from 'my_module';
export { foo, bar };

/ 接口改名
export { foo as myFoo } from 'my_module';

// 整体输出
export * from 'my_module';

转载注明出处：http://www.heiqu.com/126.html

JavaScript模块详解(8)

相关推荐