避免使用 requirejs 加载已经注入到 DOM 中的模块

Avoid loading modules already injected into the DOM with requirejs

本文关键字：注入 DOM 模块 requirejs 加载      更新时间：2023-09-26

有没有办法避免将可能已经存在的模块加载到 DOM 中？

例：

require.config({
  paths: {
    // jquery here is needed only if window.jQuery is undefined
    'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min'
  }
});

能够使用类似此代码段的内容会很棒

require.config({
  paths: {
    'jquery': {
       uri: '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min',
       // if this function returns false or undefined load the script from the url
       define: function(){ return window.jQuery; } 
    }
  }
});

-----------------------------------------------------------------

更新

-----------------------------------------------------------------

我向 github 上的@jrburke发送了一个拉取请求，https://github.com/jrburke/requirejs/issues/886 我的提案。requirejs 的固定版本可以在这里进行测试：

http://gianlucaguarini.com/experiments/requirejs/requirejs-test3.html

这里根据我的 API 建议进行 requirejs 配置

require.config({
  paths: {
    // jquery here is needed only if window.jQuery is undefined
    'jquery':'//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min',
    'lodash':'//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.0.0/lodash.underscore.min',
    'backbone':'//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min'
  },
  shim:{
    'jquery':{
      // with my fix now I detect whether window.jQuery has been already defined
      // in this case I avoid to load the script from the cdn
      exports:'jQuery',
      // if this feature is missing I need to load the new jQuery from the cdn
      validate: function(){
        return  window.jQuery.Defferred;
      }
    },
    'lodash':{
      // lodash will be loaded only if it does not exist in the DOM
      exports:'_',
      // if this function returns false or undefined load the script from the cdn
      validate: function() {
        // is the lodash version already available in the DOM new enough for my application?
        return  window.parseInt(window._.VERSION) >= 2;
      }
    },
    'backbone':{
      deps:['lodash','jquery'],
      // if backbone exists we don't need to load it twice
      exports:'Backbone'
    }
  }
});

正如@jrburke在您的拉取请求中指出的那样，这样做的方法是：

require.config({});
if (typeof jQuery === 'function') {
  define('jquery', function() { return jQuery; });
}
// start module loading here
require(['app'], function(app) {});

如果已定义模块，则不会（重新）加载该模块。在这里，定义只是重用已经加载的全局jQuery对象。

由于 jQuery 与 AMD 兼容，如果它已经在页面 Require.js 不会再次加载它。

更广泛地说，Require.js 仅在尚未定义模块时查看路径配置。因此，一旦您定义了模块，Require.js 就不会再次加载它：

define('jquery', [], function() { /* stuff */ });
//        ^ Module 'jquery' is defined here. Require.js won't load it twice.

查看此 JsBin 以获取工作示例：http://jsbin.com/OfIBAxA/2/edit

相关文章：