在加载 RequireJS 时立即加载 Select2 jQuery 插件答案

【问题标题】：Load Select2 jQuery plugin immediately on load RequireJS在加载 RequireJS 时立即加载 Select2 jQuery 插件
【发布时间】：2014-10-30 09:55:45
【问题描述】：

我有一个加载 Select2 jQuery 插件的 RequireJS 设置。

我有一个问题，但这意味着在页面加载时，浏览器默认选择输入会显示几秒钟，然后换成高级 Select2 输入，大概是因为 RequireJS 正在异步加载我的脚本。

有没有一种方法可以避免这种情况，而不必在 HTML 中包含脚本？

这是我的 RequireJS 设置：

require.config({
baseUrl: '/assets/js',
paths: {
    jquery: '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min',
    async: 'libs/async',
    modernizr: 'libs/modernizr-custom',
    jqueryUI: 'libs/jquery-ui.min',
    bootstrap: 'libs/bootstrap.min',
    select2: 'libs/select2.min',
},
shim: {
    'select2': {
        deps: ['jquery'],
        exports: 'Select2'
    },
    'bootstrap': {
        deps: ['jquery'],
        exports: 'Bootstrap'
    },
    'jqueryUI': {
        deps: ['jquery'],
        exports: 'jQueryUI'
    },
}
});

requirejs(["app/polyfills"]);
requirejs(["app/filter"]);
requirejs(["app/select"]); // Select2 plugin trigger
requirejs(["app/datepicker"]);
requirejs(["app/popover"]);
requirejs(["app/dropdown"]);
requirejs(["app/tooltip"]);
requirejs(["app/layout"]);
requirejs(["app/menu"]);
requirejs(["app/toggles"]);

这是实际的脚本：

define(['select2'], function(Select2) {

    var app = {};

    app.select = (function(){
        var module = {};

        module.init = function(){

            $(".select-advanced").select2({
                width: 'off',
                dropdownAutoWidth: 'true',
            });
        };

        return module;
    })();

    $(document).ready(function(){
        app.select.init();
        console.log('select');
    });

});

【问题讨论】：

标签： javascript jquery requirejs jquery-select2

【解决方案1】：

没有办法强制 RequireJS 立即加载模块。它是异步模块定义 API 的实现。因此无法保证何时加载模块。一些选项：

在 <head> 中使用 <script> 元素而不是 RequireJS 加载 Select2。这也需要使用 <script> 元素加载其所有依赖项。
使用 Almond 加载您的应用程序。虽然 RequireJS 不能强制立即加载模块，但 Almond 可以采用一系列 AMD 模块并同步加载它们。但是，它有几个限制，这将是对您现在所做的事情的重大改变。目前尚不清楚它是否适用于您的应用程序。我已经讨论过杏仁here 和here。
修改您的应用程序，使依赖于 RequireJS 加载的模块的外观的 DOM 部分在模块加载之前是不可见的。我最近在一个使用 AngularJS 的页面上完成了这项工作。 HTML 包含由 AngularJS 解析的标记。在我进行必要的更改之前，当页面第一次加载时，标记会显示给用户并且看起来很丑。我修改了页面，使页面的敏感部分以display: none 样式开头，并在 Angular 加载后将其删除。我发现从不可见到可见的过渡是可以接受的。

我通常使用第三种选项。

【讨论】：

对不起 - 我的意思是包含，而不是内联（我已经编辑了问题）。选项 3 对我有用，因为我不支持关闭 JS 的用户。谢谢
很高兴为您提供帮助！我删除了内联的括号，以将我的答案与问题的新状态同步。 :)

【解决方案2】：

一种方法是隐藏选择并在 select2 完成加载后显示它。

工作示例http://jsfiddle.net/9wk33bLo/

HTML

<select id="e1" style="display: none">

$.when(
    $("#e1").select2({
        width: 'off',
        dropdownAutoWidth: 'true'
})).done(function () {
    this.select2("container").show();
});

【讨论】：