Asiantuntijaopas JavaScriptin reagoimiseen

Kun ajattelemme reagoiva web-suunnittelu Kehitys, ensimmäinen asia, joka tulee mieleen, on se, kuinka voimme käyttää mediakyselyjä sivustomme ulkoasun muuttamiseen kyselyn määrittelemien sääntöjen mukaan. Mediakyselyt ovat ehdollisia, ja CSS: ää käytetään, jos selain täyttää ehdon. Sivuston visuaalinen muutos voi myös edellyttää muutoksia sivuston toimintaan. Täällä aloitamme JavaScriptin käytön.

On monia esimerkkejä siitä, missä voimme haluta muuttaa toimintoja; esimerkiksi missä työpöydällä haluamme näyttää sisällön modaalisessa ikkunassa. Tämä tarjoaa hyvän, käyttökokemuksen työpöydällä. Kuitenkin mobiili laitteet modaaliset ikkunat näyttävät usein ahtailta ja tarjoavat huonon käyttökokemuksen. Paras vaihtoehto on poistaa modeemitoiminto käytöstä matkapuhelimessa. Täällä CSS voi jäädä alle, ja missä JavaScriptiä voidaan käyttää työn noutamiseen.

Katso tämä video ohjeen mukana ...

Valitettavasti JavaScriptin lisääminen, joka hallitsee toiminnallisuuden muutosta sivustosi reagoivan tilan perusteella, voi olla hankalampaa kuin pelkkä mediakyselyn käyttö. Tämä johtuu siitä, että meidän on hoidettava sulavasti tilojen välinen siirtymä. CSS-mediakyselyillä tyylit kytketään vain päälle tai pois tai ohitetaan, kun olemme eri tiloissa, mutta JavaScriptin kanssa meidän on hoidettava sekä ehdollinen logiikka että toimintojen kytkeminen päälle tai pois päältä.



Selaimet eivät jätä meitä täysin auttamatta, koska uudemmissa selaimissa on matchMedia-sovellusliittymä. MatchMedia-sovellusliittymä voi tarkistaa, täyttyvätkö ehdot. Jos se on, se laukaisee menetelmän. Ehdot ovat samojen mediakyselyjen muodossa, jotka olemme jo tunteneet CSS: stä. Jos haluat nähdä matchMedia -sovellusliittymän käytön, voimme tarkastella seuraavaa esimerkkiä, joka kirjautuu selainkonsoliin, kun siirrymme mobiilitilaan ja poistut siitä:

var mql = window.matchMedia('screen and (maxwidth: 768px)'); mql.addListener(function(e){ if(e.matches){ console.log('enter mobile'); } else{ console.log('leave mobile'); } });

Laadimme kyselyluettelon ikkuna.matchMedia ja määritä kyselyilmoitukset soittamalla addListener () menetelmä välittää takaisinsoiton. Kun mediakysely täsmää tai ei täsmää, kutsutaan kuuntelumenetelmäämme ja voimme hoitaa tilanmuutoksen.

MatchMedia-sovellusliittymän selaintuki on hyvä, lukuun ottamatta Internet Exploreria, sillä aikaisin versio, joka tukee sitä, on Internet Explorer 10. Jos haluat käyttää matchMedia-sovellusliittymää, sinulla on mahdollisuus sisällyttää matchMedia-sovellusliittymään polyfill-täyttö, joka mahdollistaa matchMedia-sovellusliittymän tuen Internet Explorerin vanhemmissa versioissa.

Avaa uusi sivu mobiililaitteessa sen sijaan, että avaisit lightboxin

Avaa uusi sivu mobiililaitteessa sen sijaan, että avaisit lightboxin

Tämän sovellusliittymän tärkein rajoitus on, että se hoitaa tilanvaihdon. Se ei kuitenkaan käsittele koon muuttamistapahtuman kullekin tilalle, mikä voi olla tarpeen joillekin toiminnoille. Tyypillisesti tämä on johtanut siihen, että jätin ottamatta huomioon matchMedia-sovellusliittymän ja kehittänyt sen sijaan oman ratkaisuni, joka perustuu selaimen koon muuttamistapahtumaan. Tämä näyttäisi tyypillisesti tältä:

var stateManager = (function () { var state = null; var resizePage = function () { if ($('body').width() < 768) { if (state !== 'mobile') { displayMobile(); } resizeMobile(); } else { if (state !== 'desktop') { displayDesktop(); } resizeDesktop(); } }; var displayMobile = function () { state = 'mobile'; console.log('enter mobile'); }; var displayDesktop = function () { state = 'desktop'; console.log('enter desktop'); }; var resizeMobile = function () { console.log('resizing mobile'); }; var resizeDesktop = function () { console.log('resizing desktop'); }; return { init: function () { resizePage(); $(window).on('resize', resizePage); } }; } ()); stateManager.init();

Tässä lisäsimme koon tapahtuman ikkunaan, joka tarkistaa selaimen nykyisen tilan. Kun selaimen kokoa muutetaan, tarkistamme sivun leveyden ja selvitämme, oletko mobiili- tai työpöytätilassa. Kun tämä on selvitetty, tarkistamme, olemmeko jo osavaltiossa. Jos olemme, laukaisemme vain tilan koon muuttamismenetelmän. Muussa tapauksessa käynnistämme enter-tilamenetelmän. Yksinkertainen. Jos sinulla on kuitenkin enemmän kuin pari osavaltiota, tästä menetelmästä voi tulla hyvin hankala.

Silloin aloin yleensä tarkastella JavaScript-kirjastoja nähdäksesi, onko jotain, joka tekee asioista yksinkertaisempia.

Tarkastellaan kirjastoja

Toistaiseksi olemme tarkastelleet, kuinka voimme yksinkertaisesti kirjoittaa oman JavaScriptimme reagoivien tilojen käsittelemiseksi. On kuitenkin olemassa JavaScript-kirjastoja, jotka helpottavat työtämme. Paitsi että kirjaston käyttö helpottaa reagoivan JavaScriptin kirjoittamista, kirjastot käsittelevät usein selaineroja, joten sinun ei tarvitse.

SSM on suunniteltu kohdistamaan reagoivat tilat eri laitteille

SSM on suunniteltu kohdistamaan reagoivat tilat eri laitteille

Suosittu kirjasto reagoivan JavaScriptin käsittelyyn on SimpleStateManager . SimpleStateManager on rakennettu tilakäsitteen ympärille, tila on selaimen kunto tietyllä leveydellä. Hyvä esimerkki tiloista, joita saatat jo käyttää, on, että reagoivalla sivustolla voi olla pieni tila mobiililaitteille, keskitila tablet-laitteille ja suuri tila työpöydälle. Tässä esimerkissä voit käyttää SimpleStateManageria lisätäksesi jokaiselle osavaltiollesi ominaisen JavaScriptin.

SimpleStateManagerin avulla voit lisätä JavaScript-menetelmiä reagoivien tilojen syöttämiseen, poistumiseen ja koon muuttamiseen selaimen leveyden perusteella. Ydinmenetelmä SimpleStateManagerin käyttämiseksi on valmistella tila onEnter siivota tila jätä ja käytä onResize tapahtuma valtion koon muuttamiseksi.

Voit aloittaa SimpleStateManagerin käytön kahdella tavalla, joista ensimmäinen on käyttää Bower . Vaihtoehtoisesti voit ladata kirjaston JS-tiedoston osoitteesta SimpleStateManager ja sisällytä se projektiisi. Voit sitten aloittaa tilojen lisäämisen:

(function(window){ ssm.addStates([{ id: 'mobile', maxWidth: 767, onEnter: function(){ console.log('enter mobile'); } }, { id: 'desktop', minWidth: 768, onEnter: function(){ console.log('enter desktop'); } }]); ssm.ready(); }(window));

Tässä esimerkissä lisätään kaksi tilaa: mobiili ja työpöytä, joissa kummassakin on tulla sisään tapahtuma, joka kirjautuu ulos konsoliin, mihin tilaan olemme tulleet. Sitten ammutaan a .valmis() menetelmä kertoa SSM: lle, että olemme lisänneet tilamme ja olemme valmiita suorittamaan minkä tahansa onEnter nykyiseen tilaan tarvittavat menetelmät.

SimpleStateManagerin avulla voit lisätä loputtomia tiloja, jotka voivat olla päällekkäisiä, mikä tarkoittaa, että sinun ei tarvitse kopioida koodia tilojen välillä. Vaikka on mahdollista lisätä loputtomia tiloja, pidä mielessä liian monien tilojen lisäämisen vaikutukset suorituskykyyn.

SimpleStateManagerin käytön tärkeimmät edut ovat se, että tilojen lisääminen selaimeesi on todella helppoa tavalla, joka tarjoaa erinomaisen suorituskyvyn. SimpleStateManager tarjoaa myös sovellusliittymät, joilla voit kirjoittaa omia laajennuksia sisäänrakennetun toiminnallisuuden laajentamiseksi. Tämä tarkoittaa, että voit laajentaa sitä tukemaan ominaisuuksien tunnistamista, kuten maantieteellistä sijaintia ja kosketusta. Toisin kuin matchMedia-sovellusliittymää käyttävät kirjastot, se ei vaadi täyttöä toimiakseen vanhemmissa selaimissa, kuten Internet Explorer 7, 8 ja 9.

Voit lisätä lisäominaisuuksia SimpleStateManageriin lisäominaisuuksien lisäämiseksi

Voit lisätä lisäominaisuuksia SimpleStateManageriin lisäominaisuuksien lisäämiseksi

SimpleStateManagerin haittana on, että se rajoitetaan vastaamaan vain verkkosivuston leveyden muutoksiin. Tämä tarkoittaa, että se toimii erinomaisesti useimmille reagoiville verkkosivustoille. Jos verkkosivustosi on tehtävä monimutkaisempia kyselyitä, voit joko kirjoittaa laajennuksen SimpleStateManagerin laajentamiseksi. Vaihtoehtoisesti voit käyttää kirjastoa, joka käyttää matchMedia-sovellusliittymää.

Yhteenvetona: SimpleStateManagerin kaltaisen kirjaston käyttämisen tärkein etu oman ratkaisun pyörittämiseen (joko matchMedia API: n tai selaimen koon muuttamistapahtuman kanssa) on, että se tekee reagoivan JavaScriptin kirjoittamisen paljon yksinkertaisemmaksi. Tämä tarkoittaa sitä, että voimme keskittyä sivustojemme optimointiin toimimaan reagoivasti sen sijaan, että vietämme aikamme jouduttaessamme itse hallitsemaan siirtymistä reagoivien tilojemme välillä.

Sanat : Jonathan Fielding

Tämä artikkeli ilmestyi alun perin nettilehti numero 250.