4

表示される HTML を生成するメソッドを備えたクラス Foo があります。HTML にonclickを呼び出すイベント ハンドラーが必要Foo.clickHandlerです。問題は、この特定のインスタンスの名前がわからないこと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 ソリューションにもオープンです。

4

3 に答える 3

1

あなたの質問を理解していただければ幸いです。シングルトンを使用するかどうかの問題に直面していると思いますか?

個人的には、どこに行くかを選択します。たとえば、次のようになります。

シングルトン:

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

//Javascript

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

また

プロトタイプ:

// 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/

于 2012-05-17T19:43:53.403 に答える
1

外部からアクセスできるようにする必要がありnonStaticVariableますか? そうでない場合は、次のようにするだけです。clickHandlerFoo

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);​
于 2012-05-17T19:51:55.033 に答える
0

うーん...私は最高の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に置き換えます。おそらくもっと良い方法がありますが、これが私が得たすべてです

于 2012-05-17T19:28:07.727 に答える