之前做过一些简单的单页面应用项目,是对模块模式很好的应用,我决定动手做一个简单的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!