如何讓JavaScript程式碼更加語意化

語意化這個字在 HTML 中用的比較多，也就是根據內容的結構化來選擇合適的標籤。其作用不容小覷：

• 賦予標籤含義，讓程式碼結構更加清晰，雖然我們可以在標籤上添加class 來標識，但這種透過屬性來表示本體的形式會顯得不夠直接，而且某程度上也有冗餘。

• 優化搜尋引擎（SEO），結構良好的網頁對搜尋引擎的親和力是很高的，百度和google 也給了許多網頁結構化的建議（規格），方便他們抓取網頁。

• 利於裝置解析，如盲人閱讀器對頁面的分析，目前淘寶很多網頁都是支援盲人閱讀的，這種體驗上的優化得利於網頁的良好結構和語義化表達。

• 便於開發者維護，在參加工作之前，很多程式設計師都是單人開發模式，單人開發無所謂程式碼結構，自己看得懂就差不多了，一旦走向工作崗位，會發現，以前的鄙習有點讓自己捉襟見肘了。

W3C Group 工作小組在 web 規範上持續貢獻，他們的目標也是期望整個網路的發展態勢穩定統一起來。不扯遠了，回到本文需要闡述的重點：如何語意化 JavaScript 程式碼？

一、先看看那些不易讀的JavaScript 程式碼

#1. 判斷##

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

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

2 . 清空一個佇列

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

3. 註冊一個變數

// 注册
var repos = {};

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

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

上面幾個例子倒不至於看不懂，程式都特別簡單，在第一個例子中，我們透過Object 原型鏈上的toString 方法來判斷一個變數是否為string 類型，以及使用正規來判斷一個檔案是不是css 檔案。程式碼寫起來比較輕鬆，倘若我們同時需要判斷多個

物件是否為多個類型中的一種呢？再例如我們需要在一串程式碼中提取 require 依賴關係呢，是否該思考下如何組織自己的程式碼？

在第二個例子中，將

數組的長度設為0，或使用空數組來重置這個變量，都是十分常見的方式，但目前的場景是清空一個隊列，我們是否可以使用更語義化的形式來呈現？例如我們只需要清空該隊列的前五個和後三個 item 呢？

第三個例子中，變數的註冊，把一堆註冊放在一起，上面的形式確實也是一目了然，如果 a b c d 等都是分隔穿插在幾百行程式碼之間呢？突然來個 repos["x"] 這樣是否顯得有些不太直觀。

為了說明本文所倡導的思想，上面的幾個解釋都有些含糊和牽強，請往下看。

二、提高程式碼語意性

針對上述三個案例，用更語意化的方式來呈現程式碼：

1 .語意化變數

// 类型判断
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...
}

顯得清新多了吧。

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

不管 isCss 這個正規程式碼有多長，當我們看到 isCss 這個單字就可以顧名思義。很多人寫正則都不會將正則單獨提取出來使用某個有意義的變量去存儲，加

註釋還好，要是不加註釋，後續開發者就只能硬著頭皮看懂正則去理解程式碼的含義。

這樣的處理，其實是增加了程式碼量，不過從工程角度去審視，有助於提高開發效率以及程式碼的組織性。

2. 語意化行為

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

上面程式碼具有很強的語意性，從索引為0 的地方開始，直到佇列最後，刪除Queue 中所有的item。這種寫法的擴展性也更好：

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

這只是個小例子，有些行為是需要很多代碼組合處理的，如果沒有很好的組合同一行為的代碼，整個結構就顯得十分渙散，不利於閱讀。

// 注册
var repos = [];

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

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

比較我們之前

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

語意化程度是不是有所提升~

三、小結

程式碼的最佳化，需要考慮的維度很多。但是程式碼的最佳化並不是減少程式碼量，有的時候我們需要增加程式碼來提高程式碼的可閱讀性。

• 正確標記變數

• 封裝某個動作

##注意
• 函數

  的寫法

#不容易理解的東西，加上註解

• #

以上是如何讓JavaScript程式碼更加語意化的詳細內容。更多資訊請關注PHP中文網其他相關文章！