Nyní, když rozumíme základům vývoje pluginů, můžeme se ponořit trochu hlouběji. Protože nakonec je plugin funkcí, poskytuje nám prostor, který potřebujeme uspořádat. Pamatujete si, když jsme měli dům v pořádku, když jsme se učili o šablonování? V pluginu můžeme použít některé ze stejných konceptů.
Ale nejprve si myslím, že architektura pluginu jQuery může těžit z nějakého standardního kódu. Možná znáte Boilerplate HTML5, který poskytuje spoustu chytrých výchozích nastavení. Základní deska jQuery Plugin je stejný druh věci. Šetří psaní a vede vás cestou inteligentního vývoje.
Narazil jsem na projekt doslova zvaný jQuery Boilerplate, o kterém bych si myslel, že je dobrý. Ale moc jsem se do toho nekopal. Místo toho se mi docela líbí Starter od Douga Neinera. Zadáte název, některá výchozí nastavení a některé možnosti a vygeneruje pro vás tuto strukturu standardního typu.
Rozhodli jsme se udělat slider s názvem lodgeSlider s jednoduchým parametrem rychlosti a skončit s tímto kódem:
(function($)( $.lodgeSlider = function(el, options)( // To avoid scope issues, use 'base' instead of 'this' // to reference this class from internal events and functions. var base = this; // Access to jQuery and DOM versions of element base.$el = $(el); base.el = el; // Add a reverse reference to the DOM object base.$el.data("lodgeSlider", base); base.init = function()( base.options = $.extend((),$.lodgeSlider.defaultOptions, options); // Put your initialization code here ); // Sample Function, Uncomment to use // base.functionName = function(paramaters)( // // ); // Run initializer base.init(); ); $.lodgeSlider.defaultOptions = ( speed: 300 ); $.fn.lodgeSlider = function(options)( return this.each(function()( (new $.lodgeSlider(this, options)); )); ); ))(jQuery);Hodně z toho by mělo vypadat povědomě. Kvůli bezpečnosti je modul IIFE zabalen. Z objektu jQuery je vytvořena funkce. Okamžitě se volá funkce init. Z objektu jQuery je vytvořena metoda, která vrací objekt jQuery. Existují proměnné vytvořené odkazy do mezipaměti, které pravděpodobně znovu použijeme. Většinou věci, které jsme už viděli.
Možná dvě nové věci. Jedním z nich je objekt možností. Můžete vidět pevně zakódovanou hodnotu 300. Ale také vidět řádek s $.extend(). To je funkce jQuery, která kombinuje dva objekty do jednoho, přičemž jeden má přednost před druhým. Když zavoláme plugin, možná takto:
$("#slider-1").lodgeslider();Nepředáváme žádné možnosti a tento prázdný objekt se spojí s naším pevně zakódovaným objektem a výchozí hodnoty jsou k dispozici uvnitř pluginu. Ale mohli bychom to také nazvat takto:
$("#slider-1").lodgeslider(( speed: 500 ));Předáváme tam objekt jako parametr. Tento objekt se spojí s naším pevně zakódovaným objektem, má přednost a hodnota, kterou jsme předali, se stane hodnotou dostupnou v pluginu. Dost dobrý.
Další nová věc je ta divná bitva .data(). Vytvořili jsme základní proměnnou, abychom odkazovali na samotnou funkci, která je vytvořena znovu pro každý prvek, na který je plugin vyvolán. Řekněme například, že jsme zavolali plugin $(".slider")- na stránce mohou být dva prvky s názvem třídy slider. Každá smyčka běží a jsou vytvořeny dvě instance funkce lodgeSlider. V každém z nich připojujeme odkaz na samotný prvek. Tímto způsobem můžeme volat metody interních pluginů z jakékoli reference tohoto prvku.
Jako možná:
$(".the-first-slider").data("lodgeSlider").changeSlide(2);Prostě nám dává pěkný způsob, jak používat metody pluginů, pokud to potřebujeme.
V tomto dobrodružství při vytváření pluginů jsme se nedostali ohromně daleko:
Podívejte se na pero Vytváření posuvníku od nuly od Chrisa Coyiera (@chriscoyier) na CodePen
Upřímně, svět pravděpodobně nepotřebuje další zásuvný modul. Ale vidíte, jak složité by mohly být. Zde je jen několik nápadů:
- Mohly by existovat funkce zpětného volání (nebo vlastní události) před a po změně snímků, po nastavení jezdce, po jeho stržení atd.
- Šířky mohou být založeny na procentech a přepočítat, když se změní okno prohlížeče.
- Navigaci lze vytvořit dynamicky, místo aby byla vyžadována ve značce.
- ID a #hash hrefs lze také vytvářet dynamicky.
- Mohli by být přidány dotykové události, jako jsou tahy, aby byl posuvník více dotykový (malé tečky nejsou dotykové).
Čím více z těchto věcí uděláte, tím větší bude velikost pluginu. Proto je dosažení rovnováhy mezi funkcemi, praktičností, výkonem a velikostí tak složité a tam, kde existuje tolik různých pluginů, které nakonec dělají totéž.