14条最佳js代码编写技巧Word下载.docx
- 文档编号:8214916
- 上传时间:2023-05-10
- 格式:DOCX
- 页数:11
- 大小:29.73KB
14条最佳js代码编写技巧Word下载.docx
《14条最佳js代码编写技巧Word下载.docx》由会员分享,可在线阅读,更多相关《14条最佳js代码编写技巧Word下载.docx(11页珍藏版)》请在冰点文库上搜索。
例子:
if(document.getElementById){
varelement=document.getElementById('
MyId'
else{
alert('
Yourbrowserlacksthecapabilitiesrequiredtorunthisscript!
'
2009.1103
Javascript最佳实践
(1)
标签:
JavaScript,实践
JavaScript
简介
这个文档是基于Javascript社区众多开发者的意见和经验,在开发Javascript代码上的最佳实践和首选的方案的明细表。
因为这是一个推荐的表而非原则性的方案,经验丰富的开发者可能对下面的表达会有略有不同的见解。
文章目录:
3.使用方括号记法
4.避免‘eval’
5.正确地引用表单和表单元素
6.避免‘with’声明
在Javascript中,变量不是全局范围的就是函数范围的,使用"
var"
关键词将是保持变量简洁明了的关键。
当声明一个或者是全局或者是函数级(function-level)的变量,需总是前置"
关键词,下面的例子将强调不这样做潜在的问题。
更好的方法是使用特性检测,在使用一个老浏览器可能不支持的高级的特性之前,首先检测(浏览器的)是否有这个功能或特性,然后使用它。
这单独检测浏览器版本来得更好,即使你知道它的性能。
你可以在
当访问由执行时决定或者包括要不能用"
."
号访问的对象属性,使用方括号记法。
如果你不是一个经验丰富的Javascript程序员,总是使用方括号是一个不错的做法
对象的属性由两种固定的方法来访问:
记法和"
[]"
方括号记法:
号记法
MyObject.property
方括号记法
MyObject["
property"
]
使用"
号,属性名是硬代码,不能在执行时改变。
方括号,属性名是一个通过计算属性名而来的字符串。
字符串要以是硬代码,也可能是变量,甚至可以是一个调回一个字母串值的函数。
如果一个属性名在执行产生,方括号是必须,如果你有"
value1"
"
value2"
和"
value3"
这样的属性,并且想利用变量i=2来访问
这个可以运行:
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则是由页面所定义的。
这页是句法让人非常容易理解(代码的内容),是一个推荐遵循的习惯用法,但不是严格原则。
在Javascript中,eval()功能是一个在执行期中执行任意代码的方法。
在几乎所有的情况下,eval都不应该被使用。
如果它出现在你的页面中,则表明你所做的有更好的方法。
举一个例子,eval通常被不知道要使用方括号记法的程序员所使用。
原则上,"
Evalisevil(Eval是魔鬼)"
。
别使用它,除非你是一个经验丰富的开发者并且知道你的情况是个例外。
所有的HTML表单都应该有一个name属性。
对于XHTML文档来说,name属性是不被要求的,但Form标签中应有相应有id属性,并必须用document.getElementById()来引用。
使用像document.forms[0]这样的索引方法来引用表单,在几乎所有情况下,是一个糟糕的做法。
有些浏览器把文档中使用form来命名的元素当作一个可用的form属性。
这样并不可靠,不应该使用。
下面这个例子用使用方括号和正确的对象引用方法来展示如何防止错误地引用一个表单的input:
正确引用表单Input:
formname"
inputname"
糟糕的做法:
document.formname.inputname
如果你要引用一个函数里的两个表单元素,较好的做法是先引用这个form对象,并将其储存在变量中。
这样避免了重复查询以解决表单的引用:
varformElements=document.forms["
mainForm"
].elements;
formElements["
input1"
].value="
a"
;
input2"
b"
当你使用onChange或者其他类似的事件处理方法,一个好的做法是总是通过一个引来把input元素本身引用到函数中来。
所有input元素都带有一个对包含其在内的Form表单有一个引用:
<
inputtype="
text"
name="
address"
onChange="
validate(this)"
>
functionvalidate(input_obj){
//引用包含这个元素的form
vartheform=input_obj.form;
//现在你可以不需要使用硬代码来引用表单自身
if(theform.elements["
city"
].value=="
){
Error"
通过对表单元素的引用来访问表单的属性,你可以写一个不包含硬代码的函数来引用这个页面中任何一个有特定名的表单。
这是一个非常好的做法,因为函数变得可重用。
避免‘with’
Javascript中的with声明在一个作用域的前端插入一个对象,所以任何属性/变量的引用将会倚着对象被首先解决。
这通常被用作一个避免重复引用的快捷方法:
使用with的例子:
with(document.forms["
].elements){
input1.value="
junk"
input2.value="
但问题在于程序员并没有方法来验证input1或input2实际上已经被当作Form元素数组的属性来解决。
它首先以为这些名来检测属性,如果找不到,它将会继续(向下)检测这个作用域。
最后,它在全局对象中尝试把input1和input2作为一个全局对象来对待,而这以一个错误作为结尾。
变通的方法是:
创建一个引用来减少引用的对象,并使用它来解决这些引用。
使用一个引用:
varelements=document.forms["
elements.input1.value="
elements.input2.value="
原文:
JavascriptBestPractices
2009.1106
Javascript最佳实践
(2)
说在前面的话:
这是Javascript最佳实践
(1)的后续篇,同时,这两篇文章都是非常值得推荐的。
来自于JavascriptToolbox,翻译这篇文章,自己获益良多。
分享出来,给各位准备、正在和已经学习了Javascript的同学。
1.在锚点中使用"
onclick"
替代"
javascript:
Pseudo-Protocol"
2.使用一元‘+’号运算符使类型转向Number
3.避免document.all
4.不要在脚本代码块中使用HTML注释
5.避免乱用全局命名空间
6.避免同步的‘Ajax’调用
7.使用JSON
8.使用正确的<
script>
标签
如果你想在<
a>
标签中触发Javascript代码,选择onclick而非JavaScript:
pseudo-protocol;
使用onclick来运行的Javascript代码必须返回ture或者false(oranexpressionthanevaluestotrueorfalse[这句要怎么翻译呢?
我是这样理解的:
一个优先性高于true或false的表达式])来返回标签本身:
如果返回true,则锚点的href将被当作一个一般的链接;
如果返回false,则href会被忽略。
这就是为什么"
returnfalse;
经常被包含在onclick所处理代码的尾部。
正确句法:
ahref="
javascript_required.html"
onclick="
doSomething();
returnfalse;
go<
/a>
在这个实例中,"
doSomething()"
函数(定义于页面的某个角落)将在被点击时调用。
href将永远不会被启用了Javascript的浏览器访问。
在你可以提醒Javascript是必须的、而用户未启用之的浏览器中,文档javascript_required.html才会被加载。
通常,当你确保用户将会开启Javascript支持,为尽量简化,链接将只包含href="
#"
而这个做法是不被鼓励的。
通常有一个不错的做法是:
可以提供没用启用javascript一个返回本地的页面。
有时,众多想要分情况来访问一个链接。
例如,当一个用户要离开你的一个表单页面,而想先验证来确保没有东西被改变。
在这个情况下,你的onclick将会访问一个返回询问链接是否应该被遵循的函数:
有条件的链接访问:
/"
onClick="
returnvalidate();
Home<
functionvalidate(){
returnprompt("
Areyousureyouwanttoexitthispage?
在这个实例中,validate()函数必须只返回ture或false。
ture的时候用户将被允许问题home页面,或false的时候链接不被访问。
这个例子提示确认(其行为),以访问ture或false,这完全由用户点击"
确实"
或者"
取消"
决定。
下面是一些"
不应该"
的例子。
如果你在自己的页面中看到下面这样的代码,这是不正确的,需要被修改:
什么是不应该做的:
link<
在Javascript中,"
+"
号运算符同时充当数学加号和连接符。
这会在form表单的域值相加时出现问题,例如,因为Javascript是一个弱类型语言,form域的值将会被当作数组来处理,而你把它们"
一起的时候,"
将被当成连接符,而非数学加号。
有问题的例子:
formname="
myform"
action="
[url]"
val1"
value="
1"
val2"
2"
/form>
functiontotal(){
vartheform=document.forms["
];
vartotal=theform.elements["
].value+theform.elements["
].value;
alert(total);
//这个将会弹出"
12"
但你想要的是3!
解决这个问题,Javascript需要一个提示来让它把这些值当做数字来处理。
你可以使用"
号来把数组转换成数字。
给变量或者表达式前置一个"
号将会强制其当作一个数字来处理,而这也将使得数学"
得以成功应用。
修改好的代码:
vartotal=(+theform.elements["
].value)+(+theform.elements["
].value);
//Thiswillalert3
document.all是由Microsoft的IE所引进的,并不是一个标准的JavascriptDOM特性。
尽管大多数新的浏览器支持它以支持依赖于它的糟糕代码,(而)还有很多浏览器是不支持的。
并没有理由其他方法都不适用,而一个老的IE浏览器(<
5.0)需要支持,而在Javascript中使用document.all作为一个折衷方法。
你并不需要使用document.all来检测其是不是IE浏览器,因为其他浏览器现在一般都支持。
只把document.all当做最后的选择:
varobj=document.getElementById("
myId"
elseif(document.all){
varobj=document.all("
一些使用document.all的原则:
∙同尝试其他方法
∙当其作为最后的选择
∙当需要支持5.0版本以下的IE浏览器
∙总是使用"
if(document.all){}"
来查看是否支持.
在Javascript的旧日子(1995)里,诸如Netscape1.0的一些浏览器并不支持或认识<
标签。
所以,当Javascript第一次被发布,需要有一个技术来让实些代码不被当做文本显示于旧版浏览器上。
有一个"
hack"
是在代码中使用HTML注释来隐藏这些代码。
使HTML注释并不好:
scriptlanguage="
javascript"
!
--
//codehere
//-->
/script>
在今天,没有任何一个常用的浏览器会忽略掉<
因此,再没必要隐藏Javascript源代码。
事实上,它还可以因为下面的理由,被认为是无益的:
∙在XHTML文档中,源代码将向所有浏览器隐藏并被渲染成无用的(内容);
∙–在HTML注释并不允许,这个会让任何递减操作将失效。
一般很少需要全部变量和函数。
全局使用将可能导致Javascript源文件文档冲突,和代码中止。
因此,一个好的做法是在一个全局命名空间内采用函数性的封装。
有多个方法可以完成这个任务,有此相对比较复杂。
最简单的方法是创建一个全局对象,并把属性和方法指派给这个对象:
创建一个命名空间:
varMyLib={};
//globalObjectcointainer
MyLib.value=1;
MyLib.increment=function(){MyLib.value++;
MyLib.show=function(){alert(MyLib.value);
MyLib.value=6;
MyLib.increment();
MyLib.show();
//alerts7
命名空间也可以使用Closures(闭包?
)来创建,并且PrivateMemberVariables(私有变量?
)也可以伪装于Javascript中。
当使用"
Ajax"
请求时,你要么选择异步模式,要么使用同步模式。
当浏览器行为可以继续执行,异步模式将请求放在后台执行,同步模式则会等待请求完成后才继续。
应该避免同步模式做出的请求。
这些请求将会对用户禁用浏览器,直至请求返回。
一旦服务器忙,并需要一段时间来完成请求,用户的浏览器(或者OS)将不能做任何其他的事,直至请求超时。
如果你觉得自己的情况需要同步模式,最大的可能是你需要时间来重新想一下你的设计。
很少(如果有的话)实际上需要同步模式的Ajax请求。
当需要将数据结构存储成纯文本,或者通过Ajax发送/取回数据结构,尽可能使用JSON代替XML。
JSON(JavaScriptObjectNotation)是一个更简洁有效的数据存储格式,并且不依赖任何语言(andisalanguage-neutral)。
不造成在<
中的使用LANGUAGE属性。
一个合适的方式是创建如下的Javascript代码块:
scripttype="
text/javascript"
//codehere
由弘一网童保存,尚未注册。
注册
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 14 最佳 js 代码 编写 技巧