Question

我有一个类Foo，它有一个生成显示的HTML的方法。我希望HTML有一个调用Foo.clickHandler的onclick事件处理程序。问题是我不知道这个特定的Foo实例是什么名字。同样，onclick事件无法知道如何访问此foo实例。这是一些代码：

function Foo(){
    this.nonStaticVariable='Something non-static (different for every instance of Foo).';
    this.getHTML=function(){
        return '<a href="javascript:void(0);" onclick="/* How do I call Foo.clickHandler? */">Click Me!</a>';
    }
    this.clickHandler=function(){
        alert(nonStaticVariable);
    }
}

非静态函数的要点是显示onclick需要调用正确的Foo实例。

我已经考虑过将字符串传递给包含包含Foo的变量名的Foo，但这似乎是反OOP：

function Foo(container){
    this.container=container;
    this.nonStaticVariable='Something non-static (different for every instance of Foo).';
    this.getHTML=function(){
        return '<a href="javascript:void(0);" onclick="'+container+'.clickHandler();">Click Me!</a>';
    }
    this.clickHandler=function(){
        alert(nonStaticVariable);
    }
}

var fooInstance=new Foo('fooInstance');

你有什么建议？

我也对jQuery解决方案持开放态度。

Answer 1

我希望我理解你的问题。我认为你是否遇到了是否使用单身人士的问题？

我个人会选择我要去的地方，例如：

的Singleton：

<!-- HTML -->
<a href="javascript:Foo.clickHandler(this)">singleton click</a>

//Javascript

// blah blah Foo = ....
this.clickHandler = function(what)
{
   alert(what);
}

OR

原型：

// blah blah setup Foo & perhaps prototype

var element = document.createElement("a"); // or getelementbyid etc
element.onClick = function()
{
   alert(this);
}

不确定我是否解释得太清楚了。

也许在这里看看： http://www.selfcontained.us/2008/12/23/javascript-widget-approaches-singleton-vs-prototype/

Answer 2

nonStaticVariable和clickHandler是否需要在Foo之外访问？如果没有，你可以简单地做这样的事情：

function Foo(){
    //changed these to private variables only accessible from within Foo
    var nonStaticVariable='Something non-static (different for every instance of Foo).';
    var clickHandler = function(){
        alert(nonStaticVariable);
    }
    this.getHTML=function(){
        return $('<a href="#">Click Me!</a>').click(clickHandler);
    }
}


var fooInstance = new Foo();

var button = fooInstance.getHTML();


$("#container").html(button);

Answer 3

嗯...我不是最好的OO程序员，但你可以使用哈希，它与你得到的相同

var fooHash = {name: "nameHere", type: "xxx", whatever: "whatever"};
var fooInstance = new Foo(fooHash);

然后在你的Foo对象中你只需添加类似

的东西

function Foo(o){
    this.name = o.name;
    this.type = o.type; // etc....
}

所以基本上你用this.name替换容器。可能有更好的方法，但这就是我得到的全部

从html事件调用javascript类方法的正确方法

3 个答案: