AR­BEI­TEN MIT DEM DOM

SCREENGUIDE - - WEBENTWICKLUNG -

Zwar hat sich an der Ja­vaS­cript-Aus­füh­rungs­ge­schwin­dig­keit der Browser seit 2006 un­glaub­lich viel ge­tan, vor al­lem mit Aus­bruch der „Ja­vaS­cript Per­for­mance Wars” im Jahr 2008. Gleich­zei­tig ist mit den Smart­pho­nes aber auch ei­ne kom­plett neue Platt­form ent­stan­den, de­ren Re­chen­leis­tung nur ei­nem Bruch­teil der­je­ni­gen des Desk­top-Seg­ments ent­spricht. Und das be­kom­men Nut­zer bei Ja­vaS­cript zu spü­ren. Al­lei­ne jQu­e­ry, oh­ne jeg­li­ches Plu­gin und oh­ne ei­ne Zei­le selbst­ge­schrie­be­nen Co­de, be­an­sprucht auf dem ak­tu­el­len Mo­to­ro­la Mo­to G der vier­ten Ge­ne­ra­ti­on ge­schla­ge­ne 375 Mil­li­se­kun­den Par­se-Zeit (Abb. 3). Für ei­ne gu­te Start-up-Per­for­mance als auch für ein flüs­si­ges In­ter­agie­ren mit der Sei­te ist al­so we­ni­ger Ja­vaS­cript bes­ser. Und an die­ser Stel­le kom­men al­ler­lei neue oder auch nicht mehr ganz so neue Browser APIs ins Spiel. Ne­ben der Er­spar­nis an zu ver­ar­bei­ten­dem Co­de bie­ten na­ti­ve APIs den zu­sätz­li­chen Vor­teil, dass sie bes­ser im ge­sam­ten Ren­der­pro­zess ver­an­kert sind und dass sie dank C++ um Licht­jah­re schnel­ler lau­fen als Ja­vaS­cript (C++ ist die Pro­gram­mier­spra­che, in der der­zeit al­le Browser ge­schrie­ben sind). Für das W3C war jQu­e­ry ei­ne gro­ße In­spi­ra­ti­on für neue Fea­tu­res. Dort tat man, was man als „Pa­ving the Cow Path” be­zeich­net, näm­lich neue DOM-Stan­dards und APIs da­nach zu mo­del­lie­ren, wie die User von jQu­e­ry sie ge­wohnt wa­ren. So ste­hen nun­mehr seit IE8 die Me­tho­den que­rySelec­tor() für das Aus­wäh­len ein­zel­ner und que­rySelec­torAll() für das Aus­wäh­len gan­zer Samm­lun­gen von Ele­men­ten zur Ver­fü­gung. Die Funk­ti­on que­rySelec­torAll() gibt, wie auch ge­tE­le­mentsByNa­me() oder ge­tE­le­mentsByClas­sNa­me(), No­de­lists zu­rück, die aus­se­hen wie Ar­rays, auf die Sie je­doch kei­ne Ar­ray-Me­tho­den wie forEach(), fil­ter() oder map() aus­füh­ren kön­nen. Es gibt aber meh­re­re Tricks, um die­se No­de­lists in ech­te Ar­rays um­zu­wan­deln. Die EcmaS­cript-2015-Va­ri­an­te (= mo­der­ne Ja­vaS­cript-Ver­si­on, ab­ge­kürzt „ES 2015”): Das Gan­ze kön­nen Sie in ei­ner Funk­ti­on kap­seln, mit­hil­fe de­rer Sie sich an­schlie­ßend viel Tip­pe­rei er­spa­ren: Und auch für das Tra­ver­sie­ren, al­so das Han­geln durchs DOM, gibt es na­ti­ve Ver­sio­nen der jQu­e­ry-Me­tho­den (Ta­bel­le 1). Glei­ches gilt für die Ma­ni­pu­la­ti­on des DOM: Egal ob es um das Ein­hän­gen neu­er Kno­ten geht oder um das Er­set­zen oder Lö­schen vor­han­de­ner, Ja­vaS­cript bie­tet im­mer ein na­ti­ves Pen­dant (Ta­bel­le 2). Die ei­ne oder an­de­re Me­tho­de er­for­dert un­ter Um­stän­den den Ein­satz ei­nes Po­ly­fills, je nach­dem, wel­che Browser Sie als Ziel­platt­for­men be­die­nen möch­ten. Meist fin­den Sie die­se Po­ly­fills beim Mo­zil­la De­ve­l­oper Net­work (MDN, de­ve­l­oper.mo­zil­la.org)

Abb. 2: Auch ein Paul Irish kann ein­mal da­ne­ben­lie­gen

Newspapers in German

Newspapers from Germany

© PressReader. All rights reserved.