Question

目前，我有一个名为App的简单单页应用设置。我试图做的是制作网站的“部分”，其中包含加载每个部分时出现的动画，以及导航到新部分时发生的一组不同的动画（卸载当前部分的动画）。 / p>

我的代码如下所示：

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'])执行此操作，但实际上并不起作用。

根据我目前的知识，这是我能想到的最好的主意。有没有更好的设计模式，我可以用来处理加载/卸载部分，等待事件真正发生？可能是pub / sub？

Answer 1

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

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

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

单页javascript应用程序的部分架构

1 个答案: