具有部分的单页javascript应用程序的体系结构

Question

目前，我有一个简单的单页面应用程序，名为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']) ，但这实际上不起作用。

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

Answer 1

您在同一部分调用load和unload函数，请将click事件更改为：

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(); }
},

这样做是为了使上一节的调用可用于下一个click事件。 这要归功于Closures ，它基本上意味着lastSection变量在click事件函数的所有调用中都保持其状态，因为它们是在同一作用域中声明的。