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

　　下面是模块加载器　　

  1.  
  1. //module.js
  1. var m1;
  2. m1=(function (window) {
  3.     var  jquery=window.$,
  4.           data=window.data;
  5.     if(typeof jquery==='undefined'){
  6.         console.log('need load Jquery');
  7.         return;
  8.     }
  9.     return{
  10.         loadModule:function (tbody,id) {
  11.             tbody.empty();
  12.             var tr,
  13.                  td=$('<td></td>'),
  14.                 singleCountry;
  15.  
  16.             if(typeof id !=='undefined') {
  17.                 singleCountry = data.importCountry(id);
  18.             };
  19.                 for(var i=;i<singleCountry.length;i++){
  20.                     tr=$('<tr></tr>');
  21.                     $.each(singleCountry[i],function (index,ele) {
  22.                         td.clone().empty().html(ele).appendTo(tr);
  23.                     });
  24.                     tr.appendTo(tbody);
  25.                 }
  26.             return tbody;
  27.         }
  28.  
  29.     }
  30.  
  31. })(window);

　　最后是数据和事件处理

　　　　

  1. //数据 data.js
  2. var data;
  3. data=(function (window) {
  4.  
  5.             allMember={
  6.             wei:[
  7.                 {name:'曹丕',country:'魏',life:1.5,skill:'行殇、放逐',partner:'甄姬'},
  8.                 {name:'曹操',country:'魏',life:2,skill:'奸雄',partner:'典韦'},
  9.                 {name:'李典',country:'魏',life:1.5,skill:'恂恂、忘隙',partner:'乐进'},
  10.                 {name:'司马懿',country:'魏',life:1.5,skill:'反馈、天命',partner:'0'},
  11.                 {name:'郭嘉',country:'魏',life:2,skill:'遗技，天妒',partner:'0'},
  12.                 {name:'more',country:'...',life:2,skill:'...',partner:'...'}
  13.             ],
  14.             shu:[
  15.                 {name:'大诸葛',country:'蜀',life:1.5,skill:'观星、空城',partner:'黄月英'},
  16.                 {name:'火诸葛',country:'蜀',life:1.5,skill:'火技、八阵、看破',partner:'黄月英'},
  17.                 {name:'祝融',country:'蜀',ife:2,skill:'象阵、烈刃',partner:'孟获'},
  18.                 {name:'赵云',country:'蜀',life:2,skill:'龙胆',partner:'刘禅'},
  19.                 {name:'黄忠',country:'蜀',life:2,skill:'烈弓',partner:'魏延'}
  20.             ],
  21.             wu:[
  22.                 {name:'大乔',country:'吴',life:1.5,skill:'流离、国色',partner:'小乔、孙策'},
  23.                 {name:'小乔',country:'吴',life:1.5,skill:'红颜、天香',partner:'周瑜、大乔'},
  24.                 {name:'孙权',country:'吴',life:2,skill:'制衡',partner:'周泰'},
  25.                 {name:'孙尚香',country:'吴',life:2,skill:'枭姬、结姻',partner:'0'}
  26.             ],
  27.             qun:[
  28.                 {name:'吕布',country:'群',life:2.5,skill:'无双',partner:'貂蝉'},
  29.                 {name:'袁绍',country:'群',life:2,skill:'乱击',partner:'颜良文丑'},
  30.                 {name:'蔡文姬',country:'群',life:1.5,skill:'断愁、悲歌',partner:'0'},
  31.                 {name:'孔融',country:'群',life:1.5,skill:'名士、礼让',partner:''}
  32.             ],
  33.         };
  34.     return{
  35.         importCountry: function (coun) {
  36.             switch(coun){
  37.                 case 'wei': return allMember.wei;
  38.                 case 'shu': return allMember.shu;
  39.                 case 'wu': return allMember.wu;
  40.                 case 'qun': return allMember.qun;
  41.                 default:    return false;
  42.             }
  43.         }
  44.     }
  45. })(window);

　　事件处理

　　

  1. $(function(){
  2.     $('.menu ul').on('click',function (e) {
  3.         var target=e.target,
  4.             tbody,
  5.             id;
  6.          tbody=$('.tb_body');
  7.         if(target.tagName.toLowerCase()==='li'){
  8.             id=$(target).attr('id');
  9.             m1.loadModule(tbody,id);
  10.         }
  11.  
  12.     });
  13. });

最后是实现

　　

这是一个简单的单页面应用模式，但仍然是同步加载，刚接触AMD模块化规范。看了老司机给的React例子，除了库的引用，另加一条

  1. <script data-main="app.js" src="r.js"></script>

就可以了，模块之间互相调用通过依赖实现，异步实现，大大提高了效率。

　　React发布都很久了，现在才准备学习。先从AMD/CMD和requireJS看起吧。前几年都浪费在LOL上了。。。基础太差，毕业开始学习，看样子这一年不好过了，Fighting!

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

  1. JS通用模块模式 UMD

    历史 JS诞生之初面向简单页面开发, 没有模块的概念. 后来页面逐渐复杂, 人类构造到 IIFE 立即执行函数来模拟 模块: 之前也有雅虎的实践,使用命名空间 作为模块名. 最后衍生出 面向各种使用场 ...

  2. Js模块模式

    模块模式 索引 引子 什么是模块模式 命名空间模式 声明依赖 私有和特权成员 即时函数 揭示模块模式 结语 引子 这篇算是对第9篇中内容的发散和补充,当时我只是把模块模式中的一些内容简单的归为函数篇中 ...

  3. js精要之模块模式

    // 模块模式是一种用于创建拥有私有数据的单件对象的模式,基本做法是使用立调函数(IIFE)来返回一个对象 var yourObjet = (function(){ // 私有数据 return { ...

  4. JS 设计模式四 -- 模块模式

    概念 模块模式的思路 就是 就是单例模式添加私有属性和私有方法,减少全局变量的使用. 简单的代码结构: var singleMode = (function(){ // 创建私有变量 var priv ...

  5. [Js代码风格]浅析模块模式

    1.实例解释模块模式 简明扼要的说,经典的模块模式指的定义一个立即执行的匿名函数.在函数中定义私有函数和私有变量并且返回一个包含公共变量和公共函数作为属性和方法的匿名对象. var classicMo ...

  6. JavaScript设计模式-单例模式、模块模式（转载 学习中。。。。）

    (转载地址:http://technicolor.iteye.com/blog/1409656) 之前在<JavaScript小特性-面向对象>里面介绍过JavaScript面向对象的特性 ...

  7. 初涉JavaScript模式 (11) : 模块模式

    引子 这篇算是对第9篇中内容的发散和补充,当时我只是把模块模式中的一些内容简单的归为函数篇中去,在北川的提醒下,我才发觉这是非常不严谨的,于是我把这些内容拎出来,这就是这篇的由来. 什么是模块模式 在 ...

  8. Node.js之单利模式

    在iOS中我们经常用到单利模式,这样就能够实现在多处共享同一数据,那么在Node.js中也存在这种模式. 我们知道,Node.js中模块的概念很重要,在写模块的接口的时候,只需要暴露出一个实例对象就能 ...

  9. localstorage二次封装-模块模式

    var db = function () { // 本地存储前缀,减少命名冲突 var prefix = 'ydb'; return { setPrefix: function (_prefix) { ...

随机推荐

  1. asp.net中的ListBox控件添加双击事件

    问题:在Aspx页里的ListBox A中添加双击事件,将选中项添加到另一个ListBox B中,双击ListBox B中的选中项,删除当前选中项 页面: <asp:ListBox ID=&qu ...

  2. ps应用

    1.选中图层 ctrl+鼠标左键(win) command+鼠标左键(mac) 2.初始化 右侧:图层,历史记录,信息(面板选项-rgb,文档尺寸,像素),字符 编辑-首选项-单位与标尺-像素 窗口- ...

  3. centos7.2环境elasticsearch-5.0.1+kibana-5.0.1+zookeeper3.4.6+kafka_2.9.2-0.8.2.1部署详解

    centos7.2环境elasticsearch-5.0.1+kibana-5.0.1+zookeeper3.4.6+kafka_2.9.2-0.8.2.1部署详解 环境准备: 操作系统:centos ...

  4. py-faster-rcnn(running the demo): ubuntu14.04+caffe+cuda7.5+cudnn5.1.3+python2.7环境搭建记录

    第一次写博客,以此纪念这几天安装caffe,跑faster-rcnn的血泪史.在此特别感谢网络各路大神,来自全球各地,让我能从中汲取营养,吸取经验,总结规律. faster-rcnn分为matlab版 ...

  5. ycm添加自定义补全路径

    修改~/.vim/bundle/YouCompleteMe/third_party/ycmd/cpp/ycm/.ycm_extra_conf.py的flags变量 未改前如下: flags = [  ...

  6. delphi判断文件类型

    function getFileType(inputFile:string):string;const JPEG_FLAG_BEGIN = $D8FF; JPEG_FLAG_END = $D9FF; ...

  7. svn更新操作时提示database is locked

    If you're on Windows version just let's do the next: Right click on the repo folder and go to Tortoi ...

  8. 学习Linux入门50个基本命令

    Linux系统以一切皆文件的方式运行系统.虽然存在ubuntu版本的图形界面,但在企业的服务器里面还是以命令行系统运行为主. 以下是初学50个基本的Linux命令行的体会 1:pwd 显示当前你所在的 ...

  9. ( 转)UVM验证方法学之一验证平台

    在现代IC设计流程中,当设计人员根据设计规格说明书完成RTL代码之后,验证人员开始验证这些代码(通常称其为DUT,Design Under Test).验证工作主要保证从设计规格说明书到RTL转变的正 ...

  10. DelphiXE2 DataSnap开发技巧收集

    DelphiXE2 DataSnap开发技巧收集 作者:  2012-08-07 09:12:52     分类:Delphi     标签: 作为DelphiXE2 DataSnap开发的私家锦囊, ...