目前的方法

Question

我正在尝试理解如何从HTML调用对象的方法而不将此对象声明为全局变量。它甚至可能吗？我真的不想污染全球范围，所以我认为必须有办法避免这种情况......

假设我有一个javascript对象，其中一个方法称为clearSelection()。这个clearSelection()方法只是删除了一个html输入文本值，并做了一些与这个问题无关的其他东西。

问题在于，当我在$(function(){});内将此对象声明为该函数的局部变量时，我无法从输入的onclick html属性中访问它，因为它未定义。 / p>

我的解决方案是将此对象声明为全局变量，可能不在window对象内部，但内部window.document.body内部的危害较小（我认为让它变得更糟）在窗口对象内声明，所以我猜这还不错......）

这里有一些代码：

我的对象：

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我无法访问与对象相同的范围（{{1生活在。

目前的方法

这就是我这样做的方式，所以它有效，但我真的不喜欢它，我要求另一种更清洁的方式。对象结构和html myObject是相同的，所以我将跳过这些：

button

Answer 1

你应该使用.on()并使用jQuery绑定事件处理程序并摆脱丑陋的内联点击处理程序。

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

HTML

目前的方法

1 个答案: