[JavaScript知识库]二.模块化笔记

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)