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

Question

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

我尝试解决的情况是一个页面给出了多个建议。每个建议都有几个选项，每个选项都有一个激活它的按钮。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>

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

到目前为止我尝试的是这样的:

$(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 元素，但我不知道该怎么做 OO
• 使用 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 对象的上下文中调用。