一、简介
- 为了减少代码的冗余，优化代码的结构，干净的代码总是让人有开发优化下去的欲望，模块化是很重要的一个点，具体想了解模块化开发的，这个博主写得很不错：30分钟学会前端模块化开发。
二、原理
这里的模块化用到的是nodeJs的CommonJS模块管理，使用module.exports去暴露模块接口，使用require去加载模块。 我们在preload.js的时候，去加载其他功能模块到MOD这个变量里，之后通过MOD这个变量去执行这些模块，对于一些常用的nodeJs固有的模块，可以直接去加载进MOD里，不常用的可以需要的时候再加载。
简单来讲，就是文件A里module.exports = {接口1,接口2,.....}，let a = require(文件A)，这样就可以a.接口1(...)的方式去执行文件A中的接口1。
三、preload脚本示例
const REAL_PATH_DIR = __dirname+"/"
window.MOD = [];
MOD.FILE_SYS = require('fs')
let GLOBAL_CONFIG = [
{modName:"test",filePath:"test.js"},
]
function loadMod(modName,filePath) {
let newMod = require(filePath);
if (newMod){
if (newMod.__init__) {
newMod.__init__();
}
MOD[modName] = newMod;
}
else{
console.log("----load mod error ----",filePath);
}
}
function init(){
for(let i = 0,len = GLOBAL_CONFIG.length; i < len; i++){
let info = GLOBAL_CONFIG[i];
loadMod(info.modName,REAL_PATH_DIR+info.filePath);
}
}
init();
- 这里直接加载了nodeJs的fs模块到MOD.FILE_SYS变量里，GLOBAL_CONFIG这个是用于配自己实现的模块,其中如果文件暴露了init接口，会自动执行初始化，例子中配了test.js，其中test.js如下：
function testLog(name) {
return "test"
}
module.exports = {
testLog,
};
- 在index.html中就可以直接使用MOD.test.testLog()执行该模块接口了。
