在页面加载(包括 AJAX 调用)时调用的 JavaScript 函数的注册表

Question

这是一个问题的特定变体，似乎已经问了几次，如果答案已经在那里，请道歉。

我有一个带有菜单栏和大型内容div的标准网站。 每次呈现页面时，我都想运行许多 javascript 函数，也就是说 - 在初始加载之后，并且在任何更新中心内容div 的 ajax 调用上。

我知道我需要在 ajax 调用的"成功"部分调用它们 - 但我试图避免的是在一个地方调用大量列表。 我有大约 30 个 javascript 文件，我想将它们分开，而不是相互依赖。

我正在尝试设置的是一个中央"函数注册表" - 这就是我目前所拥有的 -

var rebind = function(){
    var functions = [];
    var add = function(f){
        functions.push(f);
    }
    var call = function(){
        for (i = 0; i < functions.length; i++) {
            functions[i]();
        }
    }
    return {
        add: add,
        call: call
    }
}();

以下是我调用此函数的方式 -

$(function() {
    rebind.call();
});
$(document).on("click", "a.ajax-content", function() {
    var url = $(this).attr("href");
    $("div#content").load(url, function() {
        rebind.call();
    });
    history.pushState(null, null, url);
    event.preventDefault();
});

下面是我如何注册函数的示例，以日期选择器为例。

rebind.add(function() {
    $(".dm-type").datepicker({
        dateFormat: "dd/mm",
        changeYear: false,
        changeMonth: true
    });
});

为了澄清，我使用 $（document）.on（'click'...当我可以的时候。 此方法仅适用于加载页面后需要调用的函数。 document.ready 的全局版本，也处理 AJAX 调用。

这似乎是个好主意，但它不是 100%。 我得到了一些无限循环，例如jquery-raty。

有没有人为此想出一个好的解决方案？ 我研究了livequery，它没有处理我需要的一切，我读到不建议这样做，因为它会减慢速度。 如果有一个简单的解决方案，它将对我有很大帮助。

谢谢！詹姆斯

Answer 1

我会使用不同的技术，因为你已经在使用 jQuery - 委托！

将自定义事件附加到您的身体并将其用作侦听器，即您可以创建多个函数调用，甚至可以管理从那里触发哪些调用。

 //in a global file    
 $(document.body).on('myCustomEvent',function(event, data){
    //console.log(event,data);
    //manage your function calls here.
    //You can pass data through and have your logic here too.
    if(data.somedata || data.someotherdata) datepicker();
});

//in a singular file
$(document).on("click", "a.ajax-content", function() {
    var url = $(this).attr("href");
    $("div#content").load(url, function() {
        $(document.body).trigger('myCustomEvent', [{somedata:true}]);
    });
    history.pushState(null, null, url);
    event.preventDefault();
});

您还可以将侦听器附加到所有单独脚本文件中的正文，任何脚本的每次触发都会在所有其他脚本等中触发它。