javascript - 将 jQuery 与 OOP JS 结合使用是否有效/高效？如果是，如何创建跨类函数的状态更改菜单？

Question

我正在尝试编写 JavaScript widget在面向对象的 JavaScript 中，或者至少是我所理解的 JS 的类的近乎等价物。

我想要实现的只是一个改变状态的菜单。伪；

• 加载小部件后，填充 #nav与 <ul>包含年级的菜单 <li>
• 点击年份组后<li> ，空#nav ul其<li>并用导师组重新填充它 <li>在那一年，并附加 return链接。
• 点击 return 后链接，空 #nav并用原始年份组重新填充它 <ul>菜单，同时能够利用上述所有功能。

历史上，即迄今为止，我已经使用“嵌入”函数来尝试将所有内容保持在同一 DOM 层/计时内。我真的不明白这是如何工作的，或者这是否是适当的事情，但代码本身似乎可以工作。

这是我之前完成此操作的示例:

var GroupsDisplayHTML = '<h2>Tutor Groups</h2>' +
    '<ul><li><a class="year" href="javascript:void(0);" title="Year 9" id="9">Year 9</a></li>' +
    '<li><a class="year" href="javascript:void(0);" title="Year 10" id="10">Year 10</a></li>' +
    '<li><a class="year" href="javascript:void(0);" title="Year 11" id="11">Year 11</a></li>' +
    '<li><a class="year" href="javascript:void(0);" title="Year 12" id="12">Year 12</a></li>' +
    '<li><a class="year" href="javascript:void(0);" title="Year 13" id="13">Year 13</a></li></ul>';

$("div#groups").html(GroupsDisplayHTML);

$('a.year').click( function() {
    var Groups;
    var Groups_Sorted = [];

    Frog.API.get('groups.getAll',
    {
        'onSuccess': function (data) { Groups = data; },
        'onError': function(err) { alert(err); }
    });

    for (var i = 0; i < Groups.length; i++) {
        var Year = $(this).attr("id");

        if (Groups[i].name.indexOf(Year) == 0 && Groups[i].name.indexOf('/Tp') != -1) {
            var arrayToPush = { 'id': Groups[i].id, 'name': Groups[i].name };
            Groups_Sorted.push(arrayToPush);
        }
    }

    GroupsDisplayHTML = '<h2>Year ' + Year + '</h2><ul>';

    for(var i = 0; i < Groups_Sorted.length; i++){
        GroupsDisplayHTML += '<li><a class="group" href="javascript:void(0);" title="' + Groups_Sorted[i].id + '" id="' + Groups_Sorted[i].id + '">' + 
            Groups_Sorted[i].name + ' <span style="font-size:10px;color:#bbb;">(' + Groups_Sorted[i].name + ')</span></a></li>';
    }

    GroupsDisplayHTML += '<li><a class="return" href="javascript:void(0);">&lt;- Back to Year Groups</a></li></ul>';

    $("div#groups").html(GroupsDisplayHTML);

    $('a.group').click( function() {
        var Group_ID = $(this).attr("id");
        AssignPoints.getUsers(Group_ID);
    });

    $('a.return').click( function() {
        AssignPoints.displayGroups(data);
    });
});

<小时/>

但是，现在，我想知道是否更好的方法是使用 jQuery 的 on 功能。这是我当前正在编写的代码(*只是为了尝试实现更改状态菜单):

var TutorGroupPoints = {
    URL: 'http://staff.curriculum.local/frog/rewards.php',
    currentUser: UWA.Environment.user.id,
    groupsObject: { },
    sortedArray: [ ],
    navHTML: '<h2>Tutor Groups</h2>' +
        '<ul>' +
            '<li><a class="year" title="Year 9" id="9">Year 9</a></li>' +
            '<li><a class="year" title="Year 10" id="10">Year 10</a></li>' +
            '<li><a class="year" title="Year 11" id="11">Year 11</a></li>' +
            '<li><a class="year" title="Year 12" id="12">Year 12</a></li>' +
            '<li><a class="year" title="Year 13" id="13">Year 13</a></li>' +
        '</ul>',

    init: function() {
        /* caching outer this -> AJAX scope problems */
        var that = this;

        /* retrieve all of the user groups from Frog VLE and store them in an object-level variable */
        Frog.API.get('groups.getAll',
        {
            'onSuccess': function (data) { that.groupsObject = data; },
            'onError': function(err) { alert(err); }
        });

        /* populate the div#nav with our year group UL */
        $('#nav').append(this.navHTML);

        /* using "on" because the LIs have been created in the DOM? */
        $('#nav ul').on("click", "li a", function(e) {
            e.preventDefault();
            that.yearClick( $(this).attr("id") );
        });
    },

    yearClick: function(year) {
        /* run through groupsObject and pull out any tutor groups found in the year we've clicked on
           then put those into our sortedArray */
        for (var i = 0; i < this.groupsObject.length; i++) {
            if (this.groupsObject[i].name.indexOf(year) == 0 && this.groupsObject[i].name.indexOf('/Tp') != -1) {
                /* all we need is name and id */
                var arrayToPush = { 'id': this.groupsObject[i].id, 'name': this.groupsObject[i].name };
                this.sortedArray.push(arrayToPush);
            }
        }

        /* clear the existing UL from div#nav */
        $('#nav ul').empty();

        /* populate div#nav's UL with LIs of our tutor groups (label being name, attr="id" being id) and
           clickable links for each */
        for (var i = 0; i < this.sortedArray.length; i++) {
            $('#nav ul').append('<li><a class="tutor" id="' + this.sortedArray[i].id + '">' + this.sortedArray[i].name + '</a></li>');
        }

        /* add a "return" link to view other years' tutor groups */
        $('#nav ul').append('<li><a id="return">&lt;- Return</a></li>');

        /* upon clicking the return link, empty #nav ul then re-append our navHTML from earlier */
        $('#nav ul').on("click", "a#return", function(e) {
            e.preventDefault();
            $('#nav ul').empty();
            $('#nav').append(this.navHTML);
        });

        /* upon clicking any of our tutor group LIs, display that link's id so that we can use it in
           another function to actually display some content */
        $('#nav ul').on("click", "a.tutor", function(e) {
            e.preventDefault();
            alert( $(this).attr("id") );
        });
    }

};

widget.onLoad = function(){
    /* run our "class" */
    TutorGroupPoints.init();
}

和 HTML:

<div id="wrapper">
    <div id="nav">

    </div>
    <div id="content">

    </div>
</div>

我创建了一个 jsFiddle here ，这是对代码的轻微操作(即我删除了无法访问的 Frog API 调用并将其替换为固定对象)。希望这能充分发挥作用。

这里的问题是，一旦我点击返回按钮，什么也没有发生。此外，我怀疑修复返回按钮会给我提供一些链接，当点击这些链接时，这些链接不会执行任何操作。

理想情况下，根据代码的底部，我希望当用户单击特定的导师组时在我的 TutorGroupPoints 类中运行另一个函数。这将如何影响我的返回按钮等？那么它们会因为没有从“当前”函数运行而停止工作吗？

不仅仅是“只是”对我的代码问题的答案，我很想要一些方向，即我最近编写的代码比旧的代码更好吗？我应该使用 on或者我应该使用嵌入式 jQuery 函数和通信类函数？

提前致谢，

Answer 1

简短回答:http://jsfiddle.net/byzgv/4/

我不确定 OOP 方面，但这似乎是您的场景:

1. 加载页面后，将列表插入到 div 中。
2. 您向此列表添加一些事件处理程序
3. 您单击一个列表项，您的事件处理程序就会运行，并更改列表项。
4. 当您点击“返回”列表项时，它“不执行任何操作”。

在你的 fiddle 中，单击“返回”列表项确实会执行某些操作，它会清空此列表。这部分是您要求它做的事情:

$('#nav').on("click", "ul a#return", function(e) {
    e.preventDefault();
    $('#nav ul').empty();
    $('#nav').append(this.navHTML);
});

所以这个事件处理程序已经触发，并且前两条指令已经起作用。对 append 的调用不起作用，因为您处于不同的上下文中 - this 不引用 TutorGroupPoints 对象。因此，您可以通过显式引用您的对象来解决此问题:

$('#nav').on("click", "ul a#return", function(e) {
    e.preventDefault();
    $('#nav ul').empty();
    $('#nav').append(TutorGroupPoints.navHTML);
});

(顺便说一句，您要附加一个全新的列表，因此您需要执行 $('#nav').empty(); 而不是 $('# nav ul').empty();)

然后，正如您所猜测的，单击“返回”项将为您提供一个不响应单击事件的新列表。这是因为您调用 on 函数的方式不同。设置事件处理程序时，您调用 on 的 jQuery 对象必须存在。在您的 init 函数中，当您设置事件处理程序时，该列表确实存在，因为您在调用 on 之前将其附加到 div 。但后来，您删除了该列表并替换了它。

为了让您的事件处理程序适用于所有列表而不仅仅是第一个列表，您需要将事件处理程序附加到从一开始就存在且不会更改的元素，即 #nav 分区。所以

$('#nav ul').on("click", "li a", function(e) {

可以成为

$('#nav').on("click", "ul li a", function(e) {