Englischer Originaltext: Die sieben Regeln für unauffälliges JavaScript
Ursprüngliche Adresse: http://icant.co.uk/articles/seven-rules-of-unobtrusive-javascript/
Ursprünglicher Autor: Chris Heilmann
Übersetzungsadresse: http://www.zhuoqun.net/html/y2008/1103.html
Vorne geschrieben: Als Kejun uns vor einiger Zeit JavaScript beibrachte, empfahl er viele klassische Artikel auf den Folien, darunter diesen Einen Artikel. Ich fühle mich sehr gut, nachdem ich es gelesen habe, aber ich verstehe die Artikel oft nicht wirklich. Es ist einfach so, dass ich keine chinesische Version dieses Artikels gefunden habe, also kam ich auf die Idee, ihn zu übersetzen dass ich es teilen und mein Verständnis vertiefen kann. Der Autor dieses Artikels, Chris Heilmann, ist ein britischer Ingenieur bei Yahoo! (laut Kejun eine „Patenfigur“), und die Übersetzung dieses Artikels wurde ebenfalls von ihm genehmigt.
Noch etwas hier: Ich habe schon viele Dinge übersetzt, aber damals habe ich mehr übersetzt, um zu übersetzen, und ich habe viele technische Artikel nicht verstanden, also bin ich bis heute immer noch Übersetzer. Ich werde auch in Zukunft einige Artikel übersetzen, aber ich sollte nur klassische Artikel übersetzen, die sorgfältig verstanden werden müssen. Wenn Sie Zeit haben, sollten Sie trotzdem mehr Code schreiben.
Übersetzung der Terminologie: Für den Begriff „Unobtrusive JavaScript“ fällt mir keine besonders passende Übersetzung ein. Nach einer Suche im Internet stellte ich fest, dass einige als „zurückhaltendes JavaScript“, einige als „nicht aufdringliches JavaScript“ und einige in Taiwan als „kein aufdringliches JavaScript“ übersetzt wurden ... Nach vielen Recherchen Ich habe mich entschieden, „kein aufdringliches JavaScript“ zu verwenden (obwohl mir das immer noch nicht ganz zusagt), bitte lesen Sie diesen Artikel für Details. Tatsächlich hat „Unaufdringliches JavaScript“ viele Bedeutungen und es ist schwierig, es in einem Wort zusammenzufassen. Wenn Sie interessiert sind, können Sie sich die Erklärung von „Unaufdringliches JavaScript“ auf Wikipedia ansehen. Darüber hinaus denke ich, dass die Übersetzung die Bedeutung des Autors zum Ausdruck bringt und nicht unbedingt Wort für Wort übersetzt werden muss. Um das Verständnis der Leser zu erleichtern, habe ich einige im Artikel gelöscht und einige hinzugefügt, aber diese sind es ohne die Bedeutung des Originaltextes zu beeinträchtigen.
Es gibt noch einen weiteren Punkt, der beachtet werden muss: Meine Übersetzungsfähigkeiten sind sehr amateurhaft, daher kann es bei der Übersetzung zwangsläufig zu Fehlern kommen. Bitte korrigieren Sie mich.
Nachdem ich jahrelang unaufdringliches JavaScript entwickelt, gelehrt und geschrieben habe, habe ich die folgenden Richtlinien entdeckt. Ich hoffe, sie helfen Ihnen ein wenig zu verstehen, warum es besser ist, JavaScript auf diese Weise zu entwerfen und auszuführen. Diese Regeln haben mir geholfen, Produkte schneller, qualitativ hochwertiger und einfacher zu warten.
1. Machen Sie keine Annahmen (JavaScript ist ein unzuverlässiger Assistent).
Das vielleicht wichtigste Merkmal von unaufdringlichem JavaScript ist, dass Sie aufhören müssen, Annahmen zu treffen:
Gehen Sie nicht davon aus, dass JavaScript verfügbar ist, sondern denken Sie besser, dass es möglich ist nicht verfügbar, anstatt sich direkt darauf zu verlassen.
Gehen Sie nicht davon aus, dass der Browser Methoden und Eigenschaften unterstützt, bis Sie sie getestet und bestätigt haben, dass sie funktionieren.
Gehen Sie nicht davon aus, dass der HTML-Code so korrekt ist, wie Sie denken, überprüfen Sie ihn jedes Mal und unternehmen Sie nichts, wenn er nicht verfügbar ist.
Machen Sie die JavaScript-Funktion unabhängig von Eingabegeräten. Denken Sie daran, dass andere Skripte die Funktionalität Ihres JavaScript beeinträchtigen können. Stellen Sie daher sicher, dass der Gültigkeitsbereich Ihrer Skripte so sicher wie möglich ist.
Bevor Sie mit der Gestaltung Ihres Skripts beginnen, sollten Sie zunächst den HTML-Code überprüfen, für den Sie ein Skript erstellen möchten, und prüfen, ob es etwas gibt, das Ihnen beim Erreichen Ihres Ziels helfen kann.
2. Finden Sie Hooks und Knotenbeziehungen (HTML ist der Eckpfeiler der Skripterstellung).
Bevor Sie mit dem Schreiben von Skripts beginnen, werfen Sie einen Blick auf den HTML-Code, für den Sie JavaScript schreiben möchten. Wenn der HTML-Code unorganisiert oder unbekannt ist, ist es fast unmöglich, eine gute Skriptlösung zu haben – wahrscheinlich erstellen Sie entweder zu viel Markup in JavaScript oder die Anwendung ist zu stark von JavaScript abhängig.
In HTML gibt es einige Dinge zu beachten, und zwar Hooks und Knotenbeziehungen.
<1>.HTML-Hook
Der ursprüngliche und wichtigste Hook von HTML ist ID, und auf die ID kann über die schnellste DOM-Methode getElementById zugegriffen werden. Wenn alle IDs in einem gültigen HTML-Dokument eindeutig sind (es gibt einen Fehler im IE bezüglich Name und ID, aber einige gute Bibliotheken lösen dieses Problem), ist die Verwendung von IDs sicher, zuverlässig und einfach zu testen.
Einige andere Hooks sind HTML-Elemente und CSS-Klassen, auf die über die Methode getElementsByTagName zugegriffen werden kann, auf CSS-Klassen kann jedoch in den meisten Browsern nicht über native DOM-Methoden zugegriffen werden. Es gibt jedoch viele externe Klassenbibliotheken, die Methoden bereitstellen, die auf CSS-Klassennamen zugreifen können (ähnlich wie getElementsByClassName).
<2>.HTML-Knotenbeziehung
Ein weiterer interessanter Punkt bei HTML ist die Beziehung zwischen Tags. Denken Sie über die folgende Frage nach:
Wie können wir den Zielknoten am einfachsten und mit dem geringsten DOM-Durchlauf erreichen?
Durch Ändern welcher Markierung können wir auf möglichst viele untergeordnete Knoten zugreifen, die geändert werden müssen?
Welche Attribute oder Informationen verfügt ein bestimmtes Element, die verwendet werden können, um ein anderes Element zu erreichen?
Das Durchqueren des DOM ist ressourcenintensiv und langsam, weshalb Sie versuchen sollten, hierfür Techniken zu verwenden, die bereits in Browsern verwendet werden.
3. Überlassen Sie die Durchquerung den Experten (CSS, schnelleres Durchlaufen des DOM
und die Verwendung von Methoden oder Eigenschaften (getElementsByTagName, nextSibling, previousSibling, parentNode und andere) zum Durchqueren des DOM. Dies ist sehr verwirrend . interessant. Das Interessante ist, dass wir diese Dinge bereits über ein anderes Technologie-CSS erledigt haben.
CSS ist eine Technik, die CSS-Selektoren verwendet, um auf Zielelemente zuzugreifen und ihre visuellen Eigenschaften durch Durchqueren des DOM zu ändern. Ein komplexer Teil von JavaScript, der das DOM verwendet, kann durch einen CSS-Selektor ersetzt werden:
var n = document.getElementById('nav');
if(n){
var as = n.getElementsByTagName('a');
if(as.length > 0){
for(var i=0;as[i];i++){
as[i].style.color = '#369′;
as[i].style.textDecoration = 'none';
}
}
}
/* Der folgende Code hat die gleiche Funktion wie oben*/
#nav a{
Farbe:#369;
Textdekoration: keine;
}
Dies ist eine sehr wirkungsvolle Technik, die sinnvoll eingesetzt werden kann. Sie können dies erreichen, indem Sie Klassen auf hoher Ebene im DOM dynamisch hinzufügen oder die Element-ID ändern. Wenn Sie das DOM verwenden, um dem Hauptteil des Dokuments eine CSS-Klasse hinzuzufügen, können Designer problemlos statische und dynamische Versionen des Dokuments definieren.
JavaScript:
vardynamicClass = 'js';
var b = document.body;
b.className = b.className ? b.className + 'js' : 'js';
CSS:
/* Statische Version*/
#nav {
....
}
/* Dynamische Version*/
body.js #nav {
....
}
4. Verstehen Sie Browser und Benutzer (und erstellen Sie das, was Sie brauchen, basierend auf bestehenden Nutzungsmustern).
Ein großer Teil von unaufdringlichem JavaScript besteht darin, zu verstehen, wie Browser funktionieren (insbesondere wie Browser abstürzen) und was Benutzer erwarten. Unabhängig vom Browser können Sie mit JavaScript ganz einfach eine völlig andere Oberfläche erstellen. Drag-and-Drop-Schnittstellen, Faltbereiche, Bildlaufleisten und Schieberegler können alle mit JavaScript erstellt werden, aber dieses Problem ist kein einfaches technisches Problem. Sie müssen über die folgenden Fragen nachdenken:
Kann diese neue Schnittstelle unabhängig von Eingabegeräten sein? Wenn nicht, worauf können Sie sich verlassen?
Folgt die neue Benutzeroberfläche, die ich erstelle, den Richtlinien eines Browsers oder einer anderen umfangreichen Benutzeroberfläche (können Sie direkt mit der Maus zwischen mehrstufigen Menüs wechseln? Oder müssen Sie die Tabulatortaste verwenden?)
Welche Funktionalität muss ich bereitstellen, die auf JavaScript basiert?
Die letzte Frage stellt eigentlich kein Problem dar, da Sie mit dem DOM bei Bedarf HTML aus dem Nichts erstellen können. Ein Beispiel hierfür ist ein „Drucken“-Link. Da Browser keine Nicht-JavaScript-Funktionalität zum Drucken eines Dokuments bieten, müssen Sie das DOM verwenden, um solche Links zu erstellen. Das Gleiche gilt für eine anklickbare Titelleiste, die Inhaltsmodule zum Erweitern und Reduzieren implementiert. Die Titelleiste kann nicht über die Tastatur aktiviert werden, die Links jedoch schon. Um also eine anklickbare Titelleiste zu erstellen, müssen Sie den Link mithilfe von JavaScript hinzufügen. Anschließend können alle Benutzer mit einer Tastatur das Inhaltsmodul ein- und ausblenden.
Eine hervorragende Ressource zur Lösung dieser Art von Problemen ist die Design Pattern Library. Das Wissen darüber, welche Dinge im Browser unabhängig von Eingabegeräten sind, hängt von der gesammelten Erfahrung ab. Das erste, was Sie verstehen müssen, ist der Mechanismus zur Ereignisbehandlung.
5. Ereignisse verstehen (Ereignisbehandlung führt zu Veränderungen)
Die Ereignisbehandlung ist der zweite Schritt zu unaufdringlichem JavaScript. Es geht nicht darum, alles ziehbar oder anklickbar zu machen oder eine Inline-Verarbeitung hinzuzufügen, sondern zu verstehen, dass die Ereignisverarbeitung vollständig getrennt werden kann. Wir haben HTML, CSS und JavaScript getrennt, aber wir sind bei der Trennung der Ereignisbehandlung noch nicht sehr weit gekommen.
Der Ereignishandler überwacht Änderungen, die an den Elementen im Dokument auftreten. Wenn ein Ereignis auftritt, findet der Handler ein wunderbares Objekt (normalerweise einen Parameter mit dem Namen e). Dieses Objekt teilt dem Element mit, was passiert ist und was damit gemacht werden kann .
Das wirklich Interessante an den meisten Ereignisbehandlungen ist, dass sie nicht nur auf dem Element stattfinden, auf das Sie zugreifen möchten, sondern auf allen Elementen weiter oben im DOM (aber nicht alle Ereignisse sind so, Fokus und Die Ausnahme ist das Unschärfeereignis). . Mit dieser Funktion können Sie beispielsweise nur einen Event-Handler zu einer Navigationsliste hinzufügen und mithilfe der Event-Handler-Methode das Element abrufen, das das Ereignis tatsächlich ausgelöst hat. Diese Technik wird als Ereignisdelegation bezeichnet und bietet mehrere Vorteile:
Sie müssen nur prüfen, ob ein Element vorhanden ist, anstatt jedes Element zu überprüfen. Sie können untergeordnete Knoten dynamisch hinzufügen oder entfernen, ohne den entsprechenden Ereignishandler zu entfernen Wenn Sie auf dasselbe Ereignis in verschiedenen Elementen reagieren, können Sie verhindern, dass sich das Ereignis auf das übergeordnete Element ausbreitet, und Sie können das Standardverhalten von HTML-Elementen (z. B. Links) überschreiben. Manchmal ist dies jedoch keine gute Idee, da Browser HTML-Elementen aus einem bestimmten Grund das Verhalten zuweisen, das sie haben. Beispielsweise können Links auf ein Ziel innerhalb der Seite verweisen. Wenn Sie sie unverändert lassen, wird sichergestellt, dass der Benutzer auch den aktuellen Skriptstatus der Seite als Lesezeichen speichern kann.
6. Denken Sie an andere (Namespaces, Bereiche und Schemata).
Ihr Code wird fast nie der einzige Skriptcode in einem Dokument sein. Daher ist es besonders wichtig sicherzustellen, dass Ihr Code keine globalen Funktionen oder globalen Variablen enthält, die andere Skripte überschreiben können. Es stehen mehrere Muster zur Verfügung, um dieses Problem zu vermeiden. Das einfachste davon besteht darin, das Schlüsselwort var zum Initialisieren aller Variablen zu verwenden. Angenommen, wir schreiben das folgende Skript:
var nav = document.getElementById('nav');
Funktion init(){
// Sachen machen
}
Funktion show(){
// Sachen machen
}
Funktion zurücksetzen(){
// Sachen machen
}
Der obige Code enthält eine globale Variable namens nav und drei Funktionen namens init, show und reset. Diese Funktionen können auf die Variable „nav“ zugreifen und über den Funktionsnamen aufeinander zugreifen:
var nav = document.getElementById('nav');
Funktion init(){
zeigen();
if(nav.className === 'show'){
zurücksetzen();
}
// Sachen machen
}
Funktion show(){
var c = nav.className;
// Sachen machen
}
Funktion zurücksetzen(){
// Sachen machen
}
Sie können die obige globale Codierung vermeiden, indem Sie den Code in ein Objekt kapseln, sodass Funktionen im Objekt in Methoden und globale Variablen im Objekt in Eigenschaften umgewandelt werden können. Sie müssen die Methode „Name + Doppelpunkt“ verwenden, um Methoden und Eigenschaften zu definieren, und Sie müssen nach jeder Eigenschaft oder Methode ein Komma als Trennzeichen hinzufügen.
var myScript = {
nav:document.getElementById('nav'),
init:function(){
// Sachen machen
},
show:function(){
// Sachen machen
},
reset:function(){
// Sachen machen
}
}
Auf alle Methoden und Eigenschaften kann extern und intern über den „Klassenname + Punkt-Operator“ zugegriffen werden.
var myScript = {
nav:document.getElementById('nav'),
init:function(){
myScript.show();
if(myScript.nav.className === 'show'){
myScript.reset();
}
// Sachen machen
},
show:function(){
var c = myScript.nav.className;
// Sachen machen
},
reset:function(){
// Sachen machen
}
}
Der Nachteil dieses Modells besteht darin, dass Sie jedes Mal, wenn Sie über eine Methode auf andere Methoden oder Eigenschaften zugreifen, den Namen des Objekts voranstellen müssen und auf alles im Objekt von außen zugegriffen werden kann. Wenn Sie nur möchten, dass ein Teil des Codes für andere Skripte im Dokument zugänglich ist, ziehen Sie das folgende Modulmuster in Betracht:
var myScript = function(){
//Dies sind private Methoden und Eigenschaften
var nav = document.getElementById('nav');
Funktion init(){
// Sachen machen
}
Funktion show(){
// Sachen machen
}
Funktion zurücksetzen(){
// Sachen machen
}
//Öffentliche Methoden und Eigenschaften werden mithilfe der Objektsyntax in die Return-Anweisung eingeschlossen
zurückkehren {
public:function(){
},
foo:'bar'
}
}();
Sie können auf die zurückgegebenen öffentlichen Eigenschaften und Methoden auf die gleiche Weise wie im vorherigen Code zugreifen, in diesem Fall: myScript.public() und myScript.foo. Aber hier gibt es noch einen weiteren unangenehmen Punkt: Wenn Sie von außen auf eine öffentliche Methode oder von innen auf eine private Methode zugreifen möchten, müssen Sie immer noch einen langen Namen schreiben (der Name des Objekts kann sehr lang sein). Um dies zu vermeiden, müssen Sie sie als privat definieren und in der Return-Anweisung nur einen Alias zurückgeben:
var myScript = function(){
// Dies sind private Methoden und Eigenschaften
var nav = document.getElementById('nav');
Funktion init(){
// Sachen machen
}
Funktion show(){
// Sachen machen
// Sachen machen
}
Funktion zurücksetzen(){
// Sachen machen
}
var foo = 'bar';
function public(){
}
//Nur Zeiger auf die privaten Methoden und Eigenschaften zurückgeben, auf die Sie zugreifen möchten
zurückkehren {
öffentlich:öffentlich,
foo:foo
}
}();
Dies stellt einen konsistenten Codestil sicher und ermöglicht Ihnen die Verwendung kürzerer Aliase für den Zugriff auf Methoden oder Eigenschaften.
Wenn Sie keine Methoden oder Eigenschaften der Außenwelt zugänglich machen möchten, können Sie den gesamten Code in eine anonyme Methode kapseln und diese sofort nach ihrer Definition ausführen:
(function(){
// Dies sind alles private Methoden und Eigenschaften
var nav = document.getElementById('nav');
Funktion init(){
// Sachen machen
show(); // Hier ist kein Klassennamenpräfix erforderlich
}
Funktion show(){
// Sachen machen
}
Funktion zurücksetzen(){
// Sachen machen
}
})();
Dieses Muster eignet sich hervorragend für Codemodule, die nur einmal ausgeführt werden und keine Abhängigkeiten von anderen Funktionen aufweisen.
Wenn Sie die oben genannten Regeln befolgen, funktioniert Ihr Code besser für Benutzer, und Ihr Code läuft besser auf Computern und verträgt sich besser mit dem Code anderer Entwickler. Es gibt jedoch eine Gruppe, die berücksichtigt werden muss.
7. Berücksichtigen Sie die Entwickler, die Ihren Code übernehmen (erleichtert die Wartung).
Der letzte Schritt, um Ihr Skript wirklich unauffällig zu machen, besteht darin, es nach dem Schreiben noch einmal zu überprüfen und sich um die Entwickler zu kümmern, die Ihren Code anschließend übernehmen Skript geht live. Berücksichtigen Sie die folgenden Fragen:
Sind alle Variablen- und Funktionsnamen sinnvoll und leicht verständlich?
Ist der Code richtig organisiert? Läuft es von Anfang bis Ende reibungslos?
Sind alle Abhängigkeiten offensichtlich?
Wurden, wo möglich, Kommentare hinzugefügt, die Verwirrung stiften könnten?
Das Wichtigste, was Sie beachten sollten, ist: Machen Sie sich bewusst, dass der HTML- und CSS-Code im Dokument mit größerer Wahrscheinlichkeit geändert wird als der JavaScript-Code (da sie für den visuellen Effekt verantwortlich sind). Fügen Sie also keine Klassen und IDs in den Skriptcode ein, die für Endbenutzer sichtbar sind, sondern trennen Sie sie in ein Objekt, das Konfigurationsinformationen enthält.
myscript = function(){
var config = {
navigationID:'nav',
sichtbareKlasse:'zeigen'
};
var nav = document.getElementById(config.navigationID);
Funktion init(){
zeigen();
if(nav.className === config.visibleClass){
zurücksetzen();
};
// Sachen machen
};
Funktion show(){
var c = nav.className;
// Sachen machen
};
Funktion zurücksetzen(){
// Sachen machen
};
}();
Auf diese Weise weiß der Betreuer, wo er diese Eigenschaften ändern muss, ohne anderen Code ändern zu müssen.
Weitere Informationen
Das sind also die sieben Richtlinien, die ich entdeckt habe. Wenn Sie mehr über die oben besprochenen Themen erfahren möchten, schauen Sie sich die folgenden Links an: