如何让你的JavaScript代码更加语义化

青旅半醒 2024-02-17 19:10 19阅读 0赞

语义化这个词在 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");`