語義化 JavaScript 代碼

語義化這個詞在 HTML 中用的比較多，即根據內容的結構化選擇合適的標籤。其做用不容小覷：

• 賦予標籤含義，讓代碼結構更加清晰，雖然咱們能夠在標籤上添加 class 來標識，但這種經過屬性來表示本體的形式會顯得不夠直接，並且在必定程度上也有冗餘。
• 優化搜索引擎（SEO），結構良好的網頁對搜索引擎的親和力是很高的，百度和 google 也給出了不少網頁結構化的建議（規範），方便他們抓取網頁。
• 利於設備解析，如盲人閱讀器對頁面的分析，目前淘寶不少網頁都是支持盲人閱讀的，這種體驗上的優化得利於網頁的良好結構和語義化表達。
• 便於開發者維護，在參加工做以前，不少程序員都是單人開發模式，單人開發無所謂代碼結構，本身看得懂就差很少了，一旦走向工做崗位，會發現，之前的鄙習有點讓本身捉襟見肘了。

W3C Group 工做組在 web 規範上持續貢獻，他們的目標也是指望整個互聯網的發展態勢穩定統一塊兒來。不扯遠了，回到本文須要闡述的重點：如何語義化 JavaScript 代碼？

1、先看看那些不易讀懂的 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"] 這樣是否顯得有些不太直觀。

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

2、提升代碼語義性

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

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: {}
};

語義化程度是否是有所提升~

3、小結

代碼的優化，須要考慮的維度不少。可是代碼的優化並非減小代碼量，有的時候咱們須要增長代碼來提升代碼的可閱讀性。

• 正確標記變量
• 封裝某個動做
• 注意函數的寫法
• 不容易理解的東西，加註釋