Module 的基本语法（笔记）

2019-09-29  本文已影响0人  灰灰_82a6

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

export

1.一个模块就是一个独立的文件，它里面的所有变量外部无法访问。外部想要访问某一个变量，就先要使用export导出。

// xxx.js 文件就可以视为一个模块，下面导出它里面的变量
export var userName = 'pang';
export var age= 21;

或者使用大括号的方式 ( 推荐使用）：

var userName = 'pang';
var age= 21;
export  {userName ,age}

2.export 也可以导出一个函数。

export function multiply(x, y) {
  return x * y;
};

注意以下的导出方式是不对的：
export命令规定的是对外的接口, 1只是一个值，不是一个接口。（函数导出也是同理）

// 报错
export 1;

// 报错
var m = 1;
export m;

正确写法：

// 写法一
export var m = 1;
// 写法二
var m = 1;
export {m};
// 写法三
var n = 1;
export {n as m};

3.通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名，并且可以重命名多次。

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

4.export输出的接口是动态的，通过该接口，可以取到模块内部实时的值。

import 命令

1.使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。

 import  {userName ,age} from  ./xxx.js;
  1. 也可以通过as给输入的变量重命名。

3.import命令输入的变量都是只读的，不允许在加载模块的脚本里面，改写接口。

import {a} from './xxx.js'
a = {}; // Syntax Error : 'a' is read-only;

上面代码中，脚本加载了变量a，对其重新赋值就会报错，因为a是一个只读的接口。但是，如果a是一个对象，改写a的属性是允许的。但是不建议这样做 。

4.不能使用表达式和变量。

// 报错  因为在静态执行的时候，没有办法拿到module 的值
let module = 'my_module';
import { foo } from module;
  1. import语句会执行所加载的模块, 如下仅仅执行lodash模块，但是不输入任何值。并且加载了两次lodash，但是只会执行一次
import 'lodash';
import 'lodash';

export default

1.export default指定一个模块的默认输出。

// xxx.js
export default function () {
  console.log('foo');
}

其他模块加载该模块时，import命令可以为该匿名函数指定任意名字, 这时就不需要知道原模块输出的函数名。

// xxx.js
import customName from './export-default';
正常输出和默认输出对比
// 第一组
export default function crc32() { // 输出
  // ...
}

import crc32 from 'crc32'; // 输入

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

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

2.本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字。

export {add as default};
// 等同于
export default add;

正是因为export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句。
特别注意： export default输出的是变量，export输出的是一个接口

// 正确
export var a = 1;
// 正确
var a = 1;
export default a;
// 错误
export default var a = 1;

// 正确
export default 42;

复合写法

在当前模块中导入变量然后又导出，foo和bar实际上并没有被导入当前模块，当前模块件就相当于一个中转站。

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';

import()

因为import命令会代码执行之前解析，所以只能放在顶层。例如放在代码块或者函数里面都是不行的。

// 报错
if (x === 2) {
  import MyModual from './myModual';
}

针对这个问题，引入import()函数，完成动态加载。import()返回一个 Promise 对象,所以后面可以使用then。

import('./section-modules/${someVariable}.js').then()

import()函数可以用在任何地方。它是运行时执行，即什么时候运行到这一句，就会加载指定的模块。另外，import()函数与所加载的模块没有静态连接关系，这点也是与import语句不相同。

注意点：

import(f())
.then(...);

import('./myModule.js')
.then(({export1, export2}) => {
  // ...·
});

import('./myModule.js')
.then(myModule => {
  console.log(myModule.default);
});

也可以使用具名的形式输入

import('./myModule.js')
.then(({default: theDefault}) => {
  console.log(theDefault);
});

Promise.all([
  import('./module1.js'),
  import('./module2.js'),
  import('./module3.js'),
])
.then(([module1, module2, module3]) => {
   ···
});
上一篇 下一篇

猜你喜欢

热点阅读