javascript设计模式开发中组合模式的使用教程_基础知识

《javascript设计模式开发中组合模式的使用教程_基础知识》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、JavaScript设计模式开发中组合模式的使用教程我们平时开发过程中，一定会遇到这种情况：同时处理简单对象和由简单对象组成的复杂对象，这些简单对象和复杂对象会组合成树形结构，在客户端对其处理的时候要保持一致性。比如电商网站屮的产品订单，每一张产品订单可能有多个了订单组合，比如操作系统的文件夹，每个文件夹有多个了文件夹或文件，我们作为用户对其进行复制，删除等操作时，不管是文件夹还是文件，对我们操作者來说是一样的。在这种场景下，就非常适合使用组合模式來实现。基本知识组合模式：将对象组合成树形结构以表示“部分-整体”的层次结构，组合模式使得用户对

2、单个对彖和组合对彖的使用具有一致性。组合模式主要有三个角色：(1)抽象组件(Component):抽象类，主要定义了参与组合的对象的公共接口(2)T对象(Leaf):组成组合对象的最基木对象(3)组合对象(Composite):由子对象组合起来的复杂对象理解组合模式的关键是要理解组合模式对单个对彖和组合对彖使用的一致性，我们接下来说说组合模式的实现加深理解。组合模式算是为在页面动态创建UT量身定做的，你可以只使用一条命二命令为许多对象初始化一些复杂的或者递归的操作•组合模式提供了两个有点：(1)允许你将一组对象当成特定的对象•组合对象(Aco

3、mposite)和组成它的子对彖实现相同的操作•对组合对彖执行某一个操作将会使该对彖下的所有子对彖执行相同的操作•因此你不仅可以无缝的替换单个对象为一组对象集合，反过来也一样.这些独立的对象之间即所谓松散耦合的.(2)组合模式会将了对象集组合成树结构并且允许遍历整个树•这样可以隐藏内部实现并月•允许你以任意的方式组织子对象•这个对象(组合对象)的任何代码将不会依赖内部子对彖的实现.组合模式的实现(1)最简单的组合模式IITML文档的D0M结构就是天生的树形结构，最基木的元素醉成D0M树，最终形成D0M文档，非常适用适用组合模式。我们常用的JQ

4、uery类库，其中组合模式的应用更是频繁，例如经常有下列代码实现：$("・test")・addClass("noTcst")・remove("test");这句简单的代码就是获取class包含test的元素，然后进行addClass和removeClass处理，其中不论$(".test")是一个元素，还是多个元素，最终都是通过统一的addClass和removeClass接口进行调用。我们简单模拟一下addClass的实现：varaddClass=function(eles,className){if(elesinstanceofNodeLi

5、st){for(vari=0,length二eles.length;i

6、addClass(document・qucrySclcctorAll("・div"),"test");这段代码简单的模拟了addClass的实现(暂不考虑兼容性和通用性)，很简单地先判断节点类型，然后根据不同类型添加classNamec对于NodeList或者是Node来说，客户端调用都是同样的使用了addClass这个接口，这个就是组合模式的最基本的思想，使部分和整体的使用具有一致性。(2)典型的例子前面我们提到一个典型的例子：产品订单包含多个产品子订单，多个产品子订单组成一个复杂的产品订单。由于Javascript语言的特性，我们将组合模

7、式的三个角简仃成2个ft作•(1)子对象：在这个例子中，子对象就是产品子订单(2)组合对彖：这里就是产品的总订单假设我们开发一个旅游产品网站，其屮包含机票和酒店两种子产品，我们定义了了对象如下：functionFlight0rder(){}FlightOrder.prototyp.create二function(){console.log(z，flightordercreated'7);}functionHotelOrder(){}HotelOrder,prototype.create=function()console・log("hotel

8、ordercreated");上面的代码定义了两个类：机票订单类和酒丿占订单类，每个类都有各自的订单创建方法。接下來我们创建一个总订单类：functionTotal