14条最佳js代码编写技巧.docx
- 文档编号:6797230
- 上传时间:2023-05-10
- 格式:DOCX
- 页数:11
- 大小:29.73KB
14条最佳js代码编写技巧.docx
《14条最佳js代码编写技巧.docx》由会员分享,可在线阅读,更多相关《14条最佳js代码编写技巧.docx(11页珍藏版)》请在冰点文库上搜索。
14条最佳js代码编写技巧
14条最佳js代码编写技巧
写任何编程代码,不同的开发者都会有不同的见解。
但参考一下总是好的,下面是来自JavascriptToolbox发布的14条最佳JS代码编写技巧,Sofish翻译(1,2)。
1.总是使用‘var’
在JavaScript中,变量不是全局范围的就是函数范围的,使用”var”关键词将是保持变量简洁明了的关键。
当声明一个或者是全局或者是函数级(function-level)的变量,需总是前置”var”关键词,下面的例子将强调不这样做潜在的问题。
不使用Var造成的问题
vari=0;//Thisisgood-createsaglobalvariable
functiontest(){
for(i=0;i<10;i++){
alert("HelloWorld!
");
}
}
test();
alert(i);//Theglobalvariableiisnow10!
因为变量函数中变量i并没有使用var使其成为函数级的变量,在这个例子中它引用了全局变量。
总是使用var来声明全局变量是一个很多的做法,但至关重要的一点是使用var定义一个函数范围的变量。
下面这两个方法在功能上是相同的:
正确的函数
functiontest(){
vari=0;
for(i=0;i<10;i++){
alert("HelloWorld!
");
}
}
正确的函数
functiontest(){
for(vari=0;i<10;i++){
alert("HelloWorld!
");
}
}
2.特性检测而非浏览器检测
一些代码是写来发现浏览器版本并基于用户正使用的客户端的对其执行不同行为。
这个,总的来说,是一个非常糟的实践。
更好的方法是使用特性检测,在使用一个老浏览器可能不支持的高级的特性之前,首先检测(浏览器的)是否有这个功能或特性,然后使用它。
这单独检测浏览器版本来得更好,即使你知道它的性能。
你可以在 找到一个深入讨论这个问题的文章。
例子:
if(document.getElementById){
varelement=document.getElementById('MyId');
}
else{
alert('Yourbrowserlacksthecapabilitiesrequiredtorunthisscript!
');
}
2009.1103
Javascript最佳实践
(1)
标签:
JavaScript,实践
JavaScript
简介
这个文档是基于Javascript社区众多开发者的意见和经验,在开发Javascript代码上的最佳实践和首选的方案的明细表。
因为这是一个推荐的表而非原则性的方案,经验丰富的开发者可能对下面的表达会有略有不同的见解。
文章目录:
1.总是使用‘var’
2.特性检测而非浏览器检测
3.使用方括号记法
4.避免‘eval’
5.正确地引用表单和表单元素
6.避免‘with’声明
1.总是使用‘var’
在Javascript中,变量不是全局范围的就是函数范围的,使用"var"关键词将是保持变量简洁明了的关键。
当声明一个或者是全局或者是函数级(function-level)的变量,需总是前置"var"关键词,下面的例子将强调不这样做潜在的问题。
不使用Var造成的问题
vari=0;//Thisisgood-createsaglobalvariable
functiontest(){
for(i=0;i<10;i++){
alert("HelloWorld!
");
}
}
test();
alert(i);//Theglobalvariableiisnow10!
因为变量函数中变量i并没有使用var使其成为函数级的变量,在这个例子中它引用了全局变量。
总是使用var来声明全局变量是一个很多的做法,但至关重要的一点是使用var定义一个函数范围的变量。
下面这两个方法在功能上是相同的:
正确的函数
functiontest(){
vari=0;
for(i=0;i<10;i++){
alert("HelloWorld!
");
}
}
正确的函数
functiontest(){
for(vari=0;i<10;i++){
alert("HelloWorld!
");
}
}
2.特性检测而非浏览器检测
一些代码是写来发现浏览器版本并基于用户正使用的客户端的对其执行不同行为。
这个,总的来说,是一个非常糟的实践。
更好的方法是使用特性检测,在使用一个老浏览器可能不支持的高级的特性之前,首先检测(浏览器的)是否有这个功能或特性,然后使用它。
这单独检测浏览器版本来得更好,即使你知道它的性能。
你可以在
例子:
if(document.getElementById){
varelement=document.getElementById('MyId');
}
else{
alert('Yourbrowserlacksthecapabilitiesrequiredtorunthisscript!
');
}
3.使用方括号记法
当访问由执行时决定或者包括要不能用"."号访问的对象属性,使用方括号记法。
如果你不是一个经验丰富的Javascript程序员,总是使用方括号是一个不错的做法
对象的属性由两种固定的方法来访问:
"."记法和"[]"方括号记法:
"."号记法
MyObject.property
"[]"方括号记法
MyObject["property"]
使用"."号,属性名是硬代码,不能在执行时改变。
使用"[]"方括号,属性名是一个通过计算属性名而来的字符串。
字符串要以是硬代码,也可能是变量,甚至可以是一个调回一个字母串值的函数。
如果一个属性名在执行产生,方括号是必须,如果你有"value1","value2",和"value3"这样的属性,并且想利用变量i=2来访问
这个可以运行:
MyObject["value"+i]
这个不可以:
MyObject.value+i
并且在某些服务器端环境(PHP、Struts等)下,Form表单被附加了[]号来表示Form表单在服务器端必须被当作数组来对待。
如此,用"."号来引用一个包含[]号的字段将不会执行,因为[]是引用一个Javascript数组的语法。
所以,[]号记法是必须的:
这个可以运行:
formref.elements["name[]"]
这个不可以:
formref.elements.name[]
推荐使用"[]"方括号记法是说当其需要时(明显地)总是使用它。
当不是严格需要使用它的时候,它是一个私人的偏好和习惯。
一个好的经验原则是,使用"."号记法访问标准的对象属性,使用"[]"方括号记法访问由页面定义的对象属性。
这样,document["getElementById"]()是一个完美可行的"[]"方括号记法用法,但document.getElementById()在语法上是首选,因为getElementById是一个DOM规范中定义的一个标准文档对象属性。
混合使用这两个记法使哪个是标准对象属性,哪个属性名是由上下文所定义的,在代码中显得清晰明了:
document.forms["myformname"].elements["myinput"].value
这里,forms是document的一个标准属性,而表单名myformname则是由页面所定义的。
同时,elements和value属性都是由规范所定义的标准属性。
而myinput则是由页面所定义的。
这页是句法让人非常容易理解(代码的内容),是一个推荐遵循的习惯用法,但不是严格原则。
4.避免‘eval’
在Javascript中,eval()功能是一个在执行期中执行任意代码的方法。
在几乎所有的情况下,eval都不应该被使用。
如果它出现在你的页面中,则表明你所做的有更好的方法。
举一个例子,eval通常被不知道要使用方括号记法的程序员所使用。
原则上,"Evalisevil(Eval是魔鬼)"。
别使用它,除非你是一个经验丰富的开发者并且知道你的情况是个例外。
5.正确地引用表单和表单元素
所有的HTML表单都应该有一个name属性。
对于XHTML文档来说,name属性是不被要求的,但Form标签中应有相应有id属性,并必须用document.getElementById()来引用。
使用像document.forms[0]这样的索引方法来引用表单,在几乎所有情况下,是一个糟糕的做法。
有些浏览器把文档中使用form来命名的元素当作一个可用的form属性。
这样并不可靠,不应该使用。
下面这个例子用使用方括号和正确的对象引用方法来展示如何防止错误地引用一个表单的input:
正确引用表单Input:
document.forms["formname"].elements["inputname"]
糟糕的做法:
document.formname.inputname
如果你要引用一个函数里的两个表单元素,较好的做法是先引用这个form对象,并将其储存在变量中。
这样避免了重复查询以解决表单的引用:
varformElements=document.forms["mainForm"].elements;
formElements["input1"].value="a";
formElements["input2"].value="b";
当你使用onChange或者其他类似的事件处理方法,一个好的做法是总是通过一个引来把input元素本身引用到函数中来。
所有input元素都带有一个对包含其在内的Form表单有一个引用:
functionvalidate(input_obj){
//引用包含这个元素的form
vartheform=input_obj.form;
//现在你可以不需要使用硬代码来引用表单自身
if(theform.elements["city"].value==""){
alert("Error");
}
}
通过对表单元素的引用来访问表单的属性,你可以写一个不包含硬代码的函数来引用这个页面中任何一个有特定名的表单。
这是一个非常好的做法,因为函数变得可重用。
避免‘with’
Javascript中的with声明在一个作用域的前端插入一个对象,所以任何属性/变量的引用将会倚着对象被首先解决。
这通常被用作一个避免重复引用的快捷方法:
使用with的例子:
with(document.forms["mainForm"].elements){
input1.value="junk";
input2.value="junk";
}
但问题在于程序员并没有方法来验证input1或input2实际上已经被当作Form元素数组的属性来解决。
它首先以为这些名来检测属性,如果找不到,它将会继续(向下)检测这个作用域。
最后,它在全局对象中尝试把input1和input2作为一个全局对象来对待,而这以一个错误作为结尾。
变通的方法是:
创建一个引用来减少引用的对象,并使用它来解决这些引用。
使用一个引用:
varelements=document.forms["mainForm"].elements;
elements.input1.value="junk";
elements.input2.value="junk";
原文:
JavascriptBestPractices
2009.1106
Javascript最佳实践
(2)
标签:
JavaScript,实践
JavaScript
说在前面的话:
这是Javascript最佳实践
(1)的后续篇,同时,这两篇文章都是非常值得推荐的。
来自于JavascriptToolbox,翻译这篇文章,自己获益良多。
分享出来,给各位准备、正在和已经学习了Javascript的同学。
1.在锚点中使用"onclick"替代"javascript:
Pseudo-Protocol"
2.使用一元‘+’号运算符使类型转向Number
3.避免document.all
4.不要在脚本代码块中使用HTML注释
5.避免乱用全局命名空间
6.避免同步的‘Ajax’调用
7.使用JSON
8.使用正确的
在今天,没有任何一个常用的浏览器会忽略掉
由弘一网童保存,尚未注册。
注册
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 14 最佳 js 代码 编写 技巧