位置: 编程技术 - 正文

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开发中的运用(设计模式中的行为模式)

  • 一般纳税人哪些可以开3%的发票吗
  • 装卸费属于什么费用
  • 什么是小规模纳税人税率
  • 外部审计内容是什么
  • 票种核定表怎么填写
  • 销售人员购买的产品
  • 银行理财算投资吗
  • 增值税申报表在哪里打印
  • 发票没用完可以申请超限量吗
  • 递延收益负债类科目
  • 辞退职工赔偿金如何计算
  • 水电费的进项税额能抵扣吗
  • 贷款利息进项税额
  • 房产税开征范围中的城市
  • 开租金发票可以提前开的吗?
  • 已过认证周期什么意思
  • 印花税的收取
  • 办税人员需要会计证吗
  • 无形资产摊销表模板
  • 种子销售公司
  • 农业免税企业怎么报税
  • 初级备考计划表
  • 跨年度专用发票如何开红字发票
  • 个体户需要对公户吗
  • mac系统技巧
  • 主板故障开机断电
  • fast processing
  • 王者荣耀体验皮肤什么时候结束
  • 承兑到期解付为什么不到账
  • 伊斯塔神
  • 基于php技术
  • 企业合并一般债权怎么算
  • 结转本月完工产品的成本
  • 详解16型人格
  • php显示错误报告方式
  • uniapp使用高德地图直接进行导航
  • vue 组件
  • php访问路径
  • php7 nginx
  • 规划设计费会计处理
  • 公司期货套期保值会计处理方法
  • react 16新特性
  • 理财产品分红和收益
  • 企业固定资产如何查询
  • 兼职人员的个税怎么计算
  • 教育培训业能享受补贴吗
  • 施工企业老板名字
  • 工业企业成本一般占收入的比例
  • 购买防伪税控设备
  • 有限合伙企业中谨慎有限合伙人的应当
  • 给客户的回扣怎么表达
  • 增值税及附加是什么税
  • 欠钱打官司后利息怎么算
  • 管理费用和营业费用的比例
  • 法定盈余公积一般按照企业
  • 销售费用的会计分录摘要
  • 本月无进项发票需要去增值税发票认证平台吗
  • 流动资产周转率计算公式
  • 在SQL查询中使用WHERE子句指出的是
  • sql server随机数函数
  • ubuntu ftp服务开启
  • Fedora Core 5.0 安装教程,菜鸟图文教程(linux text)
  • 进程net1
  • 磁盘清理win10
  • xpspeak导入数据总是error reading
  • 多个网页怎么从一个网页中显示
  • linux端口流量监控
  • win10 rs3
  • 2015.6.28开始写博客记录cocos2dx学习历程
  • cocos2dx如何通过Image获取指定点颜色值
  • 检测输入条件的各种组合
  • textview在哪
  • vue怎么做兼容
  • JavaScript中Number.NEGATIVE_INFINITY值的使用详解
  • u3d地形编辑贴图
  • python发送邮件的模块
  • jquery 跨域方法
  • js触发select下拉列表
  • 北京共有产权房房源信息
  • 发票清单盖章样本图片
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设