| 关键词: 变量 函数 全局 代码 一个 对象 属性 循环 括号 方法 |
最小全局变量(Minimizing Globals)JavaScript通过函数管理作用域。在函数内部声明的变量只在这个函数内部,函数外面不可用。另一方面,全局变量就是在任何函数外面声明的或是未声明直接简单使用的。 每个JavaScript环境有一个全局对象,当你在任意的函数外面使用this的时候可以访问到。你创建的每一个全部变量都成了这个全局对象 的属 性。在浏览器中,方便起见,该全局对象有个附加属性叫做window,此window(通常)指向该全局对象本身。下面的代码片段显示了如何在浏览器环境 中创建和访问的全局变量: myglobal = "hello"; console.log(myglobal); console.log(window.myglobal); console.log(window["myglobal"]); console.log(.myglobal); 全局变量的问题全局变量的问题在于,你的JavaScript应用程序和web页面上的所有代码都共享了这些全局变量,他们住在同一个全局命名空间,所以当程序的两个不同部分定义同名但不同作用的全局变量的时候,命名冲突在所难免。 web页面包含不是该页面开发者所写的代码也是比较常见的,例如:
比方说,该第三方脚本定义了一个全局变量,叫做result;接着,在你的函数中也定义一个名为result的全局变量。其结果就是后面的变量覆盖前面的,第三方脚本就一下子嗝屁啦! 因此,要想和其他脚本成为好邻居的话,尽可能少的使用全局变量是很重要的。在书中后面提到的一些减少全局变量的策略,例如命名空间模式或是函数立即自动执行,但是要想让全局变量少最重要的还是始终使用var来声明变量。 由于JavaScript的两个特征,不自觉地创建出全局变量是出乎意料的容易。首先,你可以甚至不需要声明就可以使用变量;第二,JavaScript有隐含的全局概念,意味着你不声明的任何变量都会成为一个全局对象属性。参考下面的代码: sum(x, y) {
result = x + y;
result;
}
此段代码中的 经验法则是始终使用var声明变量,正如改进版的sum()函数所演示的: sum(x, y) {
result = x + y;
result;
}
另一个创建隐式全局变量的反例就是使用任务链进行部分var声明。下面的片段中, foo() {
a = b = 0;
}
此现象发生的原因在于这个从右到左的赋值,首先,是赋值表达式 var a = (b = 0); 如果你已经准备好声明变量,使用链分配是比较好的做法,不会产生任何意料之外的全局变量,如: foo() {
a, b;
}
然而,另外一个避免全局变量的原因是可移植性。如果你想你的代码在不同的环境下(主机下)运行,使用全局变量如履薄冰,因为你会无意中覆盖你最初环境下不存在的主机对象(所以你原以为名称可以放心大胆地使用,实际上对于有些情况并不适用)。 忘记var的副作用(Side Effects When Forgetting var)
隐式全局变量和明确定义的全局变量间有些小的差异,就是通过
这表明,在技术上,隐式全局变量并不是真正的全局变量,但它们是全局对象的属性。属性是可以通过 global_var = 1;
global_novar = 2; ( () {
global_fromfunc = 3; }());
global_var; global_novar; global_fromfunc;
global_var; global_novar; global_fromfunc;
在ES5严格模式下,未声明的变量(如在前面的代码片段中的两个反面教材)工作时会抛出一个错误。 访问全局对象(Access to the Global Object)
在浏览器中,全局对象可以通过 global = ( () {
;
}());
这种方法可以随时获得全局对象,因为其在函数中被当做函数调用了(不是通过 单var形式(Single var Pattern)在函数顶部使用单var语句是比较有用的一种形式,其好处在于:
单var形式长得就像下面这个样子: func() {
a = 1,
b = 2,
sum = a + b,
myobject = {},
i,
j;
}
您可以使用一个var语句声明多个变量,并以逗号分隔。像这种初始化变量同时初始化值的做法是很好的。这样子可以防止逻辑错误(所有未初始化但声明的变量的初始值是
你也可以在声明的时候做一些实际的工作,例如前面代码中的 updateElement() {
el = document.getElementById("result"),
style = el.style;
}
预解析:var散布的问题(Hoisting: A Problem with Scattered vars)JavaScript中,你可以在函数的任何位置声明多个var语句,并且它们就好像是在函数顶部声明一样发挥作用,这种行为称为 hoisting(悬置/置顶解析/预解析)。当你使用了一个变量,然后不久在函数中又重新声明的话,就可能产生逻辑错误。对于JavaScript,只 要你的变量是在同一个作用域中(同一函数),它都被当做是声明的,即使是它在var声明前使用的时候。看下面这个例子: myname = "global"; func() {
alert(myname); myname = "local";
alert(myname); }
func();
在这个例子中,你可能会以为第一个alert弹出的是”global”,第二个弹出”loacl”。这种期许是可以理解的,因为在第一个 alert 的时候,myname未声明,此时函数肯定很自然而然地看全局变量myname,但是,实际上并不是这么工作的。第一个alert会弹 出”undefined”是因为myname被当做了函数的局部变量(尽管是之后声明的),所有的变量声明当被悬置到函数的顶部了。因此,为了避免这种混 乱,最好是预先声明你想使用的全部变量。 上面的代码片段执行的行为可能就像下面这样: myname = "global"; func() {
myname; alert(myname); myname = "local";
alert(myname); func();
为了完整,我们再提一提执行层面的稍微复杂点的东西。代码处理分两个阶段,第一阶段是变量,函数声明,以及正常格式的参数创建,这是一个解 析和进入上下文 的阶段。第二个阶段是代码执行,函数表达式和不合格的标识符(为声明的变量)被创建。但是,出于实用的目的,我们就采用了”hoisting”这个概念, 这种ECMAScript标准中并未定义,通常用来描述行为。 for循环(for Loops)
在 ( i = 0; i < myarray.length; i++) {
}
这种形式的循环的不足在于每次循环的时候数组的长度都要去获取下。这回降低你的代码,尤其当
document.getElementsByName() document.getElementsByClassName() document.getElementsByTagName()
还有其他一些 document.images: 页面上所有的图片元素 document.links : 所有a标签元素 document.forms : 所有表单 document.forms[0].elements : 页面上第一个表单中的所有域 集合的麻烦在于它们实时查询基本文档(HTML页面)。这意味着每次你访问任何集合的长度,你要实时查询DOM,而DOM操作一般都是比较昂贵的。 这就是为什么当你循环获取值时,缓存数组(或集合)的长度是比较好的形式,正如下面代码显示的: ( i = 0, max = myarray.length; i < max; i++) {
}
这样,在这个循环过程中,你只检索了一次长度值。
在所有浏览器下,循环获取内容时缓存 注意到,当你明确想要修改循环中的集合的时候(例如,添加更多的DOM元素),你可能更喜欢长度更新而不是常量。 伴随着单var形式,你可以把变量从循环中提出来,就像下面这样: looper() {
i = 0,
max,
myarray = [];
(i = 0, max = myarray.length; i < max; i++) {
}
}
这种形式具有一致性的好处,因为你坚持了单一var形式。不足在于当重构代码的时候,复制和粘贴整个循环有点困难。例如,你从一个函数复制了一个循环到另一个函数,你不得不去确定你能够把
最后一个需要对循环进行调整的是使用下面表达式之一来替换 i = i + 1 i += 1
JSLint提示您这样做,原因是
如果你直接无视它,JSLint的 还有两种变化的形式,其又有了些微改进,因为:
i, myarray = []; (i = myarray.length; i–-;) { } myarray = [], i = myarray.length; (i–-) { } 这些小的改进只体现在性能上,此外JSLint会对使用i–-加以抱怨。 for-in循环(for-in Loops)
从技术上将,你可以使用
有个很重要的 思考下面一段代码: man = {
hands: 2,
legs: 2,
heads: 1
};
( Object.prototype.clone === "undefined") {
Object.prototype.clone = () {};
}
在这个例子中,我们有一个使用对象字面量定义的名叫man的对象。在man定义完成后的某个地方,在对象原型上增加了一个很有用的名叫
clone()的方法。此原型链是实时的,这就意味着所有的对象自动可以访问新的方法。为了避免枚举man的时候出现clone()方法,你需要应用
( i man) {
(man.hasOwnProperty(i)) { console.log(i, ":", man[i]);
}
}
( i man) {
console.log(i, ":", man[i]);
}
另外一种使用 ( i man) {
(Object.prototype.hasOwnProperty.call(man, i)) { console.log(i, ":", man[i]);
}
}
其好处在于在man对象重新定义hasOwnProperty情况下避免命名冲突。也避免了长属性查找对象的所有方法,你可以使用局部变量“缓存”它。 i, hasOwn = Object.prototype.hasOwnProperty;
(i man) {
(hasOwn.call(man, i)) { console.log(i, ":", man[i]);
}
}
严格来说,不使用 格式化的变化(通不过JSLint)会直接忽略掉花括号,把if语句放到同一行上。其优点在于循环语句读起来就像一个完整的想法(每个元素都有一个自己的属性”X”,使用”X”干点什么): i, hasOwn = Object.prototype.hasOwnProperty;
(i man) (hasOwn.call(man, i)) { console.log(i, ":", man[i]);
}
(不)扩展内置原型((Not) Augmenting Built-in Prototypes)扩增构造函数的prototype属性是个很强大的增加功能的方法,但有时候它太强大了。 增加内置的构造函数原型(如Object(), Array(), 或Function())挺诱人的,但是这严重降低了可维护性,因为它让你的代码变得难以预测。使用你代码的其他开发人员很可能更期望使用内置的 JavaScript方法来持续不断地工作,而不是你另加的方法。 另外,属性添加到原型中,可能会导致不使用hasOwnProperty属性时在循环中显示出来,这会造成混乱。 因此,不增加内置原型是最好的。你可以指定一个规则,仅当下面的条件均满足时例外:
如果这三个条件得到满足,你可以给原型进行自定义的添加,形式如下: ( Object.protoype.myMethod !== "function") {
Object.protoype.myMethod = () {
};
}
switch模式(switch Pattern)你可以通过类似下面形式的switch语句增强可读性和健壮性: inspect_me = 0,
result = '';
(inspect_me) {
0:
result = "zero";
;
1:
result = "one";
;
:
result = "unknown";
}
这个简单的例子中所遵循的风格约定如下:
避免隐式类型转换(Avoiding Implied Typecasting )JavaScript的变量在比较的时候会隐式类型转换。这就是为什么一些诸如:false == 0 或 “” == 0 返回的结果是true。为避免引起混乱的隐含类型转换,在你比较值和表达式类型的时候始终使用===和!==操作符。 zero = 0;
(zero === ) {
}
(zero == ) {
}
还有另外一种思想观点认为==就足够了===是多余的。例如,当你使用typeof你就知道它会返回一个字符串,所以没有使用严格相等的理由。然而,JSLint要求严格相等,它使代码看上去更有一致性,可以降低代码阅读时的精力消耗。(“==是故意的还是一个疏漏?”) 避免(Avoiding) eval()如果你现在的代码中使用了eval(),记住该咒语“eval()是魔鬼”。此方法接受任意的字符串,并当作JavaScript代码来处理。 当有 问题的代码是事先知道的(不是运行时确定的),没有理由使用eval()。如果代码是在运行时动态生成,有一个更好的方式不使用eval而达到同样的目 标。例如,用方括号表示法来访问动态属性会更好更简单: property = "name"; alert(eval("obj." + property)); property = "name"; alert(obj[property]); 使用eval()也带来了安全隐患,因为被执行的代码(例如从网络来)可能已被篡改。这是个很常见的反面教材,当处理Ajax请求得到的 JSON 相应的时候。在这些情况下,最好使用JavaScript内置方法来解析JSON相应,以确保安全和有效。若浏览器不支持JSON.parse(),你可 以使用来自JSON.org的库。 同样重要的是要记住,给setInterval(), setTimeout()和Function()构造函数传递字符串,大部分情况下,与使用eval()是类似的,因此要避免。在幕后,JavaScript仍需要评估和执行你给程序传递的字符串: setTimeout("myFunc()", 1000);
setTimeout("myFunc(1, 2, 3)", 1000);
setTimeout(myFunc, 1000);
setTimeout( () {
myFunc(1, 2, 3);
}, 1000);
使用新的Function()构造就类似于eval(),应小心接近。这可能是一个强大的构造,但往往被误用。如果你绝对必须使用 eval(),你 可以考虑使用new Function()代替。有一个小的潜在好处,因为在新Function()中作代码评估是在局部函数作用域中运行,所以代码中任何被评估的通过var 定义的变量都不会自动变成全局变量。另一种方法来阻止自动全局变量是封装eval()调用到一个即时函数中。
考虑下面这个例子,这里仅 console.log( un); console.log( deux); console.log( trois); jsstring = "var un = 1; console.log(un);"; eval(jsstring); jsstring = "var deux = 2; console.log(deux);"; Function(jsstring)(); jsstring = "var trois = 3; console.log(trois);"; ( () { eval(jsstring); }()); console.log( un); console.log( deux); console.log( trois); 另一间eval()和Function构造不同的是eval()可以干扰作用域链,而Function()更安分守己些。不管你在哪里执行 Function(),它只看到全局作用域。所以其能很好的避免本地变量污染。在下面这个例子中,eval()可以访问和修改它外部作用域中的变量,这是 Function做不来的(注意到使用Function和new Function是相同的)。 ( () {
local = 1;
eval("local = 3; console.log(local)"); console.log(local); }());
( () {
local = 1;
Function("console.log(typeof local);")(); }());
parseInt()下的数值转换(Number Conversions with parseInt())使用parseInt()你可以从字符串中获取数值,该方法接受另一个基数参数,这经常省略,但不应该。当字符串以”0″开头的时候就有可能会 出问 题,例如,部分时间进入表单域,在ECMAScript 3中,开头为”0″的字符串被当做8进制处理了,但这已在ECMAScript 5中改变了。为了避免矛盾和意外的结果,总是指定基数参数。 month = "06",
year = "09";
month = parseInt(month, 10);
year = parseInt(year, 10);
此例中,如果你忽略了基数参数,如parseInt(year),返回的值将是0,因为“09”被当做8进制(好比执行 parseInt( year, 8 )),而09在8进制中不是个有效数字。 替换方法是将字符串转换成数字,包括: +"08" Number("08")
这些通常快于parseInt(),因为parseInt()方法,顾名思意,不是简单地解析与转换。但是,如果你想输入例如“08 hello”,parseInt()将返回数字,而其它以NaN告终。 编码规范(Coding Conventions)建立和遵循编码规范是很重要的,这让你的代码保持一致性,可预测,更易于阅读和理解。一个新的开发者加入这个团队可以通读规范,理解其它团队成员书写的代码,更快上手干活。 许多激烈的争论发生会议上或是邮件列表上,问题往往针对某些代码规范的特定方面(例如代码缩进,是Tab制表符键还是space空格键)。如果 你是 你组织中建议采用规范的,准备好面对各种反对的或是听起来不同但很强烈的观点。要记住,建立和坚定不移地遵循规范要比纠结于规范的细节重要的多。 缩进(Indentation)代码没有缩进基本上就不能读了。唯一糟糕的事情就是不一致的缩进,因为它看上去像是遵循了规范,但是可能一路上伴随着混乱和惊奇。重要的是规范地使用缩进。 一些开发人员更喜欢用tab制表符缩进,因为任何人都可以调整他们的编辑器以自己喜欢的空格数来显示Tab。有些人喜欢空格——通常四个,这都无所谓,只要团队每个人都遵循同一个规范就好了。这本书,例如,使用四个空格缩进,这也是JSLint中默认的缩进。 什么应该缩进呢?规则很简单——花括号里面的东西。这就意味着函数体,循环 (do, while, for, for-in),if,switch,以及对象字面量中的对象属性。下面的代码就是使用缩进的示例: outer(a, b) {
c = 1,
d = 2,
inner;
(a > b) {
inner = () {
{
r: c - d
};
};
} {
inner = () {
{
r: c + d
};
};
}
inner;
}
花括号{}(Curly Braces)花括号(亦称大括号,下同)应总被使用,即使在它们为可选的时候。技术上将,在in或是for中如果语句仅一条,花括号是不需要的,但是你还是应该总是使用它们,这会让代码更有持续性和易于更新。 想象下你有一个只有一条语句的for循环,你可以忽略花括号,而没有解析的错误。 ( i = 0; i < 10; i += 1)
alert(i);
但是,如果,后来,主体循环部分又增加了行代码? ( i = 0; i < 10; i += 1)
alert(i);
alert(i + " is " + (i % 2 ? "odd" : "even"));
第二个alert已经在循环之外,缩进可能欺骗了你。为了长远打算,最好总是使用花括号,即时值一行代码: ( i = 0; i < 10; i += 1) {
alert(i);
}
if条件类似: ()
alert(1);
alert(2);
() {
alert(1);
} {
alert(2);
}
左花括号的位置(Opening Brace Location)开发人员对于左大括号的位置有着不同的偏好——在同一行或是下一行。 () {
alert("It's TRUE!");
}
()
{
alert("It's TRUE!");
}
这个实例中,仁者见仁智者见智,但也有个案,括号位置不同会有不同的行为表现。这是因为分号插入机制(semicolon insertion mechanism)——JavaScript是不挑剔的,当你选择不使用分号结束一行代码时JavaScript会自己帮你补上。这种行为可能会导致麻 烦,如当你返回对象字面量,而左括号却在下一行的时候: func() { { name : "Batman" } } 如果你希望函数返回一个含有name属性的对象,你会惊讶。由于隐含分号,函数返回undefined。前面的代码等价于: func() {
undefined;
{
name : "Batman"
}
}
总之,总是使用花括号,并始终把在与之前的语句放在同一行: func() { { name : "Batman" }; } 关于分号注:就像使用花括号,你应该总是使用分号,即使他们可由JavaScript解析器隐式创建。这不仅促进更科学和更严格的代码,而且有助于解决存有疑惑的地方,就如前面的例子显示。 空格(White Space)空格的使用同样有助于改善代码的可读性和一致性。在写英文句子的时候,在逗号和句号后面会使用间隔。在JavaScript中,你可以按照同样的逻辑在列表模样表达式(相当于逗号)和结束语句(相对于完成了“想法”)后面添加间隔。 适合使用空格的地方包括:
使用空格分开所有的操作符和操作对象是另一个不错的使用,这意味着在 d = 0, a = b + 1; (a && b && c) { d = a % c; a += d; } d = 0, a = b + 1; (a&&b&&c) { d=a % c; a+= d; } 最后需要注意的一个空格——花括号间距。最好使用空格:
空格使用的一点不足就是增加了文件的大小,但是压缩无此问题。 有一个经常被忽略的代码可读性方面是垂直空格的使用。你可以使用空行来分隔代码单元,就像是文学作品中使用段落分隔一样。 命名规范(Naming Conventions)另一种方法让你的代码更具可预测性和可维护性是采用命名规范。这就意味着你需要用同一种形式给你的变量和函数命名。 下面是建议的一些命名规范,你可以原样采用,也可以根据自己的喜好作调整。同样,遵循规范要比规范是什么更重要。 以大写字母写构造函数(Capitalizing Constructors)JavaScript并没有类,但有new调用的构造函数: var adam = new Person(); 因为构造函数仍仅仅是函数,仅看函数名就可以帮助告诉你这应该是一个构造函数还是一个正常的函数。 命名构造函数时首字母大写具有暗示作用,使用小写命名的函数和方法不应该使用new调用: MyConstructor() {...}
myFunction() {...}
分隔单词(Separating Words)当你的变量或是函数名有多个单词的时候,最好单词的分离遵循统一的规范,有一个常见的做法被称作“驼峰(Camel)命名法”,就是单词小写,每个单词的首字母大写。
对于构造函数,可以使用大驼峰式命名法(upper camel case),如
要是变量不是函数呢?开发者通常使用小驼峰式命名法,但还有另外一种做法就是所有单词小写以下划线连接:例如, ECMAScript的属性和方法均使用Camel标记法,尽管多字的属性名称是罕见的(正则表达式对象的lastIndex和ignoreCase属性)。 其它命名形式(Other Naming Patterns)有时,开发人员使用命名规范来弥补或替代语言特性。 例如,JavaScript中没有定义常量的方法(尽管有些内置的像Number, MAX_VALUE),所以开发者都采用全部单词大写的规范来命名这个程序生命周期中都不会改变的变量,如: PI = 3.14,
MAX_WIDTH = 800;
还有另外一个完全大写的惯例:全局变量名字全部大写。全部大写命名全局变量可以加强减小全局变量数量的实践,同时让它们易于区分。 另外一种使用规范来模拟功能的是私有成员。虽然可以在JavaScript中实现真正的私有,但是开发者发现仅仅使用一个下划线前缀来表示一个私有属性或方法会更容易些。考虑下面的例子: person = {
getName: () {
._getFirst() + ' ' + ._getLast();
},
_getFirst: () {
},
_getLast: () {
}
};
在此例中,
下面是一些常见的 _private 规范:
http://www.cnblogs.com/TomXu/archive/2011/12/28/2286877.html |
|
声明:文章版权归原作者所有 部分文章转自互联网 如有侵权请联系
[邮箱地址] 删除
|