javascript - 从 HTML 调用函数的变量作用域

Question

我试图了解如何从 HTML 调用对象的方法，而不将该对象声明为全局变量。有可能吗？我真的不想污染全局范围，所以我认为必须有一种方法来避免这种情况......

假设我有一个 JavaScript 对象，其方法之一称为 clearSelection()。这个 clearSelection() 方法只是删除 html 输入文本值，并执行一些与此问题完全无关的其他操作。

问题是，当我在 $(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>

我的按钮声明@ 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 绑定(bind)事件处理程序并摆脱丑陋的内联点击处理程序。

将 ID 属性添加到 button 元素并使用 ID Selector (“#id”)

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

HTML

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