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

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

// 注册
var repos = {};

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

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

-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.

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

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

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

Anmerkungen

// 提取常量
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.

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

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

// 注册
var repos = [];

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

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

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

Variablen korrekt markieren

• 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!