在Javascript中重用功能

我創建了一個頁面，其中有一個可以通過鼠標移動的紅色正方形。我想知道我可以如何重複使用Javascript超過1平方。在下面的小提琴http://jsfiddle.net/sbel/utM5k/我表明，在頂部的HTML我包括CSS，廣場是一個div和JavaScript的形式（功能（窗口）{...}）（窗口）;。我怎樣才能改變Javascript能夠簡單地說這裏是一個div的ID，應用移動功能呢？在Javascript中重用功能

來源

2012-01-17 SBel

請注意，通常需要等待幾個答案，評估其用處（通常考慮來自社區的投票），最後在幾天後接受「正確」的答案。這個策略通常允許更好的答案，因爲許多人不會看到回答的問題，假設他們是完整的=） – maerics 2012-01-17 23:58:35

@maerics，會做。 – SBel 2012-01-18 00:02:36

而不是將您的功能（變量和函數）包裝在匿名閉包中（這是避免混淆全局名稱空間的好主意），而是將它們包裝在「類」定義中，以便您可以創建新的多個實例類型。

例如（未測試）：

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"...

這種重構將需要一些時間，因爲你將要學習（特別是關於使用「這個」變量），但完成後，你會出現一些新的概念能夠有任意數量的可移動的物體這樣：

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

這是爲了實現在JavaScript面向對象的可重用性（儘管實現細節可以根據您的喜好意識形態差別很大）的一般方式。

來源

2012-01-17 23:48:44 maerics

在Javascript中重用功能

回答

相關問題