import && export

188

概述

意义：模块体系的构建者
 注意：模块自动采用严格模式
 通过export命令显式指定输出的代码，再通过import命令输入

export

作用

模块是一个独立文件，所以想在其他文件中获取本文件的某个变量，就需要把变量 export 出去

写法

可以一个一个的 export 或者一次性 export 多个变量， 

//第一种
export const name = 'cheri'
export let age = 18

// 第二种
 const name = 'cheri'
 let age = '18'
 export { name, age }

通常建议批量export 变量，因为在文件尾部，可以明确哪些变量被 export 了
 除了变量，函数也可以被输出 

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

别名（as）

为了让输出的变量更清晰易懂，我们还可以为它重命名 

function f1(){}
function f2(){}
export {
    f1 as addFunc
    f2 as chengfaFunc
    f2 as multiplyFunc
}

我们可以把一个变量或函数起多个不同的名字，对外输出多次

import

作用

如果模块通过 export 定义了对外接口，其他模块就可以通过 import 加载该模块

写法

import {name, age} from './profile.js';

在载入的时候，可以用 as 重命名 

import {name as surname,  age} from './profile.js';

import命令输入的变量都是只读的，因为它的本质是输入接口
 但是如果输入的变量是一个对象，则修改这个对象的内容是合法的 

import {age} from './profile.js';
// age 是一个 number
age = 20 // 报错

import {ageObj} from './profile.js';
//ageObj 是一个 object
ageObj.number = 20 // 不报错

import 的 from

import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js后缀可以省略

如果 from 的是一个模块名，不带有路径，则必须有配置文件，不然引擎不知道怎么获取该模块

import 的提升

不管在文件的什么位置写 import ，都会提升到文件顶部 

foo();

import { foo } from 'my_module'; //不会报错，因为。import 会提升

import 的静态性

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

import 的加载

仅执行 loadsh 模块，但没有输入值 

import 'lodash';

多次 import ，只会执行一次 

import 'lodash';
import 'lodash';
import { foo } from 'my_module';
import { bar } from 'my_module';

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

整体加载

用星号（*）指定一个对象，所有输出值都加载在这个对象上面。
 比如一个模块输出了两个方法 

export function area(radius) {
  return Math.PI * radius * radius;
}

export function circumference(radius) {
  return 2 * Math.PI * radius;
}

另一个模块在引入的时候，可以一个一个的引入，也可以使用 * 制定一个对象，一次性引入 

// 一个一个引入
import { area, circumference } from './circle';
console.log('圆面积：' + area(4));
console.log('圆周长：' + circumference(14));

//批量引入
import  * as cirle from './circle'
console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));

注意：模块整体加载所在的那个对象（上例是circle），应该是可以静态分析的，所以不允许运行时改变。下面的写法都是不允许的。 

import * as circle from './circle';

// 下面两行都是不允许的
circle.foo = 'hello';
circle.area = function () {};
Comments
Write a Comment