curl 等js加载完_curl.js：令人难以置信的AMD加载程序

curl 等js加载完

Today there are dozens of AMD JavaScript loaders available, the most popular being RequireJS. There are also lesser known JavaScript loaders like YepNope, $script.js, LABjs, and Dojo's new native loader. My favorite JavaScript loader, however, is John Hann (unscriptable)'s curl. While allowing for maximum configuration and reliable loading, curl also allows for loading of simple JavaScript files as well as CSS files. Let me show you how to use it!

如今，有数十种AMD JavaScript加载程序可用，其中最受欢迎的是RequireJS。 还有鲜为人知JavaScript加载程序，例如YepNope，$ script.js，LABjs和Dojo的新本机加载程序。 但是，我最喜欢JavaScript加载器是John Hann(无法编写脚本)的curl 。 curl在允许最大配置和可靠加载的同时，还允许加载简单JavaScript文件和CSS文件。 让我告诉你如何使用它！

View Demo观看演示

超快速AMD入门 (Super Quick AMD Primer)

If you aren't familiar with AMD structure, I'm going to give you the most oversimplified explanation you'll ever hear. AMD is a system by which you define and require modules asynchronously. A define returns one or zero objects. The first argument of both define and require is (usually) an array of dependencies. The second argument is a function; the define returns the result, the require executes a basic callback:

如果您不熟悉AMD的结构，我将为您提供您所听到的最简单的解释。 AMD是您用来异步定义和要求模块的系统。 定义返回一个或零个对象。 define和require的第一个参数通常是一个依赖项数组。 第二个参数是一个函数； define返回结果，require执行基本的回调：

// "define" a module
define(["namespace/dependencyA", "namespace/dependencyB"], function(depA, depB) {
// Whole bunch of processing

// Return what this module defines
return function() {
// Or an object, or whatever
}
});

// "require" to use modules:
require(["namespace/dependencyC"], function(depC) {

// depC can be used in here only
// Yay for modularity!

});

[/code]

The slashes in the dependency array items represent paths to module JavaScript files. Once dependencies are loaded, the action is allowed to begin.

依赖项数组项中的斜杠代表模块JavaScript文件的路径。 加载依赖项后，就可以开始执行该操作。

As I said, this is a very simple, vanilla example; there are exceptions to every rule, so don't bother pointing out what-ifs.

如我所说，这是一个非常简单的示例。 每个规则都有例外，因此不要费心指出假设。

使用curl配置模块加载 (Configuring Module Loading with curl)

And of course I start out with a few of the exceptions to the rule. Instead of a

require

function, curl.js defines

curl

in its place. Additionally, curl.js allows for an object literal as a first parameter, allowing for configuration of loaded modules:

当然，我从规则的一些例外开始。 curl.js代替了

require

函数，而是在其位置定义

curl

。 另外，curl.js允许将对象文字作为第一个参数，从而允许配置已加载的模块：

curl({
baseUrl: "/path/to/js",
pluginPath: "curl/src/curl/plugin"
},
["namespace/depC", "namespace/otherDep"],
function(depC, otherDep) {
// Do stuff
}
);

[/code]

This configuration allows you to provide plugin paths, modules paths, and more.

通过此配置，您可以提供插件路径，模块路径等。

基本定义和要求curl.js (Basic define and require with curl.js)

Basic usage of curl.js is as you would expect from a JavaScript loader; dependency array as the first argument, callback with the second:

curl.js的基本用法与您期望JavaScript加载器相同； 依赖数组作为第一个参数，第二个回调：

define(["namespace/depA", "namespace/depB"], function(depA, depB) {
// Do something with the dependencies

// Pump out a return obj
return myFinalObject;
});

[/code]

With a module defined, the same syntax requires and works with the dependencies:

定义了模块后，相同的语法就需要并与依赖项一起使用：

curl(["namespace/depC"], function(depC) {
// Do some stuff!
});

[/code]

This is the same syntax you will have used with any JS loader, with the obvious exception of

require

being replaced by

curl

.

这是与任何JS加载程序都将使用的语法相同的语法，但明显的例外是

require

被

curl

取代了。

下一个curl.js (curl.js with next)

The next method allows for chaining of module loading:

下一个方法允许链接模块加载：

curl(["js!someFile.js"])
.next(["dep1", "dep2", "dep3"], function (dep1, dep2, dep3) {
// Execute regardless of domReady status
})
.next(["domReady!"])
.then(
function () {
// do something after the dom is ready
},
function (ex) {
// show an error to the user
}
);

[/code]

This syntax may suit your fancy more than others.

此语法可能比其他语法更适合您。

带有延迟语法的curl.js (curl.js with Deferred Syntax)

If you work with the Dojo Toolkit, or more recently with jQuery, Deferreds are becoming more prevalent and incredibly useful; curl.js provides you the ability to write your loader JavaScript in the same fashion:

如果您使用Dojo Toolkit，或者最近使用jQuery，则Deferreds变得越来越普遍和有用。 curl.js使您能够以相同的方式编写加载器JavaScript：

curl(["namespace/depA"]).then(
function(depA) { // success callback

},
function(depB) { // errback

}
);

[/code]

The deferred format and ability to pass the result of an XHR pool can be very powerful.

延迟格式和传递XHR池结果的功能非常强大。

加载非AMD JavaScript文件 (Loading Non-AMD JavaScript Files)

Sometimes you need to load JavaScript files that aren't in AMD format, like loading MooTools or jQuery from CDN. curl.js makes that easy:

有时，您需要加载非AMD格式JavaScript文件，例如从CDN加载MooTools或jQuery。 curl.js使这变得容易：

curl(
["js!https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"]
).next(["namespace/MooModule"], function() {
// We loaded Moo first, then once loaded, loaded a dependency that requires MooTools
// At this point, both are loaded and we can work with them!

});

[/code]

All you need to do add the

js!

prefix to the dependency string and you're set; your callback will be fire when the basic JavaScript file is loaded. Note that you can mix AMD modules with basic JavaScript files:

您所需要做的就是添加

js!

依赖项字符串的前缀，您已设置好； 加载基本JavaScript文件后，您的回调将触发。 请注意，您可以将AMD模块与基本JavaScript文件混合使用：

curl(
[
"js!https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js",
"js!https://davidwalsh.name/mootools-ftw.js",
"namespace/independentModule"
]
).next(["namespace/MooModule"], function() {
// We loaded Moo first, then once loaded, loaded a dependency that requires MooTools
// At this point, both are loaded and we can work with them!

});

[/code]

加载CSS文件 (Loading CSS Files)

Of course one of the strengths of AMD is modularity, so why not load your stylesheets with your scripts?

当然，AMD的优势之一是模块化，那么为什么不使用脚本加载样式表呢？

curl(
[
"namespace/MyWidget",
"css!namespace/resources/MyWidget.css"
],
function(MyWidget) {
// Do something with MyWidget
// The CSS reference isn't in the signature because we don't care about it;
// we just care that it is now in the page
}
});

[/code]

LINK tags don't provide an onLoad event in all browsers, but curl.js' shim provides a reliable method of detecting stylesheet load. Since stylesheets are a large part of UI-driven, JavaScript-powered widgets, creating modules with stylesheet dependencies is becoming much more abundant.

LINK标记并非在所有浏览器中都提供onLoad事件，但是curl.js的shim提供了一种检测样式表负载的可靠方法。 由于样式表是UI驱动的，由JavaScript驱动的小部件的很大一部分，因此创建具有样式表依赖性的模块变得更加丰富。

更多curl插件 (More curl Plugins)

curl is much more than just a basic JS loader. I've already mentioned the JS and CSS plugins above, but curl has a few more. curl features a domReady plugin, as well as a text plugin and an internationalization plugin:

curl不仅仅是一个基本的JS加载器。 我已经在上面提到了JS和CSS插件，但是curl还有更多功能。 curl具有domReady插件，文本插件和国际化插件：

curl(
[
"i18n!stuff/nls/strings", // Load string content for the user's namespace
"text!myWidget/resources/template.html", // Loads a file as text,
"domReady!" // Don't fire the callback until the DOM is ready
],
function(nlsStringObject, template) { // Callback
// Do something now that we have the NLS object, template, and domContentLoaded has fired
}
);

[/code]

These plugins are quick and easy enhancers to existing functionality!

这些插件是现有功能的快速便捷的增强器！

View Demo观看演示

curl is an absolute beast of a JavaScript loader. Beyond simple AMD loading, curl is fit with numerous configuration options, plugins, and multiple syntax structures to all the developer to code the way they want. This blog uses curl.js to asynchronously load JavaScript modules and stylesheets, manage domReady, and more; the best endorsement I can give!

curl是JavaScript加载程序的绝对野兽。 除了简单的AMD加载之外，curl还具有众多配置选项，插件和多种语法结构，适合所有开发人员以所需的方式进行编码。 该博客使用curl.js异步加载JavaScript模块和样式表，管理domReady等。 我能给的最好的认可！

翻译自: https://davidwalsh.name/curljs

curl 等js加载完