作者：山寨西域刀羊_281 | 来源：互联网 | 2023-05-19 06:24
我们平时开发过程中，一定会遇到这种情况：同时处理简单对象和由简单对象组成的复杂对象，这些简单对象和复杂对象会组合成树形结构，在客户端对其处理的时候要保持一致性。比如电商网站中的产品订单，每一张产品订单
我们平时开发过程中，一定会遇到这种情况：同时处理简单对象和由简单对象组成的复杂对象，这些简单对象和复杂对象会组合成树形结构，在客户端对其处理的时候要保持一致性。比如电商网站中的产品订单，每一张产品订单可能有多个子订单组合，比如操作系统的文件夹，每个文件夹有多个子文件夹或文件，我们作为用户对其进行复制，删除等操作时，不管是文件夹还是文件，对我们操作者来说是一样的。在这种场景下，就非常适合使用组合模式来实现。
基本知识：
组合模式：将对象组合成树形结构以表示“部分-整体”的层次结构，组合模式使得用户对单个对象和组合对象的使用具有一致性。
组合模式主要有三个角色：
(1)抽象组件（Component）：抽象类，主要定义了参与组合的对象的公共接口
(2)子对象(Leaf): 组成组合对象的最基本对象
(3)组合对象(Composite): 由子对象组合起来的复杂对象
理解组合模式的关键是要理解组合模式对单个对象和组合对象使用的一致性，我们接下来说说组合模式的实现加深理解。
组合模式的实现：
(1) 最简单的组合模式：
Html 文档的DOM结构就是天生的树形结构，最基本的元素构成DOM树，最终形成DOM文档，非常使用组合模式。
我们常用的JQuery类库，其中组合模式的应用更是频繁，例如经常有下列代码实现：
$(".test").addClass("noTest").remove("test");
// 这句简单的代码就是获取class包含test的元素，然后进行addClass和removeClass处理，其中不论$(".test")是一个元素，
// 还是多个元素，最终都是通过统一的addClass和removeClass接口进行调用。
// 我们简单模拟一下addClass的实现
<style media="screen">
.test{
color: #f00;
}
style>
<body>
<div id="div3">div3div>
<div class="div">divdiv>
<div class="div">divdiv>
<div class="div">divdiv>
<script>
// 我们简单模拟一下addClass的实现
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('div3'),"test")
addClass(document.querySelectorAll('.div'), "test")
script>
body>
京公网安备 11010802041100号