编写javascript的基本技巧一

自己从事前端编码也有两年有余啦，时间总是比想象中流逝的快。岁月啊，请给我把时间的
脚步停下吧。不过，这是不可能的，我在这里不是抒发时间流逝的感慨。而是想在这分享两

年来码农生活的一些javascript编码的基本技巧。我在编码上算不上高手，但是我对编码的

规范，美观等一些代码洁癖控，这也是很多编码者的洁癖。好啦，下面正式切入正题。

第一、编写可维护的代码

什么叫着编写可维护的代码呢？就是当我的做出来的项目，拿给其它编码团队能很快的看懂
你编写的代码，你的整个项目的逻辑等等。一个项目的修改维护是要比开发一个项目的成本

是要高的。例如：当一个项目发布出现bug，最好的情况是当我们一发现bug，立即就可以修

复，这种情况是可能发生在刚写完这些代码后不久。否则，一旦转移到新的任务上，忘记了

这部分代码，就需要重新阅读这些代码：

a.花时间重新学习和理解相应的问题。
b.花时间理解当时用于解决相应问题的代码。

这对于大公司而言。还存在另一个问题，就是最终修改代码的人，往往不是当初写代码的人

，也不是发现bug的人。因此，要减少理解自己以前写的代码的时间，或者减少理解团队中

他人写的代码的时间，就变得非常关键。同时，这也影响到开发完成的时间（进而影响公司

的收入或者战略部署）和开发者的情绪，毕竟开发新产品更能让人兴奋，而不是花费那么多

时间在老的项目维护上。项目开发人员通常读代码比写代码更耗时间。在我工作到现在，就

还没有看到有编码注释很棒的同事，当然包括我在内这块本人做的不够好。

因此易维护的代码应该具有下面的几点：

1.阅读性好（如代码的缩进，注释啦）
2.具有一致性
3.预见性好
4.看起来像一个人编码
5.有文档

ps:以上是看到别人总结的，但是我觉得代码写的规范美观缩进对齐有比较详细的注释就是很不
错的编码习惯。

第二、尽量少用全局变量

javascript使用函数来管理作用域。变量在函数内声明，只有在函数内有效，不能在外部使
用。全局变量则反之，在函数外面（当然你也可以函数内部隐性创建变量）声明，在函数内

外都可用。

全局变量带来的问题是不可预计的，例如：团队多人合作变量命名重复，代码移植变量冲突
，使用第三方的跟踪和分析脚本的代码等等

例如:

// 程序员A的add函数
function add(v1, v2){
    return v1 + v2;
}

// 程序员B的add函数
function add(v1, v2, v3){
    return v1 + v2 + v3;
}

// 这样程序员A的函数就被程序员B的函数覆盖啦

例如
同时引入的js库，prototype.js和jQuery.js的$()函数冲突，当然这个解决冲突的已然不是

问题

javascript中经常会出人意料的创建全局变量

例如:

function sum(v1, v2){
    // 全局变量就这样创建啦
    sum = v1 + v2;
    return sum;
}

// 所以解决的规则就是用var声明变量
function sum(v1, v2){
    // 局部变量ok
    var sum = v1 + v2;
    return sum;
}

*javascript中另一种创建隐式全局变量带var的声明的链式赋值

例如:

function test(){
    // 悲剧来啦，b成为全局变量啦,这也许并不是你想要的
    var a = b = 5;
    // ...
}

// 以上是在怎么发生的呢？这就跟运算从右至左的操作符优先级有关啦,如下代码:

var a = (b = 5);

// 如果对链式赋值的所以变量都进行声明，就不会创建出人意料的全局变量,如下代码:

function test(){
    var a ,b;
    a = b =5; // 均为局部变量
    // ...
}

第三、变量释放时的副作用

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

a.使用var创建的全局变量不能删除
b.不使用var创建的隐含全局变量可以删除

这也说明全局变量严格来说不是真正的变量，而是全局对象的属性。属性可以通过delete操
作符删除，但变量不可以。以下代码说明问题:

// 定义三个全局变量
var global_val = 1;
global_noval = 2;
(function(){
    global_formfunc = 3;
})();

// 删除变量
delete global_val; // false
delete global_noval; // true
delete global_formfunc; // true

// 测试
console.log(typeof global_val); // number
console.log(typeof global_noval); // undefined
console.log(typeof global_formfunc); // undefined

第四、单一var模式

只使用一个var在函数顶部进行变量声明是一种非常有用的模式，但是在我的周围的很多童
鞋就没有做到这点,他们声明变量时就一批批的var。

那么使用单一var模式的好处：

1.提供单一的地址以便查找到函数需要的所以局部变量
2.防止变量在定义之前就被使用的逻辑
3.帮助牢记要声明变量，以尽可能少的使用全局变量
4.更少的编码

单一模式的代码:

// 使用一个var关键字声明由逗号分割的多个变量
function test(){
    var a = 1,
    b = 2,
    c = 3;
    // ...
}

第五、零散变量的问题

在javascript函数中可以在任意地方声明多个变量，无论在哪里声明变量，效果都等同于在
函数顶部声明，这就是大家说的“变量提升”，视为已经声明，哪怕是在变量声明前就是用

。下面看段代码，这也是很多面试题出现概率很高的一个题:

var myname = 'qh';
function test(){
    console.log(myname); // undefined
    var myname = 'xjm';
    console.log(mynem); // 'xjm'

}
test()

看到上面的例子很多对js语法不了解的人都可能认为，第一个输出的是qh，第二个是xjm，
这是一种合乎情理的期望。但是实事不是这样的，第一个是undefined，因为myname被看作

声明为函数的本地变量，所有的变量声明都提升到函数的最顶部。

前面的代码断运行结果和以下代码一样:

var myname = 'qh';
function test(){
    var myname; // 等同于-> var myname = undefined;
    console.log(myname); // undefined
    myname = 'xjm';
    console.log(mynem); // 局部变量 'xjm'
}
test()

好啦，今天也说了不少javascript方面的基本技巧，这些也是我以前工作时候走过的弯路，
后来经过看书找资料啊，把它们汇总起来，希望或多或少对你们的学习有那么一点点帮助，

后期还会有总结敬请期待。