全局命名空間中事件的最佳實踐？

Question

對於javascript來說，我仍然是一個新手，我想說，所以我認爲我現在在項目上工作的方式有點讓我思考如何在js中完成事情。我已經理解，在js編程時，應該最好使用模塊。這使我想到在JS事件...例如說我有這個對象Monkey

function Monkey(color, position){ 
    this.color = color; 
    this.position = position; 
    this.jumpAround = function() { 
     /* jumps around and screams */ 
    }; 
} 

並說我已經建立了一個整個應用程序就是這樣，有monkeys，giraffes和shih tzus，在一個互動Web應用程序。應如何處理事件？你是否僅僅實現了回調函數在全局命名空間？像：

//objects 
var monkey = new Monkey(brown, pos); 
var giraffe = new Giraffe(yellow, pos); 
var shih_tzu = new Shih_tzu(white, pos); 

//event handlers 
this_and_that.onclick = function() { /* this and that happens */ } 
... 

然後將這個文件包含在html頭文件中？也許這是明顯帶有回答愚蠢的問題，但仍然過我看來，如果有任何地圖無法很好的最佳實踐 ...

Answer 1

你可以把你所有的代碼中anonymous self-invoking function，這也將創造closure：

(function(){ 
    // create all your objects and define all events handlers here 
})(); 

然後你的代碼不會污染全局命名空間，並且將不能從外部訪問。您的所有事件處理程序將在關閉中執行。

（一個側面說明：你可以找到這也是jQuery庫在腳本文件的最後是jQuery對象接觸到外面的世界：window.jQuery = window.$ = jQuery;）

Answer 2

不完全知道我理解的問題，但如果你的意思是處理造成重複elem.onclick = function() {}在JavaScript事件的覆蓋我用這個函數：

function addEvent(obj,event,func) 
{ 
    if(typeof func !== 'function') 
    { 
     return false; 
    } 
    if(typeof obj.addEventListener == 'function' || typeof obj.addEventListener == 'object') 
    { 
     return obj.addEventListener(event.replace(/^on/,''), func, false); 
    } 
    else if(typeof obj.attachEvent == 'function' || typeof obj.attachEvent == 'object') 
    { 
     return obj.attachEvent(event,func); 
    } 
} 
addEvent(this_and_that,'onclick',function(e) { 
    //do stuff 
}); 

Answer 3

這裏有一個充實的例子對你有對象遺產。 http://jsfiddle.net/H4jqF/

CSS - 僅僅是一個基本的動物物體，具有0.5秒的平滑過渡，當屬性改變時（例如，使我們的動物JUMP）。

.animal { 
    position: absolute; 
    transition: all 0.5s ease; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
} 

的JavaScript

// simple HTML animal - parent class 
function Animal(color, position) { 
    this.color = color; 
    this.position = position; 
    this.elm = document.createElement("IMG"); 
    this.elm.className = "animal"; 
    this.elm.style.backgroundColor = this.color; 
    this.update = function() { 
     // update the the HTML element 
     this.elm.style.left = this.position.x + "px"; 
     this.elm.style.top = this.position.y + "px"; 
    }; 
    this.jump = function(height) { 
     // cheesy jump animation 
     // we'll use a CSS transition to smooth it out 
     this.position.y -= height; 
     this.update(); 
     // hard code it to come back down in 500ms 
     // .bind(this) is used to scope the function to this instance 
     window.setTimeout(function() { 
      this.position.y += height; 
      this.update(); 
     }.bind(this), 500); 
    }; 
    this.update(); 
} 
// our subclass Dog 
function Dog(color, position) { 
    // inherit all of the parent objects properties and methods 
    Animal.apply(this, arguments); 
    // finish setup of the element 
    this.elm.src = "dog.png"; 
    document.body.appendChild(this.elm); 
    // add our onclick event that will fire jump 
    this.elm.onclick = function() { 
     this.jump(100); 
    }.bind(this); 
} 
// spawn some dogs 
new Dog("red", {x: 50, y: 200}); 
new Dog("blue", {x: 200, y: 200});