【读书笔记】读《编写可维护的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 ...
随机推荐
- Python【filter、map、reduce】
filter和map和reduce map(function,iterable...) -> list 映射,对列表中的每个值操作 返回操作后的数值组成列表 # 给列表值+1 l = [1,2, ...
- Mysql数据操作《一》数据的增删改
插入数据INSERT 1. 插入完整数据(顺序插入) 语法一: INSERT INTO 表名(字段1,字段2,字段3…字段n) VALUES(值1,值2,值3…值n); 语法二: INSERT INT ...
- python 和pycharm 安装
昨天 我重新装了一个Windows 7 系统 结果很多东西丢了 没有做好备份 其中就有python 和pycharm 今天花了一天时间装 想想也是够了 坑真多 整理一下吧 python 网址:http ...
- 在红帽RHEL7.0里配置网卡的四种方法
第一种方法 :采用vim编辑器来配置: 1. 如下图的步骤所示: 2. 输入这个命令后进行配置成下方图片里的内容: 3. 然后退出vim 编辑器,然后重新启动一下网络服务配置: 4.这些配置完后 ...
- 为什么程序员都不喜欢使用switch而使用if来做条件跳转
请用5秒钟的时间查看下面的代码是否存在bug. OK,熟练的程序猿应该已经发现Bug所在了,在第8行和第10行下面我没有添加关键字break; 这就导致这段代码的行为逻辑与我的设计初衷不符了. 缺 ...
- [译文]casperjs使用说明-使用命令行
使用命令行 Casperjs使用内置的phantomjs命令行解析器,在cli模块里,它传递参数位置的命名选项 但是不要担心不能熟练操控CLI模块的API,一个casper实例已经包含了cli属性,允 ...
- fastcgi main
main函数里 当kill -TERM pid 时, http://redfoxli.github.io/php-fpm-signals.html 这篇文章 说是 1)master主进程接收到sig ...
- iOS 本地时间、UTC时间、时间戳等操作、获取当前年月日
//获得当前时间并且转为字符串 - (NSString *)dateTransformToTimeString { NSDate *currentDate = [NSDate date];//获得当前 ...
- 如何判断一个对象实例是不是某个类型,如Cat类型
<script> function cat(){} var b = new cat(); if(b instanceof cat){ console.log("a是cat&quo ...
- TX2 内核编译
准备工作 版本:jetpack3.1,R28.1,TX2 虚拟机:ubuntu14.04 参考文档.编译工具链.源码下载 编译 主要步骤记载如下: export CROSS_COMPILE=<c ...