Експертно ръководство, за да направите вашия JavaScript отзивчив

Когато мислим за отзивчив уеб дизайн първото нещо, което ми идва на ум е как можем да използваме медийни заявки, за да променим външния вид и усещането на нашия сайт в зависимост от правилата, дефинирани от заявката. Медийните заявки са условни, като CSS се прилага, ако браузърът отговаря на условието. Визуалната промяна на даден сайт може също да изисква промяна в начина, по който сайтът функционира. Тук започваме да използваме JavaScript.

Има много примери за това къде може да искаме да променим функционалността; например, където на десктоп искаме да показваме съдържание в модален прозорец. Това осигурява добро, използваемо изживяване на настолни компютри. Въпреки това, на Подвижен устройства модалните прозорци често изглеждат тесни и осигуряват лошо потребителско изживяване. Най-добрият вариант е да деактивирате модалната функционалност на мобилни устройства. Тук CSS може да се окаже кратък и където JavaScript може да се използва, за да се вземе работата.



Гледайте това видео, което да придружава урока ...

За съжаление, добавянето на JavaScript, който управлява промяната на функционалността въз основа на отзивчивото състояние на вашия сайт, може да бъде по-сложно, отколкото просто използване на медийна заявка. Това е така, защото трябва грациозно да се справим с прехода между състоянията. При CSS медийните заявки стиловете са просто включени или изключени или заменени, когато сме в различни състояния, но с JavaScript трябва сами да се справим както с условната логика, така и с включването или изключването на функционалността.



Браузърите не ни оставят напълно без помощ, тъй като по-новите браузъри разполагат с API API matchMedia. API на matchMedia може да гледа дали е изпълнено условие. Ако е, ще задейства метод. Условията са под формата на същите медийни заявки, с които вече сме запознати от CSS. За да видим как можем да използваме API на matchMedia, можем да разгледаме следния пример, който влиза в конзолата на браузъра, когато влизаме и излизаме от мобилното състояние:

мразя новото оформление на Twitter
var mql = window.matchMedia('screen and (maxwidth: 768px)'); mql.addListener(function(e){ if(e.matches){ console.log('enter mobile'); } else{ console.log('leave mobile'); } });

Ние създаваме списък със заявки с помощта на window.matchMedia и настройте известия за заявки, като се обадите на addListener () метод, предаващ обратното ни обаждане. Когато медийната заявка е съвпаднала или несравнима, се извиква нашият метод на слушател и ние можем да се справим с промяната на състоянието.



Поддръжката на браузъра за API на matchMedia е добра, с изключение на Internet Explorer, тъй като най-ранната версия, която го поддържа, е Internet Explorer 10. Ако искате да използвате API на matchMedia, имате възможност да включите polyfill за matchMedia API, който позволява поддръжка за API matchMedia в по-стари версии на Internet Explorer.

най-добрият 4k монитор за редактиране на видео

Отворете нова страница на мобилно устройство, вместо да отваряте лайтбокс

Отворете нова страница на мобилно устройство, вместо да отваряте лайтбокс

Основното ограничение на този API е, че той се справя с превключването между състоянията. Той обаче не се справя със събитие за преоразмеряване за всяко състояние, което може да е необходимо за някои функционалности. Обикновено това доведе до това, че игнорирах API на matchMedia и вместо това пуснах собственото си решение въз основа на събитието за преоразмеряване на браузъра. Това обикновено изглежда по следния начин:



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

Тук добавихме събитие за преоразмеряване към прозореца, който проверява текущото състояние на браузъра. Тъй като браузърът се преоразмерява, проверяваме ширината на страницата и определяме дали сме в състояние на мобилно или настолно устройство. След като това бъде определено, ние проверяваме дали вече сме в щата. Ако сме, ние просто задействаме метод за преоразмеряване на състоянието. В противен случай задействаме метод за въвеждане на състояние. Просто. Ако обаче имате повече от няколко държави, този метод може да стане много тромав.

Тогава обикновено започвам да разглеждам библиотеките на JavaScript, за да видя дали има нещо, което улеснява нещата.

Разглеждайки библиотеките

Досега разгледахме как можем просто да напишем свой собствен JavaScript, за да се справим с реагиращи състояния. Има обаче JavaScript библиотеки, които ще улеснят работата ни. Използването на библиотека не само улеснява писането на отзивчив JavaScript, но библиотеките често се справят с различните браузърни разлики, така че не е нужно.

SSM е предназначен за насочване на реагиращи състояния на различни устройства

SSM е предназначен за насочване на реагиращи състояния на различни устройства

Популярна библиотека за работа с отзивчив JavaScript е SimpleStateManager . SimpleStateManager е изграден около концепцията за състояния, състоянието е условие на браузъра на определена ширина. Добър пример за състояния, които може би вече използвате, е, когато отзивчивият сайт може да има малко състояние за мобилни устройства, средно състояние за таблети и голямо състояние за настолни компютри. В този пример можете да използвате SimpleStateManager, за да добавите JavaScript, специфичен за всяко от вашите състояния.

как да направя тревата нереален двигател 4

SimpleStateManager ви позволява да добавяте JavaScript методи за въвеждане, излизане и преоразмеряване на отзивчиви състояния въз основа на ширината на браузъра. Основната методология за използване на SimpleStateManager е да се подготви състояние на onEnter събитие, почистете състоянието на в отпуск събитие и използвайте onResize събитие за обработка на преоразмеряването на държавата.

Има два начина, по които можете да започнете с SimpleStateManager, първият от които е да използвате Бауър . Като алтернатива можете да изтеглите JS файла на библиотеката от SimpleStateManager и го включете във вашия проект. След това можете да започнете да добавяте състояния:

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

В този пример добавяме две състояния: мобилно и настолно, всяко с въведете събитие, което излиза от конзолата в кое състояние сме влезли. След това изстрелваме a .готов() метод, за да кажем на SSM, че сме добавили нашите състояния и сме готови да изпълним всеки onEnter методи, необходими за текущото състояние.

SimpleStateManager ви позволява да добавяте безкрайни състояния, които могат да се припокриват едно с друго, което означава, че не е необходимо да дублирате код между състояния. Въпреки че е възможно да се добавят безкрайни състояния, моля, имайте предвид последиците за производителността на добавянето на твърде много състояния.

колко време отнема Photoshop за инсталиране

Основните предимства на използването на SimpleStateManager е, че улеснява добавянето на състояния към вашия браузър по начин, който предлага страхотна производителност. SimpleStateManager ви предоставя и API, за да напишете свои собствени приставки, за да разширите вградената функционалност. Това означава, че можете да го разширите, за да поддържа откриване на функции като геолокация и докосване. За разлика от библиотеките, които използват API на matchMedia, той не изисква polyfill за работа в по-стари браузъри като Internet Explorer 7, 8 и 9.

Можете да добавите приставки към SimpleStateManager, за да добавите допълнителна функционалност

Можете да добавите приставки към SimpleStateManager, за да добавите допълнителна функционалност

Недостатъкът на SimpleStateManager е, че той е ограничен само да отговаря на промени в ширината на уебсайта. Това означава, че работи чудесно за повечето отзивчиви уебсайтове. Ако вашият уебсайт трябва да изпълнява по-сложни заявки, имате възможност или да напишете приставка, за да разширите SimpleStateManager. Като алтернатива можете да използвате библиотека, която използва API на matchMedia.

За да обобщим: ключовото предимство на използването на библиотека като SimpleStateManager върху търкалянето на вашето собствено решение (или с matchMedia API или събитие за преоразмеряване на браузъра) е, че улеснява писането на отзивчив JavaScript. Това означава, че можем да се концентрираме върху оптимизирането на нашите сайтове, за да работим отзивчиво, вместо да отделяме времето си, за да управляваме процеса на превключване между нашите реагиращи състояния сами.

Думи : Джонатан Филдинг

Тази статия първоначално се появи в нетно списание брой 250.