Expertenhandbuch, um Ihr JavaScript ansprechbar zu machen
Wenn wir daran denken sich anpassendes Webdesign Bei der Entwicklung fällt uns zunächst ein, wie wir mithilfe von Medienabfragen das Erscheinungsbild unserer Website in Abhängigkeit von den durch die Abfrage definierten Regeln ändern können. Medienabfragen sind bedingt, wobei CSS angewendet wird, wenn der Browser die Bedingung erfüllt. Eine visuelle Änderung an einer Site kann auch eine Änderung der Funktionsweise der Site erfordern. Hier beginnen wir mit der Verwendung von JavaScript.
Es gibt viele Beispiele dafür, wo wir die Funktionalität ändern möchten. Wenn wir beispielsweise auf dem Desktop Inhalte in einem modalen Fenster anzeigen möchten. Dies bietet eine gute, nutzbare Erfahrung auf dem Desktop. Jedoch auf Handy, Mobiltelefon Modalfenster von Geräten sehen oft eng aus und bieten eine schlechte Benutzererfahrung. Die beste Option ist, die modale Funktionalität auf Mobilgeräten zu deaktivieren. Hier kann CSS zu kurz kommen und JavaScript kann verwendet werden, um die Arbeit aufzunehmen.
Sehen Sie sich dieses Video zum Tutorial an ...
Leider kann das Hinzufügen von JavaScript, das die Änderung der Funktionalität basierend auf dem Reaktionsstatus Ihrer Website verwaltet, schwieriger sein als die einfache Verwendung einer Medienabfrage. Dies liegt daran, dass wir den Übergang zwischen Staaten elegant bewältigen müssen. Bei CSS-Medienabfragen werden die Stile nur aktiviert oder deaktiviert oder überschrieben, wenn wir uns in unterschiedlichen Zuständen befinden. Bei JavaScript müssen wir jedoch sowohl die bedingte Logik als auch das Aktivieren oder Deaktivieren der Funktionalität selbst handhaben.
Die Browser lassen uns nicht völlig ohne Hilfe, da neuere Browser über die matchMedia-API verfügen. Die matchMedia-API kann überwachen, ob eine Bedingung erfüllt ist. Wenn dies der Fall ist, wird eine Methode ausgelöst. Die Bedingungen bestehen aus denselben Medienabfragen, die wir bereits aus CSS kennen. Um zu sehen, wie wir die matchMedia-API verwenden können, sehen wir uns das folgende Beispiel an, das sich beim Betreten und Verlassen des mobilen Status bei der Browserkonsole anmeldet:
var mql = window.matchMedia('screen and (maxwidth: 768px)'); mql.addListener(function(e){ if(e.matches){ console.log('enter mobile'); } else{ console.log('leave mobile'); } });Wir richten eine Abfrageliste mit ein window.matchMedia und richten Sie Abfragemeldungen ein, indem Sie die addListener () Methode, die unseren Rückruf weitergibt. Wenn die Medienabfrage übereinstimmt oder nicht übereinstimmt, wird unsere Listener-Methode aufgerufen und wir können die Statusänderung verarbeiten.
Die Browserunterstützung für die matchMedia-API ist mit Ausnahme von Internet Explorer gut, da die früheste unterstützende Version Internet Explorer 10 ist. Wenn Sie die matchMedia-API verwenden möchten, können Sie eine Polyfüllung für die matchMedia-API hinzufügen Aktiviert die Unterstützung der matchMedia-API in älteren Versionen von Internet Explorer.
Die Hauptbeschränkung dieser API besteht darin, dass sie das Umschalten zwischen Zuständen übernimmt. Es wird jedoch nicht für jeden Status ein Größenänderungsereignis behandelt, das für einige Funktionen erforderlich sein kann. In der Regel hat dies dazu geführt, dass ich die matchMedia-API ignoriert und stattdessen meine eigene Lösung basierend auf der Verwendung des Browser-Größenänderungsereignisses erstellt habe. Dies würde normalerweise ungefähr so aussehen:
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();Hier haben wir dem Fenster ein Größenänderungsereignis hinzugefügt, das den aktuellen Status des Browsers überprüft. Wenn die Größe des Browsers geändert wird, überprüfen wir die Breite der Seite und stellen fest, ob wir uns im mobilen oder Desktop-Status befinden. Sobald dies festgestellt wurde, prüfen wir, ob wir uns bereits im Zustand befinden. Wenn dies der Fall ist, lösen wir einfach eine Methode zur Größenänderung des Status aus. Andernfalls lösen wir eine Enter-State-Methode aus. Einfach. Wenn Sie jedoch mehr als ein paar Zustände haben, kann diese Methode sehr unhandlich werden.
In diesem Fall sehe ich mir normalerweise JavaScript-Bibliotheken an, um festzustellen, ob es etwas gibt, das die Dinge einfacher macht.
Bibliotheken betrachten
Bisher haben wir uns angesehen, wie wir einfach unser eigenes JavaScript schreiben können, um mit Reaktionszuständen umzugehen. Es gibt jedoch JavaScript-Bibliotheken, die unsere Arbeit erleichtern. Die Verwendung einer Bibliothek vereinfacht nicht nur das Schreiben von reaktionsschnellem JavaScript, sondern Bibliotheken behandeln häufig browserübergreifende Unterschiede, sodass Sie dies nicht tun müssen.
Eine beliebte Bibliothek für den Umgang mit responsivem JavaScript ist SimpleStateManager . SimpleStateManager basiert auf dem Konzept von Zuständen, wobei ein Zustand der Zustand des Browsers bei einer bestimmten Breite ist. Ein gutes Beispiel für Status, die Sie möglicherweise bereits verwenden, ist der Status einer reaktionsfähigen Site für mobile Geräte, ein mittlerer Status für Tablets und ein großer Status für den Desktop. In diesem Beispiel können Sie mit SimpleStateManager JavaScript hinzufügen, das für jeden Ihrer Bundesstaaten spezifisch ist.
Mit SimpleStateManager können Sie JavaScript-Methoden zum Eingeben, Verlassen und Ändern der Größe von Antwortzuständen basierend auf der Breite des Browsers hinzufügen. Die Kernmethode für die Verwendung von SimpleStateManager besteht darin, einen Status auf dem zu erstellen onEnter Ereignis, bereinigen Sie den Zustand auf dem onLeave Ereignis und verwenden Sie die onResize Ereignis zur Behandlung der Größenänderung des Status.
Es gibt zwei Möglichkeiten, wie Sie mit SimpleStateManager beginnen können. Die erste besteht in der Verwendung Laube . Alternativ können Sie die JS-Datei der Bibliothek von herunterladen SimpleStateManager und nehmen Sie es in Ihr Projekt auf. Sie können dann mit dem Hinzufügen von Status beginnen:
(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));In diesem Beispiel fügen wir zwei Status hinzu: Mobil und Desktop mit jeweils einem eingeben Ereignis, das sich an der Konsole abmeldet, welchen Status wir eingegeben haben. Wir feuern dann a .bereit() Methode, um SSM mitzuteilen, dass wir unsere Status hinzugefügt haben und bereit sind, alle auszuführen onEnter Methoden für den aktuellen Status erforderlich.
Mit SimpleStateManager können Sie unendliche Zustände hinzufügen, die sich überlappen können, sodass Sie keinen Code zwischen Zuständen duplizieren müssen. Während es möglich ist, unendliche Zustände hinzuzufügen, berücksichtigen Sie bitte die Auswirkungen des Hinzufügens zu vieler Zustände auf die Leistung.
Der Hauptvorteil der Verwendung von SimpleStateManager besteht darin, dass es wirklich einfach ist, Ihrem Browser Status hinzuzufügen, die eine hervorragende Leistung bieten. SimpleStateManager bietet Ihnen auch die APIs zum Schreiben eigener Plug-Ins, um die integrierte Funktionalität zu erweitern. Dies bedeutet, dass Sie es erweitern können, um die Erkennung von Funktionen wie Geolokalisierung und Berührung zu unterstützen. Im Gegensatz zu Bibliotheken, die die matchMedia-API verwenden, ist für ältere Browser wie Internet Explorer 7, 8 und 9 keine Polyfüllung erforderlich.
Der Nachteil von SimpleStateManager besteht darin, dass nur auf Änderungen in der Breite der Website reagiert werden kann. Dies bedeutet, dass es für die meisten reaktionsfähigen Websites hervorragend funktioniert. Wenn Ihre Website komplexere Abfragen ausführen muss, können Sie entweder ein Plug-In schreiben, um SimpleStateManager zu erweitern. Alternativ können Sie eine Bibliothek verwenden, die die matchMedia-API verwendet.
Zusammenfassend lässt sich sagen, dass der Hauptvorteil der Verwendung einer Bibliothek wie SimpleStateManager gegenüber dem Rolling Ihrer eigenen Lösung (entweder mit der matchMedia-API oder dem Browser-Größenänderungsereignis) darin besteht, dass das Schreiben von reaktionsfähigem JavaScript erheblich vereinfacht wird. Dies bedeutet, dass wir uns darauf konzentrieren können, unsere Websites so zu optimieren, dass sie reaktionsschnell arbeiten, anstatt unsere Zeit damit zu verbringen, den Prozess des Wechsels zwischen unseren Reaktionszuständen selbst zu verwalten.
Wörter : Jonathan Fielding
Dieser Artikel erschien ursprünglich in Netzmagazin Ausgabe 250.
