JS 模块化开发 2022-06-09

• 在ES5中使用传统的闭包等方法实现模块模式

const MouseCounterModule=function(){
  let numClicks=0;
  const handleClick=()=>{
    alert(++numClicks);
  };
  return {
    countClicks:()=>{
      document.addEventListener("click",handleClick);
    }
  };
}();

扩展模块

(function(module){
  let numScrolls=0;
  const handleScrolls=()=>{
    alert(++numScrolls);
  };
  module.countScrolls=()=>{
    document.addEventListener("wheel",handleScroll);
  };
})(MouseCounterModule);

注意使用这种方法扩展模块时，扩展的模块内部的变量与原始的变量不共享作用域，各自享有作用域

• 使用AMD定义模块

define("MouseCounterModule",["jQuery"],$=>{
  let numClicks=0;
  const handleClicks=()={
    alert(++numClicks);
  };
  return {
    countClicks:()={
      $(document).on("click",handleClick);
    }
  };
});  

使用define方法，第一个参数是模块名字，第二个参数是当前模块依赖的模块列表，第三个参数是初始化模块
AMD方法具有以下优点：
1.自动处理依赖，无需考虑模块引入的顺序
2.异步加载模块，避免阻塞
3.在同一个文件中可以定义多个模块

• 使用CommonJS定义模块

const $=require("jQuery");
let numClicks=0;
const handleClick=()=>{
  alert(++numClicks);
};
module.exports={
  countClicks:()=>{
    $(document).on("click",handleClick);
  }
};
#在另外的文件中引用模块
const MouseCounterModule=require("MouseCounterModule.js");
MouseCounterModule.countClicks();

CommonJS是同步加载（阻塞模式）

• ES6模块化
  1.export--从模块外部指定标识符
  2.import--导入模块标识符

const ninjia="yoshi";
export const message="hello";
export function sayHello(){
  console.log("hello")l
};

想导出谁就在谁的前面加上export
只有加上export的变量才能在模块外被访问，其余变量不能

export {message,sayHello};

上述导出还可以使用{}导出

export default class Ninjia{
  constructor(name){
    this.name=name;
  };
};
import testName from "Ninjia.js"

使用export default时,import 导入时模块的名字可以自定义；除此以外，没有使用export default的模块在导入时必须用{}

export const ninjia="yoshi" 导出变量
export function sayHello(){} 导出函数
export class Ninjia{} 导出类
export default class Ninjia{} 导出默认类
export default function sayHello(){} 导出默认函数
export {ninjia,sayHello} 导出存在的变量
export {ninjia as samuriy} 使用别名
import Ninjia from "Ninjia.js" 导入默认导出
import {Ninjia,ninjia} from "Ninjia.js" 导入命名导出
import * as Ninjia from "Ninjia.js" 导入全部导出
import {Ninjia as ninjia} from "Ninjia.js" 导入别名

当导入全部导出使用*号后接as +模块名字