Az OTRS 3.0-val kezdve az OTRS-ben lévő CSS és JavaScript kód hatalmas mennyiségre nőtt. Hogy képes legyen kielégíteni mind a fejlesztői szempontokat (jó karbantarthatóság különálló fájlok nagy mennyiségével), mind a teljesítmény problémákat (kevés HTTP-kérés megtétele és minimalizált tartalom kiszolgálása felesleges üres karakterek és dokumentáció nélkül), foglalkozni kellett ezzel. A célok eléréséhez kitalálták a betöltőt.
Leegyszerűsítve, a betöltő
minden egyes kérésnél pontosan meghatározza, hogy mely CSS és JavaScript fájlok szükségesek a kliens oldalhoz a jelenlegi alkalmazásmodulnál
összegyűjti az összes ide vonatkozó adatot
minimalizálja az adatokat a felesleges üres karakterek és dokumentáció eltávolításával
kiszolgálja a kliens oldalnak mindössze néhány HTTP-kérésben a sok egyedüli helyett, lehetővé téve a kliensnek, hogy a gyorstárazza ezeket a töredékeket a böngésző gyorsítótárába
végrehajtja ezeket a feladatokat egy jól teljesítő módon az OTRS gyorsítótárazó mechanizmusait használva.
Természetesen van egy kicsivel részletesebb magyarázat is, de ennek elegendőnek kell lennie első áttekintésként.
A Loader::Enabled::CSS és a
Loader::Enabled::JavaScript konfigurációs beállításokkal
kapcsolható be és ki a betöltő a CSS-t és a JavaScriptet illetőleg
(alapértelmezetten be van kapcsolva).
Az Internet Explorer böngészőben lévő megjelenítési problémák miatt a betöltőt nem lehet kikapcsolni a CSS-fájlokhoz ennél a kliens böngészőnél (a konfigurációs beállítás felül lesz bírálva). A 8-as verzióig az Internet Explorer nem tud 32 CSS-fájlnál többet kezelni egy oldalon.
Ha többet szeretne megtudni arról, hogy a betöltő hogyan működik, akkor
kapcsolja ki az OTRS telepítésében a fent említett konfigurációs
beállításokkal. Most nézze meg annak az alkalmazásmodulnak a forráskódját,
amelyet jelenleg használ ezen az OTRS rendszeren (természetesen egy
újratöltés után). Látni fogja, hogy számos CSS-fájl töltődött be az oldal
<head> szakaszában, és sok JavaScript fájl van az
oldal alján közvetlenül a lezáró </body> elem
előtt.
Ehhez hasonlóan számos egyedülálló fájlban lévő olvashatóan formázott tartalom megléte sokkal egyszerűbbé teszi a fejlesztést, és akár egyáltalán lehetségessé téve azt. Azonban ennek megvan az a hátránya, hogy nagyszámú HTTP-kérést (a hálózati késleltetésnek nagy hatása van) és felesleges tartalmakat (üres karaktereket és dokumentációt) szükséges átvinni a kliensnek.
A betöltő megoldja ezt a problémát a fenti rövid leírásban felvázolt lépések végrehajtásával. Kapcsolja be ismét a betöltőt, és most töltse újra az oldalt. Most azt láthatja, hogy csak nagyon kevés CSS és JavaScript címke van a HTML kódban ehhez hasonlóan:
<script type="text/javascript" src="/otrs30-dev-web/js/js-cache/CommonJS_d16010491cbd4faaaeb740136a8ecbfd.js"></script>
<script type="text/javascript" src="/otrs30-dev-web/js/js-cache/ModuleJS_b54ba9c085577ac48745f6849978907c.js"></script>
Mi történt most? Ennél az oldalnál a HTML kódot előállító eredeti kérés
közben a betöltő előállította ezt a két fájlt (vagy kivette azokat a
gyorsítótárból), és betette a látható <script>
címkébe azon az oldalon, amely ezekhez a fájlokhoz van kapcsolva, ahelyett,
hogy az összes ide vonatkozó JavaScript fájlt különállóan kapcsolta volna
hozzá (amint a bekapcsolt betöltő nélkül láthatta).
A CSS szakasz egy kicsivel bonyolultabbnak tűnik:
<link rel="stylesheet" type="text/css" href="/otrs30-dev-web/skins/Agent/default/css-cache/CommonCSS_00753c78c9be7a634c70e914486bfbad.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/otrs30-dev-web/skins/Agent/default/css-cache/CommonCSS_IE7_59394a0516ce2e7359c255a06835d31f.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="/otrs30-dev-web/skins/Agent/default/css-cache/CommonCSS_IE8_ff58bd010ef0169703062b6001b13ca9.css" />
<![endif]-->
Ennek az az oka, hogy az Internet Explorer 7 és 8 esetén speciális bánásmód szükséges az alapértelmezett CSS mellett a webes szabványtechnológiák hiányos támogatásuk miatt. Ezért van néhány normál CSS-fájlunk, amelyek minden böngészőben betöltődnek, és néhány speciális CSS-fájl az úgynevezett „feltételes megjegyzéseken” belül, amely azt idézi elő, hogy csak az Internet Explorer 7/8 töltse be azokat. Az összes többi böngésző figyelmen kívül fogja hagyni.
Most felvázoltuk, hogy a betöltő hogyan működik. Nézzük meg, hogy hogyan hasznosíthatja azt a saját OTRS kiterjesztéseiben a betöltőhöz történő konfigurációs adatok hozzáadásával, azt mondva neki, hogy további vagy alternatív CSS vagy JavaScript tartalmat töltsön be.
Hogy képes legyen helyesen működni, a betöltőnek tudnia kell, hogy mely tartalmat kell betöltenie egy bizonyos OTRS alkalmazásmodulnál. Először olyan JavaScript fájlokat fog keresni, amelyeket mindig be kell tölteni, és ezután keres olyan speciális fájlokat, amelyek csak a jelenlegi alkalmazásmodulnál fontosak.
A betöltendő JavaScript fájlok listája a
Loader::Agent::CommonJS (az ügyintézői felülethez) és a
Loader::Customer::CommonJS (az ügyfélfelülethez)
konfigurációs beállításokban állítható be.
Ezek a beállítások kivonatokként vannak tervezve azért, hogy az OTRS kiterjesztések hozzáadhassák a saját kivonatkulcsaikat a további betöltendő tartalomhoz. Nézzünk egy példát:
<Setting Name="Loader::Agent::CommonJS###000-Framework" Required="1" Valid="1">
<Description Translatable="1">List of JS files to always be loaded for the agent interface.</Description>
<Navigation>Frontend::Base::Loader</Navigation>
<Value>
<Array>
<Item>thirdparty/jquery-3.2.1/jquery.js</Item>
<Item>thirdparty/jquery-browser-detection/jquery-browser-detection.js</Item>
...
<Item>Core.Agent.Header.js</Item>
<Item>Core.UI.Notification.js</Item>
<Item>Core.Agent.Responsive.js</Item>
</Array>
</Value>
</Setting>
Ez azon JavaScript fájlok listája, amelyeket mindig be kell tölteni az OTRS ügyintézői felületénél.
Olyan új tartalom hozzáadásához, amelyet mindig be kellene tölteni az ügyintézői felületen, egyszerűen adjon hozzá egy XML beállítófájlt egy másik kivonatbejegyzéssel:
<Setting Name="Loader::Agent::CommonJS###000-Framework" Required="1" Valid="1">
<Description Translatable="1">List of JS files to always be loaded for the agent interface.</Description>
<Navigation>Frontend::Base::Loader</Navigation>
<Value>
<Array>
<Item>thirdparty/jquery-3.2.1/jquery.js</Item>
</Array>
</Value>
</Setting>
Egyszerű, nemde?
Nem minden JavaScript használható az OTRS összes alkalmazásmoduljánál. Ezért
lehetséges modulspecifikus JavaScript fájlok megadása. Amikor egy bizonyos
modult használnak (mint például AgentDashboard), akkor
ennek a modulnak a modulspecifikus JavaScript fájlja is be lesz töltve. A
beállítás az XML beállításokban lévő előtétprogram modul regisztrációban
történik. Ismét egy példa:
<Setting Name="Loader::Module::AgentDashboard###001-Framework" Required="0" Valid="1">
<Description Translatable="1">Loader module registration for the agent interface.</Description>
<Navigation>Frontend::Agent::ModuleRegistration::Loader</Navigation>
<Value>
<Hash>
<Item Key="CSS">
<Array>
<Item>Core.Agent.Dashboard.css</Item>
...
</Array>
</Item>
<Item Key="JavaScript">
<Array>
<Item>thirdparty/momentjs-2.18.1/moment.min.js</Item>
<Item>thirdparty/fullcalendar-3.4.0/fullcalendar.min.js</Item>
<Item>thirdparty/d3-3.5.6/d3.min.js</Item>
<Item>thirdparty/nvd3-1.7.1/nvd3.min.js</Item>
<Item>thirdparty/nvd3-1.7.1/models/OTRSLineChart.js</Item>
<Item>thirdparty/nvd3-1.7.1/models/OTRSMultiBarChart.js</Item>
<Item>thirdparty/nvd3-1.7.1/models/OTRSStackedAreaChart.js</Item>
<Item>thirdparty/canvg-1.4/rgbcolor.js</Item>
</Array>
</Item>
</Hash>
</Value>
</Setting>
Lehetséges egy <Item Key="JavaScript"> címke
elhelyezése az előtétprogram modul regisztrációkban, amely tartalmazhat
<Array> tömböt és egy
<Item> címkéket minden egyes JavaScript fájlhoz,
amelyet be kellene tölteni ennél az alkalmazásmodulnál.
Most már rendelkezik az összes olyan információval, amely annak a módszernek a beállításhoz szükséges, hogy a betöltő kezelje a JavaScript kódot.
A betöltő a CSS-fájlokat nagyon hasonlóan kezeli a JavaScript fájlokhoz, ahogy az előző szakaszban le van írva, és a beállítások kiterjesztése is ugyanolyan módon működik.
Annak a módja, ahogy a közös CSS-t kezelik, nagyon hasonló a közös JavaScript betöltésének módjához.