1、最小全局变量(Minimizing Globals)

(1)JavaScript通过函数管理作用域。在函数内部声明的变量只在这个函数内部,函数外面不可用。
(2)全局变量就是在任何函数外面声明的或是未声明直接简单使用的。
(3)每个JavaScript环境有一个全局对象,当你在任意的函数外面使用this的时候可以访问到。你创建的每一个全局变量都成了这个全局对象的属性。在浏览器中,方便起见,该全局对象有个附加属性叫做window,此window(通常)指向该全局对象本身。


全局变量的问题
全局变量的问题在于,你的JavaScript应用程序web页面上的所有代码都共享了这些全局变量,他们住在同一个全局命名空间,所以当程序的两个不同部分定义同名但不同作用的全局变量的时候,命名冲突在所难免。

web页面包含不是该页面开发者所写的代码也是比较常见的,例如:

第三方的JavaScript库
广告方的脚本代码
第三方用户跟踪和分析脚本代码
不同类型的小组件,标志和按钮

比方说,该第三方脚本定义了一个全局变量,叫做result;接着,在你的函数中也定义一个名为result的全局变量。其结果就是后面的变量覆盖前面的,第三方脚本就一下子嗝屁啦!

因此,要想和其他脚本成为好邻居的话,尽可能少的使用全局变量是很重要的。

隐含的全局变量
—不用声明

```不需要声明就可以使用变量```
```JavaScript有隐含的全局概念,意味着你不声明的任何变量都会成为一个全局对象属性。```


另一个创建隐式全局变量的反例就是使用任务链进行部分var声明

正确的写法

然而,另外一个避免全局变量的原因是可移植性。如果你想你的代码在不同的环境下(主机下)运行,使用全局变量如履薄冰,因为你会无意中覆盖你最初环境下不存在的主机对象(所以你原以为名称可以放心大胆地使用,实际上对于有些情况并不适用)。

2、忘记var的副作用(Side Effects When Forgetting var)

隐式全局变量和明确定义的全局变量间有些小的差异,就是通过delete操作符让变量未定义的能力。

(1)通过var创建的全局变量(任何函数之外的程序中创建)是不能被删除的。
(2)无var创建的隐式全局变量(无视是否在函数中创建)是能被删除的。

这表明,在技术上,隐式全局变量并不是真正的全局变量,但它们是全局对象的属性。属性是可以通过delete操作符删除的,而变量是不能的:
表明隐式全局变量,只是全局对象的属性,可以被删除,变量是不可被删除的

在ES5严格模式下,未声明的变量(如在前面的代码片段中的两个反面教材)工作时会抛出一个错误。

3、访问全局对象(Access to the Global Object)

在浏览器中,全局对象可以通过window属性在代码的任何位置访问(除非你做了些比较出格的事情,像是声明了一个名为window的局部变量)。但是在其他环境下,这个方便的属性可能被叫做其他什么东西(甚至在程序中不可用)。如果你需要在没有硬编码的window标识符下访问全局对象,你可以在任何层级的函数作用域中做如下操作:

4、单var形式(Single var Pattern)

在函数顶部使用单var语句是比较有用的一种形式,其好处在于:

提供了一个单一的地方去寻找功能所需要的所有局部变量
防止变量在定义之前使用的逻辑错误
帮助你记住声明的全局变量,因此较少了全局变量//zxx:此处我自己是有点晕乎的…
少代码(类型啊传值啊单线完成)

单var形式长得就像下面这个样子:

您可以使用一个var语句声明多个变量,并以逗号分隔。像这种初始化变量同时初始化值的做法是很好的。这样子可以防止逻辑错误(所有未初始化但声明的变量的初始值是undefined)和增加代码的可读性。在你看到代码后,你可以根据初始化的值知道这些变量大致的用途,例如是要当作对象呢还是当作整数来使。

你也可以在声明的时候做一些实际的工作,例如前面代码中的sum = a + b这个情况,另外一个例子就是当你使用DOM(文档对象模型)引用时,你可以使用单一的var把DOM引用一起指定为局部变量,就如下面代码所示的:

5、预解析:var散布的问题(Hoisting: A Problem with Scattered vars)

JavaScript中,你可以在函数的任何位置声明多个var语句,并且它们就好像是在函数顶部声明一样发挥作用,这种行为称为 hoisting(悬置/置顶解析/预解析)。对于JavaScript,只 要你的变量是在同一个作用域中(同一函数),它都被当做是声明的,即使是它在var声明前使用的时候。

6、for循环(for Loops)


这种形式的循环的不足在于每次循环的时候数组的长度都要去获取下。这回降低你的代码,尤其当myarray不是数组,而是一个HTMLCollection对象的时候。

HTMLCollections指的是DOM方法返回的对象

还有其他一些HTMLCollections,这些是在DOM标准之前引进并且现在还在使用的。有:

集合的麻烦在于它们实时查询基本文档(HTML页面)。这意味着每次你访问任何集合的长度,你要实时查询DOM,而DOM操作一般都是比较昂贵的。

这就是为什么当你循环获取值时,缓存数组(或集合)的长度是比较好的形式,正如下面代码显示的:


这样,在这个循环过程中,你只检索了一次长度值。
这种形式具有一致性的好处,因为你坚持了单一var形式。不足在于当重构代码的时候,复制和粘贴整个循环有点困难。例如,你从一个函数复制了一个循环到另一个函数,你不得不去确定你能够把i和max引入新的函数(如果在这里没有用的话,很有可能你要从原函数中把它们删掉)。

最后一个需要对循环进行调整的是使用下面表达式之一来替换i++。

还有两种变化的形式,其又有了些微改进,因为:

少了一个变量(无max)
向下数到0,通常更快,因为和0做比较要比和数组长度或是其他不是0的东西作比较更有效率

7、for-in循环(for-in Loops)

for-in循环应该用在非数组对象的遍历上,使用for-in进行循环也被称为“枚举”。

从技术上将,你可以使用for-in循环数组(因为JavaScript中数组也是对象),但这是不推荐的。因为如果数组对象已被自定义的功能增强,就可能发生逻辑错误。另外,在for-in中,属性列表的顺序(序列)是不能保证的。所以最好数组使用正常的for循环对象使用for-in循环

有个很重要的hasOwnProperty()方法,当遍历对象属性的时候可以过滤掉从原型链上下来的属性。


在这个例子中,我们有一个使用对象字面量定义的名叫man的对象。在man定义完成后的某个地方,在对象原型上增加了一个很有用的名叫 clone()的方法。
此原型链是实时的,这就意味着所有的对象自动可以访问新的方法。为了避免枚举man的时候出现clone()方法,你需要应用hasOwnProperty()方法过滤原型属性。如果不做过滤,会导致clone()函数显示出来,在大多数情况下这是不希望出现的。

另外一种使用hasOwnProperty()的形式是取消Object.prototype上的方法。像是:

8、(不)扩展内置原型((Not) Augmenting Built-in Prototypes)

扩增构造函数的prototype属性是个很强大的增加功能的方法,但有时候它太强大了。

增加内置的构造函数原型(如Object(), Array(), 或Function())挺诱人的,但是这严重降低了可维护性,因为它让你的代码变得难以预测。使用你代码的其他开发人员很可能更期望使用内置的 JavaScript方法来持续不断地工作,而不是你另加的方法。

另外,属性添加到原型中,可能会导致不使用hasOwnProperty属性时在循环中显示出来,这会造成混乱。

因此,不增加内置原型是最好的。你可以指定一个规则,仅当下面的条件均满足时例外:

可以预期将来的ECMAScript版本或是JavaScript实现将一直将此功能当作内置方法来实现。例如,你可以添加ECMAScript 5中描述的方法,一直到各个浏览器都迎头赶上。这种情况下,你只是提前定义了有用的方法。
如果您检查您的自定义属性或方法已不存在——也许已经在代码的其他地方实现或已经是你支持的浏览器JavaScript引擎部分。
你清楚地文档记录并和团队交流了变化。
如果这三个条件得到满足,你可以给原型进行自定义的添加,形式如下:

9、switch模式(switch Pattern)

10、避免隐式类型转换(Avoiding Implied Typecasting )

11避免(Avoiding) eval()

eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。

使用eval()也带来了安全隐患,因为被执行的代码(例如从网络来)可能已被篡改。

同样重要的是要记住,给setInterval(), setTimeout()和Function()构造函数传递字符串,大部分情况下,与使用eval()是类似的,因此要避免。在幕后,JavaScript仍需要评估和执行你给程序传递的字符串:


使用新的Function()构造就类似于eval(),应小心接近。这可能是一个强大的构造,但往往被误用。如果你绝对必须使用eval(),你 可以考虑使用new Function()代替。有一个小的潜在好处,因为在新Function()中作代码评估是在局部函数作用域中运行,所以代码中任何被评估的通过var 定义的变量都不会自动变成全局变量。

另一种方法来阻止自动全局变量是封装eval()调用到一个即时函数中。

另一间eval()和Function构造不同的是eval()可以干扰作用域链,而Function()更安分守己些。管你在哪里执行 Function(),它只看到全局作用域。所以其能很好的避免本地变量污染。在下面这个例子中,eval()可以访问和修改它外部作用域中的变量,这是 Function做不来的(注意到使用Function和new Function是相同的)。

12、parseInt()下的数值转换(Number Conversions with parseInt())

定义和用法
parseInt() 函数可解析一个字符串,并返回一个整数。
(1)当字符串以”0″开头的时候就有可能会出问题
(2)部分时间进入表单域,在ECMAScript 3中,开头为”0″的字符串被当做8进制处理了,但这已在ECMAScript 5中改变了。为了避免矛盾和意外的结果,总是指定基数参数。


此例中,如果你忽略了基数参数,如parseInt(year),返回的值将是0,因为“09”被当做8进制(好比执行 parseInt( year, 8 )),而09在8进制中不是个有效数字。

替换方法是将字符串转换成数字,包括:

汤姆大叔的博客 -【1】编写高质量JavaScript代码的基本要点相关推荐

  1. 编写高质量javascript代码的基本要点

    javascript入门比较快,基础方面也比较简单,但如果想写出高质量的javascript代码也绝非易事,下图是在下整理的编写高质量javascript代码的基本要点,希望能够对各位有所帮助. 转载 ...

  2. 深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点(转)

    才华横溢的Stoyan Stefanov,在他写的由O'Reilly初版的新书<JavaScript Patterns>(JavaScript模式)中,我想要是为我们的读者贡献其摘要,那会 ...

  3. 深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点

    才华横溢的Stoyan Stefanov,在他写的由O'Reilly初版的新书<JavaScript Patterns>(JavaScript模式)中,我想要是为我们的读者贡献其摘要,那会 ...

  4. 前端实战优秀博客每日学习之-----深入Javascript系列(汤姆大叔的博客)------(一)

    ==装载连接-----代码改变世界-https://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html 深入理解Javascript系列(1): ...

  5. 编写高质量JavaScript代码绳之以法(The Essentials of Writing High Quality JavaScript)翻译...

    原文:The Essentials of Writing High Quality JavaScript 才华横溢的Stoyan Stefanov,在他写的由O'Reilly初版的新书<Java ...

  6. 汤姆大叔的博客 JS/jQuery

    http://www.cnblogs.com/TomXu/category/338104.html avaScript 不包含传统的类继承模型,而是使用 prototypal 原型模型. 虽然这经常被 ...

  7. 汤姆大叔的博客:深入理解JavaScript系列

    http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html#2365322 转载于:https://www.cnblogs.com/che ...

  8. 编写高质量JavaScript代码的基本技巧

    一.尽量少用全局变量 减少全局名字空间污染,最理想的情况是一个应用程序仅有一个全局变量. 二.单一var模式 var a = 1,b = 2,sum = a + b,c; 只使用一个var在函数顶部进 ...

  9. 如何编写高质量JavaScript代码

    书写可维护的代码(Writing Maintainable Code ) 软件bug的修复是昂贵的,并且随着时间的推移,这些bug的成本也会增加,尤其当这些bug潜伏并慢慢出现在已经发布的软件中时.当 ...

最新文章

  1. SIGIR 2020开幕在即,智源学者论文收录占10%
  2. 分分钟get「隔空传手」技能,网友:我想试试别的东西…
  3. Silverlight学习(一) 创建Silverlight项目,构建一个简单的Silverlight Demo
  4. cvc 降噪_耳机降噪技术有哪几种?
  5. js基本包装类型和引用类型
  6. html5的新特性都有什么,html5的新特性
  7. azure云数据库_Azure SQL数据库地理复制
  8. 【学术分享】发顶会论文,怎么就那么难?
  9. 聚类总结(中)——密度聚类
  10. 图解通信原理与案例分析-18:低功耗、远距离物联网无线通信技术LoRa概述与扩频通信的基本原理
  11. vue + element-ui 阿里云直传
  12. DCDC布局布线总结
  13. vm虚拟机安装win7出现 Error loading image cdmenu.ezb
  14. python转html_Python 将文本转换成html的简单示例
  15. Scrollbar样式介绍
  16. Linux下ffmpeg的完整安装
  17. C语言谁是凶手-思路详解
  18. JavaScript之动画特效
  19. 小伙失恋服毒后又反悔 自作聪明喝洗衣粉洗胃
  20. Unity使用虚拟相机实现人物跟踪移动

热门文章

  1. 前后端传输数据的编码格式---urlencoded,formdata, json这三种格式的详解
  2. 《活着》读后感 -- 一个活在悲剧中的人为什么要继续活下去
  3. MTK6580芯片核心板规格资料
  4. asp.net mvc源码分析-Controllerl篇 ControllerDescriptor
  5. python识别word文件格式 ——(专栏:基于python编写简单office阅卷程序①)
  6. 知识:什么是记忆术?记忆术的起源
  7. 夜晚小记——centos安装WebMonitor监控页面并推送和phantomjs
  8. python画建筑分析图_教你用GH绘制酷炫的流线分析图 | 建筑学院
  9. 海量数据查询方案mysql_Mysql海量数据存储和解决方案之二----Mysql分表查询海量数据...
  10. 开博第一篇 近来心得