如何连接对象的原型链和表示它们的HTML

Question

我有一个纸牌游戏，纸牌由创建为类(card > card-type > card-instance)实例的Javascript对象表示。我这样做是为了让卡片可以共享方法。

然后我构建HTML，假设卡片能够做各种事情，比如移动或攻击。

移动在Card.prototype.move = function...中定义，攻击在UnitCard.prototype.attack中定义

现在我正在尝试将Card对象连接到它们相应的HTML元素，这样我就可以实现类似的功能

$('#board').on('click', '.card', function (e) {
this.move(this.location, newLocation);
});

我的一个想法是将卡片的所有数据和功能都作为DOM的一部分，并在DOM元素的原型链上的某个位置插入一个对象，这样卡片的HTML就有了移动功能。我知道这个想法有点疯狂，但我试图避免在对象内部不断查找(在所有卡片的数组中按名称查找被点击的卡片，然后如果其他对动作有影响的卡片在dom中找到它们，然后在对象中找到它们等等…)

关于如何解决这个问题有什么建议吗？

更新-当前代码：

var Card = function (type, name, epoch) {
var cardHtml =  document.createElement('div');
cardHtml.className += "card";
cardHtml.id = name;
cardHtml.cardType = type;
cardHtml.cardName = name;
cardHtml.cardEpoch = epoch;
this.cardHtml = cardHtml;
}
var Agent = function (cardProps, subtype, description, strike, shield, price) {
//fixed
Card.apply(this, cardProps);
this.subtype = subtype;
this.price = price; //agenda
//changable
this.cardHtml.innerHTML = ss.tmpl['cards-agent'].render({
name: this.name,
});
this.cardHtml.strike = strike;
this.cardHtml.shield = shield;
this.cardHtml.location = []; //board/hand/deck/grveyard
}

Agent.prototype = Object.create(Card.prototype);
Agent.prototype.move = function (currentLocation, newLocarion) {
console.log('move');
}

Answer 1

在元素的数据对象上存储对实例的引用。

var Card = function (type, name, epoch) {
var cardHtml =  document.createElement('div');
cardHtml.className += "card";
cardHtml.id = name;
cardHtml.cardType = type;
cardHtml.cardName = name;
cardHtml.cardEpoch = epoch;
this.cardHtml = cardHtml;
$(cardHtml).data("card",this);
}

现在，您可以根据需要在事件中访问它。

$('#board').on('click', '.card', function (e) {
var card = $(this).data('card');
card.move(card.location, newLocation);
});

当然，这是假设您可以使用jquery，根据您在问题中使用的jquery。

Answer 2

我可以想到另外两个选项。

您可以使用bind创建一个点击处理程序，其中this实际上是您的对象，而不是dom元素。

el.onclick = (function(){/* ... */}).bind(yourObj);

在这种情况下，在您的函数中，this将是您的对象，而不是dom元素。只要你的对象存储了对dom元素itelf的引用，那么你就被设置了。

---

另一个选项是在闭包中定义点击处理程序，该闭包有一个包含对象的变量。

function bindHanlder(yourObj, el){
el.onclick = function(){
// "yourObj" can be used here.
};
}

Answer 3

我假设你的牌有特定的地方可以放你的牌。

你应该有一个包含Places数组的Board对象，类似于：

function Card(divId){
this.divId = divId;
//generate Card html elements with jquery
}
function Place(divId){
var currentCard = null;
//attach this javascript object to an html element
this.divId = divId;
//register events of this Place where this Place has this.divId
/*
$(document).on("click", this.divId, function(){
});
*/
this.setCard = function(card){
currentCard = card;
//use jquery to add Card html elements to this Place html element
}
}
function Board(){
var places= new Array();
this.addPlace = function(place){
places.push(place);
}
this.moveCard = function(card, toPlace){
toPlace.setCard(card);
}
}
var card1 = new Card("#divCard1");
var card2 = new Card("#divCard2");
var place1 = new Place("#divPlace1");
var place2 = new Place("#divPlace2");
var board = new Board();
board.addPlace(place1);
board.addPlace(place2);
board.moveCards(card1,place1);

这真是让我难以想象。我甚至不知道它是否运行。这只是给你一个想法。将其解释为伪代码。

祝你好运！