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 相关文章推荐
form中限制文本字节数js代码
Jun 10 Javascript
javascript下arguments,caller,callee,call,apply示例及理解
Dec 24 Javascript
理解Javascript_08_函数对象
Oct 15 Javascript
jquery+ajax验证不通过也提交表单问题处理
Dec 12 Javascript
利用jQuery中的ajax分页实现代码
Feb 25 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
基于vuejs+webpack的日期选择插件
May 21 Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 Javascript
创建echart多个联动的示例代码
Nov 23 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 Javascript
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
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
thinkphp实现图片上传功能分享
2014/03/04 PHP
php fread读取文件注意事项
2016/09/24 PHP
php事务回滚简单实现方法示例
2017/03/28 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
js 获取服务器控件值的代码
2010/03/05 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
jQuery的deferred对象详解
2014/11/12 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
2017/08/16 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
[06:37]2014DOTA2国际邀请赛 昔日王者渴望重回巅峰
2014/07/12 DOTA
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
跟老齐学Python之Python文档
2014/10/10 Python
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
学Python 3的理由和必要性
2019/11/19 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
应届大学生的推荐信
2013/11/20 职场文书
项目合作协议书范本
2014/04/16 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
Linux中sftp常用命令整理
2022/06/28 Servers