1.模块化机制(CommonJs ES6)
package.json
{
????????"type":"commonjs" //CommonJs
????????"type":"module" //ES6
}
1.ES6模块化(编译时加载)
export命令用于规定模块的对外接口，即模块的暴露
import命令用于输入其他模块提供的功能，即模块的导入。
1.导入普通
// 普通导出
export let a = 1; //导出单个属性
export function count(){ //导出单个函数
console.log(++a);
}
let firstname = 'w';
let lastname = 'll';
export {firstname,lastname} //列表导出
export {firstname as first,lastname as last} //重命名导出
// 导入模块化a.js
import {a, count,firstname,lastname,first,last} from './a.js'
console.log(a,firstname,lastname,first,last);//1 w ll w ll
count(); //2
2.导入默认
一个模块只能有一个默认导出，不能使用 var、let 或 const
用于导出默认值 export default。
// 默认导出
export default function add(){
console.log('default默认导出');
}
import add from './a.js'
add(); //default默认导出
3.同时导入默认和普通
import * as obj from './a.js'
console.log(obj);
//[Module: null prototype] {
a: 2,
count: [Function: count],
default: [Function: add],
first: 'w',
firstname: 'w',
last: 'll',
lastname: 'll'
//}
4.运行模块
let firstname = 'w';
let lastname = 'll';
console.log(firstname,lastname);
// 将整个模块导入并运行模块
import './a.js'
//w ll
2.CommonJs模块化(运行时加载) (服务器端)
1.module.exports用于导出
let a = 1;
let add = ()=>{
a++;
}
module.exports = {
a,
add
}
2.require() 命令用于导入
// 导入模块化b.js
let obj = require('./b')
console.log(obj);
//{ a: 1, add: [Function: add] }
3.导入并运行
console.log('b.js');
require('./b')
//b.js
3.AMD模块化规范(客户端--浏览器)
4.ES6模块化和CommonJs模块化区别：
commonjs
?运行时加载，代码运行时，模块间的依赖关系才被确认
?对于基本数据类型，类似于复制，独立的拷贝，原始值发生修改，导出值不会受到影响
?对于复杂数据类型，属于浅拷贝。由于两个模块引用的对象指向同一个内存空间，因此对该模块的值做修改时会影响另一个模块。
?当使用require命令加载某个模块时，就会运行整个模块的代码。当使用require命令加载同一个模块时，不会再执行该模块，而是取到缓存之中的值。也就是说，CommonJS模块无论加载多少次，都只会在第一次加载时运行一次，以后再加载，就返回第一次运行的结果，除非手动清除系统缓存。 如果导入多次，第一次导入是加载，之后的导入是从缓存中取值
?rquire('./a.js')使用require命令加载某个模块，会执行内部的所有代码
ES6
?编译时加载，代码在编译阶段，就确定了模块间的依赖关系
?ES6模块中的导入导出值属于【动态只读引用】。
?对于只读来说，即不允许修改引入变量的值，import的变量是只读的，不论是基本数据类型还是复杂数据类型。当模块遇到import命令时，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。
?对于动态来说，原始值发生变化，import加载的值也会发生变化。不论是基本数据类型还是复杂数据类型。
?不允许重复导入，使用import加载某个模块，会执行内部的所有代码
2.包管理机制(npm cnpm yarn)
|