JavaScript-装饰器函数(Decorator)

JavaScript-装饰器函数(Decorator)

用于给对象在运行期间动态的增加某个功能,职责等。相较通过继承的方式来扩充对象的功能,装饰器显得更加灵活,首先,我们可以动态给对象选定某个装饰器,而不用hardcore继承对象来实现某个功能点。其次:继承的方式可能会导致子类繁多,仅仅为了增加某一个单一的功能点,显得有些多余了。

下面给出几个常用的装饰器函数示例,相关代码请查看github

1 动态添加onload监听函数

        function addLoadEvent(fn) {
            var oldEvent = window.onload;
            if(typeof window.onload != ‘function‘) {
                window.onload = fn;
            }else {
                window.onload = function() {
                    oldEvent();
                    fn();
                };
            }
        }
        function fn1() {
            console.log(‘onloadFunc 1‘);
        }
        function fn2() {
            console.log(‘onloadFunc 2‘);
        }
        function fn3() {
            console.log(‘onloadFunc 3‘);
        }
        addLoadEvent(fn1);
        addLoadEvent(fn2);
        addLoadEvent(fn3);

2 前置执行函数和后置执行函数

    Function.prototype.before = function(beforfunc) {
            var self = this;
            var outerArgs = Array.prototype.slice.call(arguments, 1);

            return function() {
                var innerArgs = Array.prototype.slice.call(arguments);
                var finalArgs = outerArgs.concat(innerArgs);

                beforfunc.apply(this, finalArgs);
                self.apply(this, finalArgs);
            };
        };

        Function.prototype.after = function(afterfunc) {
            var self = this;
            var outerArgs = Array.prototype.slice.call(arguments, 1);

            return function() {
                var innerArgs = Array.prototype.slice.call(arguments);
                var finalArgs = outerArgs.concat(innerArgs);

                self.apply(this, finalArgs);
                afterfunc.apply(this, finalArgs);
            };
        };

        var func = function(name){
            console.log(‘I am ‘ + name);
        };
        var beforefunc = function(age){
            console.log(‘I am ‘ + age + ‘years old‘);
        };
        var afterfunc = function(gender){
            console.log(‘I am a ‘ + gender);
        };

        func.before(beforefunc(‘12‘)).after(afterfunc(‘boy‘));
        func(‘A‘);

3 函数执行时间计算

    function log(func){
            return function(...args){
                const start = Date.now();
                let result = func(...args);
                const used = Date.now() - start;
                console.log(`call ${func.name} (${args}) used ${used} ms.`);
                return result;
            };
        }

        function calculate(times){
            let sum = 0;
            let i = 1;
            while(i < times){
                sum += i;
                i++;
            }
            return sum;
        }

        runCalculate = log(calculate);
        let result = runCalculate(100000);
        console.log(result);

注:这里我使用了ES2015(ES6)语法,如果你感兴趣可以查看我关于ES6的博客。

当然,装饰器函数不仅仅这些用法。天猫使用的Nodejs框架Koa就基于装饰器函数及ES2015的Generator。希望这篇博客能起到抛砖引玉的作用,使你编写更优雅的JS代码。

时间: 2024-10-14 10:33:38

JavaScript-装饰器函数(Decorator)的相关文章

Javascript装饰器的妙用

最近新开了一个Node项目,采用TypeScript来开发,在数据库及路由管理方面用了不少的装饰器,发觉这的确是一个好东西.装饰器是一个还处于草案中的特性,目前木有直接支持该语法的环境,但是可以通过 babel 之类的进行转换为旧语法来实现效果,所以在TypeScript中,可以放心的使用@Decorator. 什么是装饰器 装饰器是对类.函数.属性之类的一种装饰,可以针对其添加一些额外的行为.通俗的理解可以认为就是在原有代码外层包装了一层处理逻辑.个人认为装饰器是一种解决方案,而并非是狭义的@

Python装饰器函数

装饰器函数 这里定义了一个func函数,打印'我是func函数' def func(): print('我是func函数'); time.sleep(1); 假设,想要在func()函数的基础之上新增的一个功能,计算func函数执行所用的时间 import time;#时间模块,处理时间操作 #开闭原则,对扩展开放,对修改封闭 def func(): print('我是func函数'); time.sleep(1);#休眠一秒 #tools方法就是func方法的装饰器 def tool(): d

用最简单的例子理解装饰器模式(Decorator Pattern)

假设有一个公司要做产品套餐,即把不同的产品组合在一起,不同的组合对应不同的价格.最终呈现出来的效果是:把产品组合的所有元素呈现出来,并显示该组合的价格. 每个产品都有名称和价格,首先设计一个关于产品的抽象基类. public abstract class ProductBase { public abstract string GetName(); public abstract double GetPrice(); } 所有的产品都必须继承这个基类,比如家居用品.电器产品等,把这些具体的产品提

python全栈开发从入门到放弃之装饰器函数

1.函数名可以当作函数的参数 1 import time 2 def timmer(func): 3 #函数名可以当做函数的参数 4 def inner(): 5 start = time.time() 6 func() 7 end = time.time() 8 print(end - start) 9 return inner 10 11 def hahaha(): 12 time.sleep(0.1) 13 print('aaaa') 14 15 hahaha() 16 17 输出结果 1

设计模式(八)装饰器模式Decorator(结构型)

设计模式(八)装饰器模式Decorator(结构型) 1. 概述 若你从事过面向对象开发,实现给一个类或对象增加行为,使用继承机制,这是所有面向对象语言的一个基本特性.如果已经存在的一个类缺少某些方法,或者须要给方法添加更多的功能(魅力),你也许会仅仅继承这个类来产生一个新类—这建立在额外的代码上. 通过继承一个现有类可以使得子类在拥有自身方法的同时还拥有父类的方法.但是这种方法是静态的,用户不能控制增加行为的方式和时机.如果  你希望改变一个已经初始化的对象的行为,你怎么办?或者,你希望继承许

说说设计模式~装饰器模式(Decorator)

装饰器模式,也叫又叫装饰者模式,顾名思义,将一个对象进行包裹,包装,让它变成一个比较满意的对象,这种模式在我们平时项目开发中,经常会用到,事实上,它是处理问题的一种技巧,也很好的扩展了程序,让程序代码不那么死板! 何时能用到它? 1. 需要扩展一个类的功能,或给一个类添加附加职责. 2. 需要动态的给一个对象添加功能,这些功能可以再动态的撤销. 3. 需要增加由一些基本功能的排列组合而产生的非常大量的功能,从而使继承关系变的不现实. 4. 当不能采用生成子类的方法进行扩充时. 其中我们认为第四种

函数(三) 装饰器函数

装饰器定义    装饰器其实也就是一个函数,一个用来包装函数的函数,返回一个修改之后的函数值,将新的值赋值原来的函数 2. 装饰器语法 1.函数名可以当作函数的参数 1 import time 2 def timmer(func): 3 #函数名可以当做函数的参数 4 def inner(): 5 start = time.time() 6 func() 7 end = time.time() 8 print(end - start) 9 return inner 10 11 def hahah

自己编写一个装饰器中的装饰器函数

看了"大道曙光"的<探究functools模块wraps装饰器的用途>的文章.基本上弄清了wraps的工作原理,为了检验一下自己理解的程度,于是动手写一个类似的 wraps函数,请大家指教. #!/usr/bin/env python # -*- coding: utf-8 -*- #filename : mywrapper.py #date: 2017-06-02 ''' wrapper function by my code.''' import functools i

说说设计模式~装饰器模式(Decorator)~多功能消息组件的实现

返回目录 为何要设计多功能消息组件 之前写过一篇装饰器模式的文章,感觉不够深入,这次的例子是实现项目中遇到的,所以把它拿出来,再写写,之前也写过消息组件的文章,主要采用了策略模式实现的,即每个项目可以通过配置进行一种消息的订制,如,你可以订制email,sms,rtx,qq等,但不能同时采用多种机制完成消息的发送,这在一些情况下是没有问题的,但有时,我们也需要同时为客户提供多种消息的推送,这在目前还是挺现时的,如在用户下单后,同时为它发email 和短信进行通过,并对每个订单的过程进行跟踪并通知