摘要：二提高代碼語義性針對上述三個(gè)案例，用更加語義化的方式來呈現(xiàn)代碼語義化變量類型判斷我覺得不需要太多的解釋，對比顯得清新多了吧。

語義化這個(gè)詞在 HTML 中用的比較多，即根據(jù)內(nèi)容的結(jié)構(gòu)化選擇合適的標(biāo)簽。其作用不容小覷：

賦予標(biāo)簽含義，讓代碼結(jié)構(gòu)更加清晰，雖然我們可以在標(biāo)簽上添加 class 來標(biāo)識，但這種通過屬性來表示本體的形式會(huì)顯得不夠直接，而且在一定程度上也有冗余。

優(yōu)化搜索引擎（SEO），結(jié)構(gòu)良好的網(wǎng)頁對搜索引擎的親和力是很高的，百度和 google 也給出了很多網(wǎng)頁結(jié)構(gòu)化的建議（規(guī)范），方便他們抓取網(wǎng)頁。

利于設(shè)備解析，如盲人閱讀器對頁面的分析，目前淘寶很多網(wǎng)頁都是支持盲人閱讀的，這種體驗(yàn)上的優(yōu)化得利于網(wǎng)頁的良好結(jié)構(gòu)和語義化表達(dá)。

便于開發(fā)者維護(hù)，在參加工作之前，很多程序員都是單人開發(fā)模式，單人開發(fā)無所謂代碼結(jié)構(gòu)，自己看得懂就差不多了，一旦走向工作崗位，會(huì)發(fā)現(xiàn)，以前的鄙習(xí)有點(diǎn)讓自己捉襟見肘了。

W3C Group 工作組在 web 規(guī)范上持續(xù)貢獻(xiàn)，他們的目標(biāo)也是期望整個(gè)互聯(lián)網(wǎng)的發(fā)展態(tài)勢穩(wěn)定統(tǒng)一起來。不扯遠(yuǎn)了，回到本文需要闡述的重點(diǎn)：如何語義化 JavaScript 代碼？

1. 判斷

// 數(shù)據(jù)類型判斷
if(Object.prototype.toString.call(str) === “[object String]”){
    // doSomething();
}；

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

2. 清空一個(gè)隊(duì)列

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

3. 注冊一個(gè)變量

// 注冊
var repos = {};

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

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

上面幾個(gè)例子倒不至于看不懂，程序都特別簡單，第一個(gè)例子中，我們通過 Object 原型鏈上的 toString 方法來判斷一個(gè)變量是否為 string 類型，以及使用正則來判斷一個(gè)文件是不是 css 文件。代碼寫起來比較輕松，倘若我們同時(shí)需要判斷多個(gè)對象是否為多個(gè)類型中的一種呢？再比如我們需要在一串代碼中提取 require 依賴關(guān)系呢，是否應(yīng)該思考下如何組織自己的代碼？

在第二個(gè)例子中，將數(shù)組的長度設(shè)置為 0，或者使用空數(shù)組來重置這個(gè)變量，都是十分常見的方式，但目前的場景是清空一個(gè)隊(duì)列，我們是否可以使用更加語義化的形式來呈現(xiàn)？比如我們只需要清空該隊(duì)列的前五個(gè)和后三個(gè) item 呢？

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

為了說明本文所倡導(dǎo)的思想，上面的幾個(gè)解釋都有些含糊和牽強(qiáng)，請往下看。

針對上述三個(gè)案例，用更加語義化的方式來呈現(xiàn)代碼：

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 這個(gè)正則代碼有多長，當(dāng)我們看到 isCss 這個(gè)單詞就可以顧名思義。很多人寫正則都不會(huì)將正則多帶帶提取出來使用某個(gè)有意義的變量去存儲(chǔ)，加注釋還好，要是不加注釋，后續(xù)開發(fā)者就只能硬著頭皮看懂正則去理解代碼的含義。

這樣的處理，實(shí)際上是增加了代碼量，不過從工程角度去審視，有助于提高開發(fā)效率以及代碼的組織性。

2. 語義化行為

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

上面代碼具有很強(qiáng)的語義性，從索引為 0 的地方開始，直到隊(duì)列最后，刪除 Queue 中所有的 item。這種寫法的擴(kuò)展性也更好：

Queue.splice(2, 4); // 刪除從索引為 2，往后的 4 個(gè)元素

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

// 注冊
var repos = [];

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

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

對比我們之前

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

語義化程度是不是有所提高~

代碼的優(yōu)化，需要考慮的維度很多。但是代碼的優(yōu)化并不是減少代碼量，有的時(shí)候我們需要增加代碼來提高代碼的可閱讀性。

正確標(biāo)記變量

封裝某個(gè)動(dòng)作

注意函數(shù)的寫法

不容易理解的東西，加注釋

本文為拋磚引玉，希望可以觸發(fā)你對代碼優(yōu)化的敏感度的思考，寫出一手別人豎拇指的代碼~

作者：Barret Lee
出處：http://www.cnblogs.com/hustskyking/