装饰者模式,英文名:Decorator。
装饰者基本概念:装饰者可以用于修改现有的系统,希望在系统中为对象添加额外的功能,而不需要修改对象的底层代码来添加额外的功能。
举个简单的例子:
function vehicle(type){ this.vehicleType = type || "car"; this.model = "default"; } var testInstance = new vehicle(); console.log(testInstance); //{vehicleType:"car",model:"default"} var truck = new vehicle(); //创建一个vehicle实例对象进行装饰 truck.setModel = function(modelName){ //给truck装饰新的功能 this.model = modelName; }
truck.setModel("chaojidan");
var secondInstance = new vehicle();
secondInstance.setModel(); //报错
上面的代码中,truck对象有了setModel方法,但是并没有改变vehicle构造函数的代码,并且没有影响后面实例化出来的对象secondInstance。
上面这个例子不能很好的展示装饰者模式的好处。
由于装饰者可以动态的修改对象,因此它们是一种用于改变现有系统的完美模式。
实际应用:jQuery.extend方法,允许我们在运行时动态的将两个或两个以上的对象一起合并为一个单一的对象,并返回此单一的对象。
在这种情况下,一个目标对象或返回的单一对象已经被装饰成了具有其他对象(两个或两个以上对象)拥有的所有方法和属性了,而不会重写或破坏其他对象(两个或两个以上的对象)中的方法和属性。(当然目标对象被重写了,但这也是我们装饰后的对象)
享元模式,英文名:Flyweight。
基本概念:通过与相关的对象共享尽可能多的数据来减少应用程序中内存的使用。
在实践中,享元模式会获取多个对象使用的相似数据,并把这些数据放到一个单一的外部对象中。我们可以将该对象(单一的外部对象)传递给依赖这些数据的对象,而不是每一个对象都存储相同的数据。
享元模式在浏览器中,主要用在事件委托这块。
举个例子:
假设一个页面中有一些相似的元素,在用户对它们执行用户动作(点击,鼠标悬停)时执行同样类似的行为。我们没有必要给每一个元素绑定同样的事件和事件处理函数,我们可以很容易的将享元附件到页面的document中,它可以监听来自其他元素的事件,这样我们就只要绑定一次事件和一个事件处理函数。
这里讲一下James Padolsey提出的一个使jQuery开发性能更好的问题:
$("div").on("click",function(){ $(this).css(); $(this).html(); });
上面的代码中,在回调函数中,我们把this包装成jQuery对象,以调用jQuery提供的方法,上面对this包装了两次(这里先不考虑用局部变量保存$(this)的情况)。
James Padolsey认为,这种多次包装同一对象为jQuery对象的方法不好,于是他想到了一个方法:
jQuery.single(),此方法返回同一个jQuery对象,比如:上面的代码,我们可以用jQuery.single(this).css(),jQuery.single(this).html()代替,由于jQuery.single方法返回的是同一个jQuery对象,因此它只对this包装了一次。这种方法在技术讲也是享元模式的运用。jQuery.single方法返回的jQuery对象就是享元对象。
加油!