Question

我有一个卡片类：

function Card()  {
    this.image = new Image();
    this.x = 0;
    this.y = 400;

    this.initialX = 0;
    this.initialY = 0;

    this.scaleFactor = 4;

    this.setImage = function(ii){            
        this.image.src = ii;            
    };

    this.getWidth = function(){        
        if (this.image == null){
            return 0;
        }            
        return this.image.width / this.scaleFactor;        
    }

    this.getHeight = function(){                
        if (this.image == null){
            return 0;
        }            
        return this.image.height / this.scaleFactor;        
    }        

    this.pointIsInCard = function(mx, my){            
        if (mx >= this.x && mx <= (this.x + this.getWidth()) && my >= this.y && my <= (this.y + this.getHeight()))
        {                
            return true;                        
        }
        else{                
            return false;
        }            
    };        
};

然后我有一个甲板课：

function Deck(x, y, w, h){    
    this.x = x;
    this.y = y;

    this.width = w;
    this.height = h;        

    this.cards = [];        
}

我需要在Deck类中添加类似于pointIsInCard的方法，而不是将其称为pointIsInDeck。逻辑将是相同的，即检查传入点是否落在对象的边界。因此，看到这些代码重复，我想知道什么是一个好的设计实践，以避免这种重复？我想到的一个选项是提取方法并使用x，y，width，height为通用对象创建一个函数但是再次从OOP原则我认为这个方法应该属于类/对象。我感谢任何帮助！谢谢！

Answer 1

您正在做的事情的一个常见方法是将Rectangle或类似的实例附加到您的两个对象，即：

class Rectangle {
    constructor(x, y, width, height) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
    }

    containsPoint(x, y) {
        return x >= this.x && x =< this.width &&
            y >= this.y && y =< this.height;
    }
}

然后将其添加到Card和Deck：

function Card() {
    this.rect = new Rectangle(/* Your card shape */);

    // ...
}

function Deck() {
    this.rect = new Rectangle(/* Your deck shape */);

    // ...
}

你可以这样做：

card.rect.containsPoint();
deck.rect.containsPoint();

Answer 2

如果这些是与绘图相关的类，它们都会继承像Rectangle这样的东西，它们都会继承这种行为。

如果它们与游戏玩法相关，我希望它们每个引用一个Rectangle（或其子类），它们将所有与UI相关的任务委托给;然后将其减少到前一段的解决方案。

Answer 3

您可以使用Function.prototype.call()在函数调用中设置this

function Card()  {
  this.x = 1; this.y = 2;
};

function Deck() {
  this.x = 10; this.y = 20;
}

function points(x, y) {
  // do stuff
  console.log(x, this.x, y, this.y); // `this`: `c` or `d`
}

var c = new Card();

var d = new Deck();

points.call(c, 3, 4); // `this`: `c` within `points` call

points.call(d, 100, 200); // `this`: `d` within `points` call

分离常用代码的最佳设计实践？

3 个答案: