正文
JS之模块模式应用
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
之前做过一些简单的单页面应用项目，是对模块模式很好的应用，我决定动手做一个简单的Demo出来。
基本思想是设计一个加载器，当用户点击菜单时，获取不同选项的按钮id，根据不同id实现对页面内容的替换。
页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="libs/jquery-1.10.2.js"></script>
<script src="js/data.js"></script>
<script src="js/module.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/table.css">
<title>国战势力统计表</title>
</head>
<body>
<nav class="menu">
<ul>
<li id='wei'>魏国</li>
<li id='shu'>蜀国</li>
<li id='wu'>吴国</li>
<li id='qun'>群雄</li>
</ul>
</nav>
<div class='container'>
<table>
<thead>
<tr>
<td>人物</td>
<td>所属国</td>
<td>血槽</td>
<td>技能</td>
<td>珠联璧合</td>
</tr>
</thead>
<tbody class="tb_body"></tbody>
</table>
</div>
</body>
</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=;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!
