[AngularJS] Decorator pattern for code reuse
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的更多相关文章
- 设计模式系列之装饰模式(Decorator Pattern)——扩展系统功能
说明:设计模式系列文章是读刘伟所著<设计模式的艺术之道(软件开发人员内功修炼之道)>一书的阅读笔记.个人感觉这本书讲的不错,有兴趣推荐读一读.详细内容也可以看看此书作者的博客https:/ ...
- 设计模式(三):“花瓶+鲜花”中的装饰者模式(Decorator Pattern)
在前两篇博客中详细的介绍了"策略模式"和“观察者模式”,今天我们就通过花瓶与鲜花的例子来类比一下“装饰模式”(Decorator Pattern).在“装饰模式”中很好的提现了开放 ...
- 装饰模式(Decorator pattern)
装饰模式(Decorator pattern): 又名包装模式(Wrapper pattern), 它以对客户端透明的方式扩展对象的功能,是继承关系的一个替代方案. 装饰模式以对客户透明的方式动态的给 ...
- angularjs decorator
angularjs decorator https://docs.angularjs.org/guide/decorators decorator() $provide服务提供了在服务实例创建时对其进 ...
- 浅谈设计模式--装饰者模式(Decorator Pattern)
挖了设计模式这个坑,得继续填上.继续设计模式之路.这次讨论的模式,是 装饰者模式(Decorator Pattern) 装饰者模式,有时也叫包装者(Wrapper),主要用于静态或动态地为一个特定的对 ...
- 深入浅出设计模式——装饰模式(Decorator Pattern)
模式动机 一般有两种方式可以实现给一个类或对象增加行为: 继承机制,使用继承机制是给现有类添加功能的一种有效途径,通过继承一个现有类可以使得子类在拥有自身方法的同时还拥有父类的方法.但是这种方法是静 ...
- 二十四种设计模式:装饰模式(Decorator Pattern)
装饰模式(Decorator Pattern) 介绍动态地给一个对象添加一些额外的职责.就扩展功能而言,它比生成子类方式更为灵活.示例有一个Message实体类,某个对象对它的操作有Insert()和 ...
- C#设计模式之装饰者模式(Decorator Pattern)
1.概述 装饰者模式,英文名叫做Decorator Pattern.装饰模式是在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能.它是通过创建一个包装对象,也就是装饰来包裹真实的对象. 2 ...
- 第 13 章 装饰模式【Decorator Pattern】
以下内容出自:<<24种设计模式介绍与6大设计原则>> Ladies and gentlemen,May I get your attention,Please?,Now I’ ...
随机推荐
- Java入门请不要放弃,学习路线以及侧重点分析
前言: ●众多的语言,到底哪一门才是适合我的? ●我们为什么要学习Java语言呢? ●Java学习路线 我们可以通过今年最新的TIOBE编程语言排行榜看到,JAVA在"昨天".和& ...
- bootstrap-table的一些配置参数例子
$('#reportTable').bootstrapTable({ method: 'post', url: '/qStock/AjaxPage', dataType: "json&quo ...
- mysql中比较实用的几个函数
1.曾有这样的需求: 可以使用如下函数: 语法:FIND_IN_SET(str,strlist). 定义: 1. 假如字符串str在由N子链组成的字符串列表strlist中,则返回值的范围在1到N之间 ...
- Android Monkey压测命令
测试步骤:1.安装ADB2.连接被测手机和电脑3.打开CMD命令行4.输入monkey命令adb shell monkey -p your.package.name --pct-touch 30 -- ...
- Pycharm 配置houdini
一.houdini开发环境配置 1.添加Python可执行文件 2.设置代码自动补全 刚刚添加的Python.exe,右侧点击加号,依次添加以上长方形中的文件,路径会根据个人安装路径有所变化,后面的目 ...
- 怎样使当前cookie只有在加密协议https环境下才能将它发送到服务器
使用 Secure 属性. 注意, 这个属性基本是"自动"的, 也就是说, 如果当前网页是https请求的, 那里面的各种HTTP请求的cookie都会自定加上这个属性, 如果当前 ...
- ES6中Map与其他数据结构的互相转换
最近在学习ES6的基础知识,整理了一下Map与其他数据结构相互转换的写法. Map转为数组的方法 let myMap = new Map([[true, 7], [{foo: 3}, ['abc']] ...
- uni-app中picker组件的一个坑
这里直接贴出代码 <view class="goods-info-add fl-sw"> <view>运费模板:</view> <view ...
- javaIO——概述
以前看java书,都将IO作为一个大的章节甚至模块来编写,可见IO在java语言中的重要性. java的流按功能和处理的目标数据不同可以分为字节流和字符流.字符流处理的基本数据单元是字符:字节流处理的 ...
- [转载]Grid Search
[转载]Grid Search 初学机器学习,之前的模型都是手动调参的,效果一般.同学和我说他用了一个叫grid search的方法.可以实现自动调参,顿时感觉非常高级.吃饭的时候想调参的话最差不过也 ...