《编写可维护的JavaScript》章节试读

《编写可维护的JavaScript》的笔记-《编写可维护的JavaScript》勘误表 2013年5月第二次印刷更正 - 《编写可维护的JavaScript》勘误表 2013年5月第二次印刷更正

序号 页号 位置 原文 应改为 提交者
1 6 第3行 2个空格表示一个缩进，2个空格表示一个缩进 4个空格表示一个缩进 豆瓣网友谷神出幕，毛毛酱
2 28 第1-3行 前三行内容字体 （注释字体） @土匪上树
3 39 倒数第2行 hasPwnProperty() hasOwnProperty() @土匪上树
4 50 第14行 我们推荐不要使用==和!== 我们推荐不要使用==和!= @土匪上树，冉海俊，August
5 51 倒数第4行 console.log(count); //15 console.log(number); //15 豆瓣网友谷神出幕
6 60 第1行 接收 接受 豆瓣网友谷神出幕，冉海俊
7 66 倒数第5行 list.appendChild(div.firstChild) mylist.appendChild(div.firstChild) @土匪上树，lastnorman （第68页16行代码做同样修改）
8 87 倒数第4行 MyAPplication.handleClick() MyApplication.handleClick() @土匪上树
9 98 第1行 在判断实例对象是否存在时… 在判断实例对象的属性是否存在时… @土匪上树
10 109 第4行 生产环节 生产环境 @土匪上树
11 114 第18行 这种‘覆盖加可靠退化’的模式至少和原生方法一样不好 这种‘覆盖加可靠退化’的模式至少和覆盖原生方法一样不好 @土匪上树
12 116 第5行 document.getElementsByClassname() document.getElementsByClassName() @土匪上树
13 131 第5行 开发人员开始将这种代码： 代码被修改成这样： @土匪上树
14 133 第5行 其反命题…那么它不是Internet Explorer 那么它是Internet Explorer @土匪上树
15 164 第6行 从可以下载YUI Compressor 从http://yuilibrary.com/download/yuicompressor/可以下载YUI Compressor @土匪上树
16 194 第14行 话费 花费 @土匪上树
17 208 倒数第5行 一个双引号 一个冒号 @土匪上树

《编写可维护的JavaScript》的笔记-第20页 - 基本的格式化

Google的javascript风格指南和Crokford的编程规范，推荐使用直接量代替Objec构造函数；而对于数组，推荐声明的时候使用中括号将数组元素括起来创建新的数组。

《编写可维护的JavaScript》的笔记-第65页 - UI层的松耦合

书中说：注释是和元素及文本一样的DOM节点，因此可以通过javascript将其提取出来。比如：<ul id="mylist">
<!--<li id="item%s"><a href="%s">%s</a></li>-->
<li><a href="#">First item</a></li>
<li><a href="#">Second item</a></li>
<li><a href="#">Third item</a></li>
</ul>
js的提取：
var mylist = document.getElementById("mylist"),
templateText = mylist.firstChild.nodeValue;
firstChild.nodeValue获取到的值为null，js有这个方法吗？表示怀疑。
之后我用jquery的children().first().html()获取到的是<li>First item</li>
，并不是注释的<li>节点。
以上。

《编写可维护的JavaScript》的笔记-第40页 - 语句和表达式

for-in不要用来遍历数组，而是用来遍历对象。

《编写可维护的JavaScript》的笔记-第54页 - 第二部分 编程实践

构建软件设计的方法有两种：一种是把软件做得很简单以至于明显找不到缺陷；另一种是把它做得很复杂以至于找不到明显的缺陷。

《编写可维护的JavaScript》的笔记-第42页 - 变量、函数和运算符

所有的var语句都提前到包含这段逻辑的函数的顶部执行。其实，这个在《javascript高级程序设计》和《javascript权威指南》中都有讲到。在声明一个函数的时候，我们最好把函数中用到的局部变量，都放在函数顶部声明，保证代码的清晰。

《编写可维护的JavaScript》的笔记-第45页 - 变量、函数喝运算符

if(condition) {
function a() {
}
} else {
function a() {
}
}
在大多浏览器下，都会自动使用第二个声明。而Firefox会根据condition的计算结果选用合适的函数声明。还记得在项目中，有同学使用过这样的代码，得检查一下咯。

《编写可维护的JavaScript》的笔记-第39页 - 语句和表达式

Crockford的编程规范要求所有的for-in循环都必须使用hasOwnProperty()

《编写可维护的JavaScript》的笔记-第六章，避免使用全局变量 - 第六章，避免使用全局变量

如章名所说的，这篇章都在说为什么要避免使用全局变量，如何避免。
为什么要避免使用全局变量？
怕命名的冲突，而且不利于维护。
如何避免？
把js代码置于严格模式中，“use strict”;使用命名空间，也就是把对象方法都定义到同一个命名空间之下。
模块化开发知道，了解过seajs和requirejs的模块化编程，知道CMD和AMD还有commonJS规范。
6.4的零全局变量，不知道它的用法，书上说最常用是创建一个书签，但还是不理解。

《编写可维护的JavaScript》的笔记-第18页 - 基本的格式化

理解null的最好方式就是将它当做对象的占位符。书中不推荐的做法，使用null来检测是否传入了某个参数；用null来检测一个未初始化的变量。这个我现在还经常这么干。呵呵！

《编写可维护的JavaScript》的笔记-第59页 - UI层的松耦合

javascript不应当直接操作样式，如果需要操作样式，最佳方法是操作css的className，以保持css的松耦合！受用！

《编写可维护的JavaScript》的笔记-第53页 - Chapter 4 变量、函数和运算符

译注: JavaScript 权威指南 (第六版) 3.6 “包装对象” 详细解释了包装对象和包装类型的细节，需要尤为注意的一点是，原始值本身不具有对象特性，比如 1.toString() 是报错的，必须这样做:
var a=1; a.toString()
实际上，
1..toString()
就可以了。关键问题不是原始值是否具有对象特性，是数字后面的一个点，会被 JavaScript 引擎当作小数点而被解析，而不是表示对象的属性
而多一个点，则由于小数点已经存在了，它表示的一定是访问对象的属性
所以自己 JavaScript 不好不要乱评论人家 (是这样吧)

《编写可维护的JavaScript》的笔记-第1页

https://www.evernote.com/shard/s350/sh/04872a79-c2bb-42e3-bf08-ce6729fc253c/56b1b281878ac675

《编写可维护的JavaScript》的笔记-第11页 - 1.6 命名

计算机科学只存在两个难题：缓存失效和命名。------------Phil Karlton

《编写可维护的JavaScript》的笔记-第1页 - 第一章

看完了第一章。
看到提的一些规范，还是觉得是这样没错。
每次写js的时候，都会纠结于变量和函数的命名，书中的准则挺好的，可以区分普通函数和构造函数，虽然我之前一直没注意这个问题。
普通函数用小驼峰，前缀加上is、can、has、get动词。
构造函数用大驼峰，这样就知道是要new的了。
用C#的时候，换行我一直是很随意的。现在我知道了要在运算符之后换行。

《编写可维护的JavaScript》的笔记-第107页 - 抛出自定义错误

平时在写代码的时候，不会去特地抛出错误，其实有必要的，尤其是你不希望某些事情发生的时候可以抛出错误。

《编写可维护的JavaScript》的笔记-第97页 - 第八章 避免“空比较”

1、检测原始值
javascript中有5中原始类型：string、number、boolean、null和undefined。
如果检测string、number、boolean和undefined，最佳选择是使用typeof运算符typeof variable 或者 typeof(variable)对于null的判断，应该用恒等(===)或者非恒等(!==)
2、检测引用值
1）在javascript检测自定义类型时，最好的做法是使用instanceof运算符，这也是唯一的方法value instanceof constructor内置的javascript类型也应用这种方式
对于内置的javascript对象还可以使用下面这种方式
Object.prototype.toString.call(value) === '[object xxxx]'
2）检测function也用typeof
typeof myFunc === ‘function’
唯一的问题是IE8之前的版本，使用typeof来检测DOM节点中的函数会返回“object”而不是“function”，因为这些早期版本没有将DOM实现为内置的javascript方法，导致内置typeof运算符把这些函数识别为对象。
在IE8之前的版本检测DOM方法是否存在最安全的做法是用in运算符来检测在document是否存在
if ('querySelectorAll' in document) {
}
3）检测数组
function isArray(value) {
if (typeof Array.isArray === 'function') {
return Array.isArray(value);
} else {
return Object.prototype.toString.call(value) === '[object Array]';
}
}IE9+、firefox4+、safari5+、opera10.5+和chrome都实现了Array.isArray()方法
3、检测属性
判断属性是否存在最好的办法是使用in运算符。
如果只想检查实例对象的某个属性是否存在（不是prototype的属性和继承属性），则使用hasOwnProperty
if (object.hasOwnProperty('xxxx')) {
}唯一需要注意的是在IE8以及更早的版本中，DOM对象并非继承Object，因此不包含hasOwnProperty方法，所以在调用DOM对象的hasOwnProperty方法之前先应该判断该方法是否存在
if ('hasOwnProperty' in object && object.hasOwnProperty('xxxxx')) {
}所以，在IE8之前的版本中判断属性是否存在，最好用in运算符

《编写可维护的JavaScript》的笔记-第39页 - 3.6 for-in循环

发现一个代码错误：
var prop =>应改为 var object
而且3.6节的前三段代码都有这个错误。
具体参见我的博客吧，懒得再写了。
http://zilong-thu.github.io/blog/2013/11/02/maintainable-javascript/

《编写可维护的JavaScript》的笔记-第73页 - Namespaces

var YourGlobal = {
namespace: function(ns) {
var parts = ns.split("."),
object = this,
i, len;
for (i=0, len=parts.length; i < len; i++) {
if (!object[parts[i]]) {
object[parts[i]] = {};
}
object = object[parts[i]];
}
return object;
}
};
The variable YourGlobal can actually have any name. The important part is the name
space() method, which nondestructively creates namespaces based on the string that
is passed in and returns a reference to the namespace object. Basic usage:
/*
* Creates both YourGlobal.Books and YourGlobal.Books.MaintainableJavaScript.
* Neither exists before hand, so each is created from scratch.
*/
YourGlobal.namespace("Books.MaintainableJavaScript");
// you can now start using the namespace
YourGlobal.Books.MaintainableJavaScript.author = "Nicholas C. Zakas";
/*
* Leaves YourGlobal.Books alone and adds HighPerformanceJavaScript to it.
* This leaves YourGlobal.Books.MaintainableJavaScript intact.
*/
YourGlobal.namespace("Books.HighPerformanceJavaScript");
// still a valid reference
console.log(YourGlobal.Books.MaintainableJavaScript.author);
// You can also start adding new properties right off the method call
YourGlobal.namespace("Books").ANewBook = {};
Using a namespace() method on your one global allows developers the freedom to assume
that the namespace exists. That way, each file can call namespace() first to declare
the namespace the developers are using, knowing that they won’t destroy the namespace
if it already exists. This approach also frees developers from the tedious task of
checking to see whether the namespace exists before using it.
As with other parts of your code, be sure to define some conventions
around namespaces. Should they begin with uppercase letters as in YUI?
Or be all lowercase as in Dojo? This is a question of preference, but
defining these choices up front allows the team to use the one-global
approach more effectively.这里不太懂，先标记一下。
Reference values are also known as objects. In JavaScript, any value that isn’t a primitive
is definitely a reference.
// Internet Explorer 8 and earlier
console.log(typeof document.getElementById); // "object"
console.log(typeof document.createElement); // "object"
console.log(typeof document.getElementsByTagName); // "object"
This quirk arises due to how the browser implements the DOM. In short, these early
versions of Internet Explorer didn’t implement the DOM as native JavaScript functions,
which caused the native typeof operator to identify the functions as objects. Because
the DOM is so well defined, developers typically test for DOM functionality using the
in operator, understanding that the presence of the object member means that it’s a
function, as in:
// detect DOM method
if ("querySelectorAll" in document) {
images = document.querySelectorAll("img");
}
This code checks to see whether querySelectorAll is defined in document, and if so, goes
on to use that function. Though not ideal, this is the safest way to check for the presence
of DOM methods if you need to support Internet Explorer 8 and earlier. In all other
cases, the typeof operator is the best way to detect functions in JavaScript.
Detecting
All error types inherit from Error, so checking the type with instanceof Error doesn’t
give you any useful information. By checking for the more specific error types, you get
more robust error handling:
try {
// something that causes an error
} catch (ex) {
if (ex instanceof TypeError) {
// handle the error
} else if (ex instanceof ReferenceError) {
// handle the error
} else {
// handle all others
}
}var person = {
name: "Nicholas"
};
delete person.name;
console.log(person.name); // undefined
This example removes the name property from the person object. The delete operator
works only on instance properties and methods. If delete is used on a prototype property
or method, it has no effect. For example:
// No effect
delete document.getElementById;
console.log(document.getElementById("myelement")); // stil works
// Good
function getById (id) {
var element = null;
if (document.getElementById) { // DOM
element = document.getElementById(id);
} else if (document.all) { // IE
element = document.all[id];
} else if (document.layers) { // Netscape <= 4
element = document.layers[id];
}
return element;
}This is a good and appropriate use of feature detection, because the code tests for a
feature and then, if it’s there, uses it. The test for document.getElementById() comes
first because it is the standards-based solution. After that come the two browser-specific
solutions. If none of these features is available, then the method simply returns null.
The best part about this function is that when Internet Explorer 5 and Netscape 6 were
released with support for document.getElementById(), this code didn’t need to change.
The previous example illustrates several important parts of good feature detection:
1. Test for the standard solution
2. Test for browser-specific solutions
3. Provide a logical fallback if no solution is available