之前做过一些简单的单页面应用项目，是对模块模式很好的应用，我决定动手做一个简单的Demo出来。
基本思想是设计一个加载器，当用户点击菜单时，获取不同选项的按钮id，根据不同id实现对页面内容的替换。
页面：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="libs/jquery-1.10.2.js"></script> 6 <script src="js/data.js"></script> 7 <script src="js/module.js"></script> 8 <script src="app.js"></script> 9 <link rel="stylesheet" type="text/css" href="css/common.css"> 10 <link rel="stylesheet" type="text/css" href="css/table.css"> 11 <title>国战势力统计表</title> 12 </head> 13 <body> 14 <nav class="menu"> 15 <ul> 16 <li id='wei'>魏国</li> 17 <li id='shu'>蜀国</li> 18 <li id='wu'>吴国</li> 19 <li id='qun'>群雄</li> 20 </ul> 21 </nav> 22 <div class='container'> 23 <table> 24 <thead> 25 <tr> 26 <td>人物</td> 27 <td>所属国</td> 28 <td>血槽</td> 29 <td>技能</td> 30 <td>珠联璧合</td> 31 </tr> 32 </thead> 33 <tbody class="tb_body"></tbody> 34 </table> 35 </div> 36 </body> 37 </html>
实现方法就是根据点击事件获取不同的<li>的id,通过加载器实现对tbody内容的替换。
下面是模块加载器
//module.js
var m1; m1=(function (window) { var jquery=window.$, data=window.data; if(typeof jquery==='undefined'){ console.log('need load Jquery'); return; } return{ loadModule:function (tbody,id) { tbody.empty(); var tr, td=$('<td></td>'), singleCountry; if(typeof id !=='undefined') { singleCountry = data.importCountry(id); }; for(var i=0;i<singleCountry.length;i++){ tr=$('<tr></tr>'); $.each(singleCountry[i],function (index,ele) { td.clone().empty().html(ele).appendTo(tr); }); tr.appendTo(tbody); } return tbody; } } })(window);
最后是数据和事件处理
//数据 data.js
var data;
data=(function (window) {
allMember={
wei:[
{name:'曹丕',country:'魏',life:1.5,skill:'行殇、放逐',partner:'甄姬'},
{name:'曹操',country:'魏',life:2,skill:'奸雄',partner:'典韦'},
{name:'李典',country:'魏',life:1.5,skill:'恂恂、忘隙',partner:'乐进'},
{name:'司马懿',country:'魏',life:1.5,skill:'反馈、天命',partner:'0'},
{name:'郭嘉',country:'魏',life:2,skill:'遗技，天妒',partner:'0'},
{name:'more',country:'...',life:2,skill:'...',partner:'...'}
],
shu:[
{name:'大诸葛',country:'蜀',life:1.5,skill:'观星、空城',partner:'黄月英'},
{name:'火诸葛',country:'蜀',life:1.5,skill:'火技、八阵、看破',partner:'黄月英'},
{name:'祝融',country:'蜀',ife:2,skill:'象阵、烈刃',partner:'孟获'},
{name:'赵云',country:'蜀',life:2,skill:'龙胆',partner:'刘禅'},
{name:'黄忠',country:'蜀',life:2,skill:'烈弓',partner:'魏延'}
],
wu:[
{name:'大乔',country:'吴',life:1.5,skill:'流离、国色',partner:'小乔、孙策'},
{name:'小乔',country:'吴',life:1.5,skill:'红颜、天香',partner:'周瑜、大乔'},
{name:'孙权',country:'吴',life:2,skill:'制衡',partner:'周泰'},
{name:'孙尚香',country:'吴',life:2,skill:'枭姬、结姻',partner:'0'}
],
qun:[
{name:'吕布',country:'群',life:2.5,skill:'无双',partner:'貂蝉'},
{name:'袁绍',country:'群',life:2,skill:'乱击',partner:'颜良文丑'},
{name:'蔡文姬',country:'群',life:1.5,skill:'断愁、悲歌',partner:'0'},
{name:'孔融',country:'群',life:1.5,skill:'名士、礼让',partner:''}
],
};
return{
importCountry: function (coun) {
switch(coun){
case 'wei': return allMember.wei;
case 'shu': return allMember.shu;
case 'wu': return allMember.wu;
case 'qun': return allMember.qun;
default: return false;
}
}
}
})(window);
事件处理
$(function(){ $('.menu ul').on('click',function (e) { var target=e.target, tbody, id; tbody=$('.tb_body'); if(target.tagName.toLowerCase()==='li'){ id=$(target).attr('id'); m1.loadModule(tbody,id); } }); });
最后是实现
这是一个简单的单页面应用模式，但仍然是同步加载，刚接触AMD模块化规范。看了老司机给的React例子，除了库的引用，另加一条
<script data-main="app.js" src="r.js"></script>
就可以了，模块之间互相调用通过依赖实现，异步实现，大大提高了效率。
React发布都很久了，现在才准备学习。先从AMD/CMD和requireJS看起吧。前几年都浪费在LOL上了。。。基础太差，毕业开始学习，看样子这一年不好过了，Fighting!