Javascript 全局命名空间中事件的最佳实践？

我仍然是javascript的新手，我会说，所以我认为我现在在项目上的工作方式在某种程度上影响了我思考如何在js中完成事情的方式。我知道在js中编程时最好使用模块。这让我想到了js中的事件。。。例如，假设我有这个对象

Monkey

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

比如说，我构建了一个完整的应用程序，有

猴子

，

长颈鹿

和

狮子

，它们在网络应用程序中交互。那么应该如何处理这些事件呢？您是否只需要在全局命名空间中实现callbackfunctions？比如：

//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标题中？也许这是一个愚蠢的问题，答案显而易见，但对我来说，似乎没有任何好的最佳实践。

我不完全确定我是否理解这个问题，但如果你是指处理重复

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
});

---

您可以将所有代码放入其中，这还将创建：

（函数（）{
//在此处创建所有对象并定义所有事件处理程序
})();

这样，您的代码就不会污染全局名称空间，并且从外部无法访问。所有事件处理程序都将在闭包中执行

---

（一方面注意：您也可以在jQuery库中找到它。在脚本文件的最后是暴露给外部世界的jQuery对象：

window.jQuery=window.$=jQuery；

）

这里是一个对象继承的充实示例

CSS-只是一个基本的动物对象，具有0.5秒的平滑过渡，用于属性更改时（例如，使我们的动物跳跃）

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});

---

也许这会对你有所帮助@Stano我再次编辑了标题，我认为这更能反映我问题的本质。@patriques它不应该是

函数猴子

而不是

变量猴子

？@Oriol是的，它应该！我现在找到的关于这个主题的一个好资源是：那么您认为这是在javascript中使用EventHandler的最佳实践吗？或者只是一种不使全局名称空间混乱的方法？

// 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});