有人可以帮我在javascript中实现Decorator设计模式吗?我有一个TankBase实体:
TankBase = function (x, y, width, height, direction, imageOptions) {
TankBase.base.call(this, x, y, width, height, imageOptions);
this.speed = 250;
this.direction = direction;
this.render = function (drawEngine) {
drawEngine.render();
};
...
}
我想使用Decorator模式添加新功能。例如,我想修改render()函数并在tank下绘制一个健康指示器:
var TankHealthDecorator = function (tank) {
var _tank = tank;
this.render = function (drawEngine) {
// draw a health indicator
...
_tank.render(drawEngine);
};
}
用法:
var tank = new TankHealthDecorator(new HeavyTank());
HeavyTank继承TankBase。
我应该如何修改TankHealthDecorator()以像坦克实例的包装一样使用它?
修改
保罗,谢谢你的精彩文章:我从这里开始:addyosmani.com/blog/decorator-pattern好写 起来。 - 保罗
答案 0 :(得分:1)
从功能上来说,我认为你拥有的非常接近。我将存储原始渲染功能,分配一个新功能,然后从装饰功能中简单地应用它。我也没有看到需要将装饰器创建为对象,但这可能更像是一种偏好。
var DrawEngine = { render: function() {
console.log('render');
} };
var TankBase = function (x, y, width, height, direction, imageOptions) {
this.speed = 250;
this.direction = direction;
this.render = function (drawEngine) {
drawEngine.render();
};
};
var HeavyTank = function() {
TankBase.apply(this, arguments);
this.render = function() {
console.log('heavyTank Render');
}
}
function DecorateTankWithHealthIndicator (tank) {
var oRender = tank.render;
tank.render = function (drawEngine) {
console.log('draw a health indicator');
oRender.apply(tank, arguments);
};
};
var btank = new TankBase();
var htank = new HeavyTank();
btank.render(DrawEngine);
htank.render(DrawEngine);
DecorateTankWithHealthIndicator(btank);
DecorateTankWithHealthIndicator(htank);
btank.render(DrawEngine);
htank.render(DrawEngine);
答案 1 :(得分:0)
在以下方法中,tankBase对象被传递给tankHealth函数。 tankBase对象在tankHealth函数中被修改,将tankBase对象保存在var that
中。修改后的that
作为修改后的tankBase对象返回。
var TankBase = function () {
this.render = function () {
console.log('tankBase')
};
}
var TankHealthDecorator = function (tank) {
var that = tank;
that.render = function() {
console.log('tankHealth')
};
return that;
}
window.onload = function(){
var tankBase = new TankBase();
var testHealth = new TankHealthDecorator(new TankBase());
tankBase.render(); // tank base
testHealth.render(); // tank health
};
答案 2 :(得分:0)
以下是装饰器模式的粗略实现 - 又名: Wrapper :
装饰器模式通常用于通过将请求转发到其接受的组件和|或解耦,动态地向对象添加其他职责 深层继承层次结构在 Type 中 Compositive (不要与复合模式混淆 - 这是< em> Hierarchy中的em> Compositive - 使用 Component-Leaf 结构,允许跨均匀分形拓扑的同义请求[同等对待父母和孩子]
function AbstractComponent(){
this.draw = function(){
console.log('@AbstractComponent | #draw');
};
}
function AbstractDecorator(){
AbstractComponent.call(this); // Inherit AbstractComponent Interface
this.notify = function(){
console.log('@AbstractDecorator | #notify');
};
}
function ConcreteComponent(options){
AbstractComponent.call(this); // Inherit AbstractComponent Interface
this.fill = function(){
console.log('@ConcreteComponent | #fill');
};
}
function ConcreteDecorator(Component){
AbstractDecorator.call(this); // Inherit AbstractDecorator Interface
function PrivateResponsibility(){
console.log('@ConcreteDecorator | #PrivateResponsibility');
}
this.additionalResponsibility = function(){
console.log('@ConcreteDecorator | #additionalResponsibility');
};
this.draw = function(){
console.log('@ConcreteDecorator | #draw-Component.draw');
// ... additional logic
PrivateResponsibility();
Component.draw();
};
this.fill = function(){
console.log('@ConcreteDecorator | #fill-Component.fill');
Component.fill();
};
}
var concreteComponent = new ConcreteComponent();
concreteComponent = new ConcreteDecorator(concreteComponent); // use same variable name as to allow client code to remain the same
//CLIENT CODE
concreteComponent.draw();
concreteComponent.fill();
concreteComponent.notify();
concreteComponent.additionalResponsibility();
答案 3 :(得分:-1)
以下是我对功能(对象)装饰的理解
function api_decorator(some_data){
return function decorator(func){
return function new_function(args){
/* do somethinfg with data before and after func */
console.log("I'm code before with data: "+some_data);
func(args);
console.log("I'm code after");
}
}
}
function somefunc(data){
console.log("Hi, I'm func "+data);
}
somefunc("without decoration")
/* injecting somefunc in decorator api */
somefunc=api_decorator("data needed for api")(somefunc)
/* calling decorated with api somefunc */
somefunc("with decoration")