带节的单页javascript应用程序的体系结构

目前我有一个简单的单页应用程序，名为

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']）

，但实际上不起作用

---

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

如果要在同一节上调用加载和卸载功能，请将单击事件更改为：

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

变量在单击事件函数的所有调用中都保持其状态，因为它们在相同的范围内声明