Už roky používám JavaScript loadery; ať už se jednalo o zavaděč Dojo, curl.js nebo dokonce použití jQuery jako zavaděče JavaScriptu, je neuvěřitelně užitečné požádat o sadu zdrojů a reagovat po dokončení načítání. Každý zavaděč JavaScriptu je nabitý funkcemi, je efektivní a odvádí skvělou práci při vytváření rozhraní Promise API, které v prohlížeči při vytváření zavaděče neexistovalo. Následující není tento typ zavaděče.
Toto super jednoduché loader umožňuje načítání souborů obrázků, CSS a JavaScript pomocí rozhraní Promise API a v případě úspěchu nebo selhání spustí zpětné volání. Tento drobný „nakladač“ (ani bych to tak neměl nazývat) ne :
- ukládat výsledky do mezipaměti (i když by to bylo snadné)
- poskytněte zpět modul/objekt
- provádět volání AJAX (ačkoli je k dispozici XHR-to-Promise shim, nebo můžete použít načítání)
- ... nebo cokoli jiného pokročilého
Zde je malá „nakládačka“ v celé své kráse:
var load = (function() { // Function which returns a function: https://davidwalsh.name/javascript-functions function _load(tag) { return function(url) { // This promise will be used by Promise.all to determine success or failure return new Promise(function(resolve, reject) { var element = document.createElement(tag); var parent = 'body'; var attr = 'src'; // Important success and error for the promise element.onload = function() { resolve(url); }; element.onerror = function() { reject(url); }; // Need to set different attributes depending on tag type switch(tag) { case 'script': element.async = true; break; case 'link': element.type = 'text/css'; element.rel = 'stylesheet'; attr = 'href'; parent = 'head'; } // Inject into document to kick off loading element[attr] = url; document[parent].appendChild(element); }); }; } return { css: _load('link'), js: _load('script'), img: _load('img') } })(); // Usage: Load different file types with one callback Promise.all([ load.js('lib/highlighter.js'), load.js('lib/main.js'), load.css('lib/highlighter.css'), load.img('images/logo.png') ]).then(function() { console.log('Everything has loaded!'); }).catch(function() { console.log('Oh no, epic failure!'); });
A load
objekt je vytvořen pomocí js
, css
a img
funkce, které přijímají adresu URL k načtení. Každá funkce vrací Promise a onload
nebo onerror
událost značky zdroje spouští resolve
nebo reject
za slib. Promise.all
shromažďuje zdroje, které se mají načíst, a then
spouští se při úspěšném načtení všech zdrojů, catch
pokud některý z nich selže.
Musím zdůraznit, že se jedná o velmi, velmi jednoduchou „nakladačku“; prosím uložte si komentáře o tom, jak to nemá zvonky a píšťalky, které mají jiné nakladače. Líbí se mi, jak úžasné rozhraní Promise API vytváří asynchronní správu a správu načítání zdrojů, stejně jako rozhraní API ServiceWorker a rozhraní API pro načítání. Udělejte si laskavost a vyzkoušejte tato úžasná rozhraní API!