【读书笔记】读《编写可维护的JavaScript》 - 编程风格(第一部分)
之前大致翻了一遍这本书,整体感觉很不错,还是不可追求快速,需要细细理解。
这篇随笔主要对本书的第一部分中对自己触动比较大的部分及与平常组织代码最为息息相关的部分做一个记录,加深印象。
主要讲述五点内容——
一、空行
二、null
三、undefined
四、变量声明
五、函数声明
一、空行
/*
* 通常来讲,代码看起来应当像一系列可读的段落,而不是一大段揉在一起的连续文本。
* 有时一段代码的语意和另一段代码不相关,这时就应该使用空行将它们分隔,确保语义有关联的代码展现在一起。
*/
var len = 2,
array = [],
flag,
i;
if (flag) {
for (i = 0; i < len; i++) {
array[i] = i;
if (i % 2 === 0) {
console.log(i + 'is an even number.');
} else {
console.log(i + 'is an odd number.');
}
}
} /*
* 这段示例代码中所展示的编程规范是在每个流程控制语句之前(比如if和for语句)添加空行。
* 这样做能使你更流畅的阅读这些语句。一般来讲,在下面这些场景中添加空行也是不错的主意。
* 1.在方法之间。
* 2.在方法中的局部变量(local varialbe)和第一条语句之间。
* 3.在多行或单行注释之前。
* 4.在方法内的逻辑片段之间插入空行,提高可读性。
*/
// 给这段代码添加几个空行之后
var len = 2,
array = [],
flag,
i; if (flag) { for (i = 0; i < len; i++) {
array[i] = i; if (i % 2 === 0) {
console.log(i + 'is an even number.');
}
}
}
总结:利用好空行,能够清晰的去读我们的代码,有助于我们快速去理解代码思路,非常好的代码组织实践。推荐博友们好好用之。
二、null
/*
* null是一个特殊值,但我们常常误解它,将它和undefined搞混。
* 在下列场景中应当使用null。
* 1.用来初始化一个变量,这个变量可能赋值为一个对象。
* 2.用来和一个已经初始化的变量比较,这个变量可以是也可以不是一个对象。
* 3.当函数的参数期望是对象时,用作参数传入。
* 4.当函数的返回值是对象时,用作返回值传出。
* 还有下面一些场景中不应当使用null。
* 1.不要使用null来检测是否传入了某个参数。
* 2.不要使用null来检测一个未初始化的变量。
*/
// 好的用法
var person = null; // 好的用法
function getPerson() { if (condition) {
return new Person('king');
} else { // 当函数的返回值是对象时,用作返回值传出
return null;
}
} // 不好的写法:用来和未初始化的变量比较
var person;
if (person != null) {
doSomething();
} // 不好的写法:检测是否传入了参数
function doSomething(arg1, arg2, arg3, arg4) { if (arg4 != null) {
doSomethingElse();
}
}
总结:如本书所说,“理解null最好的方式是将它当做对象的占位符(placeholder)”,这样我们就可以清晰的与undefined做一个对比。
三、undefined
/*
* undefined是一个特殊值,我们常常将它和null搞混。其中一个让人颇感困惑之处在于null == undefined结果是true。
* 然而,这两个值得用途却各不相同。那些没有被初始化的变量都有一个初始值,即undefined,表示这个变量等待被赋值。
*/ // 不好的写法
var person;
console.log(person === undefined); // true /*
* 尽管这段代码能正常工作,但建议避免在代码中使用undefined。这个值常常和返回"undefined"的typeof运算符混淆。
* 事实上,typeof的行为也很让人费解,因为不管是值是undefined的变量还是为声明的变量,typeof的运算结果都是"undefined"。
*/ // foo未被声明
var person;
console.log(typeof person); // "undefined"
console.log(typeof foo); // "undefined" /*
* 在这段代码中,person和foo都会导致typeof返回"undefined",哪怕person和foo在其他场景中的行为有天壤之别(在语句中,
* 使用foo会报错,而使用person则不会报错)。
*
* 通过禁止使用特殊值undefined,可以有效地确保只在一种情况下typeof才会返回"undefined":当变量未声明时。
* 如果你使用了一个可能(或可能不会)赋值为一个对象的变量时,则将其赋值为null。
*/ // 好的做法
var person = null;
console.log(person === null); // true /*
* 将变量初始值赋值为null表明了这个变量的意图,它最终可能赋值为对象。typeof运算符运算null的类型时返回"object",这样就可以和undefined区分开了。
*/
总结:我想大部分前端同学都控制不好null与undefined的使用,好好去理解它们,在该用的地方正确用之,无疑能够增加代码的可读性。
四、变量声明
// Crockford的编程规范、SproutCore编程风格指南和Dojo编程风格指南推荐奖局部变量的定义作为函数内的第一条语句。
function doSomethingWithItems(items) { var i, len;
var value = 10;
var result = value + 10; for (i = 0, len = items.length; i < len; i++) {
doSomething(items[i]);
}
} // Crockford还进一步推荐在函数顶部使用单var语句
function doSomethingWithItems(items) { var i, len,
value = 10,
result = value + 10; for (i = 0, len = items.length; i < len; i++) {
doSomething(items[i]);
}
} // Dojo编程风格指南规定,只有当变量之间有关联性时,才允许使用单var语句。 /*
* 本书作者比较倾向于将所有的var语句合并为一个语句,每个变量的初始化独占。
* 赋值运算符应当对齐。对于那些没有初始值的变量来说,它们应当出现在var语句的尾部。
*/
function doSomethingWithItems(items) { var value = 10,
result = value + 10,
i,
len; for (i = 0, len = items.length; i < len; i++) {
doSomething(items[i]);
}
}
总结:本书举例三种变量声明风格,我个人而言,倾向于最后一种,会让代码显得更加简洁、可维护。
五、函数声明
/*
* 推荐函数内部的局部函数应当紧接着变量声明之后声明。
*/
function doSomethingWithItems(items) { var value = 10,
result = value + 10,
i,
len; function doSomething(item) {
// 代码逻辑
} for (i = 0, len = items.length; i < len; i++) {
doSomething(items[i]);
}
}
总结:确保在函数调用之前,声明了该函数即可。但是我个人更喜欢函数表达式的方式去定义函数。
function doSomethingWithItems(items) { var value = 10,
result = value + 10,
i,
len; var doSomething = function(item) {
// 代码逻辑
} for (i = 0, len = items.length; i < len; i++) {
doSomething(items[i]);
}
}
本书第一部分的其他内容(如缩进层级、行的长度、命名、注释、相等、严格模式等等),就不在这里罗嗦了。在日常开发过程中,基本上遵循了这些规范。
【读书笔记】读《编写可维护的JavaScript》 - 编程风格(第一部分)的更多相关文章
- [已读]编写可维护的javascript
13年4月份出版,作者是大名鼎鼎的Zakas,他的另两本书<javascript高级程序设计>与<高性能javascript>你一定听过或者读过. 这本书重点讲了编码风格和编码 ...
- #《Essential C++》读书笔记# 第四章 基于对象的编程风格
基础知识 Class的定义由两部分组成:class的声明,以及紧接在声明之后的主体.主体部分由一对大括号括住,并以分号结尾.主体内的两个关键字public和private,用来标示每个块的" ...
- 【读书笔记】读《编写可维护的JavaScript》 - 编程实践(第二部分)
本书的第二个部分总结了有关编程实践相关的内容,每一个章节都非常不错,捡取了其中5个章节的内容.对大家组织高维护性的代码具有辅导作用. 5个章节如下—— 一.UI层的松耦合 二.避免使用全局变量 三.事 ...
- 《编写可维护的javascript》读书笔记(中)——编程实践
上篇读书笔记系列之:<编写可维护的javascript>读书笔记(上) 上篇说的是编程风格,记录的都是最重要的点,不讲废话,写的比较简洁,而本篇将加入一些实例,因为那样比较容易说明问题. ...
- 《编写可维护的javascript》读书笔记(上)
最近在读<编写可维护的javascript>这本书,为了加深记忆,简单做个笔记,同时也让没有读过的同学有一个大概的了解. 一.编程风格 程序是写给人读的,所以一个团队的编程风格要保持一致. ...
- 编写可维护的Javascript读书笔记
写在前面:之前硬着头皮参加了java方面的编程规范培训,收货良多,工作半年有余的时候,总算感觉到一丝丝Coding之美,以及造轮子的乐趣,以至于后面开发新功能的时候,在Coding style方面花了 ...
- 《编写可维护的JavaScript》 笔记
<编写可维护的JavaScript> 笔记 我的github iSAM2016 概述 本书的一开始介绍了大量的编码规范,并且给出了最佳和错误的范例,大部分在网上的编码规范看过,就不在赘述 ...
- 拯救一切强迫症 - 读《编写可维护的 JavaScript》(一)
拯救一切强迫症 - 读<编写可维护的 JavaScript>(一) 本文写于 2020 年 4 月 24 日 我在小学的时候就有接触过编程,所以读大一的时候 C 语言还算是轻车熟路.自然会 ...
- 编写可维护的JavaScript 收纳架
如果你看过Nicolas C.Zakas写过的任何作品,你必须承认他是个不折不扣的天才.也只有天才级的才能写出<JavaScript高级程序设计>让所有的前端攻城师人手一本.Nicolas ...
- 编写可维护的JavaScript代码(部分)
平时使用的时VS来进行代码的书写,VS会自动的将代码格式化,所有写了这么久的JS代码,也没有注意到这些点.看了<编写可维护的javascript代码>之后,做了些笔记. var resul ...
随机推荐
- nexus3
Maven 介绍 Apache Maven 是一个创新的软件项目管理和综合工具. Maven 提供了一个基于项目对象模型(POM)文件的新概念来管理项目的构建,可以从一个中心资料片管理项目构建,报告和 ...
- 陌上花开(三维偏序)(cdq分治)
题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=3262 其实就是三位偏序的模板,cdq分治入门题. 学习cdq分治请看__stdcall大 ...
- VSM Import Cluster功能验证一(准备篇)
一.概述 本文档记录了VSM Import Cluster功能验证过程及过程中遇到的问题. 二.准备 2.1.网络规划 1) Management Network:VSM控制节点对其他节点的管理网络, ...
- CF1059C Sequence Transformation 题解
这几天不知道写点什么,状态也不太好,搬个题上来吧 题意:给定一个数n,设一个从1到n的序列,每次删掉一个序列中的数,求按字典序最大化的GCD序列 做法:按2的倍数找,但是如果除2能得到3的这种情况要特 ...
- [ActionScript 3.0] 正则表达式
正则表达式: 正则表达式最早是由数学家Stephen Kleene在对自然语言的递增研究成果的基础上,于1956提出来的.具有完整语法的正则表达式,主要使用在字符串的格式的匹配方面上,后来也逐渐应用到 ...
- UITextView笔记
UITextView继承自UIScrollView UITextView可以展示多行文字 控制上下左右缩进 myTextField.textContainerInset = UIEdgeInsetsM ...
- POJ3076 Sudoku
POJ3076 Sudoku 本题为16*16宫格 剪枝见代码 #include <cstdio> #include <iostream> #include <algor ...
- 安装ubuntu server时候的多网卡问题
安装的时候看到多个网卡,eth0,eth1,到系统中后只看见eth0 1.输入 ifconfig -a,这个时候如果能够看到多网卡,则在/etc/network/.interfaces中配置一下网卡就 ...
- docker 安装sentry
主页:https://sentry.io/welcome/ 环境安装 请先安装 Docker 1.10+ ,使用 CE 版本:安装文档,写的很清晰,不详述:因为国内网络环境问题,一般建议 docker ...
- 2017 FVDI2 ABRITES Commander with 18 Softwares FULL Version + FLY OBD Terminator + J2534 DrewTech Softwares
Highlights of FVDI2 Abrites Commander Full Version: 1.Free update online. 2.This is full version FVD ...