javascript - 如何在 JS 中基于元素编写对象

Question

我正在尝试用 JavaScript 构建干净的面向对象代码，该代码与 HTML 元素紧密相连。

我试图解决的情况是一个页面给出了多个建议。 每个建议都有几个选项，每个选项都有一个激活它的按钮。 HTML 的简化片段如下所示:

<div class="row suggestion">
    <div class="span6">
        <ul>
            <li data-id="1">
                <span>Option 1</span>
                <span><a class="btn btn-mini" href="#">pick me</a></span>
            </li>
            <li data-id="2">
                <span>Option 2</span>
                <span><a class="btn btn-mini" href="#">pick me</a></span>
            </li>
        </ul>
    </div>
    <div class="span6">
       <button>Save</button>
    </div>
</div>

我知道如何在不使用对象的情况下编写脚本，但由于我想向建议添加更多功能，所以我想采用干净的面向对象方法。 我希望您知道面向对象的好处并接受我的选择

到目前为止我尝试过的内容如下:

$(document).ready(function(){
    var suggestions = [];

    $('.row.suggestion').each(function(){
        suggestions.push(
            new Suggestion($(this))
        );
    });
});

function Suggestion($el){
    var options = new Array();

    $el.find('a').each(function(){
        options.push(new Button($(this)));
    })
}
Suggestion.prototype = {
    childChange : function(){
        // do some checks;
    }
}

function Button($el){
    this.$el = $el;
    this.id = $el.parents('li').data('id');
    $el.click(this.onclick);
}
Button.prototype = {
    checked : false,
    $el : null,
    id : 0,
    onclick : function(){
        // set this button active
        // notify my parent suggestion that i've changed
    }
}

它按预期工作直到 onclick 函数。 当它被触发时，该函数将启动，但范围会发生变化。 我以为我可以访问该对象，但我仅限于被单击元素的 jQuery 实例的范围。

我有一些想法，但它们都有自己的注意事项:

• 将所有属性和功能添加到特定的 DOM 元素， 但我不知道该怎么做
• 使用 jquery.data() 将属性添加到元素。 但我不知道如何将函数添加到 jquery 实例。
• 使用其他库，如 Prototype、YUI3 或特定的设计模式。所以我开始阅读:
  • http://prototypejs.org/learn/extensions.html
  • http://addyosmani.com/resources/essentialjsdesignpatterns/book/ (至少上半场)
  • 一些关于 YUI3 的博客文章

到目前为止，我还找不到与页面元素紧密相关的 JavaScript 中面向对象编程的已知解决方案。我发现的所有 OO JS 示例都没有元素作为起点。 欢迎所有建议。

Answer 1

您可以使用 $.proxy() 来实现:

$el.click($.proxy(this.onclick, this));

然后 onclick 将在 Button 对象的上下文中调用。