So machen Sie JavaScript-Code semantischer

Semantik ist ein Wort, das häufig in HTML verwendet wird, d. h. die Auswahl geeigneter Tags basierend auf der Struktur des Inhalts. Seine Rolle ist nicht zu unterschätzen:

• gibt Tags Bedeutung und macht die Codestruktur klarer. Obwohl wir dem Tag eine Klasse hinzufügen können, um es zu identifizieren, wird dies durch diese Form des Ausdrucks der Ontologie durch Attribute erreicht scheint nicht direkt genug und in gewisser Weise auch überflüssig zu sein.

• Gut strukturierte Webseiten haben eine hohe Affinität zu Suchmaschinen. Baidu und Google haben auch viele Vorschläge (Standards) für die Strukturierung von Webseiten gemacht einfacher für sie, Webseiten zu crawlen.

• Es ist förderlich für die Geräteanalyse, beispielsweise die Analyse von Seiten durch blinde Leser. Derzeit unterstützen viele Taobao-Webseiten das Lesen durch blinde Menschen. Diese Optimierung der Erfahrung profitiert von der guten Struktur und Semantik des Webseitenausdrucks.

• Für Entwickler einfach zu warten, befanden sich viele Programmierer im Einpersonen-Entwicklungsmodus, unabhängig von der Codestruktur. Solange sie es verstehen können, ist das schon fast alles. Sobald Sie zur Arbeit gehen, werden Sie feststellen, dass Ihre bisherigen schlechten Gewohnheiten etwas überstrapaziert sind.

W3C Die Arbeitsgruppe der Gruppe trägt weiterhin zu Webspezifikationen bei und ihr Ziel ist es, den Entwicklungstrend des gesamten Internets zu stabilisieren und zu vereinheitlichen. Kehren wir ohne weitere Umschweife zum Hauptpunkt dieses Artikels zurück: Wie semantisiert man JavaScript-Code semantisch?

1. Schauen Sie sich zunächst die schwer lesbaren JavaScript-Codes an

1 🎜>2. Eine Warteschlange löschen

// 数据类型判断
if(Object.prototype.toString.call(str) === “[object String]”){
    // doSomething();
}；

// 文件类型判断
if(/.*\.css(?=\?|$)/.test(“/path/to/main.css”)){
    // doSomething();
}

3. Registrieren Sie eine

Variable

var Queue = ["test1", "test2", "test3"];
// 常见方式
Queue.length = 0;
Queue = [];

Das Obige Beispiele reichen nicht aus Was das Unvermögen betrifft, ist das Programm sehr einfach. Im ersten Beispiel verwenden wir die toString-Methode in der Object-Prototypkette, um zu bestimmen, ob eine Variable vom Typ String ist, und verwenden reguläre Regeln, um zu bestimmen, ob a Datei ist eine CSS-Datei. Der Code ist relativ einfach zu schreiben. Was ist, wenn wir feststellen müssen, ob mehrere Objekte

gleichzeitig einer von mehreren Typen sind? Wenn wir beispielsweise

// 注册
var repos = {};

repos[“a”] = {
   name: “a”,
   content: {}
};

repos[“b”] = {
   name: “b”,
   content: {}
};

require

-Abhängigkeiten aus einer Codezeichenfolge extrahieren müssen, sollten wir dann darüber nachdenken, wie wir unseren eigenen Code organisieren? Im zweiten Beispiel sind das Festlegen der Länge des Arrays auf 0 oder die Verwendung eines leeren Arrays zum Zurücksetzen dieser Variablen sehr gängige Methoden, aber das aktuelle Szenario besteht darin, eine Warteschlange zu löschen , können wir es in einer semantischeren Form darstellen? Was wäre zum Beispiel, wenn wir nur die ersten fünf und die letzten drei Elemente der Warteschlange löschen müssten?

Im dritten Beispiel fügt die Registrierung von Variablen eine Reihe von Registrierungen zusammen. Das obige Formular ist tatsächlich auf einen Blick klar. Was ist, wenn a, b, c, d usw. zwischen Hunderten getrennt sind? von Codezeilen? Scheint das plötzliche Auftauchen von repos["x"] etwas unintuitiv zu sein? Um die in diesem Artikel vertretenen Ideen zu veranschaulichen, sind die obigen Erklärungen etwas vage und weit hergeholt. Bitte lesen Sie sie weiter unten.

2. Verbessern Sie die Semantik des Codes

Verwenden Sie für die oben genannten drei Fälle eine semantischere Methode zur Darstellung des Codes:

1 . Semantische Variablen

Ich denke nicht, dass viel Erklärung erforderlich ist. Im Vergleich zu

// 类型判断
function isType(type){
    return function(o){
        return Object.prototype.toString.call(o) === '[object ' + type + ']';
    }
}

var isString = isType(“String”);
var isObject = isType("Object");
var isArray = isType("Array");

isString("I'm Barret Lee.");
isArray([1,2,3])；
isObject({});

scheint es viel frischer zu sein.

if(Object.prototype.toString.call(str) === “[object String]”){
    // code here...
}

Egal wie lang der reguläre Code von isCss ist, wenn wir das Wort isCss sehen, ist es so, wie der Name schon sagt. Viele Leute, die reguläre Ausdrücke schreiben, extrahieren die regulären Ausdrücke nicht separat und verwenden eine aussagekräftige Variable, um sie zu speichern. Es ist in Ordnung,

Anmerkungen

hinzuzufügen. Wenn sie keine Kommentare hinzufügen, müssen nachfolgende Entwickler in den sauren Apfel beißen und die regulären Ausdrücke verstehen.

// 提取常量
var isCss = /.*\.css(?=\?|$)/;
isCss.test(“/path/to/main.css”);

Eine solche Verarbeitung erhöht tatsächlich die Codemenge, trägt aber aus technischer Sicht dazu bei, die Entwicklungseffizienz und die Codeorganisation zu verbessern.

2. Semantisches Verhalten

Der obige Code hat eine starke Semantik, beginnend mit dem Index 0 bis zum Ende der Warteschlange, wobei alle Elemente der Warteschlange gelöscht werden . Diese Schreibweise ist auch skalierbarer:

var Queue = ["test1", "test2", "test3"];
Queue.splice(0, Queue.length);

Dies ist nur ein kleines Beispiel. Einige Verhaltensweisen erfordern viele Codekombinationen für das gleiche Verhalten wird erscheinen Sehr verstreut und nicht lesbar.

Queue.splice(2, 4); // 删除从索引为 2，往后的 4 个元素

Im Vergleich zu unserem vorherigen

// 注册
var repos = [];

function register(o){
   repos[o.name] = o;
}

register({
  name: “a”,
  content: {}
});

wurde die semantische Ebene verbessert~

repos[“a”] = {
   name: “a”,
   content: {}
};

3 >Die Codeoptimierung erfordert die Berücksichtigung vieler Dimensionen. Bei der Codeoptimierung geht es jedoch nicht darum, die Codemenge zu reduzieren. Manchmal müssen wir Code hinzufügen, um die Lesbarkeit des Codes zu verbessern.

Variablen korrekt markieren

Eine Aktion kapseln

• Beachten Sie, dass
Funktion
• Wenn etwas nicht leicht zu verstehen ist, fügen Sie Kommentare hinzu

Das obige ist der detaillierte Inhalt vonSo machen Sie JavaScript-Code semantischer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!