首页 >> js开发 >> js代码JavaScript组合设计模式--改进引入案例分析

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

发布时间: 2021年1月13日 | 浏览: | 分类:js开发

本文实例讲述了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
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
var inter=arguments[i];

//如果是接口就必须是Interface类型

if(inter.constructor!=Interface){

throw new Error("如果是接口类的话，就必须是Interface类型");

}

//判断接口中的方法是否全部实现

//遍历函数集合

for(var j=0;j
var method=inter.methods[j];//接口中所有函数

//object[method]传入的函数

//最终是判断传入的函数是否与接口中所用函数匹配

if(!object[method]||typeof object[method]!="function" ){//实现类中必须有方法名字与接口中所用方法名相同

throw new Error("实现类中没有完全实现接口中的所有方法")

}

}

}
}

//定义一个静态方法来实现接口与实现类的直接检验
//静态方法不要写出Interface.prototype ,因为这是写到接口的原型链上的
//我们要把静态的函数直接写到类层次上
//定义一个接口类
var Interface=function (name,methods) {//name：接口名字

if(arguments.length<2){

alert("必须是两个参数")

}

this.name=name;

this.methods=[];//定义一个空数组装载函数名

for(var i=0;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
var inter=arguments[i];

//如果是接口就必须是Interface类型

if(inter.constructor!=Interface){

throw new Error("如果是接口类的话，就必须是Interface类型");

}

//判断接口中的方法是否全部实现

//遍历函数集合

for(var j=0;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"]);//侧重点为每个对象的实现

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
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[i].goToClass();

}

};

//下课

this.finishClass=function (name) {

var toChilds=this.getChildByName(name);

for(var i=0;i
toChilds[i].finishClass();

}

};

Interface.ensureImplement(this,composite,student);

};

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
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[i].goToClass();

}

};

//下课

this.finishClass=function (name) {

var toChilds=this.getChildByName(name);

for(var i=0;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 +" 去上课
");

}

//下课

this.finishClass = function(name){

document.write(this.name +" 下课
");

}

Interface.ensureImplement(this,composite,student);

}

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 +" 去上课
");

}

//下课

this.finishClass = function(name){

document.write(this.name +" 下课
");

}

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);

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("-------------------------
");
usPcat.goToClass("一班");
document.write("-------------------------
");
usPcat.goToClass("二班一组");

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

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools./code/HtmlJsRun测试上述代码运行效果。在线HTML/CSS/JavaScript代码运行工具在线HTML/CSS/JavaScript代码运行工具http://tools./code/HtmlJsRun关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》javascript面向对象入门教程JavaScript错误与调试技巧总结JavaScript数据结构与算法技巧总结JavaScript遍历算法与技巧总结JavaScript数学运算用法总结希望本文所述对大家JavaScript程序设计有所帮助。

原文地址：http://www.chinasgp.cn/article/4415.html

上一条：« js如何在vue中使用百度地图添加自定义覆盖物（水波纹）js大全

下一条：js正则{2,6},js正则表达式 »

标签:

js代码 js

js代码JavaScript组合设计模式--改进引入案例分析-js开发