Question

我有一个RequireJS设置，可以加载Select2 jQuery插件。

我有一个问题，但这意味着在页面加载时，浏览器默认选择输入会显示几秒钟，然后换出高级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');
    });

});

Answer 1

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

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

我通常使用第三种选择。

Answer 2

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

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

HTML

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

JS

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

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

2 个答案: