Upotreba require.js sa WordPress-om

Ovo je odličan alat i sigurno ćete poželeti da ga imate u vašem front-end development setu, jer dozvoljava da pozovete plugin-ove samo onda kada su potrebni, što poboljšava performanse sajtova i minimizuje šanse za konflikte ili bagove koje mogu izazvati skripte koje vi niste napisali.

Ovo dobro funkcioniše za lokalni razvoj, jer je struktura foldera i URL-ova prilično predvidljiva. Međutim, korišćenje require.js sa WordPress-om može biti malo više zahtevno, jer URL i struktura direktorijuma može biti nepredvidiva. Ipak postoji brzo i jednostavno zaobilazno rešenje koje omogućava da koristite ovu neprocenjivu biblioteku u svojim projektima.

Pre nego što objasnimo kako koristiti require.js sa WordPress-om, da kažemo šta je requre.js i kako funkcioniše:

Require.js je JavaScript biblioteka koja dozvoljava programerima da referenciraju spoljne javascript fajlove uslovno unutar drugog javascript fajla.

Ovaj metod je poželjan za pozivanje fajla u DOM, jer smanjuje broj HTTP zahteva (smanjujući vreme učitavanja stranice), obezbeđuje pravilan redosled učitavanja za fajlove i metode i može pomoći kod nenamernog pokretanja plugin-ova ili biblioteka koje mogu doći u konflikt sa vašim postojećim.

Kako  koristiti require.js?

Posle očiglednog koraka preuzimanja biblioteke, potrebno ga je referencirati u HTML kodu kao i bilo koji JavaScript fajl:

[code]
<script type=““text/javascript”“ src=““js/require.js”“></script>
[/code]

U vašoj prilagođenoj datoteci (koju ćemo za potrebe ovog tutorijala zvati functions.js) potrebno je reći Require gde da pronađe spoljašnje plugin-e i skripte. Recimo da u vašem „js“ direktorijumu imate poddirektorijum „plugins“ gde se nalaze sve skripte. Konfigurišite konstruktor funkciju u svom „functions.js“ fajlu ovako:

[code]
require.config({
baseUrl : „js/plugins“
});
[/code]

Kada ste ovo podesili, svaki put kada pozovete funkciju „require“ skripta će znati da treba da pogleda u vaš „plugins“direktorijum i poziv će učitati vaše plugin-e.

Recimo da imamo slajder na naslovnoj stranici i treba da pozovemo metod „slajder“ da bi inicijalizovali funkciju. Zatim bi pokrenuli slajder nakon što se stranica učita na sledeći način:

[code]
require([‘slider.min’], function() {
$(‘.slide’).slider();
});
[/code]

Da objasnimo šta se ovde dešava:

1) Prvo referenciramo primarnu „require“ funkciju – prvenstveno „govoreći“ skripti da bi hteli da uslovno učitate spoljašnji fajl koristeći predhodno definisana podešavanja.

2) Nakon toga govorimo Require da želimo da učitati „slider.min.js“ fajl. Referenca fajla u individualnoj require funkciji zahteva dodavanje „.js“ ekstenzije bez korisničkog unosa, pa će „slider.min“ učitati „slider.min.js“, „jquery“ će učitati „jquery.js“ i tako dalje.

3) Sledeće, počinje učitavanje povratne funkcije, koja je obomotana oko naše metode slajdera.

4) Pozivamo slider metod, njegovim dodavanjem elementu $(‘.slide’). Kao što možete videti, ovo osigurava da kada želite da učitate slider plugin samo ga jednom pozivate u JavaScript fajlu u kome smo postavli referencu ka njemu – mnogo čistije i jednostavnije nego uslovno učitavanje uz pomoć PHP-a i brže nego HTTP zahtev.

Kako ovo primeniti na WordPress?

Najveći izazov je config metod – zbog dinamičke prirode WordPress-a, developer teme ili plugina ne zna gde će CMS biti instaliran u odnosu na root direktorijum, pa fajlovi moraju biti referencirani apsolutno. Kao rezultat toga moramo da koristimo wp_localize_script funkciju.

U functions.php fajlu, pozovite funkciju ovako:

[code]
$my_js_dir = array(
‘path’ => get_stylesheet_directory_uri() . ‘/js’
);
wp_localize_script( ‘my-dependent’, ‘my_variable_reference’, $my_js_dir );
[/code]

Usvajanje ove funkcije će reći WordPress-u da štampa JavaScript promenljivu pre nego što je Vaš zavistan fajl pozvan i štampan (koristeći wp_engueue_scripts funkciju) kojeg možete navesti u Vašem functions.js fajlu (ili gde god ste konfigurisali require). Promenljiva se štampa kao objekat kao što je ispod navedeno:

[code]
var my_variable_reference = { path : “http://mysite.com/wp-content/themes/my-theme/js” };
[/code]

zatim u functions.js fajlu treba promeniti require.config metod da izgleda ovako:

[code]
require.config({
baseUrl : my_variable_reference.path + “js/plugins“
});
[/code]

require.js će sada tražiti vaše plugin-e putem apsolutnih URL putanja i moći ćete da učitavate spoljašnje fajlove direktno u svoj JavaScript.