語意化這個字在 HTML 中用的比較多，也就是根據內容的結構化來選擇合適的標籤。其作用不容小覷：
賦予標籤含義，讓程式碼結構更加清晰，雖然我們可以在標籤上添加class 來標識，但這種透過屬性來表示本體的形式會顯得不夠直接，而且某程度上也有冗餘。
優化搜尋引擎（SEO），結構良好的網頁對搜尋引擎的親和力是很高的，百度和google 也給了許多網頁結構化的建議（規格），方便他們抓取網頁。
利於裝置解析，如盲人閱讀器對頁面的分析，目前淘寶很多網頁都是支援盲人閱讀的，這種體驗上的優化得利於網頁的良好結構和語義化表達。
便於開發者維護，在參加工作之前，很多程式設計師都是單人開發模式，單人開發無所謂程式碼結構，自己看得懂就差不多了，一旦走向工作崗位，會發現，以前的鄙習有點讓自己捉襟見肘了。
W3C Group 工作小組在 web 規範上持續貢獻，他們的目標也是期望整個網路的發展態勢穩定統一起來。不扯遠了，回到本文需要闡述的重點：如何語意化 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 = [];
// 注册
var repos = {};
repos[“a”] = {
name: “a”,
content: {}
};
repos[“b”] = {
name: “b”,
content: {}
};物件是否為多個類型中的一種呢？再例如我們需要在一串程式碼中提取 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”);
註釋還好，要是不加註釋，後續開發者就只能硬著頭皮看懂正則去理解程式碼的含義。
這樣的處理，其實是增加了程式碼量，不過從工程角度去審視，有助於提高開發效率以及程式碼的組織性。2. 語意化行為
var Queue = ["test1", "test2", "test3"]; Queue.splice(0, Queue.length);
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中文網其他相關文章！
