JS之模块模式应用

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