CSDN话题挑战赛第2期
参赛话题：学习笔记

学习之路，长路漫漫，写学习笔记的过程就是把知识讲给自己听的过程。这个过程中，我们去记录思考的过程，便于日后复习，梳理自己的思路。学习之乐，独乐乐，不如众乐乐，把知识讲给更多的人听，何乐而不为呢?

组合模式又称整体部分模式，将对象组合成树形结构以表示部分-整体的关系。客户可以统一对待组合对象和叶子对象。

组合模式中对象分为组合对象和叶子对象，组合对象包含叶子对象。叶子对象是最小的对象单元。

组合模式的使用场景

表示对象的部分-整体层次结构。组合模式可以方便地构造一棵树来表示对象的部分-整体结构。特别是我们在开发期间不确定这棵树到底存在多少层次的时候。在树的构造最终完成之后，只需要通过请求树的最顶层对象，便能对整棵树做统一的操作。
客户希望统一对待树中的所有对象。组合模式使客户可以忽略组合对象和叶对象的区别，客户在面对这棵树的时候，不用关心当前正在处理的对象是组合对象还是叶对象，也就不用写一堆if、else语句来分别处理它们。组合对象和叶对象会各自做自己正确的事情

示例：表单

表单可以很好地使用组合模式，container元素作为根对象，container下面可以有n个表单，在每个表单下面可以存在n个表单控件，每个控件下面存在label和具体的控件，这样就形成了一个树形结构。

// 用于实现继承
function inherient(subClass, superClass){function fn(){}fn.prototype = superClass.prototype;subClass.prototype = new fn();subClass.prototype.constructor = subClass;
}
// 容器元素
function Container(){this.children = [];this.element = null;
}Container.prototype = {init:function () {throw new Error('请重写init方法');},add:function (child) {this.children.push(child);this.element.appendChild(child.element);}
}
// 生成表单元素
function CreateForm (id, method, action, parent) {Container.call(this);this.id = id || '';this.method = method || 'get';this.action = action || '';this.parent = parent;this.init();
}inherient(CreateForm, Container);CreateForm.prototype.init = function () {this.element = document.createElement('form');this.element.id = this.id;this.element.method = this.method;this.element.action = this.action;
}CreateForm.prototype.show = function () {this.parent.appendChild(this.element);
}
// 生成表单项的容器元素
function CreateLine(className){Container.call(this);this.className = className === undefined ? 'form-line' : 'form-line' + className;this.init();
}
inherient(CreateLine, Container);
CreateLine.prototype.init = function () {this.element = document.createElement('div');this.element.calssName = this.className;
}
// 生成表单项的label元素
function CreateLabel(text, forName){this.text = text || '';this.forName = forName || '';this.init();
}CreateLine.prototype.init = function(){this.element = document.createElement('label');this.element.setAttribute('for', this.forName);this.element.innerHTML = this.text;
}
// 用于生成input元素
function CreateInput(type, id, name, defaultValue){this.type = type || '';this.id = id || '';this.name = name || '';this.defaultValue = defaultValue || '';this.init();
}CreateInput.prototype.init = function () {this.element = document.createElement('input');this.element.type = this.type;this.element.id = this.id;this.element.name = this.name;this.element.value = this.defaultValue;
}let form  = new CreateForm('owner-form', 'get', '/aaa.html', document.body);
let userLine = new CreateLine().add(new CreateLabel('用户名', 'user')).add(new CreateInput('text', 'user', 'user'));
let pwdLine = new CreateLine().add(new CreateLabel('密码', 'pwd')).add(new CreateLabel('password', 'pwd', 'pwd')).add(new CreateInput('password', 'pwd', 'pwd'));

总结

组合模式使我们能够以树形结构表示对象间的关系，但是同时也创建了大量的对象，可能会让系统负担不起。

JavaScript设计模式——组合模式相关推荐

javascript设计模式-组合模式
1 <!DOCTYPE HTML> 2 <html lang="en-US"> 3 <head> 4 <meta charset=&quo ...
JavaScript设计模式系列—模式篇总结（上）
转载请注明预见才能遇见的博客:http://my.csdn.net/ 原文地址:https://blog.csdn.net/pcaxb/article/details/102517956 JavaSc ...
设计模式---组合模式
设计模式---组合模式什么是组合模式:Composite? 使用场景代码示例组合模式模板组合模式的安全性和透明性总结优缺点: 适用场景: 什么是组合模式:Composite? 计算机的文件 ...
Java设计模式 —— 组合模式(Composite)
Java设计模式 -- 组合模式(Composite) 定义 Composite,组合模式:将对象组合成树形结构以表示部分整体的关系,Composite使得用户对单个对象和组合对象的使用具有一致性. ...
JS设计模式--组合模式
JS设计模式–组合模式昨天学习了白贺翔老师的JS组合模式,现在把我学到的分享出来叭O(∩_∩)O,直接看下面代码 <!DOCTYPE html> <html lang=" ...
js设计模式——组合模式
组合模式将对象组合成树形结构,以表示"部分-整体"的层次结构.除了用来表示树形结构之外,组合模式的另一个好处是通过对象的多态性表现,是的用户对单个对象和组合对象的使用具有一致性. ...
设计模式----组合模式UML和实现代码
2019独角兽企业重金招聘Python工程师标准>>> 一.什么是组合模式? 组合模式(Composite)定义:将对象组合成树形结构以表示'部分---整体'的层次结构.组合模式使得 ...
js设计模式-组合模式
组合模式是一种专为创建web上的动态用户界面而量身定制的模式.使用这种模式,可以用一条命令在多个对象上激发复杂的或递归的行为.这可以简化粘合性代码,使其更容易维护,而那些复杂行为则被委托给各个对象. ...
大话设计模式—组合模式
组合模式(Composite Pattern),又叫部分整体模式,是用于把一组相似的对象当作一个单一的对象.组合模式依据树形结构来组合对象,用来表示部分以及整体层次.这种类型的设计模式属于结构型模式, ...

JavaScript设计模式——组合模式

组合模式的使用场景

示例：表单

总结

JavaScript设计模式——组合模式相关推荐

最新文章

热门文章