js设计模式:组合模式

作用:

可以用来将数据组合成树形的数据,可以像操作单独的对象一样去操作整个树形结构

树是相对复杂的数据,使用组合模式去封装树形的组件,是很重要的,可以对外暴露很多树的操作方法

示例:

        //一个树型的对象数据
        class Organ {
            constructor(label, value, parentName) {
                this.label = label
                this.value = value
                this.parentName = parentName
                this.childRen = []
            }
        }
        //新增元素
        Organ.prototype.addChildRen = function () {
            let arr = Array.from(arguments)
            arr.forEach(item => {
                this.childRen.push(item)
                this.flatList.push([this.value,item.value])
            })
            this.changeTreeNodeList()
        }
        //删除某个元素,其子节点也都会被一并删除
        Organ.prototype.removeChildRen = function (nodeValue) {
            let index = this.childRen.findIndex(val => val.value === nodeValue)
             this.childRen.splice(index,1)
             let arr = this.flatList.map(item=>{
                if(!item.includes(nodeValue)){
                    return item
                }
             })
            this.flatList = arr.filter(item => item !== undefined)
            this.changeTreeNodeList()
        }
        //过滤生成树的各条节点路线
        Organ.prototype.changeTreeNodeList = function(){
            this.treeNodeList.length = 0
            this.flatList.forEach(item1=>{
                let obj = this.flatList.find(item2 => item2[item2.length-1] === item1[0])
                if(obj){
                  this.treeNodeList.push([... new Set([].concat(obj).concat(item1))])
                }
            })
        }
        Organ.prototype.flatList = []
        Organ.prototype.treeNodeList = []

        //创建父级组织
        const jituanjun1 = new Organ('第一集团军','jituanjun1',false)
        //创建子级组织
        const hechenglv1 = new Organ('合成1旅','hechenglv1','jituanjun1')
        const hechenglv2 = new Organ('合成2旅', 'hechenglv2','jituanjun1')
        //子级组织加入父级组织
        jituanjun1.addChildRen(hechenglv1, hechenglv2)

        //下面操作重复上面的操作
        const bubingying1 = new Organ('步兵1营', 'bubingying1','hechenglv1')
        const bubingying2 = new Organ('步兵2营', 'bubingying2','hechenglv1')
        hechenglv1.addChildRen(bubingying1,bubingying2)
        const bubingying3 = new Organ('步兵3营', 'bubingying3','hechenglv2')
        const bubingying4 = new Organ('步兵4营', 'bubingying4','hechenglv2')
        hechenglv2.addChildRen(bubingying3,bubingying4)
        const bubingying5 = new Organ('步兵5营', 'bubingying5','hechenglv2')
        hechenglv2.addChildRen(bubingying5)

        //撤编
        hechenglv2.removeChildRen('bubingying4')
        console.log(jituanjun1,'第一集团军编制')
        console.log(jituanjun1.treeNodeList,'树的所有完整节点流向')

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/404960.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【MySQL】数据库概述

目录 一、为什么使用数据库? 二、数据库与数据库管理系统 2.1 相关概念 2.2 两者关系 三、 MySQL介绍 四、 RDBMS和非RDBMS 4.1 关系型数据库(RDBMS) 4.2 非关系型数据库(非RDBMS) 五、关系型数据库设计规则 …

OCPP 1.6 接入实现文档

一、简介 OCPP(Open Charge Point Protocol)是一个开放的通信协议,用于充电站(Charge Point)与中央系统(Central System,如充电站管理系统或服务提供商平台)之间的通讯。本篇文档将…

Matlab论文插图绘制模板第137期—极坐标分组气泡图

在之前的文章中,分享了Matlab极坐标气泡图的绘制模板: 进一步,再来分享一下极坐标分组气泡图。 先来看一下成品效果: ​ 特别提示:本期内容『数据代码』已上传资源群中,加群的朋友请自行下载。有需要的朋…

有哪些适合程序员的副业

如果你经常玩知乎、看公众号(软件、工具、互联网这几类的)你就会发现,好多资源连接都变成了夸克网盘、迅雷网盘的资源链接。 例如:天涯神贴,基本上全是夸克、UC、迅雷网盘的资源链接。 有资源的前提下,迅雷…

并发编程(2)管程(悲观锁)

4 共享模型之管程 本章内容 共享问题synchronized线程安全分析Monitorwait/notify线程状态转换活跃性Lock 4.1 共享带来的问题 4.1.1 小故事 老王(操作系统)有一个功能强大的算盘(CPU),现在想把它租出去&#xff…

2024年阿里云服务器优惠价格表,值得买云主机清单

2024阿里云服务器优惠活动政策整理,轻量2核2G3M服务器61元一年、2核4G4M带宽165元1年,云服务器4核16G10M带宽26元1个月、149元半年,阿里云ECS云服务器2核2G3M新老用户均可99元一年续费不涨价,企业用户2核4G5M带宽199元一年&#x…

PLC_博图系列☞基本指令“赋值”

PLC_博图系列☞基本指令“赋值” 文章目录 PLC_博图系列☞基本指令“赋值”背景介绍:赋值说明参数示例 关键字: PLC、 西门子、 博图、 Siemens 、 赋值 背景介绍 这是一篇关于PLC编程的文章,特别是关于西门子的博图软件。我并不是专业的…

Vite+Vue3+Ant Design3.2报错: Cannot read properties of null (reading ‘isCE‘)

最近的ViteVue3Ant Design Vue3.2开发的项目莫名其妙的报错: Uncaught (in promise) TypeError: Cannot read properties of null (reading isCE) 一直找不到原因出在哪,害的我费了好多时间调试 ,百度上也找了各个解决方法,有说使…

如何实现一个规则研究区域内数据的提取(matlab)

在利用经验正交分解(EOF)进行某一个研究区域分析时,我们需要将研究区域转换成N*M的矩阵,其中N为空间维度,M为时间维度,这意味着我们之前的数据加上时间维度是三维的,即(lon,lat,rg&a…

2024年面试季,大前端相关开发者不妨了解一下鸿蒙开发岗

搜狐:我宣布与华为达成鸿蒙全面合作! 美团:我宣布与华为达成鸿蒙全面合作! 360 :我宣布与华为达成鸿蒙全面合作! 高德:我宣布与华为达成鸿蒙全面合作! 新浪:我宣布与华为…

java使用poi简单操作excel

文章目录 引言插入行/列合并单元格以及设置居中换行 引言 编程开发中,我们可能会接到某些需求,例如导出某某某列表数据,或者做一份报表,这时候就需要我们的poi出场了,至于一些规则数据的导出,直接使用easy…

游戏服务器价格对比分析,2024高主频高性能服务器租用价格

游戏服务器租用多少钱一年?1个月游戏服务器费用多少?阿里云4核16G10M游戏服务器26元1个月、149元半年,腾讯云4核16G游戏服务器32元、312元一年,华为云26元,京东云主机也是26元起,游戏服务器配置从4核16G、4…

Linux学习方法-框架学习法——Linux驱动架构的演进

配套视频学习链接:https://www.bilibili.com/video/BV1HE411w7by?p4&vd_sourced488bc722b90657aaa06a1e8647eddfc 目录 Linux驱动演进的过程 Linux驱动的原始架构(Linux V2.4) 平台总线架构(platform) Linux设备树 Linux驱动演进的趋势 Linux驱动演进的过程…

最新攻略揭秘!多微信一键转发朋友圈,快速推广

现如今,微信朋友圈已然成为很多企业和个人的重要推广渠道之一。而如何快速推广朋友圈内容,吸引更多关注和转发,成为许多人关注的焦点。 今天就给大家分享一个可以实现一键转发朋友圈的工具——微信管理系统,帮助你快速提升内容曝…

#gStore-weekly | workbench功能详解之知识更新

gStore workbench作为gStore的可视化管理工具,不仅提供了可视化查询功能,还提供了可视化的知识更新功能,用户可以在可视化界面上进行知识的新增、修改和删除等操作,让我们的知识管理更加清晰和便捷。 1.查询知识 登录workbenc…

深信服技术认证“SCCA-C”划重点:深信服超融合HCI

为帮助大家更加系统化地学习云计算知识,高效通过云计算工程师认证,深信服特推出“SCCA-C认证备考秘笈”,共十期内容。“考试重点”内容框架,帮助大家快速get重点知识 划重点来啦 *点击图片放大展示 深信服云计算认证(S…

TDesign Vue Next Starter中后台项目的生产环境部署与CSP内容安全策略、CORS跨源资源共享和服务后端开发

TDesign Vue Next Starter中后台项目的生产环境部署与CSP内容安全策略、CORS跨源资源共享和服务后端开发 目录 TDesign Vue Next Starter中后台项目的生产环境部署与CSP内容安全策略、CORS跨源资源共享和服务后端开发 一、TDesign Vue Next Starter中后台项目模板 1.1、项目…

​​​​​​​Sora:OpenAI的革命性AI视频模型与其对未来影像创作的影响

随着深度学习技术和计算能力的进步,人工智能不仅在图像识别、自然语言处理等领域取得了卓越成就,同时也在不断突破视频处理和生成的边界。在这一背景下,OpenAI推出了Sora——一种新型的AI视频模型,标志着AI在视频内容创作领域的又…

后端程序员入门react笔记(四)-综合运用,写一个小demo

样式模块化 有时候我们会遇到这样的问题,有两个css对一个class声明了样式,这样的话后引入的css会覆盖前面的css样式,导致样式冲突,那么我们怎么解决这种问题呢,我们可以使用样式的模块化,我们起名一个inde…

Shell好用的工具: cut

目标 使用cut可以切割提取指定列\字符\字节的数据 介绍 cut 译为“剪切, 切割” , 是一个强大文本处理工具,它可以将文本按列进行划分的文本处理。cut命令逐行读入文本,然后按列划分字段并进行提取、输出等操作。 语法 cut [options] filename opti…