js装饰设计模式学习心得

 更新时间:2018年02月17日 08:53:20   投稿:laozhang   我要评论
本片文章给大家分享一下作者学习Javascript装饰设计模式后的心得以及要点分享,有兴趣的朋友参考下。

装饰设计模式

每种设都有其独特的应用场景和解决问题的方式, 装饰设计模式是动态的为对象添加新的功能, 是一种用于代替继承的技术,无需通过继承增加子类就能扩展对象的新功能。使用对象的关联关系代替继承关系,更加灵活,同时避免类型体系的快速膨胀, 这种模式适合新添加的功能不足以用继承为代价解决问题的情况时使用 - 杀鸡焉用宰牛刀 ^_^
装饰设计模式: 动态地为一个对象添加一些额外的职责,若要扩展一个对象的功能,装饰者提供了比继承更有弹性的替代方案。

结构图:

接口

var Bicycle = new Interface('Bicycle', ['assemble', 'wash', 'repair', 'getPrice']);

对象类

var AcmeComfortCuiser = function(){
};
AcmeComfortCuiser.prototype = {
  assemble: function(){
  },
  wash: function(){
  },
  repair: function(){
  },
  getPrice: function(){
  }
}

装饰类

var BicycleDecorator = function(bicycle){
  Interface.ensureImplements(bicycle, Bicycle);
  this.bicycle = bicycle;
};
BicycleDecorator.prototype = {
  assemble: function(){
    return this.bicycle.assemble();
  },
  wash: function(){
    return this.bicycle.wash();
  },
  repair: function(){
    return this.bicycle.repair();
  },
  getPrice: function(){
    return this.bicycle.getPrice();
  }
}

拓展类

  var HeadlightDecorator = function(bicycle){
    BicycleDecorator.call(this, bicycle);
  };
  extend(HeadlightDecorator, BicycleDecorator);
  HeadlightDecorator.prototype.getPrice = function(){
    return this.bicycle.getPrice() + 15.00;
  }

相关文章

  • Javascript浅谈之引用类型

    Javascript浅谈之引用类型

    这篇文章主要介绍了Javascript引用类型,有需要的朋友可以参考一下
    2013-12-12
  • Javascript this 关键字 详解

    Javascript this 关键字 详解

    Javascript是一种很灵活的语言, 而This关键字又是灵活中的灵活, 但是因为它的灵活, 也注定了它的难用.以前我用this的时候, 都会觉得不踏实, 老是担心它不知道怎么地就会指到另外的什么地方.其实, 这都是因为, 我们对它的不了解.
    2014-10-10
  • js关闭子窗体刷新父窗体实现方法

    js关闭子窗体刷新父窗体实现方法

    本文将详细介绍js关闭子窗体刷新父窗体实现方法,需要了解的朋友可以参考下
    2012-12-12
  • 浅谈JavaScript的Polymer框架中的behaviors对象

    浅谈JavaScript的Polymer框架中的behaviors对象

    这篇文章主要介绍了浅谈JavaScript的Polymer框架中的behaviors对象,Polymer是由Google开发的Web UI相关框架,需要的朋友可以参考下
    2015-07-07
  • js的hasownproperty使用示例

    js的hasownproperty使用示例

    我们在js中可能经常会用到for in来遍历对象中的属性,当然for in中得到的属性,只能是可枚举的属性,for in的时候,它会把对象的属性(包括原型的属性)遍历一遍,看面看示例就明白了
    2014-03-03
  • JavaScript window.setTimeout() 的详细用法

    JavaScript window.setTimeout() 的详细用法

    JavaScript window.setTimeout() 的详细用法,需要的朋友可以参考下。
    2009-11-11
  • Javascript基础_简单比较undefined和null 值

    Javascript基础_简单比较undefined和null 值

    下面小编就为大家带来一篇Javascript基础_简单比较undefined和null 值。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 简单学习JavaScript中的for语句循环结构

    简单学习JavaScript中的for语句循环结构

    这篇文章主要介绍了简单学习JavaScript中的for语句循环结构,是JavaScript入门学习中的基础知识,需要的朋友可以参考下
    2015-11-11
  • jquery应该如何来设置改变按钮input的onclick事件

    jquery应该如何来设置改变按钮input的onclick事件

    要动态改变这个上一页按钮中onclick的函数.我自己是尝试了很多种方法,都没有做出来,下面列举的几个都是失败的例子,需要的朋友可以参考下
    2012-12-12
  • 深入理解javascript作用域和闭包

    深入理解javascript作用域和闭包

    作用域和作用域链是javascript中非常重要的特性,对于他们的理解直接关系到对于整个javascript体系的理解,而闭包又是对作用域的延伸,也是在实际开发中经常使用的一个特性,实际上,不仅仅是javascript,在很多语言中都提供了闭包的特性。
    2014-09-09

最新评论