怎样让你的JavaScript代码越发语义化

2024年1月3日 153次阅读 来源: lolomaco

语义化这个词在 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: {}
};

语义化水平是不是是有所进步~

三、小结

代码的优化，须要斟酌的维度许多。然则代码的优化并非削减代码量，有的时刻我们须要增添代码来进步代码的可浏览性。

  • 准确标记变量
  • 封装某个行动
  • 注重函数的写法
  • 不容易明白的东西，加解释

本文为举一反三，愿望能够触发你对代码优化的敏感度的思索，写出一手他人竖拇指的代码~

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

    原文作者：lolomaco
    原文地址: https://segmentfault.com/a/1190000002519080
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞