如何创建一个事件以在所有插件启动时触发？答案

【问题标题】：How to create a event to trigger when all plugins have been initiated?如何创建一个事件以在所有插件启动时触发？
【发布时间】：2014-08-08 08:42:03
【问题描述】：

我的网站有一个 ajax 导航。所以没有为页面的每个部分创建一个 js 脚本，我选择创建一个包含所有必要代码以最小化 HTTP 请求的单个 js。

然后我编写了类似的代码：

HTML

<a href="#" data-pageindex="0">Home</a>
<a href="#" data-pageindex="1">Contact</a>
<a href="#" data-pageindex="2">Portfolio</a>

<div id="page-home"></div>
<div id="page-contact"></div>
<div id="page-portfolio"></div>

var urls = ['home', 'contact', 'portfolio'];    

$("[data-pageindex]").on("click", function(e){
    var index = parseInt($(this).data("pageindex"));

    load_section(index);

    e.preventDefault();
    return false;
});

function load_section(index_load){

    var id_section = "#page-" + urls[index_load]; 

    if (! isEmpty( $(id_section) ) ){
        return;
    }

    switch(index_load){
        case 0: $(id_section).load("/application/ajax/home.html",       load_home); break;
        case 1: $(id_section).load("/application/ajax/contact.html",    load_contact); break;
        default: $(id_section).load("/application/ajax/portfolio.html", load_portfolio);
    }
}

function load_home(){
    // about 180 lines of code
}

function load_contact(){
    // about 104 lines of code
}

function load_portfolio(){
    // about 95 lines of code
}

如您所见，函数 load_home、load_contact 和 load_portfolio 在获取该部分的 html 之前被调用，并且在其中我有几个插件的初始化（例如很多select2）。我想创建一个事件，在所有启动时显示警报。

这些是我的问题：

有一种简单的方法可以触发这个吗？
是否值得已经加载了所有的html，并且只有在用户点击菜单中的链接时才调用初始化所有的函数？
将代码放在单独的 js 脚本中并使用 jQuery.getScript() 函数加载它们会更好吗？

【问题讨论】：

代码，虽然你可以重构你使用像Angular这样的东西编写它的方式，但是很好。一旦load_home 完成执行，所有插件都会被加载。问题是我敢打赌这些第三方插件中的每一个都有自己的“加载”事件。您需要跟踪每个插件的每个“加载”事件，然后在全部完成时触发。可以使用 Promise 的东西
哦...文档中恐怕 select2 没有该事件：ivaynberg.github.io/select2/#documentation 第 2 和第 3 个问题呢？任何提示或建议？谢谢:)
我不建议#2，尽管它对于少量代码来说是可以的，但它的可扩展性不是很好（尽管因为您正在对加载事件进行硬编码，所以它并不重要）。我认为，从用户的角度来看，如果您愿意以自己拥有的方式筛选大量代码，那是很好的。最后，select2 的事件是 select2-loaded :)
真的很感谢，我没有意识到。 :)
@RGraham，'select2-loaded' 不起作用。看这个例子：runnable.com/UmuP-67-dQlIAAFU/events-in-select2-for-jquery。你认为initSelection 是我要找的吗？谢谢！

标签： javascript jquery html ajax optimization

【解决方案1】：

在窗口完成所有 html 元素的加载后调用这些函数：

$(window).load(function(){
   load_home();
   load_contact();
   load_portfolio();
});

【讨论】：

我想你不明白我的问题的重点。这只是一个例子，假设我有 20 个不同的部分。每次加载页面时默认初始化 ALL 是个坏主意。你假设我已经加载了 html，但我没有。请再读一遍帖子。谢谢。