JavaScript组合设计模式--改进引入案例分析


Posted in Javascript onMay 23, 2020

本文实例讲述了JavaScript组合设计模式--改进引入案例。分享给大家供大家参考,具体如下:

对于组合设计模式:

 (1)组合模式中把对象分为两种(组合对象,和叶子对象)
 (2)组合对象和叶子对象实现:同一批操作
 (3)对组合对象执行的操作可以向下传递到叶子节点进行操作
 (4)这样就会弱化类与类之间的耦合
 (5)他常用的手法是把对象组合成属性结构的对象

根据组合模式的这些特性我们改写代码如下:

由于用到了接口检验所以我们先引入接口文件代码

//定义一个静态方法来实现接口与实现类的直接检验
//静态方法不要写出Interface.prototype ,因为这是写到接口的原型链上的
//我们要把静态的函数直接写到类层次上
//定义一个接口类
var Interface=function (name,methods) {//name:接口名字
  if(arguments.length<2){
    alert("必须是两个参数")
  }
  this.name=name;
  this.methods=[];//定义一个空数组装载函数名
  for(var i=0;i<methods.length;i++){
    if(typeof methods[i]!="string"){
      alert("函数名必须是字符串类型");
    }else {
      this.methods.push( methods[i]);
    }
  }
};
Interface.ensureImplement=function (object) {
  if(arguments.length<2){
    throw new Error("参数必须不少于2个")
    return false;
  }
  for(var i=1;i<arguments.length;i++){
    var inter=arguments[i];
    //如果是接口就必须是Interface类型
    if(inter.constructor!=Interface){
      throw new Error("如果是接口类的话,就必须是Interface类型");
    }
    //判断接口中的方法是否全部实现
    //遍历函数集合
    for(var j=0;j<inter.methods.length;j++){
      var method=inter.methods[j];//接口中所有函数

      //object[method]传入的函数
      //最终是判断传入的函数是否与接口中所用函数匹配
      if(!object[method]||typeof object[method]!="function" ){//实现类中必须有方法名字与接口中所用方法名相同
        throw new Error("实现类中没有完全实现接口中的所有方法")
      }
    }
  }
}

(1)统一接口

var composite=new Interface("composite",["getChildByName","add"]);//侧重点获取子
var student=new Interface("composite",["goToClass","finishClass"]);//侧重点为每个对象的实现

(2)定义组合类

var compositeObj=function (name) {
         this.name=name;
         this.type="com";//默认是组合类
         var childs=new Array();
        //得到相关的所有孩子节点
         this.getChildByName=function (name) {
           //涉及到递归
           var toChilds=new Array();
           if(!name){
             for(var i=0;i<childs.length;i++){
                if(childs[i].type=="com"){
                  toChilds=toChilds.concat(childs[i].getChildByName())
                }else {
                  toChilds.push(childs[i]);
                }
             }
           }else {
             for (var i = 0; i < childs.length; i++){
               if(childs[i].name==name){
                 if(childs[i].type=="com"){
                   toChilds=toChilds.concat(childs[i].getChildByName());
                   break;
                 }else {
                   toChilds.push(childs[i]);
                   break;
                 }
               }else {
                 if(childs[i].type == "com"){
                   toChilds =toChilds.concat(childs[i].getChildByName(name));
                 }
               }
             }
               }
               return toChilds;
         };
         //增加子节点
         this.add=function (child) {
           childs.push(child);
           return this;
         };
         //去上课
        this.goToClass=function (name) {
        var toChilds=this.getChildByName(name);
         for(var i=0;i<toChilds.length;i++){
              toChilds[i].goToClass();
         }
      };
          //下课
         this.finishClass=function (name) {
      var toChilds=this.getChildByName(name);
      for(var i=0;i<toChilds.length;i++){
        toChilds[i].finishClass();
      }
    };
    Interface.ensureImplement(this,composite,student);
    };

(3)定义叶子类

var studentObj=function (name) {
    this.name=name;
    this.type="student";//默认是叶子
    //得到所有孩子节点
   this.getChildByName=function (name) {
     if(this.name==name){
       return this;
     }else {
       return null;
     }
   }
   //增加子节点
    this.add=function (child) {
      throw new Error("add 不成被初始化(在叶子了中)")
    }
    //去上课
    this.goToClass = function(name){
      document.write(this.name +" 去上课<br>");
    }
    //下课
    this.finishClass = function(name){
      document.write(this.name +" 下课<br>");
    }
    Interface.ensureImplement(this,composite,student);
  }

(4)应用---将学校,班级,组,学生关联起来

var astudent=new studentObj("我是a同学");
  var bstudent=new studentObj("我是b同学");
  var cstudent=new studentObj("我是c同学");
  var dstudent=new studentObj("我是d同学");
  var estudent=new studentObj("我是e同学");
  var fstudent=new studentObj("我是f同学");
  var gstudent=new studentObj("我是g同学");
  var hstudent=new studentObj("我是h同学");
  var istudent=new studentObj("我是i同学");

  var one = new compositeObj("一班");
  var oneOne = new compositeObj("一班一组");
  oneOne.add(astudent).add(bstudent);
  var oneTwo = new compositeObj("一班二组");
  oneTwo.add(cstudent).add(dstudent);

  one.add(oneOne).add(oneTwo);
  var two = new compositeObj("二班");
  var twoOne = new compositeObj("二班一组");
  twoOne.add(estudent).add(fstudent);
  var twoTwo = new compositeObj("二班二组");
  twoTwo.add(gstudent).add(hstudent).add(istudent)
  two.add(twoOne).add(twoTwo);
  var usPcat = new compositeObj("组合设计模式培训学校");
  usPcat.add(one).add(two);

(5)客户端调用API,只需要简单的安排去上课即可,也就是客户端只需要写去上课的代码即可

usPcat.goToClass();
document.write("-------------------------<br>");
usPcat.goToClass("一班");
document.write("-------------------------<br>");
usPcat.goToClass("二班一组");

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js获取某月的最后一天日期的简单实例
Jun 22 Javascript
使用原生js写的一个简单slider
Apr 29 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
May 16 Javascript
Three.js学习之网格
Aug 10 Javascript
基于jQuery实现选项卡效果
Jan 04 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
Sep 11 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
Nov 14 Javascript
JS实现商品橱窗特效
Jan 09 Javascript
JS实现容器模块左右拖动效果
Jan 14 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
Nov 04 Javascript
JavaScript组合模式---引入案例分析
May 23 #Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 #Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 23 #Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
May 23 #Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 #Javascript
微信小程序点击滚动到指定位置的实现
May 22 #Javascript
使用JavaScript通过前端发送电子邮件
May 22 #Javascript
You might like
PHP 增加了对 .ZIP 文件的读取功能
2006/10/09 PHP
使用PHP获取网络文件的实现代码
2010/01/01 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
2014/01/06 Javascript
AngularJS语法详解
2015/01/23 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
Python对象体系深入分析
2014/10/28 Python
Python与Redis的连接教程
2015/04/22 Python
python+opencv识别图片中的圆形
2020/03/25 Python
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
Python 学习教程之networkx
2019/04/15 Python
简单了解python PEP的一些知识
2019/07/13 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
Python hashlib模块的使用示例
2020/10/09 Python
英国办公家具网站:Furniture At Work
2019/10/07 全球购物
市场营销专业推荐信
2013/11/03 职场文书
饲料采购员岗位职责
2013/12/19 职场文书
学雷锋志愿服务月活动总结
2014/03/09 职场文书
先进个人事迹材料
2014/12/29 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
草房子读书笔记
2015/06/29 职场文书