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. 搜索(BFS、DFS、回溯)

    这类题是最简单的了都是一个套路,不像动态规划一类题一个套路,没做过就是不会也极难想出来. 一.BFS 解决的问题:用来初始点解决到指定点的最短路径问题,因为图的每一层上的点到初始点的距离相同.(注意是 ...

  2. 列表推导:python2和python3中作用域的问题

    python2中: x = 'my love' dummy = [x for x in 'ABC'] print x 此时x打印为:'C' python3中: x = 'my love' dummy ...

  3. VIM纵向编辑【转】

    原文:https://www.ibm.com/developerworks/cn/linux/l-cn-vimcolumn/index.html Vim 的纵向编辑模式启动方便,使用灵活,还可以配合上 ...

  4. NameValuePair 简单名称值对节点类型

    /// <summary> /// 组装普通文本请求参数用于post请求 /// </summary> /// <param name="parameters& ...

  5. Pattern Recognition and Machine Learning-01-Preface

    Preface Pattern recognition has its origins in engineering, whereas machine learning grew out of com ...

  6. 在Windows中 , 如何用leakdiag “自动”检测内存泄露 (自动记录日志)

    一.基本用法 在LeakDiag中选择aaa.exe 然后选择Windows Heap Allocator来跟踪heap的使用,按start开始,等一会按log,然后再stop 会在c:\leakdi ...

  7. SSISDB7:当前正在运行的Package及其Executable

    PM问:“Vic,现在ETL Job跑到哪一个Package了,正在执行哪个Task?”,第一次遇到这个问题时,一下就懵逼了,只能硬着头皮说:“我看看”. 在做项目开发时,这个问题很常见,但是,被很多 ...

  8. Collection 和 Collections的区别

    1.java.util.Collection 是一个集合接口(集合类的一个顶级接口).它提供了对集合对象进行基本操作的通用接口方法.Collection接口在Java 类库中有很多具体的实现.Coll ...

  9. 我理解的epoll(三)多线程模式下的ET

    ET模式下,需要循环从缓存中读取,直到返回EAGAIN没有数据可读后,一个被通知的事件才算结束.如果还读取过程中,同一个连接又有新的事件到来,触发其他线程处理同一个socket,就乱了.EPOLL_O ...

  10. vue-element-admin 之改变登录界面input的光标颜色

    前话:用框架原有的login更改而不重写的话,恰好当你input背景设置成白色的时候,光标会找不到=>原因:原框架的光标颜色是#fff 操作更改光标颜色: 找到src/views/login/i ...