广州web培训
达内广州五羊中心

18087159764

热门课程

如何语义化JS代码?

  • 时间:2016-10-26
  • 发布:广州前端开发培训
  • 来源:techug

语义化这个词在HTML中用的比较多,即根据内容的结构化选择合适的标签。其作用不容小觑:

赋予标签含义,让代码结构更加清晰,虽然我们可以在标签上添加class来标识,但这种通过属性来表示本体的形式会显得不够直接,而且在一定程度上也有冗余。

优化搜索引擎(SEO),结构良好的网页对搜索引擎的亲和力是很高的,百度和google也给出了很多网页结构化的建议(规范),方便他们抓取网页。

利于设备解析,如盲人阅读器对页面的分析,目前淘宝很多网页都是支持盲人阅读的,这种体验上的优化得利于网页的良好结构和语义化表达。

便于开发者维护,在参加工作之前,很多程序员都是单人开发模式,单人开发无所谓代码结构,自己看得懂就差不多了,一旦走向工作岗位,会发现,以前的鄙习有点让自己捉襟见肘了。

回到本文需要阐述的重点:如何语义化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: {}

};

上面达内广州web培训的几个例子倒不至于看不懂,程序都特别简单,第一个例子中,我们通过Object原型链上的toString方法来判断一个变量是否为string类型,以及使用正则来判断一个文件是不是css文件。代码写起来比较轻松,倘若我们同时需要判断多个对象是否为多个类型中的一种呢?再比如我们需要在一串代码中提取require依赖关系呢,是否应该思考下如何组织自己的代码?

在第二个例子中,将数组的长度设置为0,或者使用空数组来重置这个变量,都是十分常见的方式,但目前的场景是清空一个队列,我们是否可以使用更加语义化的形式来呈现?比如我们只需要清空该队列的前五个和后三个item呢?

第三个例子中,变量的注册,把一堆注册放在一起,上面的形式确实也是一目了然,如果a b c d等都是分隔穿插在几百行代码之间呢?突然来个repos[“x”]这样是否显得有些不太直观。

上一篇:大龄程序员如何保值?(下)
下一篇:如何提高JS代码语义性?

达内广州web培训详解ES6循环:for-of

达内广州web培训详解ES5循环:forEach

达内广州web培训详解ES5简单for循环

达内广州web培训分享:CSS预处理器的缺点

选择城市和中心
贵州省

广西省

海南省