javascript - 延迟加载 CSS 和 JS

Question

我写了这段JS和CSS加载代码，希望得到一些建议。一些 Javascript 大师可能指出的任何内容都将不胜感激。代码有效，但我没有进行广泛的测试，因为我担心以这种方式替换函数。

包含 JQuery 的单个 javascript 文件以及以下代码将包含在所有页面上。我们在内部编写所有组件，并将它们非常模块化地与相应的 JS 和 CSS 分离到它们自己的文件夹中。您可以想象开始使用例如一个页面上的下拉菜单、对话框和日期选择器将需要我们添加 6 个包含，坦率地说，这很烦人，因为我希望自动解析依赖关系，并且使用 JSP 包含可能会多次调用相同的资源。

下面是延迟加载单个日期选择器的 src

;(function($){
    //All Lazily loaded components go here
    $.fn.datepicker = function(settings){
        console.log("This should only be displayed once");
        loadCSS("/res/component/datepicker/datepicker.css");
        var elem = this;
        return loadJS("/res/component/datepicker/datepicker.js", 
                    function(){return elem.datepicker(settings)});//After Load Completion the $.fn.datepicker is replaced
                                                                  //by the proper working implementation, execute it and return it so we maintain the chain
    };
}(jQuery));

function loadCSS(absoluteUrl){
    if(loadCSS[absoluteUrl])
        return;//Css already loaded

    $('<link>')
      .appendTo('head')
      .attr({type : 'text/css', rel : 'stylesheet'})
      .attr('href', absoluteUrl);//Appending entire element doesn't load in IE, but setting the href in this manner does

    loadCSS[absoluteUrl] = true;//Memoize
}

function loadJS(absoluteUrl, onComplete){
    if(loadJS[absoluteUrl])
        return;//Script already loaded

    loadJS[absoluteUrl] = true;//Memoize

    var result;
    jQuery.ajax({
        async : false,//Synchronized because we need to maintain the JQuery chain
         type :'GET',
          url : absoluteUrl,
     dataType :'script',
      success : function(){
                    result = onComplete();
                }
    });

    return result;
}

Answer 1

你看过Require JS吗？ ，它将仅针对给定模块所需的模块发送异步请求。

此外，因为依赖关系在回调函数范围内，所以 namespace 冲突问题不大

通常你会:

require(["jquery", "foo", "bar"], function($, foo, bar){...});

这允许您的代码在服务器端和客户端保持模块化，位于不同的位置。

当然，您需要使用配置(在网页中描述)在您的服务器上设置 require，并将您的资源包装在定义 block 中:

define("foo", ["jquery"], function($){...});

缺点是需要很多模块的页面的性能。在这种情况下，您可以从将所有资源合并到文件中获益更多，但请注意，查询字符串将导致浏览器在任何情况下都不会缓存文件。这也是另一个性能考虑因素。

希望对你有帮助

附言。在 CSS 延迟加载方面，您总是可以使用 javascript 将 link 标签注入(inject)到 head adhoc 中，并提供一些 javascript 接口(interface)函数供您的其他代码调用，以便动态请求 CSS 依赖项。