如何使用curl.js加载对象

how do I use curl.js to load an object?

本文关键字：加载 对象 js curl 何使用      更新时间：2023-09-26

卷曲0.7.3

我从这里得到了一些AMD/CommonJS适配器代码：同时支持CommonJS和AMD

(function (name, definition) {
      if (typeof module != 'undefined') {
        module.exports = definition();
      }
      else if (typeof define == 'function' && typeof define.amd == 'object') {
        define(name, [], definition);
      }
      else {
        this[name] = definition();
      }
    }('modXyz', {
          sayHi:function (name) {
            console.log('Hi ' + name + '!');
          }
        }
    ));

我想将该代码与Curl一起使用，使我的所有代码AMD/CommonJS兼容。我所期望的是：

greeter = curl(['modXyz']); 
greeter.sayHi("Gracie");

但是curl返回的对象并不是我所期望的对象。我能得到的最接近的是：

curl(['modXyz'], function(mod) { window.greeter = mod; }); 
greeter.sayHi("Gracie");

这似乎违背了AMD的目的。curl能做这样的事吗？我必须使用require.js才能实现它吗？

因为浏览器远离其资源，所以在获取这些资源时必须阻塞主线程，或者必须异步获取这些资源。由于我们永远不应该阻塞主线程（有效地使浏览器没有响应），所以我们必须异步获取资源。（这与任何AMD加载程序、RequireJS、dojo等相同）

因此，像以下这样的事情根本不起作用：

var foo = require('lib/foo');

好吧，它不能在浏览器中通常使用的全局ish空间中工作。然而，它可以在受控环境中工作，例如在AMD模块内部。

步骤1：在模块内部编写代码

第2步：编写一个引导模块来启动您的应用程序

<script src="lib/curl/src/curl.js"><script>
<script src="myapp/run.js"><script>

内部run.js:

// curl 0.7.x requires a named module here ('myapp/run')
define('myapp/run', ['curl'], function (curl) {
    curl.config(
        baseUrl: '',
        packages: [ /* configure your 3rd-party packages */ ],
        paths: { /* configure any non-package 3rd-party libs here */ },
        preloads: [ /* put modules that *must* be loaded first here (e.g. shims) */ ],
        main: 'myapp/main'
    });
});

"myapp/main"可能看起来像这样：

define(function (require) {
    var view1 = require('myapp/view1/controller');
    view1.render();
    view1.placeAt('body');
});

在主模块（或任何AMD模块）内部，require的行为更像我认为你所期望的。请注意，这是一个特殊的AMD签名。您不能在define中指定依赖项，并期望require的行为像这样。您必须以一种方式在中指定依赖项。这将不起作用：

define(['myapp/view1'], function (view1) {
    var foo = require('foo');
});

希望这能有所帮助。

--John

CurlJS和RequireJS都支持AMD和CommonJS需要调用模式：

CJS和AMD之间的区别在于使用Array作为依赖项列表的包装器。还要注意，在CurlJS的配置中，您可以将curl别名为require，以使您的代码与AMD规范完全兼容。观察：

CJS要求呼叫模式：

var a = require('name')

ONLYCurlJS AMD需要调用模式：

var promise = require(['name'])
promise.then(callbackFunction)

这通常可以缩短为：

require(['name']).then(callbackFunction)

注意，CurlJS返回Promise对象不是AMD规范的一部分。AMD规范似乎没有为AMD风格的require调用指定返回值。

RequireJS和CurlJS都支持标准AMD要求调用模式：

require(['name'], callbackFunction)

再次，请注意使用Array作为标志，这是AMD风格所需要的。这会触发不同的返回值逻辑。

为了让你的东西按你想要的那样工作，在CurlJS上，你的代码必须在一个被包装成CommonJS模块的模块内，使用：

define(function(require) { ... });

有人告诉我，在这种情况下，您得到的require的行为类似于CommonJS风格的require-sync。事实上，在幕后发生的是，加载程序扫描工厂函数以查找您需要的东西，并将它们折叠到定义的需求列表中。然后，在工厂里你可以做：

var greeter = require('modXyz'); 
greeter.sayHi("Gracie");

注意，"同步"行为仍然是一种幻觉，因为实际发生的是检测到的所需资源被预加载。

在RequireJS上，甚至全局require也可以被称为CJS样式：var resource = require('resource/path')，但只有在之后，您以前已经加载了它。

换句话说，在工厂函数运行之前，CurlJS和RequireJS中的加载总是异步进行的，但在RequireJS中，你几乎可以在任何地方使用它，而在CurlJS中，这是一个非常小众的场景。

curl函数是异步的，并返回promise。因此，您只能通过传递给curl的回调来获得结果，或者通过传递给crl的回调（在承诺实现后调用）来获得结果。 
curl(['dep1', 'dep2', 'dep3' /* etc */], callback);

或

curl(['dep1', 'dep2', 'dep3' /* etc */])
    .then(callback, errorback);
相关文章：