RequireJS je efektivní způsob, jak zvýšit rychlost a kvalitu kódu JavaScriptu, což jej dodává mnohem srozumitelnější a jednodušší údržbě.
V tomto článku vás seznámím s požadavkem a jak ho můžete začít používat. Budeme procházet vyžadováním souborů a definováním modulu a dokonce i dotykem optimalizace.
Jednoduše řečeno, require.js je načteč skriptů, který vám umožní sklouznout kód JavaScript do souborů a modulů a řídit tak závislost jednotlivých modelů.
Abychom mohli začít pracovat s požadavkem RequireJS a jeho Asynchronous Module Definition (AMD), musíme nejdříve stažení to pak odkaz na soubor require.js v hlavě našeho dokumentu takhle:
Možná se ptáte, co je to datový hlavní atribut, a to pomocí RequireJS znamená, že když voláte požadovat v hlavě vašeho dokumentu také odkazujete na hlavní soubor vaší aplikace JavaScript, atribut data-main je odkaz na hlavní soubor JavaScript pro vaši aplikaci, v tomto případě main.js. (Upozorňujeme, že aplikace RequireJS automaticky přidá příponu .js na konci názvu souboru.)
V tomto souboru main.js umístíte konfiguraci pro RequireJS, načtete do moduly a definujete základní cestu pro použití při požadavku na soubory.
RequireJS používá jednoduchou funkci vyžadující načtení skriptů, v tomto příkladu vyžaduje požadavek JJuery loadJS:
require(["jquery"], function($) {return $(‘#mydiv”).html(‘Hello this is RequireJS talking”);});Jedna z nejlepších věcí o požadavku RequireJS spočívá v tom, že je extrémně čitelné, pokud se podíváte na tento blok kódu, uvidíte, že nejprve potřebujete uchopit soubor s názvem jquery.js a předá anonymní funkci s parametrem jQuery $ jako parametr , když to uděláte, můžete použít celý kód JQuery, který chcete.
Nyní byste normálně neměli knihovnu jQuery ve složce jquery.js, jako u většiny pluginů a rámců, které se obvykle rozhodneme načíst z jejich GitHub nebo Google CDN, a proto je třeba konfigurovat cesty tak že ukazují na správné místo:
require.config({paths: {"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"}});To znamená, že můžete požadovat jQuery přes Google a bez problémů ji používat. (Všimněte si, že v tomto příkladu jsem použil název "jquery", ale mohl byste mu nazvat cokoliv, co se vám líbí.)
Použití vzoru AMD znamená, že náš kód může být strukturován v modulech; tyto modely jsou jen bity kódu, které dělají něco v naší aplikaci. Můžete umístit dva řádky kódu do modulu nebo 100, záleží jen na tom, co chce modul dělat.
Pro definování modulu používáme tento kód:
define(function () {function add (x,y) {return x + y;}});V tomto příkladu jsem vytvořil jednoduchou funkci s žádnými závislostmi, ale pokud by tato funkce potřebovala správně pracovat s jQuery, funkce definovat by byla strukturována takto:
define([‘jquery’], function () {function place(mydiv) {return $(mydiv).html(‘My Sample Text’);}});Pomocí této syntaxe řekneme JavaScript, abychom mohli nejprve získat jQuery a poté spustit kód tak, aby byl jQuery dostupný v případě potřeby. Také můžeme použít v modulech, které jsme napsali v souborech JavaScriptu, není to omezeno na rámce nebo pluginy.
Jak můžete vidět, RequireJS je skvělý nástroj pro organizaci souborů do modulů a pouze načítání toho, co potřebujete. Nevýhodou je, že příliš mnoho souborů JavaScriptu má za následek špatné časy načítání, což je důvod, proč RequireJS obsahuje Optimalizátor shromažďovat data ze všech souborů a umístit je do jediného minimalizovaného souboru.
Celkově je RequireJS jedním z nejlepších způsobů, jak uspořádat a optimalizovat JavaScript pro moderní web.
Používali jste v projektu projekt RequireJS? Zlepšil jste pracovní postup? Dejte nám vědět v komentářích.
Doporučený snímek / náhled, obrázek krabic přes Shutterstock.