您好!欢迎来到爱源码

爱源码

热门搜索: 抖音快手短视频下载   

JS设计模式的组合模式 {网站源码}

  • 时间:2022-09-03 00:37 编辑: 来源: 阅读:277
  • 扫一扫,手机访问
摘要:JS设计模式的组合模式 {网站源码}
定义:复合模式,也称为部分整体模式,用于将一组相似的对象视为单个对象。 组合模式根据树结构组合对象,树结构用于表示部分和整体层次结构。 这种类型的设计模式属于结构化模式,它创建了对象组的树状结构。 特点:小的子对象用来构造一个更大的父对象,这些子对象也是由更小的子对象组成的。单个对象和组合对象与客户公开的接口一致,同一接口的不同表现形式也表现出多态性。应用场景组合模式可以用在需要对“树形结构”进行操作的应用中,比如扫描文件夹、渲染网址导航结构等。 如何处理:树枝和树叶实现统一接口,接口组合在树枝内部。 关键代码:接口组合在分支内部,包含内部属性列表,组件放在里面。 我们来看一个具体的案例。首先有一个文件夹类,可以添加文件,扫描文件夹,然后创建一个文件类,扫描文件。//创建文件类class file { constructor(name){ this . name = name;} scan() {console.log('扫描文件'+this . name);} }//创建文件夹类class folder { constructor(name){ this . name = name;this . files =[];}//add file add(file){ this . files . push(file);} // scan scan() {console.log('扫描文件夹'+this . name);for(let item of this . files){ item . scan();} } }//创建根目录const home = new文件夹(“home”);//创建目录1 const folder 1 = new folder(' folder 1 ');//Create File 1 const File 1 = new File(' File 1 ');//将文件添加到目录1 folder 1 . Add(file 1);//将目录1添加到根目录home . Add(folder 1);//创建目录2 const folder 2 = new folder(' folder 2 ');//Create File 2 const File 2 = new File(' File 2 ');//将文件2添加到目录2 folder 2 . Add(file 2);//Create File 3 const File 3 = new File(' File 3 ');//将文件3添加到目录2 folder 2 . Add(file 3);//将目录2添加到根目录home . Add(folder 2);//从根目录开始扫描home . scan();/*扫描文件夹首页扫描文件夹folder1扫描文件file1扫描文件夹folder2扫描文件file2扫描文件file3*/这里用代码模拟了文件扫描功能,封装了File和Folder两个类。 在组合模式中,客户可以将文件或文件夹嵌套到文件夹类中,以模拟真实“文件目录”的树形结构 同时,这两个类都提供了外部扫描接口。文件下扫描是扫描文件,文件夹下扫描是调用子文件夹和子文件夹的扫描方法。 整个过程采用深度优先。 class macro command { constructor(){ this . command list =[];}添加(...command){ if(array . isarray(command)){ command . foreach(c = & gt;{ this . command list . push(c);})} else { this . command list . push(command);} } execute(){ this . command list . foreach(command = & gt;{ command.execute(命令);}) }}class命令{ constructor(name){ this . name = name;} execute(command){ console . log(' execute '+command . name+' command ')} }//创建新的单个命令constmarcommand 1 = newmacrocommand();const OpenLightCommand = new command('开灯');macro command 1 . add(openLightCommand);//创建新的组合命令const macro command 2 = new macro command();const open computer command = new command('组合-打开计算机');Const openQQCommand = new Command('组合-登录QQ ');macro command 2 . add(openComputerCommand);macro command 2 . add(openqq command);const宏命令= new宏命令();//将组合命令添加到主命令//macro command . Add(macro command 1);//macro command . add(macro command 2);Macrocommand.add(宏命令1,宏命令2)//执行主命令macro command . Execute();通过观察这段代码,我们很容易发现宏命令包含了一组子命令,这些子命令形成了一个树形结构。这是一个结构非常简单的树形图。其中marcoCommand称为复合对象,openLightCommand、openComputerCommand、openQQCommand都是叶子对象。 在macroCommand的execute方法中,不执行真正的操作,而是遍历其中包含的叶对象,将真正的执行请求委托给这些叶对象。 宏命令体现为一个命令,但它实际上只是一组真实命令的“代理”。 虽然在结构上类似,但macroCommand只负责向叶对象传递请求,其目的并不是控制对叶对象的访问。 在复合模式中,请求在树中传输的过程总是遵循一个逻辑。 以宏命令为例,请求是从树顶端的对象向下传递的。如果当前解决请求的对象是一个叶对象(普通子命令),叶对象本身将对请求做出相应的解决方案。如果当前解决请求的对象是复合对象(宏命令),复合对象将遍历其下属子节点,并继续将请求传递给这些子节点。 总之,如果子节点是叶子对象,叶子对象本身会解决请求,如果子节点是复合对象,请求会继续传递下去。 (传输的过程就是反复调用其对应的方法。)叶子对象下不会有其他子节点。一个叶对象是树的这个分支的末端,并且在组合的对象下可能有子节点。image.png注意:组合对象可以有子节点,但是叶子对象下没有子节点,所以我们可能会有一些错误的操作,比如试图给叶子对象添加子节点。 解决方法通常是在leaf对象中添加一个add方法,当这个方法被调用时,抛出异常及时提示用户。 详情请参考本文。你可以试着实现这样的树形结构├-menu | |-主食| |-米饭| |-面条| |-蔬菜| |-酸辣土豆丝| | ├├├├├├├├├├├├├├├├├├├├├├ζζ├ζζζ├ζ950


  • 全部评论(0)
资讯详情页最新发布上方横幅
最新发布的资讯信息
【域名/主机/服务器|】qq邮箱提醒在哪里打开(2024-06-04 18:58)
【技术支持|常见问题】1556原创ng8文章搜索页面不齐(2024-05-01 14:43)
【技术支持|常见问题】1502企业站群-多域名跳转-多模板切换(2024-04-09 12:19)
【技术支持|常见问题】1126完美滑屏版视频只能显示10个(2024-03-29 13:37)
【技术支持|常见问题】响应式自适应代码(2024-03-24 14:23)
【技术支持|常见问题】1126完美滑屏版百度未授权使用地图api怎么办(2024-03-15 07:21)
【技术支持|常见问题】如何集成阿里通信短信接口(2024-02-19 21:48)
【技术支持|常见问题】算命网微信支付宝产品名称年份在哪修改?风水姻缘合婚配对_公司起名占卜八字算命算财运查吉凶源码(2024-01-07 12:27)
【域名/主机/服务器|】帝国CMS安装(2023-08-20 11:31)
【技术支持|常见问题】通过HTTPs测试Mozilla DNS {免费源码}(2022-11-04 10:37)

联系我们
Q Q:375457086
Q Q:526665408
电话:0755-84666665
微信:15999668636
联系客服
企业客服1 企业客服2 联系客服
86-755-84666665
手机版
手机版
扫一扫进手机版
返回顶部