curl.js:Neuvěřitelný AMD Loader

Dnes jsou k dispozici desítky AMD JavaScript loaderů, z nichž nejpopulárnější je RequireJS. Existují také méně známé zavaděče JavaScriptu, jako je YepNope, $script.js, LABjs a nový nativní zavaděč Dojo. Můj oblíbený zavaděč JavaScriptu je však curl Johna Hanna (neskriptovatelný). Zatímco umožňuje maximální konfiguraci a spolehlivé načítání, curl také umožňuje načítání jednoduchých souborů JavaScript a souborů CSS. Dovolte mi, abych vám ukázal, jak jej používat!

Super rychlý AMD Primer

Pokud neznáte strukturu AMD, poskytnu vám to nejzjednodušenější vysvětlení, jaké jste kdy slyšeli. AMD je systém, pomocí kterého definujete a požadujete moduly asynchronně. Definice vrací jeden nebo nula objektů. Prvním argumentem definice a požadavku je (obvykle) pole závislostí. Druhý argument je funkce; Definice vrátí výsledek, request provede základní zpětné volání:

// "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!
	
});

Lomítka v položkách pole závislostí představují cesty k souborům JavaScript modulu. Jakmile jsou závislosti načteny, akce může začít.

Jak jsem řekl, toto je velmi jednoduchý, vanilkový příklad; z každého pravidla existují výjimky, takže se neobtěžujte poukazováním na co-když.

Konfigurace načítání modulu s curl

A samozřejmě začnu s několika výjimkami z pravidla. Místo require funkce curl.js definuje curl na svém místě. Navíc curl.js umožňuje jako první parametr použít objektový literál, což umožňuje konfiguraci načtených modulů:

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

Tato konfigurace vám umožňuje poskytnout cesty k pluginům, cesty k modulům a další.

Základní definovat a vyžadovat pomocí curl.js

Základní použití curl.js je takové, jaké byste očekávali od zavaděče JavaScriptu; pole závislostí jako první argument, zpětné volání s druhým:

define(["namespace/depA", "namespace/depB"], function(depA, depB) {
	// Do something with the dependencies
	
	// Pump out a return obj
	return myFinalObject;
});

S definovaným modulem stejná syntaxe vyžaduje a funguje se závislostmi:

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

Toto je stejná syntaxe, jakou použijete s jakýmkoliv zavaděčem JS, se zřejmou výjimkou require nahrazeno curl .

curl.js s dalším

Další metoda umožňuje řetězení načítání modulu:

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
		}
	);

Tato syntaxe vám může vyhovovat více než ostatní.

curl.js s odloženou syntaxí

Pokud pracujete s Dojo Toolkit nebo v poslední době s jQuery, Deferreds jsou stále rozšířenější a neuvěřitelně užitečné; curl.js vám poskytuje možnost zapsat JavaScript vašeho zavaděče stejným způsobem:

curl(["namespace/depA"]).then(
	function(depA) { // success callback
	
	},
	function(depB) { // errback
	
	}
);

Odložený formát a schopnost předat výsledek fondu XHR mohou být velmi výkonné.

Načítání souborů JavaScript jiných než AMD

Někdy je potřeba načíst soubory JavaScriptu, které nejsou ve formátu AMD, jako je načítání MooTools nebo jQuery z CDN. curl.js to usnadňuje:

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!
	
});

Vše, co musíte udělat, je přidat js! předpona k řetězci závislosti a je to; vaše zpětné volání se spustí po načtení základního souboru JavaScript. Pamatujte, že moduly AMD můžete kombinovat se základními soubory 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!
	
});	

Načítání souborů CSS

Jednou ze silných stránek AMD je samozřejmě modularita, tak proč nenahrát vaše šablony stylů s vašimi skripty?

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
	}
});

Tagy LINK neposkytují událost onLoad ve všech prohlížečích, ale shim curl.js poskytuje spolehlivou metodu detekce načtení šablony stylů. Vzhledem k tomu, že šablony stylů jsou velkou součástí widgetů založených na uživatelském rozhraní a využívajících JavaScript, je vytváření modulů se závislostmi na šablonách stylů mnohem hojnější.

Více pluginů curl

curl je mnohem víc než jen základní zavaděč JS. O pluginech JS a CSS jsem se již zmínil výše, ale curl má několik dalších. curl obsahuje plugin domReady, stejně jako textový plugin a internacionalizační plugin:

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
	}
);

Tyto pluginy jsou rychlým a snadným vylepšením stávajících funkcí!

curl je absolutní bestie zavaděče JavaScriptu. Kromě jednoduchého načítání AMD je curl vhodný s mnoha možnostmi konfigurace, zásuvnými moduly a více strukturami syntaxe, aby všichni vývojáři mohli kódovat tak, jak chtějí. Tento blog používá curl.js k asynchronnímu načítání modulů JavaScriptu a šablon stylů, správě domReady a dalším; nejlepší podporu, kterou mohu dát!