Javascriptの機能を再利用する

Question

マウスで移動できる赤い四角形のページが作成されました。 Javascriptを再利用して1平方メートルを超えることができるかどうかを調べたいと思います。以下のフィドルでhttp://jsfiddle.net/sbel/utM5k/私は上のHTMLにCSSが含まれていることを示しています、正方形は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"... 

（実装の詳細は、あなたの思想の好みに応じて大きく変化してもよいが）

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

これはJavaScriptでオブジェクト指向の再利用性を達成するための一般的な方法であり、次のような自分の移動体の任意の数を有することができます。