我正在编写一个Javascript游戏作为对象和AJAX的练习。它涉及围绕航海主题网格的Wessels移动。虽然wessels在一个对象数组中,但我需要操纵他们的图形表示,他们的精灵。目前,我从DOM的角度选择在'td'元素中使用'img'元素。
从UI连续性的角度来看,建议使用Javascript以编程方式移动元素的方法:
(a)删除'from'单元格(td元素)的内部html并重写'to'单元格的内部html,
(b)克隆img节点(sprite),从其父节点删除原始节点,并将其附加到'to'单元格,或者
(c)使用相对于精灵表元素的定位,忽略td的全部(尽管它们的背景[颜色]代表海洋深度)。
答案 0 :(得分:0)
我肯定会坚持将精灵从一个单元移动到另一个单元而不是使用相对定位到表。我的理由是表格单元格大小可能因浏览器而异(给出填充,边距等呈现方式的差异 - 特别是在烦人的IE中)并计算精确位置以定位精灵以使其在内部排列给定的细胞可能会变得复杂。
将其缩小为(a)或(b)以供选择。这里让我们消除选项(a),因为从内部删除HTML并不是一种操作DOM的简洁方法。我喜欢将节点存储在对象中,然后将其附加到“to”单元格,然后删除原始节点(您的选项(b)建议)的想法。这样,你仍然在处理高级“对象”,而不是不必要地处理低级“文本”。你不需要乱用文本 - 对于这样的应用程序,如果你不了解JavaScript已经提供的DOM操作函数,这将是脏的'hackish'方式。
我的回答是(b)。但是,如果你绝对需要速度 - 虽然对于你的游戏我不知道你是否真的需要额外的提升 - 你可以考虑选项(a)。一些来源,例如http://www.quirksmode.org/dom/innerhtml.html争辩说DOM操作方法通常比使用innerHTML慢。但这是一切的一般规则。级别越低,制作代码的速度就越快。级别越高,代码就越容易理解和概念化,并且在我看来,速度不会在这种情况下产生巨大的差异,保持整洁并与(b)一起使用。
答案 1 :(得分:0)
无需克隆img节点,删除旧节点并附加克隆。只需将img节点附加到接收td即可。它将自动从之前的td中删除。简单,有效和快速。