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 相关文章推荐
javascript 闭包疑问
Dec 30 Javascript
JavaScript动态修改背景颜色的方法
Apr 16 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
最新最热最实用的15个jQuery插件汇总
Jul 05 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
May 07 Javascript
使用Bootstrap美化按钮实例代码(demo)
Feb 03 Javascript
vue组件间通信子与父详解(二)
Nov 07 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 Javascript
tweenjs缓动算法的使用实例分析
Aug 26 Javascript
js实现3D旋转相册
Aug 02 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常用代码
2006/11/23 PHP
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
索趣科技的答案
2007/02/07 Javascript
javascript 时间比较实现代码
2009/10/28 Javascript
JS面向对象编程之对象使用分析
2010/08/19 Javascript
JS常用正则表达式总结
2013/11/12 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
javascript多物体运动实现方法分析
2016/01/08 Javascript
轻松掌握JavaScript策略模式
2016/08/25 Javascript
在react中使用vuex的示例代码
2018/07/30 Javascript
vue观察模式浅析
2018/09/25 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
用js简单提供增删改查接口
2019/05/12 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
python导入坐标点的具体操作
2019/05/10 Python
python画双y轴图像的示例代码
2019/07/07 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
django中ImageField的使用详解
2020/12/21 Python
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
员工评语大全
2014/01/19 职场文书
大学毕业感言100字
2014/02/03 职场文书
文体活动实施方案
2014/03/27 职场文书
服务员岗位职责范本
2015/04/09 职场文书
Python之Matplotlib绘制热力图和面积图
2022/04/13 Python