位置: 编程技术 - 正文

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

  • 营业执照是怎么样子的
  • 税务师考试2023年考试时间
  • 全年没有超过起征点需要汇算吗
  • 预缴税款如何抵扣苗木款
  • 车票抵扣进项税申报在哪一栏
  • 出纳个人账户转公户
  • 公对公转账需要交税吗?
  • 企业所得税完税凭证在哪里打印
  • 资产负债表上预付账款和预收账款区别
  • 加盟店如何缴税
  • 机动车丢失后怎么销户
  • 固定资产盘盈盘亏的会计科目
  • 一次性加速折旧汇算清缴调增吗
  • 劳务外包用工单位可以抵扣进项税吗
  • 实收资本印花税是一年一交吗
  • 增值税抵扣凭证包括农产品收购发票
  • 营改增后房屋租赁如何纳税
  • 当月工资补扣个税吗
  • 商业土地厂房办公房过户需要交什么税?
  • 一般纳税人小微企业认定标准
  • 不合规发票有哪些风险
  • 利润表与所得税申报表不符
  • 零售金银首饰消费税税率是多少
  • 公司注销的时候注册资金都没交可以吗?
  • 零售不开票收入会计分录
  • 鼠标怎么设置为右键功能
  • win10更新补丁卸载不了
  • mac option开机
  • 入库前的准备
  • 公司资产转让要交多少税
  • 资产减值损失在哪个表
  • flash process
  • 白兰花的养殖方法和注意事项和病虫害
  • 消费税的会计分录怎么写
  • ajax如何返回数据
  • phpweb框架
  • 安装elementUI
  • js获取各种屏幕信息
  • 划水划水划水表情包
  • 控制器eabs
  • 股东投资款怎么存入公司
  • 购销合同印花税最新政策2023
  • 长期应收款如何核算
  • 企业接受捐赠要交增值税
  • 2022-8-29 javaweb 第一天 servlet/tomcat
  • python访问字符串
  • 假退库会计分录
  • 企业哪些支出可以用现金支付
  • 工程款增值税专用发票需要写工程名称吗
  • 非独立核算门市部销售自产应税消费品
  • 买一赠一是什么促销方式
  • 公司收到财政局奖励怎么记账
  • 广告类的公司
  • 银行承兑贴现需要多久
  • 专票红冲信息表填开显示红字信息表金额大于蓝色金额
  • 开出去的发票没有进项发票如何核算成本?
  • 补交增值税和滞纳金怎么入账
  • 应付账款周转率越大说明什么
  • 教育费附加免征文件
  • 预付的展会费如何入账
  • 发票怎么看是普票还是专票
  • 企业其他应收款余额非常大的原因
  • 怎样计算计时工资
  • win10 发布
  • centos gogs
  • 火狐firefox浏览器华为
  • sysscjh.exe是什么文件
  • 盗版win7怎么升级
  • win8任务栏设置在哪
  • windows7库功能
  • linux sh
  • node.js的使用
  • unity shader cull off
  • 让图片垂直居中
  • Node.js中的全局变量有哪些
  • linux shell获取ip地址
  • Firefox window.close()的使用注意事项
  • 江苏省发票查询电话
  • 非贸付汇代扣代缴增值税可以抵扣吗
  • 个人出租平台有哪些
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设