脚本宝典收集整理的这篇文章主要介绍了js实例JavaScript设计模式开发中组合模式的使用教程，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

 $(".test").addClass("noTest").remove("test"); 

 VAR addClass = function (eles, classname) {   if (eles instanceof nodelist) {     for (var i = 0, length = eles.length; i < length; i++) {       eles[i].nodeTyPE === 1 && (eles[i].className += (&#39; ' + className + ' '));     }   }   else if (eles instanceof Node) {     eles.nodeType === 1 && (eles.className += (' ' + className + ' '));   }   else {     throw "eles is not a htML node";   } } addClass(document.getElementById("P3"), "test"); addClass(document.querySelectorAll(".p"), "test"); 

 function FlightOrder() { } FlightOrder.PRototyp.create = function () {   console.LOG("flight order created"); } function HotelOrder() { } HotelOrder.prototype.create = function () {   console.log("hotel order created"); } 

 function totalOrders() {   this.orderList = []; } TotalOrders.prototype.addOrder = function (order) {   this.orderList.push(order); } TotalOrders.prototype.create = function (order) {   for (var i = 0, length = this.orderList.length; i < length; i++) {     this.orderList[i].create();   } } 

 var flight = new FlightOrder(); flight.create();  var orders = new TotalOrders(); orders.addOrder(new FlightOrder()); orders.addOrder(new HotelOrder()); orders.create();

我们平时开发过程中，一定会遇到这种情况：同时处理简单对象和由简单对象组成的复杂对象，这些简单对象和复杂对象会组合成树形结构，在客户端对其处理的时候要保持一致性。比如电商网站中的产品订单，每一张产品订单可能有多个子订单组合，比如操作系统的文件夹，每个文件夹有多个子文件夹或文件，我们作为用户对其进行复制，删除等操作时，不管是文件夹还是文件，对我们操作者来说是一样的。在这种场景下，就非常适合使用组合模式来实现。
基本知识
组合模式：将对象组合成树形结构以表示“部分-整体”的层次结构，组合模式使得用户对单个对象和组合对象的使用具有一致性。
组合模式主要有三个角色：
（1）抽象组件（Component）：抽象类，主要定义了参与组合的对象的公共接口
（2）子对象（Leaf）：组成组合对象的最基本对象
（3）组合对象（Composite）：由子对象组合起来的复杂对象
理解组合模式的关键是要理解组合模式对单个对象和组合对象使用的一致性，我们接下来说说组合模式的实现加深理解。
组合模式算是为在页面动态创建UI量身定做的,你可以只使用一条命=命令为许多对象初始化一些复杂的或者递归的操作.组合模式提供了两个有点:
（1）允许你将一组对象当成特定的对象.组合对象(A composite)和组成它的子对象实现相同的操作.对组合对象执行某一个操作将会使该对象下的所有子对象执行相同的操作.因此你不仅可以无缝的替换单个对象为一组对象集合,反过来也一样.这些独立的对象之间即所谓松散耦合的.
（2）组合模式会将子对象集组合成树结构并且允许遍历整个树.这样可以隐藏内部实现并且允许你以任意的方式组织子对象.这个对象(组合对象)的任何代码将不会依赖内部子对象的实现.
组合模式的实现
（1）最简单的组合模式
HTML文档的DOM结构就是天生的树形结构，最基本的元素醉成DOM树，最终形成DOM文档，非常适用适用组合模式。
我们常用的jquery类库，其中组合模式的应用更是频繁，例如经常有下列代码实现：

 $(".test").addClass("noTest").remove("test"); 

 var addClass = function (eles, className) {   if (eles instanceof NodeList) {     for (var i = 0, length = eles.length; i < length; i++) {       eles[i].nodeType === 1 && (eles[i].className += (' ' + className + ' '));     }   }   else if (eles instanceof Node) {     eles.nodeType === 1 && (eles.className += (' ' + className + ' '));   }   else {     throw "eles is not a html node";   } } addClass(document.getElementById("p3"), "test"); addClass(document.querySelectorAll(".p"), "test"); 

 function FlightOrder() { } FlightOrder.prototyp.create = function () {   console.log("flight order created"); } function HotelOrder() { } HotelOrder.prototype.create = function () {   console.log("hotel order created"); } 

 function TotalOrders() {   this.orderList = []; } TotalOrders.prototype.addOrder = function (order) {   this.orderList.push(order); } TotalOrders.prototype.create = function (order) {   for (var i = 0, length = this.orderList.length; i < length; i++) {     this.orderList[i].create();   } } 

 var flight = new FlightOrder(); flight.create();  var orders = new TotalOrders(); orders.addOrder(new FlightOrder()); orders.addOrder(new HotelOrder()); orders.create();

觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的js实例JavaScript设计模式开发中组合模式的使用教程全部内容，希望文章能够帮你解决js实例JavaScript设计模式开发中组合模式的使用教程所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。