logo

Načtěte soubory CSS přes AMD s XStyle

Zavaděče AMD nám umožňují načíst téměř cokoli:moduly AMD, základní soubory JavaScriptu (z jakéhokoli původu), textové soubory (například šablony HTML) a další. Bohužel většina zavaděčů nemá možnosti načítání CSS, pravděpodobně proto, že události ve stylu „onLoad“ neposkytují všechny prohlížeče pro šablony stylů. Naštěstí můj kolega ze SitePen Kris Zyp vytvořil XStyle, balíček AMD dostupný pro zavaděče AMD pro spolehlivé načítání stylů. Pojďme se krátce podívat na XStyle!

Zobrazit ukázku

Poctivě k XStyle, je to víc než jen plugin AMD pro načítání stylů. XStyle poskytuje možnost:

  • Podložení a rozšíření CSS
  • Načíst šablony stylů a provést zpětná volání
  • Vnořené načítání @import

Shimming a rozšiřování CSS je skvělé, ale nezdá se, že by to bylo něco, co bych často potřeboval; načítání CSS pomocí modulů JavaScriptu je hezké, protože:

  1. Načítání modulů a šablon dohromady, ale potřeba přidávat značky LINK ručně, je nesmysl
  2. One define() pro definování úplného widget z JS do šablony a CSS je ideální; zejména pro komponenty třetích stran

Zvažte tedy skvělý zavaděč JavaScriptu, jako je curl.js. S curl.js stačí k načtení souboru CSS udělat:

curl(["css!path/to/file.css"], function() {
    // defineCSS loaded, do stuff!
});

Sladké, že? Pomocí jiného zavaděče můžete načíst soubory CSS s jinými moduly kódováním:

define(["xstyle!./path/to/file.css"], function(){
    // module starts after css is loaded
});

Vynikající! Pomocí XStyle můžeme definovat úplné komponenta, šablona stylů a vše!

Zobrazit ukázku

XStyle toho umí mnohem víc, než co jsem prezentoval výše, ale už jen možnost načíst styly s každým dalším kusem daného modulu je k nezaplacení. Zlepšuje organizaci a rychlost kódování; výborně, Kris!