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

语义化程度是不是有所提高~

三、小结

代码的优化,需要考虑的维度很多。但是代码的优化并不是减少代码量,有的时候我们需要增加代码来提高代码的可阅读性。

  • 正确标记变量
  • 封装某个动作
  • 注意函数的写法
  • 不容易理解的东西,加注释

本文为抛砖引玉,希望可以触发你对代码优化的敏感度的思考,写出一手别人竖拇指的代码~

如何让你的JavaScript代码更加语义化的更多相关文章

  1. 关于HTML语义化的一些理解

    语义化这个词我想大家都看到了无数次,特别是在一些招聘广告上. 其实我自己也是,不过每次看到都觉得是那些招聘公司复制的,其实他们根本说不清语义化是什么,而且也根本不看重. 所以我一直也没把这东西当回事过 ...

  2. html语义化 -------<fieldset>和<legend>

    为什么HTML代码要语义化,除了代码可读性好以外,SEO有帮助外,最主要的还是对一些屏幕阅读设备或者其他辅助阅读设备友好, 可以让用户在条件受限的条件下依然可以正常使用我们的产品,比方说鼠标坏了,又或 ...

  3. 【重构前端知识体系之HTML】讲讲对HTML5的一大特性——语义化的理解

    [重构前端知识体系之HTML]讲讲对HTML5的一大特性--语义化的理解 引言 在讲什么是语义化之前,先看看语义化的背景. 在之前的文章中提到HTML最重要的特性,那就是标签.但是项目一大,标签多的看 ...

  4. 编写更加稳定/可读的javascript代码

    每个人都有自己的编程风格,也无可避免的要去感受别人的编程风格--修改别人的代码."修改别人的代码"对于我们来说的一件很痛苦的事情.因为有些代码并不是那么容易阅读.可维护的,让另一个 ...

  5. javascript 代码可读性

    可读性的大部分内容都是和代码缩进相关的,必须保证代码有良好的格式.可读性的另一方面就是注释,一般而言,有如下一些地方需要进行注释 1.1.1 函数和方法 每个函数或方法都应该包含一个注释,描述其目的和 ...

  6. 编写快速、高效的JavaScript代码

    许多Javascript引擎都是为了快速运行大型的JavaScript程序而特别设 计的,例如Google的V8引擎(Chrome浏览器,Node均使用该引擎).在开发过程中,如果你关心你程序的内存和 ...

  7. html语义化练习易牛课堂代码

    html <body>     <header>         <!-- 导航 -->         <nav> <a href=" ...

  8. python 全栈开发,Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)

    一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...

  9. javascript代码规范 [转]

    原文:http://www.css88.com/archives/5366 全局命名空间污染与 IIFE 总是将代码包裹成一个 IIFE(Immediately-Invoked Function Ex ...

随机推荐

  1. 优化Linux内核参数

    转自:http://www.centoscn.com/CentOS/config/2013/0804/992.html vim /etc/sysctl.conf 1.net.ipv4.tcp_max_ ...

  2. HEAP CORRUPTION DETECTED :after Normal block 错误

    http://blog.csdn.net/zhccl/article/details/7889590

  3. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

  4. CozyRSS开发记录-中断

    接下来会对CozyRSS做一堆的修改,包括界面和功能.因为比较杂乱,而且大多是体力活,所以就不记录了.等下次再发的时候,见到的就是一个有可用性的CozyRSS了!

  5. JDK7和JDK8一些重要新特性

    jdk7新特性(部分) switch支持字符串 List AutoCloseable接口实现自动关闭,在try()中 新增获取环境信息的工具方法,getJavaHomeDir,getUserHomeD ...

  6. Codeforces Round #379 (Div. 2)

    A ~~ B ~~ C 对于第二种方法,我们可以任取一个换c[i]个potions,花费d[i]:或者是不取,我的做法就是枚举这些情况,得到剩余的s,再尽量优的获取小的a[i]: 枚举+二分 #inc ...

  7. 开发日志_Jan.6.2017

    Github Jan.2 接到了汤松岩的GUI框架,开始复习和学习C++的使用方法(之前的开发经历主要使用的Java,对C++和QT环境都需要一个再了解). Jan.3 正式开始工作.开始在Ubunt ...

  8. iOS中的单例

    #import "Singleton.h" @implementation Singleton static Singleton *singleton = nil; + (Sing ...

  9. C++ win32线程数上限

    hThread = CreateThread( NULL,  0,  WorkerFunction,  &threadParm,  0, &dwThreadID  ); 这样的创建方法 ...

  10. servlet中session的使用

    1.获取session HttpSession session=request.getSession(); session.setAttribute("variety", vari ...