美文网首页
js 设计模式 - 装饰模式

js 设计模式 - 装饰模式

作者: 康乐芳华 | 来源:发表于2019-04-02 18:13 被阅读0次

存在两个函数

function apple(str) { //  a
  console.log('apple');
};
function banana(str) {  //  b
  console.log('banana');
};

在不改动源代码的情况下实现 applebanana 先执行, 不考虑计时器

Function.prototype.before_ = function(beforeFn) {  //  c
  const self = this;
  return function() {  //  d
    beforeFn.apply(this, arguments);
    return self.apply(this, arguments);  
  }
};
apple.before_(banana)(); 
//  a 表示函数; -> 表示执行; a() 表示函数执行了 
// --------------------------------------------
//  a.c(b)  -> d
//  d()  -> ( b() && a() )

函数 before_ 返回了一个代理函数, 该代理函数里面的两行代码的顺序反映了原两函数的需要执行顺序,
返回的代理函数的第一行是最先执行的函数
也有 applebanana 后执行的版本

Function.prototype.after_ = function(afterFn) {
  const self = this;
  return function() {
    const res = self.apply(this, arguments);
    afterFn.apply(this, arguments);
    return res;
  }
};
apple.after_(banana)(); 

相关文章

  • 前端设计模式

    JS设计模式一:工厂模式jS设计模式二:单例模式JS设计模式三:模块模式JS设计模式四:代理模式JS设计模式五:职...

  • js 设计模式 - 装饰模式

    存在两个函数 在不改动源代码的情况下实现 apple 比 banana 先执行, 不考虑计时器 函数 before...

  • js代码题

    js对象的深度克隆 js数组去重 js常用设计模式的实现思路,单例,工厂,代理,装饰,观察者模式等

  • 9、结构型模式-装饰器设计模式

    1、如虎添翼的设计模式-装饰器设计模式 简介:讲解-装饰器设计模式介绍和应用场景 装饰器设计模式(Decorato...

  • 《JS设计模式》读书笔记(一)

    标签:JS 设计模式 《JS设计模式》读书笔记(二) 《JS设计模式》读书笔记(三) 《JS设计模式》读书笔记(四...

  • JS设计模式-装饰器模式

    介绍 为对象添加新功能 不改变其原有的结构和功能和适配器模式不一样,适配器模式是原有的不能用了,而装饰器模式是原来...

  • 设计模式笔记汇总

    目录 设计原则 “依赖倒置”原则 未完待续... 设计模式 设计模式——策略模式 设计模式——装饰者模式 设计模式...

  • 11.4设计模式-装饰模式-讲解

    设计模式-装饰模式 装饰模式详解 装饰模式在android中的实际运用,避免了耦合 1. 装饰模式详解 2.装饰模...

  • 《JS设计模式》读书笔记(六)

    标签:JS 设计模式 读书笔记链接: 《JS设计模式》读书笔记(一) 《JS设计模式》读书笔记(二) 《JS设计模...

  • 《JS设计模式》读书笔记(二)

    标签:JS 设计模式 读书笔记链接: 《JS设计模式》读书笔记(一) 《JS设计模式》读书笔记(三) 《JS设计模...

网友评论

      本文标题:js 设计模式 - 装饰模式

      本文链接:https://www.haomeiwen.com/subject/exdgbqtx.html