Question

我创建了一个页面，上面有一个可以用鼠标移动的红色方块。我想知道如何重用Javascript以获得超过1平方。在下面的小提琴http://jsfiddle.net/sbel/utM5k/中，我在HTML中显示我包含CSS，square是div，而Javascript具有形式（function（window）{...}）（window）;.如何更改Javascript以便能够简单地说这里是div的ID，将移动功能应用于它？

Answer 1

而不是将您的功能（变量和函数）包装在匿名闭包中（这是避免混淆全局命名空间的好主意），而是将它们包装在“类”定义中，以便您可以创建新类型的多个实例

例如（未经测试）：

function MovableItem(id) {
  this.element = document.getElementById(id);
  this.mouseIsDownOnMovable = false;
  this.layerX = 0;
  this.layerY = 0;
  this.movableHeight = this.element.getBoundingClientRect().height;
  this.movableWidth = this.element.getBoundingClientRect().width;
  // And so on for each "member" variable...
}

MovableItem.prototype.markThatMouseIsDownOnMovable = function(event) {
  this.mouseIsDownOnMovable = true;
  this.layerX = event.layerX;
  this.layerY = event.layerY;
}

MovableItem.prototype.markThatMouseIsUp = function() {
  this.mouseIsDownOnMovable = false;
}

// And so on for each "method"...

这种重构需要一些时间，因为你将学习一些新的概念（特别是关于“this”变量的使用）但是完成后你将能够拥有任意数量的可移动物体：

var o1 = new MovableItem('slavaMovable');
var o2 = new MovableItem('slavaMovable2');
// ...

这是在JavaScript中实现面向对象的可重用性的一般方法（尽管具体实现可能会因您的意识形态偏好而有很大差异）。

重用Javascript中的功能

1 个答案: