Question

正如主题本身所说，Javascript中的策略模式的这个例子是什么？

（我认为问题更适合代码审查，但它们会重定向我的stackoverflow）

var canvas = {
    context:  document.getElementById("canvas").getContext("2d")
};
///////////////////////////////////////////////////
function Square(_strategy) {
    this.x = 50;
    this.y = 50;
    this.width = 100;
    this.height = 100;

    this.strategy = _strategy;
}

Square.prototype.draw = function() {
    this.strategy(this);
};
///////////////////////////////////////////////////
function Circle(strategy) {
    Square.call(this, strategy);

    this.radius = 25;
}

Circle.prototype = new Square();
///////////////////////////////////////////////////
function drawSquare(shape) {
    canvas.context.strokeRect(shape.x, shape.y, shape.width, shape.height);
}
///////////////////////////////////////////////////
function drawCircle(shape) {
    canvas.context.beginPath();
    canvas.context.arc(shape.x , shape.y, shape.radius, 0, 360, false);
    canvas.context.stroke();
}
///////////////////////////////////////////////////
var shapes = [];
shapes.push(new Square(drawSquare));
shapes.push(new Circle(drawCircle));

for(var i=0; i<shapes.length; i++) {
    shapes[i].draw();
}

Live example

我知道我不需要绘制圆的宽度和高度。（我稍后会选择它来选择那个圆圈，所以这不是错误:)）

Answer 1

是的，但是这种模式可以在Javascript中如此简单地实现，甚至可能都不是模式。

基本上即使你有这样的话：

function Square() {
    this.x = 50;
    this.y = 50;
    this.width = 100;
    this.height = 100;
}

Square.prototype.draw = function(canvas) {
    canvas.context.strokeRect(this.x, this.y, this.width, this.height);
};

你可以这样做：

var a = new Square();
a.draw = function(canvas) {
    canvas.context.strokeRect(this.x + 5, this.y, this.width, this.height);
};

顺便说一句，不要让你的类引用全局变量。把它作为财产或参数。

例如，这种策略模式？

1 个答案: