Question

我已经使用多个requirejs模块配置了我的项目，我想知道如何仅在需要时加载其中一些（例如，仅当用户打开地图面板时才加载地图相关模块）< / p>

Answer 1

一个简单的例子是检查标记中是否存在该元素，如果确实需要，则仅加载并执行其他模块。

var sliders = document.querySelectorAll( '.slider' );   // find any element with class .slider
if( sliders.length > 0 ) {                              // check if there is aleast one
    require( ['jquery', 'view/bootstrap-slider'], function( jQuery ) {  // load jQuery and the Twitter Bootstrap component for sliders
        jQuery( sliders ).slider();                     // setup the Twitter Bootstrap slider
    } );
}

这种方法的一个缺点是它不会重新运行使用AJAX动态插入的标记。

您可以使用某种selector listener来处理动态标记更改。

require( [ 'better-dom' ], function( DOM ) {            // include chemerisuk/better-dom

    DOM.extend( '.slider', {                            // setup a “live extension/selector listener” for elements with the class .slider
        constructor: function() {
            var sliderElement = this._node;
            require( [ 'view/bootstrap-slider' ], function( Slider ) {
                jQuery( sliderElement ).slider();       // setup the Twitter Bootstrap slider
            } );
        }
    } );

} );

此示例通过better-dom“实时扩展”使用选择器侦听器。每次将具有给定选择器的元素添加到当前文档时，将触发一个事件，并且对于每个添加的元素，构造函数内的任何内容都会执行一次。当通过AJAX（“页面转换”）加载整个页面或以其他方式动态添加内容时，这很有用。

是否可以在以后加载一些requirejs“模块”？

1 个答案: