JavaScript组合设计模式--改进引入案例分析
网络编程 2021-07-04 15:03www.168986.cn编程入门
这篇文章主要介绍了JavaScript组合设模式改进引入案例,结合实例形式分析了JavaScript组合设计模式特性改进的引入示例相关操作技巧,需要的朋友可以参考下
本文实例讲述了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 posite=new Interface("posite",["getChildByName","add"]);//侧重点获取子 var student=new Interface("posite",["goToClass","finishClass"]);//侧重点为每个对象的实现
(2)定义组合类
var positeObj=function (name) { this.name=name; this.type="";//默认是组合类 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==""){ 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==""){ toChilds=toChilds.concat(childs[i].getChildByName()); break; }else { toChilds.push(childs[i]); break; } }else { if(childs[i].type == ""){ 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,posite,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,posite,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 positeObj("一班"); var oneOne = new positeObj("一班一组"); oneOne.add(astudent).add(bstudent); var oneTwo = new positeObj("一班二组"); oneTwo.add(cstudent).add(dstudent); one.add(oneOne).add(oneTwo); var two = new positeObj("二班"); var twoOne = new positeObj("二班一组"); twoOne.add(estudent).add(fstudent); var twoTwo = new positeObj("二班二组"); twoTwo.add(gstudent).add(hstudent).add(istudent) two.add(twoOne).add(twoTwo); var usPcat = new positeObj("组合设计模式培训学校"); usPcat.add(one).add(two);
(5)客户端调用API,只需要简单的安排去上课即可,也就是客户端只需要写去上课的代码即可
usPcat.goToClass(); document.write("-------------------------<br>"); usPcat.goToClass("一班"); document.write("-------------------------<br>"); usPcat.goToClass("二班一组");
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题《》、《》、《》、《》及《》
希望本文所述对大家JavaScript程序设计有所帮助。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程