学习笔记 JavaScript ES6 模块化Module

学习内容:

  • export
  • import
  • as 
  • import default

模块化的规范

1、CommonJS : Node.js

这是出现的比较早的一种规范,他是在Node.js中的一种模块化规范,他的局限性是基于Node虽然能在服务器端实现模块的同步加载,但仅仅局限在服务端。

所以又产生了AMD的规范。

2、AMD : require.js

AMD是require.js在推广过程中对模块化定义的规范化产出。记得以前用到前端框架时,总要引入一个require.js,就可以实现模块化。AMD叫异步模块定义,可以定义回调函数,回调函数里面可以等到模块加载完成,再在回调函数里面实现想要的功能。AMD推崇的是依赖前置,提前执行。与AMD对应的还有CMD。

3、CMD : sea.js

CMD是sea.js在推广过程中对模块化定义的规范化产出。sea.js是阿里推出的,现已不再运维。CMD推崇依赖就近,延迟执行。

上面三种都是出现比较早的模块规范化,2015年出现了ES6。

4、ES6

2015年推出了ES6的模块化规范,正式纳入JS标准。

下面来学习在ES6中如何导入导出模块。

export/import

当用export 关键字导出模块的时,比如 :

export a = 7

则在import时,导入的名称和导出的名称必须完全一样(上面导出a,下面必须导入a才行),否则找不到,如:

import {a} from './module.js' // "./"表示当前文件夹下,后缀名js可以不写
console.log(a);
console.log(aa);

-----------------------------------------------
7
Uncaught ReferenceError: aa is not defined

再来看,如果export导出了多个模块,有变量和方法,如:

export const a = 7;
export const b = 6;
export const sum = (x, y) => x + y;

 import时,{}里面可以用逗号分隔,如:

import { a, b, sum } from "./module.js"; // "./"表示当前文件夹下,后缀名js可以不写
console.log(a);
console.log(b);
console.log(sum(1, 2)); // 和正常的方法调用一样
 
--------------
7
6
3 // 1 + 2

如果export是对象的话,需要在对象上加上{},如:

const obj = {
    name : 'Sure'
}

export {obj}

 import:

import {obj} from './module'

console.log(obj);

--------------------
{name: 'Sure'}

也可以一次导出多个,如:

const a = 7;
const b = 6;
const sum = (x, y) => x + y;

const obj = {
  name: "Sure",
};

export { a, b, sum, obj };

再复杂一点,加一个类进去,如:

export

class Person {
  constructor(name) {
    this.name = name;
  }
  showName() {
    console.log(this.name);
  }
}

export { Person };

import 

import { Person } from "./module.js"; // "./"表示当前文件夹下,后缀名js可以不写

let p = new Person('Sure')
console.log(p.name);

import时可以使用别名,用as即可,但是as以后,之前的变量名就不可以用了,如:

import { a as aa } from "./module";
console.log(aa);
console.log(a);

----------------------------------------------------
7
Uncaught ReferenceError: a is not defined

另一种导出方式,export default ,注意:每个module只能有一个default。

const a = 7;
export default a

导入:

import abc from './module'
console.log(abc);

------
7

 export default导出全部的内容:

const a = 7;
const b = 6;
const sum = (x, y) => x + y;

const obj = {
  name: "Sure",
};

class Person {
  constructor(name) {
    this.name = name;
  }
  showName() {}
}

export default { a, b, sum, obj, Person };

导入时,moduleObj这个名称可以随意定义:

import moduleObj from "./module.js"; // "./"表示当前文件夹下,后缀名js可以不写
console.log(moduleObj);


--------------------------------------------
{a: 7, b: 6, obj: {…}, sum: ƒ, Person: ƒ}
Person: ƒ Person(name)
a: 7
b: 6
obj: {name: 'Sure'}
sum: ƒ sum(x, y)

还有一种导入方式,是用在导出内容特别多时,import * as :

注意看下面的输出。

import * as mod from './module'

console.log(mod);

--------------------------------------------------------------------------------------
Module {default: {…}, __esModule: true, Symbol(Symbol.toStringTag): 'Module'}
default: {a: 7, b: 6, obj: {…}, sum: ƒ, Person: ƒ}
__esModule: true
Symbol(Symbol.toStringTag): "Module"
[[Prototype]]: Object

上面的输出可以这样取值:

import * as mod from './module'

console.log(mod.default.a);
console.log(mod.default.sum(1,2))

------
7
3

 

你可能感兴趣的:(学习笔记,JavaScript,ES6,javascript,前端,ecmascript)