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


											
JS之模块模式应用的更多相关文章
	

    
								
  1. JS通用模块模式 UMD
		
    历史 JS诞生之初面向简单页面开发, 没有模块的概念. 后来页面逐渐复杂, 人类构造到 IIFE 立即执行函数来模拟 模块: 之前也有雅虎的实践,使用命名空间 作为模块名. 最后衍生出 面向各种使用场 ...
    
		
    2. 
						
  2. Js模块模式
		
    模块模式 索引 引子 什么是模块模式 命名空间模式 声明依赖 私有和特权成员 即时函数 揭示模块模式 结语 引子 这篇算是对第9篇中内容的发散和补充,当时我只是把模块模式中的一些内容简单的归为函数篇中 ...
    
		
    3. 
						
  3. js精要之模块模式
		
    // 模块模式是一种用于创建拥有私有数据的单件对象的模式,基本做法是使用立调函数(IIFE)来返回一个对象 var yourObjet = (function(){ // 私有数据 return {  ...
    
		
    4. 
						
  4. JS 设计模式四 -- 模块模式
		
    概念 模块模式的思路 就是 就是单例模式添加私有属性和私有方法,减少全局变量的使用. 简单的代码结构: var singleMode = (function(){ // 创建私有变量 var priv ...
    
		
    5. 
						
  5. [Js代码风格]浅析模块模式
		
    1.实例解释模块模式 简明扼要的说,经典的模块模式指的定义一个立即执行的匿名函数.在函数中定义私有函数和私有变量并且返回一个包含公共变量和公共函数作为属性和方法的匿名对象. var classicMo ...
    
		
    6. 
						
  6. JavaScript设计模式-单例模式、模块模式（转载   学习中。。。。）
		
    (转载地址:http://technicolor.iteye.com/blog/1409656) 之前在<JavaScript小特性-面向对象>里面介绍过JavaScript面向对象的特性 ...
    
		
    7. 
						
  7. 初涉JavaScript模式 (11) : 模块模式
		
    引子 这篇算是对第9篇中内容的发散和补充,当时我只是把模块模式中的一些内容简单的归为函数篇中去,在北川的提醒下,我才发觉这是非常不严谨的,于是我把这些内容拎出来,这就是这篇的由来. 什么是模块模式 在 ...
    
		
    8. 
						
  8. Node.js之单利模式
		
    在iOS中我们经常用到单利模式,这样就能够实现在多处共享同一数据,那么在Node.js中也存在这种模式. 我们知道,Node.js中模块的概念很重要,在写模块的接口的时候,只需要暴露出一个实例对象就能 ...
    
		
    9. 
						
  9. localstorage二次封装-模块模式
		
    var db = function () { // 本地存储前缀,减少命名冲突 var prefix = 'ydb'; return { setPrefix: function (_prefix) { ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 大冰--寻人启事--one
			
    看得懂的,都不是命运,说得清的,都不叫爱情. 忘得了的,都不是遗憾,听得见的,都不是伤心. 躲的开的,都不是缘分,猜得透的,都不叫人生.
    
			
    2. 
						
  2. iOS--KVO的实现原理与具体应用
			
    本文分为2个部分:概念与应用. 概念部分旨在剖析KVO这一设计模式的实现原理,应用部分通过创建的项目,以说明KVO技术在iOS开发中所带来的作用: 如果是作为是刚接触KVO的初学者,可以在了解基本原理 ...
    
			
    3. 
						
  3. php类型的相关函数，运算符，条件判断，循环
			
    类型的相关函数 函数的原型  :函数返回值类型 函数名(参数1类型 参数1,参数2类型 参数2--) 1, 任何一个函数,都要考虑它是否有返回值以及该返回值的类型,如果该函数没有返回值,就用void来 ...
    
			
    4. 
						
  4. for 小曦
			
    安装GO 当前版本1.6.2 http://blog.163.com/hehaifeng1984@126/blog/static/690011362013101044011568/ 教程 https: ...
    
			
    5. 
						
  5. centos下ssh无密码验证
			
    #安装openssh-clients,rsync等#1.修改所有master和slave服务器的sshd_config,后面增加UseDNS noClientAliveInterval 30RSAAu ...
    
			
    6. 
						
  6. 在Spring下集成ActiveMQ
			
    1.参考文献 Spring集成ActiveMQ配置 Spring JMS异步发收消息 ActiveMQ 2.环境 在前面的一篇ActiveMQ入门实例中我们实现了消息的异步传送,这篇博文将如何在spr ...
    
			
    7. 
						
  7. JS function document.onclick(){}报错Syntax error on token "function", delete this token
			
    JS function document.onclick(){}报错Syntax error on token "function", delete this token func ...
    
			
    8. 
						
  8. PriorityQueue优先队列用法入门
			
    PriorityQueue是队列的一种,它叫做优先队列,该类实现了Queue接口. 之所以叫做优先队列,是因为PriorityQueue实现了Comparator这个比较接口,也就是PriorityQ ...
    
			
    9. 
						
  9. sql server2008安装说明  详细完整版
			
    SQL Server 2008是一个重大的产品版本,它推出了许多新的特性和关键的改进,使得它成为至今为止的最强大和最全面的SQL Server版本. 在现今数据的世界里,公司要获得成功和不断发展,他们 ...
    
			
    10. 
						
  10. WPF的二维绘图（一）——DrawingContext
			
    DrawingContext比较类似WinForm中的Graphics 类,是基础的绘图对象,用于绘制各种图形,它主要API有如下几种: 绘图API 绘图API一般形为DrawingXXX系列,常用的 ...
    
			
    11.