Ekspertguide til at gøre dit JavaScript lydhør

Når vi tænker på responsivt webdesign udvikling, den første ting, der kommer til at tænke på, er, hvordan vi kan bruge medieforespørgsler til at ændre udseendet på vores site afhængigt af regler, der er defineret af forespørgslen. Medieforespørgsler er betingede, og CSS anvendes, hvis browseren opfylder betingelsen. En visuel ændring af et websted kan også kræve en ændring af, hvordan webstedet fungerer. Det er her, vi begynder at bruge JavaScript.

Der er mange eksempler på, hvor vi måske vil ændre funktionalitet; for eksempel hvor på skrivebordet vi vil vise indhold i et modalvindue. Dette giver en god, brugbar oplevelse på skrivebordet. Dog på mobil enheder modale vinduer ser ofte trange ud og giver en dårlig brugeroplevelse. Den bedste mulighed er at deaktivere modal funktionalitet på mobil. Det er her, CSS kan komme til kort, og hvor JavaScript kan bruges til at hente arbejdet.



Se denne video for at ledsage vejledningen ...

Desværre kan det være vanskeligere at tilføje JavaScript, der styrer ændringen af ​​funktionalitet baseret på den responsive tilstand på dit websted, end blot at bruge en medieforespørgsel. Dette er fordi vi er nødt til at håndtere overgangen mellem stater med yndefuldhed. Med CSS-medieforespørgsler er typografierne bare slået til eller fra eller tilsidesat, når vi er i forskellige tilstande, men med JavaScript skal vi håndtere både den betingede logik og tænde eller slukke for funktionaliteten selv.



Browserne efterlader os ikke helt uden hjælp, da nyere browsere har matchMedia API. MatchMedia API kan se for at se, om en betingelse er opfyldt. Hvis det er tilfældet, affyrer det en metode. Betingelser er i form af de samme medieforespørgsler, som vi allerede er bekendt med fra CSS. For at se, hvordan vi kan bruge matchMedia API, kan vi se på følgende eksempel, der logger på browserkonsollen, når vi går ind i og forlader mobiltilstanden:

hvordan man laver et smart lag i Photoshop
var mql = window.matchMedia('screen and (maxwidth: 768px)'); mql.addListener(function(e){ if(e.matches){ console.log('enter mobile'); } else{ console.log('leave mobile'); } });

Vi oprettede en forespørgselsliste ved hjælp af window.matchMedia og opsæt forespørgselsmeddelelser ved at ringe til addListener () metode videresender vores tilbagekald. Når medieforespørgslen matches eller ikke matches, kaldes vores lyttermetode, og vi kan håndtere tilstandsændringen.



Browsersupport til matchMedia API er god med undtagelse af Internet Explorer, da den tidligste version, der understøtter det, er Internet Explorer 10. Hvis du vil bruge matchMedia API, har du mulighed for at medtage en polyfyld til matchMedia API, som muliggør support til matchMedia API i ældre versioner af Internet Explorer.

bedste 4k skærm til videoredigering

Åbn en ny side på mobilen i stedet for at åbne en lysboks

Åbn en ny side på mobilen i stedet for at åbne en lysboks

Hovedbegrænsningen ved denne API er, at den håndterer skift mellem tilstande. Det håndterer dog ikke at have en størrelsesbegivenhed for hver stat, hvilket kan være nødvendigt for en vis funktionalitet. Dette har typisk ført til, at jeg har ignoreret matchMedia API og i stedet rullet min egen løsning baseret på brugen af ​​browserens størrelsesbegivenhed. Dette vil typisk se sådan ud:



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();

Her tilføjede vi en størrelsesbegivenhed til vinduet, der kontrollerer browserens aktuelle tilstand. Når browseren ændres, kontrollerer vi bredden på siden og bestemmer, om vi er i mobil- eller desktop-tilstand. Når dette er bestemt, kontrollerer vi, om vi allerede er i staten. Hvis vi er, fyrer vi simpelthen en tilstandsstørrelsesmetode. Ellers affyrer vi en enter state-metode. Enkel. Men hvis du har mere end et par stater, har denne metode potentialet til at blive meget uhåndterlig.

Dette er, når jeg normalt begynder at kigge på JavaScript-biblioteker for at se, om der er noget, der gør tingene enklere.

Ser på biblioteker

Indtil videre har vi set på, hvordan vi simpelthen kan skrive vores eget JavaScript til at håndtere responsive tilstande. Der er dog JavaScript-biblioteker, der gør vores job lettere. Brug af et bibliotek gør ikke kun skrivemodtagende JavaScript enklere, biblioteker håndterer ofte forskelle på tværs af browsere, så du behøver ikke.

SSM er designet til at målrette mod responsive tilstande på tværs af enheder

SSM er designet til at målrette mod responsive tilstande på tværs af enheder

Et populært bibliotek til håndtering af lydhør JavaScript er SimpleStateManager . SimpleStateManager er bygget op omkring begrebet stater, en tilstand er browserens tilstand i en bestemt bredde. Et godt eksempel på tilstande, som du muligvis allerede bruger, er, hvor et lydhørt sted kan have en lille tilstand for mobile enheder, mellemstatus for tablets og en stor tilstand for desktop. I dette eksempel kan du bruge SimpleStateManager til at tilføje JavaScript, der er specifikt for hver af dine stater.

hvordan man designer en robotkarakter

SimpleStateManager giver dig mulighed for at tilføje JavaScript-metoder til at indtaste, forlade og ændre størrelse på responsive tilstande baseret på browserens bredde. Kernemetoden til brug af SimpleStateManager er at forberede en tilstand på onEnter begivenhed, ryd op i staten på på orlov begivenhed og brug onStørrelse begivenhed til håndtering af statens størrelse.

Der er to måder, hvorpå du kan komme i gang med SimpleStateManager, hvoraf den første er at bruge Bower . Alternativt kan du downloade bibliotekets JS-fil fra SimpleStateManager og inkluder det i dit projekt. Du kan derefter begynde at tilføje tilstande:

(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));

I dette eksempel tilføjer vi to tilstande: mobil og desktop hver med en gå ind begivenhed, der logger ud på konsollen, hvilken tilstand vi har indtastet. Vi skyder derefter en .parat() metode til at fortælle SSM, at vi har tilføjet vores stater, og at vi er klar til at køre enhver onEnter de nødvendige metoder til den aktuelle tilstand.

SimpleStateManager giver dig mulighed for at tilføje uendelige tilstande, som kan overlappe hinanden, hvilket betyder at du ikke behøver at duplikere kode mellem stater. Selvom det er muligt at tilføje uendelige tilstande, skal du huske på præstationsimplikationerne ved at tilføje for mange stater.

hvad er formålet med illustrationen

De vigtigste fordele ved at bruge SimpleStateManager er, at det gør det virkelig simpelt at føje stater til din browser på en måde, der giver god ydelse. SimpleStateManager giver dig også API'erne til at skrive dine egne plug-ins for at udvide den indbyggede funktionalitet. Dette betyder, at du kan udvide det til at understøtte funktionsdetektering som geolocation og touch. I modsætning til biblioteker, der bruger matchMedia API, kræver det ikke en polyfyldning for at fungere i ældre browsere som Internet Explorer 7, 8 og 9.

Du kan tilføje plug-ins til SimpleStateManager for at tilføje ekstra funktionalitet

Du kan tilføje plug-ins til SimpleStateManager for at tilføje ekstra funktionalitet

Ulempen ved SimpleStateManager er, at det er begrænset til kun at reagere på ændringer i bredden på hjemmesiden. Dette betyder, at det fungerer godt for de fleste responsive websteder. Skulle dit websted skulle udføre mere komplekse forespørgsler, har du mulighed for enten at skrive et plug-in for at udvide SimpleStateManager. Alternativt kan du bruge et bibliotek, der bruger matchMedia API.

For at opsummere: den største fordel ved at bruge et bibliotek som SimpleStateManager frem for at rulle din egen løsning (enten med matchMedia API eller browserens størrelsesbegivenhed) er, at det gør skrivning af responsiv JavaScript meget enklere. Dette betyder, at vi kan koncentrere os om at optimere vores sider til at arbejde responsivt i stedet for at bruge vores tid på selv at skulle styre processen med at skifte mellem vores lydhøre stater.

Ord : Jonathan Fielding

Denne artikel opstod oprindeligt i netmagasin udgave 250.