JavaScript模块管理的简单实现方式详解
1.为什么会有这个东西？
方便组织你的代码，提高项目的可维护性。一个项目的可维护性高不高，也体现一个程序员的水平，在如今越来越复杂的前端项目，这一点尤为重要。
2.为什么不用requirejs，seajs等
它们功能强大，但是文件体积是个问题，此外还有就是业务有时候可能没那么复杂，正如开头所说的：keepitsimple
3.以下的实现从哪里来的？
这些借鉴了requirejs,seajs,commonjs等的实现，用于真实的项目，稳定运行，效果不错。
4.适用场景
移动端页面，将js注入到html页面，这样就不用考虑模块加载的问题，从而节省了很多的代码，在实现上也更为的简单。
如果是多文件加载的话，需要手动执行文件加载顺序，那么其实最好用库来进行依赖管理会好一点。
实现1
(function(global){
varmodules={};
vardefine=function(id,factory){
if(!modules[id]){
modules[id]={
id:id,
factory:factory
};
}
};
varrequire=function(id){
varmodule=modules[id];
if(!module){
return;
}
if(!module.exports){
module.exports={};
module.factory.call(module.exports,require,module.exports,module);
}
returnmodule.exports;
}
global.define=define;
global.require=require;
})(this);
使用示例
define('Hello',function(require,exports,module){
functionsayHello(){
console.log('hellomodules');
}
module.exports={
sayHello:sayHello
}
});
varHello=require('Hello');
Hello.sayHello();
实现2
functionModule(main,factory){
varmodules={};
factory(function(id,factory){
modules[id]={
id:id,
factory:factory,
}
});
varrequire=function(id){
varmodule=modules[id];
if(!module){
return;
}
if(!module.exports){
module.exports={};
module.factory.call(module.exports,require,module.exports,module);
}
returnmodule.exports;
}
window.require=require;
returnrequire(main);
}
使用示例
Module('main',function(define){
define('Hello',function(require,exports,module){
functionsayHello(){
console.log('hello');
}
//有效的写法
module.exports={
sayHello:syaHello;
}
//或者
exports.sayHello=sayHello;
});
//mian，程序入口
define('main',function(require,exports,module){
varHello=require('Hello');
Hello.sayHello();
});
});
实现3
另外一种风格的模块管理
(function(global){
varexports={};//存储模块暴露的接口
varmodules={};//
global.define=function(id,factory){
modules[id]=factory;
}
global.require=function(id){
if(exports[id])returnexports[id];
elsereturn(exports=modules[id]());
}
})(this);
使用示例
define('Hello',function(require,exports,module){
functionsayHello(){
console.log('hellomodules');
}
//暴露的接口
return{
sayHello:sayHello
};
});
varHello=require('Hello');
Hello.sayHello();
实践
有了简易的模块化管理之后，在项目中，我们就可以采取这样的结构
--proj
--html --index.html --css --js --common --module1.js（通用模块1） --module2.js（通用模块2） --page --index.js（页面逻辑） --lib --moduler.js模块管理库
配合前端构建工具（wepack，grunt，gulp等等），就可以构建一个移动端的页面。
总结
如今的框架非常地多，而且越做越庞大。框架通常考虑通用性，对于精益求精的项目来说，可能有时候也要自己动手去实现一些关键的点，而学习的来源就是这些牛逼的框架。