HTML的可變范圍調用函數

Question

我試圖了解如何從HTML調用對象的方法，而不將其聲明為全局變量 。 可能嗎？ 我真的不想污染全局范圍，因此我認為必須有一種避免這種情況的方法...

假設我有一個javascript對象，其中的一種方法稱為clearSelection() 。 此clearSelection()方法僅擦除html輸入的文本值，並執行其他與該問題完全無關的其他操作。

問題是當我在$(function(){});聲明此對象時$(function(){}); 作為該函數的局部變量，由於無法定義，我無法從輸入的onclick html屬性訪問它。

我對此的解決方案是將這個對象聲明為全局變量，可能不是在window對象內部，而是在window.document.body內部這樣危害較小（我相信更糟的是在window對象內部聲明它，所以我想這仍然很糟糕...）

這是為您提供的一些代碼：

我的對象：

function MyObject(foo,bar){
    ...
    ...
    this.clearSelection() = function(){
        // do some useful stuff here
        ...
    }
}

我的html中的腳本標簽：

<script>
$(function(){
    var myObject = new MyObject(baz,bal);
});
</script>

我的按鈕declatarion @ html：

<button type="button" onclick="myObject.clearSelection()">Clear</button>

因此，javascript控制台會抱怨，因為未定義myObject ，並且我認為這是由於范圍所致，因為從HTML我無法訪問對象（ myObject ）所在的范圍。

---

目前的方法

這就是我這樣做的方式，因此它可以正常工作，但是我真的不喜歡它，我正在尋求另一種更清潔的方法。 對象結構和html button相同，因此我將跳過它們：

<script>
$(function(){
    window.document.body.myObject = new MyObject(baz,bal);
});
</script>

Answer 1

您應該使用.on（）並使用jQuery綁定事件處理程序，並擺脫難看的內聯單擊處理程序。

將ID屬性添加到button元素並使用ID選擇器（“ #id”）

$(function(){
    var myObject = new MyObject(baz,bal);
    $('#clearSelection').on('click', function(){
        myObject.clearSelection();
    })
});

HTML

<button type="button" id="clearSelection">Clear</button>