AJAX

SCREENGUIDE - - WEBENT­WICK­LUNG -

Die Web Ani­ma­ti­ons API steht der­zeit in Chro­me und Fi­re­fox zur Ver­fü­gung und kann in an­de­ren Brow­sern per Po­ly­fill nach­ge­rüs­tet wer­den. Des­sen Ge­wicht von 45 KB Ja­vaS­cript bremst dann zwar das La­den der Sei­te wie­der stär­ker, aber in Fi­re­fox und Chro­me er­rei­chen Sie ei­ne hö­he­re Per­for­mance als mit klas­si­scher, ti­mer­ba­sier­ter Animation, wie jQu­e­ry sie pro­du­ziert. Und der Brow­ser-Sup­port für die Web Ani­ma­ti­ons API wächst.

Als Nach­fol­ger des um­ständ­lich zu be­nut­zen­den XMLHtt­pRe­quest-Ob­jekts (XHR) – zum Über­tra­gen von Daten über das HTTPPro­to­koll – steht heut­zu­ta­ge die Pro­mi­se-ba­sier­te Fetch API be­reit. Ab­ge­se­hen da­von, dass sie an­ge­neh­mer zu nut­zen ist, bie­tet sie auch deut­lich mehr Mög­lich­kei­ten als ihr Vor­gän­ger, wie zum Bei­spiel Cross-Ori­gin-Re­quests oder Strea­m­ing.

Fetch steht in al­len ak­tu­el­len Brow­sern zur Ver­fü­gung, und für al­le äl­te­ren Brow­ser (äl­te­re Ver­sio­nen von Chro­me, Fi­re­fox, In­ter­net Ex­plo­rer 10+, Sa­fa­ri 6.1+) hat Git­hub ei­nen Po­ly­fill ver­öf­fent­licht [git­hub.com/git­hub/fetch].

AR­BEI­TEN MIT AR­RAYS UND OB­JEK­TEN

Weil in al­tem Ja­vaS­cript zu Prä-IE9-Zei­ten das Han­tie­ren mit Ar­rays und Ob­jek­ten eher schlecht als recht funk­tio­nier­te, wur­de 2009 die Ja­vaS­cript-Bi­b­lio­thek Un­der­s­core.js aus der Tau­fe ge­ho­ben. Sie er­freu­te sich so gro­ßer Be­liebt­heit, dass es sie spä­ter so­gar dop­pelt gab: Ein­mal im Ori­gi­nal und dann als noch viel er­folg­rei­che­rer Fork mit Na­men lo­da­sh. Der Er­folg bei­der Bi­b­lio­the­ken be­ein­fluss­te die Fort­ent­wick­lung von Ja­vaS­cript da­hin­ge­hend, dass vie­le der Me­tho­den heut­zu­ta­ge na­tiv zur Ver­fü­gung ste­hen. So blei­ben im­mer we­ni­ger Grün­de üb­rig, die ei­nen Ein­satz von lo­da­sh recht­fer­ti­gen. Nach­fol­gend se­hen Sie ei­ne Lis­te der­zeit ver­füg­ba­rer na­ti­ver Ar­ray-Me­tho­den, sor­tiert nach auf­stei­gen­der Ja­vaS­cript-Ver­si­on:

• .forEach()

• .fil­ter()

• .map()

• .re­du­ce()

• .sort()

• .every()

• .find()

• .fin­dIn­dex()

• .ent­ries()

• .values()

• .in­clu­des()

Die Funk­tio­nen .forEach() bis sort() ste­hen Ih­nen in ES5-fä­hi­gen Brow­sern, al­so IE9 und auf­wärts, zur Ver­fü­gung. Al­le da­nach auf­ge­lis­te­ten Me­tho­den sind in ES2015 oder ES2016 hin­zu­ge­kom­men und wer­den von al­len ak­tu­el­len Brow­sern un­ter­stüt­zen, in­klu­si­ve des Edge-Brow­sers. Und auch bei Ob­jek­ten sind mit ES2015+ neue Me­tho­den hin­zu­ge­kom­men: • .as­sign()

• .keys()

• .values()

• .ent­ries()

KA­RUS­SELL-SLI­DER, GANZ OH­NE FLEX­S­LI­DER ODER SLICKS­LI­DER

Ei­nes der be­lieb­tes­ten Mo­du­le auf Web­sei­ten sind Ka­rus­sel­lS­li­der. Ei­ne wich­ti­ge Ei­gen­schaft von ih­nen ist, dass sie beim Scrol­len an be­stimm­ten Li­ni­en „ma­gne­tisch” ein­ras­ten. Ge­ra­de im Ver­bund mit ei­ner Touch-Steue­rung ließ sich solch ein Ver­hal­ten nicht oh­ne Schüt­zen­hil­fe ei­ner (jQu­e­ry-ba­sier­ten) Bi­b­lio­thek um­set­zen. Das hat sich Gott sei Dank ge­än­dert! Ne­ben CSS Flex­box und Grids er­fand Mi­cro­soft für den IE10 noch die CSS Snap Po­ints. Nach­dem die­se den Weg über ein Stan­dard­gre­mi­um ge­nom­men hat­ten, ha­ben auch die an­de­ren Brow­s­er­her­stel­ler sie nach und nach im­ple­men­tiert (wenn auch in über­ar­bei­te­ter Form). Die Funk­ti­ons­wei­se ist ei­gent­lich ganz ein­fach: Sie de­fi­nie­ren in dem zu scrol­len­den Con­tai­ner ei­ne Art ma­gne­ti­sches Zen­trum, an dem durch­scrol­len­de Kind-Ele­men­te ein­schnap­pen sol­len. Für die Kind-Ele­men­te ma­chen Sie das­sel­be, de­fi­nie­ren al­so eben­falls ein ma­gne­ti­sches Zen­trum. Wird nun der In­halt des Con­tai­ners ge­scrollt und sinkt die Scroll­ge­schwin­dig­keit an­schlie­ßend ge­gen null, so be­gin­nen sich die zwei nächst­ge­le­ge­nen ma­gne­ti­schen Zen­tren an­zu­zie­hen und schnap­pen schließ­lich auf­ein­an­der ein.

Newspapers in German

Newspapers from Germany

© PressReader. All rights reserved.