《JavaScript 模式》读书笔记（2）— 基本技巧1

大家好，又见面了，我是你们的朋友全栈君。

　　这篇文章的主要内容，介绍了一些js编程中的基本技巧，其实这些技巧，大家在开发的过程中，或多或少都在使用，或者已经可以熟练的应用于自己的代码或项目中了。那么，这篇文章，就一起来回顾下这些“基本技巧”。

编写可维护的代码

　　我们想象一下，在我们的工作过程中，要去改一个bug，这个bug可能是由于之前十几个人维护的项目，没有规范，没有JSLint，代码就像在大草原上弛聘一样，随心所欲，无欲无求。到了今天，刚好你接受了这个项目，测试发现了这个潜藏在系统中已久但今天才暴露的问题。然后，你看着这些代码，心里面问候了代码作者的祖宗十六代，但是，不管怎么样，你还是要坐下来，安心的，潜心的从这些凌乱的，毫无规则的代码中，解决这个bug。

　　我相信很多人都遇到过这样的问题，甚至在一些无规范的公司，企业，项目上，这实在是很普遍的事情（我现在正在经历的）。那时，你就会发现，编写可维护的代码有多重要。

　　易维护的代码意味着代码具有以下特性：

　　　　1. 阅读性好。

　　　　2. 具有一致性。

　　　　3. 预见性好。

　　　　4. 看起来如同一个人编写。

　　　　5. 有文档。

尽量少用全局变量

　　全局变量的问题在于，它们在整个JavaScript应用或Web页面内共享。它们生存于一个全局命名空间内，总有可能发生命名冲突。

　　JavaScript总是在不知不觉中就出人意料地创建了全局变量，其原因在于JavaScript 的两个特性。第一个特性是JavaScript可直接使用变量，甚至无需声明。第二个特性是JavaScript有一个暗示全局变量的概念，即任何变量，如果未经声明，就为全局对象所有（也就像正确生命过的全局变量一样可以访问）。比如：

function sum (x,y) {
  //反模式：暗示全局变量  
  result = x + y;
  return result;            
} 

　　这个例子中，函数内部的变量result未经声明就使用了，当然，在简单环境下，这样并不会有什么问题，但是一旦在调用函数后，在外部空间使用了另外的result变量：

function sum(x, y) {
    result = x + y;
    return result;
}
sum(1, 2)
var result = 6
console.log(result)

　　所以，一个首要规则就是，使用var声明变量。

function sum (x,y) {
  var  result = x + y;
  return result;            
}

　　另外一种创建隐式全局变量的反模式式带有var声明的链式赋值：

//反模式，不要使用
function foo() {
    var a = b = 0;

    //...
}

　　上面的代码，由于从右至左的操作符优先级。所以，上面的代码实际是这样的：

function foo() {
    var a = ( b = 0 );

    //...
}

　　但是，如果对链式赋值的所有变量都进行了声明，那么就不用担心会意想不到的创建了全局变量：

function foo() {
    var a ,b;
    //...
    a = b = 0;  
}

　　另外，假设你的代码想要在不同的宿主环境（比如node和window）中都可以跑的很欢快，那么就一定要注意全局变量的使用。因为，或许在window中不存在的变量，早已被node的全局变量所使用了。

变量释放时的副作用

　　隐含全局变量与明确定义的全局变量有细微的不同，不同之处在于能否使用delete操作符撤销变量。

• 使用var创建的全局变量（这类变量在函数外部创建）不能删除。
• 不实用var创建的隐含全局变量（尽管它是在函数内部创建）可以删除。

　　这表明隐含全局变量严格来讲并不是真正的变量，而是全局对象的属性。属性可以通过delete操作符删除，但是变量不可以。

var a = '1';
b = 2;
(function () {
    c = 3;
}()) 
delete a;
delete b;
delete c;

console.log(typeof a)
console.log(typeof b)
console.log(typeof c)

单一var模式

　　只使用一个var在函数顶部进行变量声明是一种非常有用的模式。它的好处在于：

• 　　提供方一个单一的地址以查找到函数需要的所有局部变量。
•       防止出现变量在定义前就被使用的逻辑错误。
• 　　抱住牢记要声明变量，以尽可能少的地使用全局变量。
•       更少的编码（无论是输入代码还是传输代码都更少了）。

　　比如：

function func() {
    var a = 1,
        b = 2,
        sum = a + b,
        obj = {},
        i,
        j;
}

 　　要记住，所有未初始化，且未声明的变量，其值都为undefined。这句话不太容易理解，既然未声明，那就说明不存在啊，没错，不存在就是undefined。那既然说到了undefined，简单说下null的含义，null代表着存在，但是空。

提升：凌散变量的问题

　　JavaScript允许在函数的任意地方声明多个变量，无论在哪里声明，效果都等同于在函数顶部进行声明。这就是所谓的“提升”。当先使用后声明的时候，就可能会导致逻辑错误。对于JavaScript而言，只要变量是在同一个范围（同一个函数）里，就视为已经声明，那排是在变量声明前就使用。比如：

// 反模式
name = 'global'; // 全局变量
function func() {
    alert(name); // "未定义"
    var name = 'local';
    alert(name); // "局部变量"
}
func();

　　你以为第一个alert的结果是global么？那么请再读一遍加粗的那段话，实际上，代码是这样执行的：

name = 'global'; // 全局变量
function func() {
    var name;
    alert(name); // "未定义"
    name = 'local';
    alert(name); // "局部变量"
}
func();

　　注意：事实上，代码处理上分为两个阶段：第一，这个阶段创建变量、函数声明及形式参数。这是解析和进入上线问的阶段。第二个阶段是代码运行时执行过程，创建函数表达和不合格标识符（未定义变量）。但为了实际使用的目的，我们使用了“提升”这个概念，尽管在ECMAScript标准中并不存在。

　　好了，我们这一篇的内容就到这里，实际上，仅仅是基本技巧，后面还有不少的内容。我希望篇幅短一点，读起来不那么让人厌烦。