Comment rendre le code JavaScript plus sémantique

Sémantique est un mot souvent utilisé en HTML, c'est-à-dire la sélection de balises appropriées en fonction de la structure du contenu. Son rôle ne peut pas être sous-estimé :

• donne un sens à l'étiquette et rend la structure du code plus claire. Bien que l'on puisse ajouter une classe à l'étiquette pour l'identifier, cette forme d'expression de l'ontologie à travers des attributs le fera. Cela ne semble pas assez direct et, dans une certaine mesure, redondant.

• Optimiser les moteurs de recherche (SEO). Les pages Web bien structurées ont une grande affinité pour les moteurs de recherche. Baidu et Google ont également donné de nombreuses suggestions (standards) pour structurer les pages Web. il leur est plus facile d'explorer les pages Web.

• Il est propice à l'analyse des appareils, comme l'analyse des pages par les lecteurs aveugles. Actuellement, de nombreuses pages Web Taobao prennent en charge la lecture par les aveugles. Cette optimisation de l'expérience bénéficie de la bonne structure. et la sémantique de l'expression des pages Web.

• Facile à maintenir pour les développeurs Avant de rejoindre le travail, de nombreux programmeurs étaient en mode développement par une seule personne, peu importe la structure du code, tant qu'ils peuvent le comprendre, c'est presque tout. Une fois que vous irez travailler, vous constaterez que vos mauvaises habitudes précédentes sont un peu étirées. Le groupe de travail du groupe

W3C continue de contribuer aux spécifications Web, et leur objectif est de stabiliser et d'unifier la tendance de développement de l'ensemble de l'Internet. Sans plus attendre, revenons à l’essentiel de cet article : Comment sémantiser sémantiquement du code JavaScript ?

1. Tout d'abord, jetez un œil à ces codes JavaScript difficiles à lire

Jugement

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

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

2. Effacer une file d'attente

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

3. Enregistrez une variable

// 注册
var repos = {};

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

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

Ce qui précède les exemples ne suffisent pas Quant à l'incapacité à comprendre, le programme est très simple. Dans le premier exemple, nous utilisons la méthode toString sur la chaîne de prototypes Object pour déterminer si une variable est de type chaîne, et utilisons des règles régulières pour déterminer si une variable est de type chaîne. le fichier est un fichier CSS. Le code est relativement facile à écrire. Que se passe-t-il si nous devons déterminer si plusieurs objets appartiennent à plusieurs types en même temps ? Par exemple, si nous devons extraire les dépendances require d'une chaîne de code, devons-nous réfléchir à la manière d'organiser notre propre code ?

Dans le deuxième exemple, définir la longueur du tableau à 0, ou utiliser un tableau vide pour réinitialiser cette variable sont des méthodes très courantes, mais le scénario actuel consiste à l'effacer. Une file d'attente , peut-on le présenter sous une forme plus sémantique ? Par exemple, que se passe-t-il si nous devons uniquement effacer les cinq premiers et les trois derniers éléments de la file d'attente ?

Dans le troisième exemple, l'enregistrement des variables est un ensemble d'enregistrements rassemblés. Le formulaire ci-dessus est en effet clair en un coup d'œil. Et si a, b, c, d, etc. sont séparés et intercalés entre eux. des centaines de lignes de code ? L'apparition soudaine de repos["x"] semble-t-elle un peu peu intuitive ?

Afin d'illustrer les idées prônées dans cet article, les explications ci-dessus sont quelque peu vagues et tirées par les cheveux, veuillez lire ci-dessous.

2. Améliorer la sémantique du code

Pour les trois cas ci-dessus, utilisez une manière plus sémantique de présenter le code :

1 . Variables sémantiques

// 类型判断
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({});

Je ne pense pas que beaucoup d'explications soient nécessaires Par rapport à

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

cela semble beaucoup plus frais.

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

Peu importe la longueur du code régulier d'isCss, quand nous voyons le mot isCss, c'est comme son nom l'indique. De nombreuses personnes qui écrivent des expressions régulières n'extraient pas les expressions régulières séparément et n'utilisent pas de variable significative pour les stocker. Il est acceptable d'ajouter des annotations S'ils n'ajoutent pas de commentaires, les développeurs suivants devront serrer les dents. et comprendre les expressions régulières. Pour comprendre la signification du code.

Un tel traitement augmente en fait la quantité de code, mais d'un point de vue technique, il contribue à améliorer l'efficacité du développement et l'organisation du code.

2. Comportement sémantique

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

Le code ci-dessus a une sémantique forte, à partir de l'index 0, jusqu'à la fin de la file d'attente, supprimez la file d'attente All articles. Cette façon d'écrire est également plus évolutive :

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

Ceci n'est qu'un petit exemple. Certains comportements nécessitent beaucoup de combinaisons de codes. S'il n'y a pas de bonne combinaison de codes pour le même comportement, la structure entière. apparaîtra Très dispersé et peu propice à la lecture.

// 注册
var repos = [];

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

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

Par rapport à notre précédent

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

, le niveau sémantique a-t-il été amélioré ~

Résumé

• Marquer correctement les variables

• Encapsuler une action

• Notez que

  fonction

• Si quelque chose n'est pas facile à comprendre, ajoutez des commentaires

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!