繁体   English   中英

使用非AMD兼容的javascript模块与require.js?

[英]Using non-AMD compatible javascript module with require.js?

我正在使用require.js来帮助组织我的Backbone.js应用程序。

我正在试图找出使用与require.js不兼容的第三方javascript库的正确方法

问题中的库是backbone-tastypie.js 基本上,库所做的是monkeypatch Backbone的一些原型方法,以便为TastyPie Django REST框架提供更简单的支持。 它通过直接操作全局命名空间中的Backbone对象来实现。

但是,由于我使用Backbone.js作为require.js模块,因此当该库尝试访问它时它不可用。

如何在Backbone范围内导入此主干 - tastypie?

更新:我已经分叉了一个名为backbone-tastypie-amd的兼容AMD的骨干 - tastypie

虽然sander的解决方案可行,但每次你想要骨干时,做整个嵌套需求的东西都有点烦人。

backbone-tastypie就是所谓的“传统脚本”。 您可以通过4种方式解决问题。

  1. 让骨干 - tastypie AMD自己兼容。 您可以通过以下两种方式之一完成此操作。 选项1将永远不包括骨干 - 只有骨干 - tastypie。 然后修改主干tastypie以确保需要主干。

     var root = this; var Backbone = root.Backbone; if (!Backbone && (typeof require !== 'undefined')) Backbone = require('backbone').Backbone; 

    然而,这不是很好,因为在骨干 - tastypie加载(同步)之后,它本质上将开始下载骨干。 它也没有让requirejs完全理解这些模块是如何相关的,这就是正确的观点。 所以让我们在一个define()中包装backbone-tastypie:

     (function (factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(['backbone'], factory); } else { // RequireJS isn't being used. Assume backbone is loaded in <script> tags factory(Backbone); } }(function (Backbone) { //Backbone-tastypie contents })); 

    到目前为止,这是本答案中所有内容的最佳选择。 RequireJS知道依赖关系,它可以解决它们,下载它们并正确评估它们。 值得注意的是,Backbone本身使用选项1加载下划线,并没有将自己定义为模块,这非常糟糕。 您可以在此处获得AMD优化版骨干 假设您正在使用此AMD版本,您现在可以直接进入并在您的应用程序中需要骨干 - tastypie(通过在define()或实际的require()函数中要求它)。 您也不必包含主干或下划线,因为这些依赖项由requirejs解析。

  2. 使用require.js 订购插件 这会强制按顺序加载(在某些方面仍然是异步的,因为它随时下载它们,但按正确的顺序进行评估)

     require(["order!backbone.js", "order!backbone-tastypie.js"], function () { //Your code }); 
  3. 将backbone.js放在优先级配置中 无论如何,这都会强制主干及其依赖关系始终首先加载。

  4. 将backbone-tastypie附加到与backbone.js相同的文件中。 每次加载主干时,骨干都会加载。 哈克? 是。 但这与使用jquery和requireJS的推荐方法非常相似(jquery插件需要加载jquery - 就像backbone-tastypie需要加载主干一样)。

假设您已正确设置路径,以下内容应与RequireJS 2.1.0+一起使用。

require.config({
  shim: {
    'underscore': {
      exports: '_'
    },
    'backbone': {
      deps: ['underscore','jquery'],
      exports: 'Backbone'
    },
    'backbone-tastypie': {
      deps: ['backbone']
    }
  }
);

你可以用另一个包裹你的要求,首先加载插件,之后你可以做你的应用程序。

require(["myCustomTastyPiePlugin.js"], function () {
    //This callback is called after the one script finish loading.

    require(["one.js", "two.js", "three.js"], function () {
        //This callback is called after the three scripts finish loading.

        // all your code goes here...

    });
});

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM