[JavaScript知识库]【ES6】-- common.js与ES6模块化的差异

目录

?????? ?语法区别 ??? ?

?????? ?加载时机 ??? ??

??????? ?引用差别 ??? ?

? ? ?ES6的导出方式

common.js与ES6模块化的差异大致分为三点：?

1. 两者的语法区别? ??
2. commonjs在运行时候加载模块,ES6编译的时候加载模块;
3. commonjs输出的是一个值的复制/深拷贝,ES6输出的是一个值的引用地址（重点）

?????? ?语法区别 ??? ?

CommonJS 模块使用require()和module.exports，ES6 模块使用import和export。

<common.js>?

common.js中的导出模块：

// commonjs模块化导出
let firstName = 'Taylor';
let lastName = 'Swift';
// module表示当前模块对象
console.log(module,'当前模块对象');
module.exports={
    firstName,
    lastName
}

?common.js中的导入模块：

// commonjs模块化的导入 不需要转码 可以直接运行
// 导入有export导出和默认导出的对象变量属性
let {firstName, lastName} =require('./5-modules');
console.log(firstName, lastName,'moduels6打印'); // Taylor Swift moduels6打印

<ES6>?

ES6中的导出模块：

// 作为导出模块
// ES6模块化导出
let firstName = "zhao";
let lastName = "ziyin";
// 导出方式 列表导出
export {firstName, lastName};

ES6中的导入模块：

// 导入模块
// ES6模块化导入
// 列表导入
import {firstName, lastName} from './3-modules'
console.log(firstName, lastName,'modules打印'); // zhaoziyin modules打印

?????? ?加载时机 ??? ?

<common.js>?

• 运行时加载：

// commonjs模块化
let {name, age, gender} = require('test01')

// 相当于
let _test01 = require('test01');
let name = _test01.name;
let age = _test01.age;
let gender = _test01.gender;

以上代码的实质是整体加载test01模块（即加载test01的所有方法），生成一个对象（_test01），然后再从这个对象上面读取 3 个方法。这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”。?

<ES6>?

• 编译时加载/静态加载

// ES6模块
import { name, age, gender } from 'test01';

这个代码的实质是从test01模块加载 3 个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。当然，这也导致了没法引用 ES6 模块本身，因为它不是对象。

??????? ?引用差别 ??? ?

<common.js>?

• CommonJS 模块输出的是一个值的拷贝：

// commonjs模块化导出
// 运行时加载模块 输出的是一个值的复制
let firstName = "good";
let lastName = "morning";
module.exports={
    firstName,
    lastName
}
setTimeout(()=>{
    lastName = "evening"; 
},2000)



// commonjs模块化导入
let {firstName, lastName} = require('./7-modules');
console.log(firstName, lastName);  //good morning
setTimeout(()=>{
    console.log(firstName, lastName);  //good morning
},4000)

注意：CommonJS 模块输出的是值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。

• ES6 模块输出的是值的引用：

// es6模块化导出
let firstName = "good";
let lastName = "morning";
export {firstName, lastName};
setTimeout(()=>{
    lastName = "envening"
},2000)


// es6的模块化引入 ES6模块输出的是值的引用。
import {firstName, lastName} from "./7-modules";
console.log(firstName, lastName);  //good morning
setTimeout(()=>{
    console.log(firstName, lastName);  //good envening
},4000)

注意：ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块，模块内部的变化会影响这个值。

ES6的导出方式

// 作为导出模块

// ES6模块化导出

let firstName = "zhao";

let lastName = "ziyin";

1.导出方式 列表导出

export {firstName, lastName};

?2.重命名导出

export {firstName as first, lastName as last}

3.单个属性导出

export let a = 1;

export function get(){

? ? console.log('modules3导出');

};

?4.1默认导出

 export default {

 ? ? firstName,lastName,

 ? ? b:'默认导出'

 }

4.2默认导出一个方法?

export default function(){

? ? console.log('hello默认导出一个方法');

}

注意： 一个模块只能有一个默认导出