JavaScript コードをよりセマンティックにする方法

セマンティックこの単語は HTML でより頻繁に使用され、コンテンツの構造に基づいて適切なタグを選択します。その役割を過小評価すべきではありません。

• はラベルに意味を与え、コード構造をより明確にします。ラベルにクラスを追加してラベルを識別することはできますが、属性を通じてオントロジーを表現するこの形式は十分に直接的ではありません。ある程度の冗長性もあります。

• 検索エンジン (SEO) を最適化します。適切に構造化された Web ページは検索エンジンとの親和性が高く、Web ページのクロールを容易にするための Web ページの構造に関する多くの提案 (標準) も提供しています。

• これは、視覚障害のある読者によるページの分析などのデバイス分析に役立ちます。現在、タオバオの Web ページの多くは、Web ページの優れた構造とセマンティック表現のおかげで、視覚障害者の読書をサポートしています。

• 開発者にとってメンテナンスが簡単です。作業に参加する前に、多くの プログラマー は、コード構造を理解できれば、ほぼ十分です。仕事に行ってみると、私の悪い習慣のせいで不利な状況に置かれていることがわかります。

W3C グループ ワーキング グループは Web 仕様に貢献し続けており、その目標はインターネット全体の発展傾向を安定させ、統一することです。早速、この記事の要点に戻りましょう: JavaScript コードを意味論的に解釈する方法は?不 1: まず、理解しにくい JavaScript コードを見てください

1. 判断します

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

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

E 2. サンプルは理解できないものではありません、プログラムは非常に単純です。最初の例では、オブジェクト プロトタイプ チェーンの toString メソッドを使用して変数が文字列型であるかどうかを判断し、通常のルールを使用してファイルが CSS ファイルであるかどうかを判断します。コードは比較的簡単に記述できます。複数の

オブジェクト

が複数のタイプの 1 つであるかどうかを同時に判断する必要がある場合はどうすればよいでしょうか。たとえば、コード文字列から require 依存関係を抽出する必要がある場合、独自のコードを編成する方法を検討する必要がありますか?

2 番目の例では、配列の長さを 0 に設定するか、空の配列を使用してこの変数をリセットするのが非常に一般的な方法ですが、現在のシナリオはキューをクリアすることです。意味形式?たとえば、キュ​​ーの最初の 5 項目と最後の 3 項目だけをクリアする必要がある場合はどうなるでしょうか? 3 番目の例では、変数の登録は多数の登録をまとめたものであり、a、b、c、d などが数百行に分かれて散在している場合はどうなるかが一目瞭然です。コード？ repos["x"] が突然出現するのは少し直感的ではないように思えますか?

この記事で提唱されているアイデアを説明するために、上記の説明はやや曖昧で突飛な部分があります。以下をお読みください。 2 番目に、コードのセマンティクスを改善します

上記の 3 つのケースでは、よりセマンティックな方法でコードを表示します:

1 セマンティック変数

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

あまり説明は必要ないと思います。必要です、比較してください

// 注册
var repos = {};

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

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

ずっと新鮮に見えます。

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

isCss の通常のコードがどんなに長くても、isCss という単語を見ると、その名前が示すとおりです。正規表現を作成する人の多くは、正規表現を個別に抽出せず、意味のある変数を使用して正規表現を保存し、

コメント

を追加します。コメントを追加しない場合、後続の開発者は正規表現を理解する必要があります。コードの意味を理解します。

このような処理により実際にはコードの量が増加しますが、エンジニアリングの観点から見ると、開発効率とコード構成の向上に役立ちます。

2. セマンティックな動作

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

上記のコードは、インデックス 0 からキューの最後まで、キュー内のすべてのアイテムが削除されます。この書き方はよりスケーラブルです:

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

これはほんの小さな例です。一部の動作では、同じ動作に適切なコードの組み合わせがないと、全体の構造が非常に分散して表示されます。読むのに役立たない。

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

以前の

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

と比較すると、セマンティックレベルが向上しています~

3. 概要

コードを最適化する際には、考慮すべき点がたくさんあります。ただし、コードの最適化はコードの量を減らすことではありません。場合によっては、コードの可読性を向上させるためにコードを追加する必要があります。

変数を正しくマークする

特定のアクションをカプセル化する

関数

の記述方法に注意する
理解しにくい場合はコメントを追加する

以上がJavaScript コードをよりセマンティックにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。