<<Javascript Patterns>>阅读笔记 -- 第2章 基本技巧(一)

第一次写这种东西, 有些生涩和蹩脚, 也是为了自己在表达或是总结方面有所提高, 同时为看过的东西留个痕迹, 以便日后查阅.

有错误或是不妥的地方, 还望各位指正, 谢谢!

第1章 简介

本章主要介绍了本书要讨论的内容, Javascript的一些基本概念, 面向对象, 原型, ECMASCript5, JSLine和console的相关内容.

不做过多阐述, 给出模式的定义

广义上: 模式是一个可以用来产生其他事物的模板或模型.

在软件开发中, 模式是指一个通用问题的解决方案.

书中主要讨论三种类型的模式: 设计模式, 编码模式, 反模式.

所谓反模式, 不是bug, 但使用它时, 引发的问题往往比解决的问题多...

第2章 基本技巧

编写可维护的代码

不用多说, 大家都有过阅读别人写的代码的历经, 确实阅读代码比写代码需要更多的时间.

每个人的想法是一样的, 甚至同一个人现在的想法与一周前的也会不一样, 写出的代码也就有所不同.

如果这些代码不易于维护, 可读性差, 那就更消耗时间.

易于维护的代码应具备如下特性:

• 可读性好
• 具有一致性
• 预见性好
• 看起来如同一个人编写
• 有文档

尽量少用全局变量

全局变量意味着在整个js应用或是页面中, 它们被共享. 有极大的可能出现命名冲突.

例如在一个脚本里定义了全局变量result, 后来又在某函数中定义了一个也叫result的全局变量,

那么就会导致脚本中的result变量被覆盖, 脚本无法正常工作.

首要的规则就是用var定义变量, 如下:

function sum(x, y) {
    var result = x + y;
    // 反模式: 使用了全局变量
    // result = x + y;
    return result;
}

另外, 在使用var定义变量时, 不要使用链式赋值. 例如:

// 反模式, 不要使用
function fun() {
    var a = b = 7;
    // a为局部变量, b为全部变量
    // 原因: 从右至左的操作符优先级, var a = (b = 0);
    // ...
}

// 如果对链接赋值的变量都进行了声明, 则不会出现全局变量, 如:
function fun() {
    var a, b;
    a = b = 8;
}

明确定义的全局变量与隐式定义的全局变量有微小的不同, 不同之处在于能否用delete撤消变量

• 使用var定义的全局变量(在函数外创建)不能删除.
• 不使用var定义的全局变量(在函数内创建)可以删除.

这说明隐式定义的全局变量严格来说不是真正的变量, 真正的变量不能被删除的, 它只是全局对象的一个属性, 只有属性可以被delete的掉

借用书中的例子:

// 定义三个变量
var global_var = 1;
global_novar = 2; // 反模式
(function(){
    global_fromfun = 3; // 反模式
}());
// 试着执行delete
delete global_var;
delete global_novar;
delete global_fromfun;
// 查看操作结果
console.info(typeof global_var); // number
console.info(typeof global_novar); // undefined
console.info(typeof global_fromfun); // undefined

注: ES5的strict模式中, 为没有声明的变量赋值会抛出错误.

单一var定义变量

可提高代码可读性, 同时在声明变量时也可同时赋值或做一些其他的操作. 例如:

function func() {
    var x = 2,
        y = 3,
        sum = x + y,
        obj = {
 
        };
    // ...
}

提升: 凌散变量问题

所谓提升, 就是在Javascipt函数里, 允许在任意地方声明多个变量, 无论在哪里声明, 效果都跟在函数的顶部声明一样.

问题举例:

name = 'global'; // 全局变量
(function func() {
    console.info(name); // undefined
    var name = 'local';
    console.info(name); // local
}());
// 局部变量name的声明被提升了, 等同于下面这样:
name = 'global'; // 全局变量
(function func() {
    var name; // 等同于 ==> var name = undefined;
    console.info(name); // undefined
    name = 'local';
    console.info(name); // local
}());

所以, 建议, 最好在函数开始就声明好要用的所有变量.

关于for循环

重点是缓存数组或类数组的长度

for(var i=0; i<arr.length; i++) {
    // ...
}

像这种访问方式, 每次循环都会访问数据的长度, 这样会使得代码变慢,

尤其是当arr不是真正的数组, 而是HTML集合对象时更为严重, 比如:

document.getElementsByName();

document.getElementsByTagName();

document.getElementsByClassName();

集合对象是DOM下的活动对象, 每次访问在它们的长度也就是在访问活动的DOM, DOM操作是相当耗时的.

缓存数据长度的for循环如下:

for(var i=0, len=arr.length; i<len; i++) {
    // ...
}

另外, 书中提到两个更有效率的循环方式, 有兴趣的可以学习一下.

主要就是使用最少的变量, 且逐步减至0, 因为与0的比较会更有效率, 代码如下:

// 第一个仍然是for循环
for(var i=arr.length; i--;) {
    // ...
}
// 第二个是while
var i = arr.length;
while(i--) {
    // ...
}