- 在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 +模块名字
