zoukankan      html  css  js  c++  java
  • [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')
  • 相关阅读:
    剑指Offer 14. 最长公共前缀
    SpringCloud学习笔记【一】:多模块聚合工程基本环境搭建
    SpringCloud学习笔记【零】:官方文档翻译之简介
    SpringBoot利用AOP巧妙记录操作日志
    SpringBoot中BeanValidation数据校验与优雅处理详解
    解决:IDEA无法创建Java文件,只能创建kotlin文件
    SpringBoot实现文件上传功能详解
    SpringBoot快速瘦身,快速部署jar
    SpringBoot的外部化配置最全解析!
    IDEA解决yml配置文件中文输出乱码问题
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10894566.html
Copyright © 2011-2022 走看看