SmoothState.Js页面更改后重新初始化页面脚本

Question

我使用SmoothState.js进行页面转换，它工作良好，并使用ajax加载新页面。但是，我在每个页面上都有需要重新初始化的JS脚本，而且我无法让它们始终出现在页面转换中。

基于FAQ:的 smoothState.js提供了允许您重新运行插件的onAfter回调函数。如果您不熟悉AJAX的工作方式，这可能会很棘手。 当您在$(document).ready()上运行插件时，它只会在当前页面上的元素上注册。因为我们每次都要注入新的元素，所以我们需要再次运行插件，将其限定为新的内容。 这样做的一个好方法是将插件初始化封装在我们对$.fn.ready()和onAfter都调用的函数中。每次初始化插件时都要指定上下文，这样就不会双绑定它们。这被称为“模块执行控制器”。

我的计划是将JS文件中的函数全部放入SmoothState.js文件中的一个SmoothState.js调用中。这样，每次用户更改页面时，函数都是可用的。

这是我现在的代码结构。我做了很多调查，但我被困住了。你能帮我找出我做错了什么吗？耽误您时间，实在对不起!

$(document).ready(function() {
    mail();

});

$('#main').smoothState({
    onAfter: function() {
        mail();
    }
});

function mail() {
    // script from mail.js goes here
}

$(function() {
    $('#main').smoothState();
});

$(function() {
    "use strict";
    var options = {
            prefetch: true,
            pageCacheSize: 3,
            onStart: {
                duration: 250, // Duration of our animation 
                render: function($container) {
                    // Add your CSS animation reversing class 

                    $container.addClass("is-exiting");


                    // Restart your animation 
                    smoothState.restartCSSAnimations();
                }
            },
            onReady: {
                duration: 0,
                render: function($container, $newContent) {
                    // Remove your CSS animation reversing class 
                    $container.removeClass("is-exiting");

                    // Inject the new content 
                    $container.html($newContent);


                }

            },

        },
        smoothState = $("#main").smoothState(options).data("smoothState");
});

Answer 1

通过将onAfter脚本移动到主光滑状态函数(删除其他平滑状态函数)，我成功地获得了一个单独的函数，以便在代码末尾运行。在浏览器刷新的情况下，也可以在文档上运行您的函数。如果它与您的代码相同，则如下所示：

$(document).ready(function() {
        mail();

    });

    function mail() {
        // script from mail.js goes here
    }

    $(function() {
        "use strict";
        var options = {
                prefetch: true,
                pageCacheSize: 3,
                onStart: {
                    duration: 250, // Duration of our animation 
                    render: function($container) {
                        // Add your CSS animation reversing class 

                        $container.addClass("is-exiting");


                        // Restart your animation 
                        smoothState.restartCSSAnimations();
                    }
                },
                onReady: {
                    duration: 0,
                    render: function($container, $newContent) {
                        // Remove your CSS animation reversing class 
                        $container.removeClass("is-exiting");

                        // Inject the new content 
                        $container.html($newContent);


                    }

                },
                onAfter: function() {
                    mail();
                }
            },
            smoothState = $("#main").smoothState(options).data("smoothState");
    });

Answer 2

我现在正在一个网站上工作，这和你的想法很相似。

我所做的是，我有两个主要的功能。第一个函数包含所有只需运行一次的函数，即处理Ajax和POPSTATE更改的内容等，该函数在最后运行第二个主函数。第二个主要函数是包含需要在页面更改上重新运行的函数，它在运行函数和将事件侦听器附加到新加载页面上的元素之前，在网站的内容区域查找特定的类或ID标记。

function mainOne() {
    // Set up Ajax, set up any navigation menus that stay constant through pages etc

    // Also runs the 2nd function so that the functions specific to the page
    //   the code loads up on also get run
    mainTwo();
}
function mainTwo() {
    // Contains functions that are specific to pages that can be loaded via AJAX
    /* ie:
    if( $("element-that-only-exists-once-on-one-specific-page").length == 1 ) {
        // Do stuff specific to only this page
    } */
}

在我的AJAX函数中，每次成功加载页面，我都会调用mainTwo()。

确保每个元素只运行一次函数的一种新方法是将类添加到要将事件附加到的元素中，例如：

$("div.objects").not(".processed").addClass("processed").click(function(){
    // Stuff to do in the function
});

从您在这里引用的内容来看，我的mainTwo()函数很像他们希望您设置的函数。基本上是一个主要的功能，以保持您的所有其他功能。如果你发布更多的代码，我可以帮你解决。