Imaging you have a large application, inside this large application you have many small individual applications.

main app

/             |               \

small A     Small B     Small C

For example you are building a redirection service in main app, you want to share some common partten code with small apps A,B,C.

There is one function inside redirection servcice:

Class RedirectionService {
getUrl ({state, isCustomer, namespace}) { }
}

It takes one object which contains 'state', which means in different state, we should redirection to different URL.

Second params is 'isCustomer', which tell whether current user is onboarded customer or not.

Last is 'namespace', which refer to Small A or Small B or Small C applications. Those applications have differnet url configed.

Now the problem is everytime from Small application, I have to tell all three params in order to make it works:

// small A
RedirectService.getUrl ({state: 'some state', isCustomer: CustomerA.isCustomer, namespace: 'small_A'})
RedirectService.getUrl ({state: 'some state_a2', isCustomer: CustomerA.isCustomer, namespace: 'small_A'}) // small B
RedirectService.getUrl ({state: 'some state_b1', isCustomer: CustomerB.isCustomer, namespace: 'small_B'})
RedirectService.getUrl ({state: 'some state_b2', isCustomer: CustomerB.isCustomer, namespace: 'small_B'})

So what we actually prefer is calling like this:

// Small A
RedirectService.getUrl('some state_a1') // Small B
RedirectService.getUrl('some state_b1')

From small applciation component level, we only care 'state',  we don't want to take care 'isCustomer' or 'namespace'.

To achieve this, we can use 'decorator' it is great way to code reuse.

// Take care isCustomer, by inject Customer service for based on different applications.
function NewRedirectionService($delegate, CustomerA) {
// store original function from Redirection Service
const getUrl = $delegate.getUrl; // Create a high order function to wrap original function
¨ // for small apps, they will call this new function instead
function newGetUrl(state) {
// apply common params and call original function
return getUrl.call($delegate, {state, isCustomer: CustomerA.isCustomer, namespace: 'small_A'});
} // override original function by new function.
$delegate.getUrl = newGetUrl; return $delegate;
} // Re-declare 'RedirectService' by using 'decorator'
angular.module('shared').decorator('RedirectionService', NewRedirectionService);

As you can see now, from compmonent level,

before:

RedirectService.getUrl ({state: 'some state', isCustomer: CustomerA.isCustomer, namespace: 'small_A'})

now:

RedirectService.getUrl ('some state')

[AngularJS] Decorator pattern for code reuse的更多相关文章

  1. 设计模式系列之装饰模式(Decorator Pattern)——扩展系统功能

    说明:设计模式系列文章是读刘伟所著<设计模式的艺术之道(软件开发人员内功修炼之道)>一书的阅读笔记.个人感觉这本书讲的不错,有兴趣推荐读一读.详细内容也可以看看此书作者的博客https:/ ...

  2. 设计模式(三):“花瓶+鲜花”中的装饰者模式(Decorator Pattern)

    在前两篇博客中详细的介绍了"策略模式"和“观察者模式”,今天我们就通过花瓶与鲜花的例子来类比一下“装饰模式”(Decorator Pattern).在“装饰模式”中很好的提现了开放 ...

  3. 装饰模式(Decorator pattern)

    装饰模式(Decorator pattern): 又名包装模式(Wrapper pattern), 它以对客户端透明的方式扩展对象的功能,是继承关系的一个替代方案. 装饰模式以对客户透明的方式动态的给 ...

  4. angularjs decorator

    angularjs decorator https://docs.angularjs.org/guide/decorators decorator() $provide服务提供了在服务实例创建时对其进 ...

  5. 浅谈设计模式--装饰者模式(Decorator Pattern)

    挖了设计模式这个坑,得继续填上.继续设计模式之路.这次讨论的模式,是 装饰者模式(Decorator Pattern) 装饰者模式,有时也叫包装者(Wrapper),主要用于静态或动态地为一个特定的对 ...

  6. 深入浅出设计模式——装饰模式(Decorator Pattern)

    模式动机 一般有两种方式可以实现给一个类或对象增加行为: 继承机制,使用继承机制是给现有类添加功能的一种有效途径,通过继承一个现有类可以使得子类在拥有自身方法的同时还拥有父类的方法.但是这种方法是静 ...

  7. 二十四种设计模式:装饰模式(Decorator Pattern)

    装饰模式(Decorator Pattern) 介绍动态地给一个对象添加一些额外的职责.就扩展功能而言,它比生成子类方式更为灵活.示例有一个Message实体类,某个对象对它的操作有Insert()和 ...

  8. C#设计模式之装饰者模式(Decorator Pattern)

    1.概述 装饰者模式,英文名叫做Decorator Pattern.装饰模式是在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能.它是通过创建一个包装对象,也就是装饰来包裹真实的对象. 2 ...

  9. 第 13 章 装饰模式【Decorator Pattern】

    以下内容出自:<<24种设计模式介绍与6大设计原则>> Ladies and gentlemen,May I get your attention,Please?,Now I’ ...

随机推荐

  1. [转帖]海思大佬称华为CPU同频追平AMD 注水吹嘘玩文字游戏?

    海思大佬称华为CPU同频追平AMD 注水吹嘘玩文字游戏? https://t.cj.sina.com.cn/articles/view/6635931736/18b88485800100cz4h?fr ...

  2. hanlp自然语言处理包的人名识别代码解析

    HanLP发射矩阵词典nr.txt中收录单字姓氏393个.袁义达在<中国的三大姓氏是如何统计出来的>文献中指出:当代中国100个常见姓氏中,集中了全国人口的87%,根据这一数据我们只保留n ...

  3. 数据结构 -- 栈(Stack)

    一.栈的简介 定义 栈(英语:stack)又称为堆栈或堆叠,栈作为一种数据结构,它按照先进后出的原则存储数据,先进入的数据被压入栈底,最后的数据在栈顶,需要读数据的时候从栈顶开始弹出数据(最后一个数据 ...

  4. Dijstra_优先队列_前向星

    Dijstra算法求最短路径 具体实现方式 设置源点,将源点从原集u{}中取出并放入新建集s{} 找出至源点最近的点q从原集取出放入新集s{} 由q点出发,更新所有由q点能到达的仍处于原集的点到源点的 ...

  5. Python 第二式

    @Codewars Python练习 question ** Simple transposition ** Simple transposition is a basic and simple cr ...

  6. Django Rest Framework 安装

    1. 环境要求 Python (3.5, 3.6, 3.7): 查看 python版本:python -V Django (1.11, 2.0, 2.1, 2.2) 查看django版本:pip li ...

  7. java Lesson08总结

    package com.xt.java.FirstExciple.oop; public class NokiaPhone {  //成员变量 String name="np001" ...

  8. ASP.NET Core 2.0 中读取 Request.Body 的正确姿势

    原文:ASP.NET Core 中读取 Request.Body 的正确姿势 ASP.NET Core 中的 Request.Body 虽然是一个 Stream ,但它是一个与众不同的 Stream ...

  9. Winform界面GridView中XCDataGridViewCheckBoxAllColumn改变触发事件

    1.首先利用CurrentCellDirtyStateChanged事件 监测状态改变后判断是否有未提交的更改,若有则提交 private void CurrentCellDirtyStateChan ...

  10. DPDK latencystats库使用方案

    初始化 注意务必调用 rte_metrics_init /* init latency stats */ /* @TODO should we remove this in product env? ...