0

目前我有一个简单的单页应用程序，名为App. 我正在尝试做的是制作网站的“部分”，这些“部分”在加载每个部分时会出现动画，并且在导航到新部分时会出现一组不同的动画（卸载当前部分的动画）。

我的代码如下所示：

var App = {
    init: function() {
        // Do initial set up
        this.navButtons();
    },
    navButtons: {
        $('.nav li').on('click', function(){
            var section = $(this).data('section');
            App[section + 'Section'].unload(App[section + 'Section'].init);
        });
    },
    homeSection: {
        init: function() {
            // Do init animations here
        },
        unload: function(callback) {
            // Do unload animations here
            if(typeof callback === 'function') callback()
        }
    },
    storySection: {
        init: function() {
            // Do init animations here
        },
        unload: function(callback) {
            // Do unload animations here
            if(typeof callback === 'function') callback()
        }
    }
}

目前该应用程序的工作方式是，您单击导航按钮，然后通过App[section + 'Section'].init()单击来加载相应的部分。这会导致加载正确的部分并触发正确的动画。但是，我正在尝试添加一个将在加载下一部分之前unload发生的函数。我尝试通过使用回调来做到这一点：，但这实际上不起作用。App[section + 'Section'].unload(App[section + 'Section'])

以我目前的知识，这是我能想到的最好的主意。是否有更好的设计模式可以用来处理等待事件实际发生的加载/卸载部分？可能发布/订阅？

4

1 回答 1

0

您在同一部分调用加载和卸载功能，将您的点击事件更改为：

navButtons: function () {
        var lastSection = null;
        $('.nav li').on('click', function(){
            var section = $(this).data('section');
            App[(lastSection || 'dummy')+ 'Section'].unload(App[section + 'Section'].init);
            lastSection = section;
        });
    },

然后为第一次调用添加一个虚拟部分卸载函数：

dummySection: {
    unload: function(callback) { callback(); }
},

这样做的目的是让最后一个调用的部分对下一次点击事件可用。这要归功于闭包，这基本上意味着lastSection变量在点击事件函数的所有调用中都保持其状态，因为它们是在同一范围内声明的。

于 2013-10-14T23:31:36.807 回答