位置: 编程技术 - 正文

JavaScript设计模式开发中组合模式的使用教程(js设计模式有什么用)

编辑:rootadmin

推荐整理分享JavaScript设计模式开发中组合模式的使用教程(js设计模式有什么用),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js中的设计模式,js的设计模式,js 设计模式,js 设计模式,javascript 设计,js设计模型,JAVASCRIPT设计模式与开发实践,JAVASCRIPT设计模式与开发实践,内容如对您有帮助,希望把文章链接给更多的朋友!

我们平时开发过程中,一定会遇到这种情况:同时处理简单对象和由简单对象组成的复杂对象,这些简单对象和复杂对象会组合成树形结构,在客户端对其处理的时候要保持一致性。比如电商网站中的产品订单,每一张产品订单可能有多个子订单组合,比如操作系统的文件夹,每个文件夹有多个子文件夹或文件,我们作为用户对其进行复制,删除等操作时,不管是文件夹还是文件,对我们操作者来说是一样的。在这种场景下,就非常适合使用组合模式来实现。

基本知识

组合模式:将对象组合成树形结构以表示“部分-整体”的层次结构,组合模式使得用户对单个对象和组合对象的使用具有一致性。组合模式主要有三个角色:(1)抽象组件(Component):抽象类,主要定义了参与组合的对象的公共接口(2)子对象(Leaf):组成组合对象的最基本对象(3)组合对象(Composite):由子对象组合起来的复杂对象理解组合模式的关键是要理解组合模式对单个对象和组合对象使用的一致性,我们接下来说说组合模式的实现加深理解。组合模式算是为在页面动态创建UI量身定做的,你可以只使用一条命=命令为许多对象初始化一些复杂的或者递归的操作.组合模式提供了两个有点:(1)允许你将一组对象当成特定的对象.组合对象(A composite)和组成它的子对象实现相同的操作.对组合对象执行某一个操作将会使该对象下的所有子对象执行相同的操作.因此你不仅可以无缝的替换单个对象为一组对象集合,反过来也一样.这些独立的对象之间即所谓松散耦合的.(2)组合模式会将子对象集组合成树结构并且允许遍历整个树.这样可以隐藏内部实现并且允许你以任意的方式组织子对象.这个对象(组合对象)的任何代码将不会依赖内部子对象的实现.

组合模式的实现

(1)最简单的组合模式

HTML文档的DOM结构就是天生的树形结构,最基本的元素醉成DOM树,最终形成DOM文档,非常适用适用组合模式。我们常用的jQuery类库,其中组合模式的应用更是频繁,例如经常有下列代码实现:

JavaScript设计模式开发中组合模式的使用教程(js设计模式有什么用)

这句简单的代码就是获取class包含test的元素,然后进行addClass和removeClass处理,其中不论$(“.test”)是一个元素,还是多个元素,最终都是通过统一的addClass和removeClass接口进行调用。我们简单模拟一下addClass的实现:

这段代码简单的模拟了addClass的实现(暂不考虑兼容性和通用性),很简单地先判断节点类型,然后根据不同类型添加className。对于NodeList或者是Node来说,客户端调用都是同样的使用了addClass这个接口,这个就是组合模式的最基本的思想,使部分和整体的使用具有一致性。

(2)典型的例子

前面我们提到一个典型的例子:产品订单包含多个产品子订单,多个产品子订单组成一个复杂的产品订单。由于Javascript语言的特性,我们将组合模式的三个角色简化成2个角色:(1)子对象:在这个例子中,子对象就是产品子订单(2)组合对象:这里就是产品的总订单假设我们开发一个旅游产品网站,其中包含机票和酒店两种子产品,我们定义了子对象如下:

上面的代码定义了两个类:机票订单类和酒店订单类,每个类都有各自的订单创建方法。接下来我们创建一个总订单类:

这个对象主要有3个成员:订单列表,添加订单的方法,创建订单的方法。在客户端使用的时候如下:

客户端调用展示了两种方式,一种是单一的创建机票订单,一种是创建多张订单,但最终都是通过create方法进行创建,这就是一个很典型的组合模式的应用场景。

总结组合模式并不难理解,它主要解决的是单一对象和组合对象在使用方式上的一致性问题。如果对象具有明显的层次结构并且想要统一地使用它们,这就非常适合使用组合模式。在Web开发中,这种层次结构非常常见,很适合使用组合模式,尤其是对于JS来说,不用拘泥于传统面向对象语言的形式,灵活地利用JS语言的特性,达到对部分和整体使用的一致性。(1)使用组合模式的场景在遇到下面两种情况的时候才使用组合模式A.含有某种层级结构的对象集合(具体结构在开发过程中无法确定)B.希望对这些对象或者其中的某些对象执行某种操作(2)组合模式的缺点因为组合对象的任何操作都会对所有的子对象调用同样的操作,所以当组合的结构很大时会有性能问题。还有就是使用组合模式封装HTML时要选择合适的标签,比如table就不能用于组合模式,叶子节点不明显

设计模式中的facade外观模式在JavaScript开发中的运用 概念外观模式(门面模式),是一种相对简单而又无处不在的模式。外观模式提供一个高层接口,这个接口使得客户端或子系统更加方便调用。外观模式并

详解JavaScript实现设计模式中的适配器模式的方法 有的时候在开发过程中,我们会发现,客户端需要的接口和提供的接口发生不兼容的问题。由于特殊的原因我们无法修改客户端接口。在这种情况下,

Adapter适配器模式在JavaScript设计模式编程中的运用分析 定义适配器模式(Adapter)是将一个类(对象)的接口(方法或属性)转化成客户希望的另外一个接口(方法或属性),适配器模式使得原本由于接口不

标签: js设计模式有什么用

本文链接地址:https://www.jiuchutong.com/biancheng/370046.html 转载请保留说明!

上一篇:设计模式中的组合模式在JavaScript程序构建中的使用(设计模式三种)

下一篇:设计模式中的facade外观模式在JavaScript开发中的运用(设计模式中的行为模式)

  • 印花税进什么费用
  • 印花税的处理
  • 出口退税免税政策
  • 债权投资减值对摊余成本和利息收入的影响
  • 从企业分红所得税怎么算
  • 交易性金融资产有哪些
  • 非居民企业税率表最新
  • 汽车年审属于什么费用
  • 12月费用1月报销的账务处理
  • 员工宿舍免征房产税
  • 商铺租赁合同的用途怎么写
  • 办公室的取暖费怎么做会计分录
  • 核定征收的企业需要成本发票吗
  • 可以把两张发票合写在记账凭证上吗
  • 签订几年合同每年都要缴纳印花税吗?
  • 2018年建筑增值税税率表
  • 税控盘未上传发票查询
  • 旅游业差额开票税率
  • 住房公积金证书更新
  • 委托加工应税消费品收回后直接销售
  • 减免的附加税要计税吗
  • win10无法设置pin码怎么办
  • 退休返聘工资如何申报个人所得税
  • 出差人员差旅费作细的说明叫什么
  • 个税返还的会计处理方法
  • 电脑开机后桌面图标变乱
  • 融资性租赁的优缺点
  • 计量差错引起的盘亏
  • 橡皮树的养殖方法视频教程
  • 数字孪生demo
  • 企业的罚款支出指企业的行政罚款
  • 购买方收到红字发票如何冲成本
  • 税控盘是什么样子的
  • 推特网页设置
  • 国际货运代理存在的必要性有哪些方面
  • 广告片影视公司
  • 增值税普通发票怎么开
  • p f和p a的区别
  • 企业以银行存款购买股票
  • python缺失值的解决方法
  • 借款合同按什么缴纳印花税
  • 瀑布流样式
  • 社保信息修改到哪里办理
  • 企业收到赠送商品会计分录
  • 开专票还是开发票
  • 用友t6操作流程
  • 固定资产多入账怎么写情况说明
  • 长期挂账其他应付款违反了哪项制度
  • 股权转让如何进行
  • 原始凭证错误的更正方法
  • 现金支票作用
  • 辅导期一般纳税人标准
  • 会计账务做得混乱的原因
  • 加盟店直营店什么意思
  • 公司三证合一是指哪三证
  • sql server 服务器配置
  • 忘记windows登陆密码
  • winxp系统如何安装
  • 系统如何修改
  • Winpack.exe - Winpack是什么进程
  • 右键无法新建wps
  • windows中alt+tab
  • ie 无法打开
  • win8系统笔记本怎么恢复出厂设置
  • node.js安装教程详细
  • android遇到的难题,怎么解决的
  • unity3d怎么做游戏
  • js中断点用法
  • 字符串查找子串
  • javascript用处
  • 什么绑定什么服务
  • 2021税务公告
  • 在电子税务局如何增加税种
  • 美国对中国纺织服装关税
  • 税务总局机关
  • 税务巡视组一般检查什么
  • 张江税务所地址
  • 个人所得税对什么征税
  • 辽宁省财政局会计网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设