你的位置:齐鲁公社 >> 科教 >> 电脑网络 >> 网页设计 >> 详细内容 在线投稿

编写JS代码需要养成的14条习惯

99书城会员招募      特惠酒店,尽享关怀
热度114票  浏览266次 【共0条评论】【我要评论 时间:2009年11月13日 15:12
齐鲁公社:?0u;S'G}3e

        编写程序代码,智者见智,仁者见仁,每个人都有不同的思路和方法。但参考一下别人好的经验总是有益的,下面摘录了 Javascript Toolbox 发布的 14条编写JS代码的技巧 ,由Sofish翻译(1,2)。齐鲁公社(yCZ Q,G|,s9}

#eKi]!|@ b4?01.使用正确的 <script> 标签

z;Y!y(W9q8YV0 齐鲁公社4Z W Vf@Q}%`[

不造成在 <script> 中的使用LANGUAGE 属性。一个合适的方式是创建如下的 Javascript 代码块:

Mz@.g(vy0 齐鲁公社f ya}V4Vn

<script type="text/javascript">
$d6B1v;p'U nv0// code here
9l:Rj#ep?o_:FT0</script>齐鲁公社ia1F d2^bK

齐鲁公社t%ppCx.m7z`

2. 总是使用 ‘var’齐鲁公社:jY y%Eq K3G

齐鲁公社#Zq X:er{ s I(L

在JavaScript中,变量不是全局范围的就是函数范围的,使用”var”关键词将是保持变量简洁明了的关键。当声明一个或者是全局或者是函数级(function-level)的变量,需总是前置”var”关键词,下面的例子将强调不这样做潜在的问题。

{ A2@6c b0

Ek T$T6fqV0不使用 Var 造成的问题

;kWr Ax _6y0 齐鲁公社:h#xMn6CI

var i=0; // This is good - creates a global variable
s6k$D+W;fxFQ0function test() {齐鲁公社)v;M EP*V'M'y
   for (i=0; i<10; i++) {齐鲁公社S'n6Oi$Pp6be
      alert("Hello World!");
6?v-P"Z}[t6xp$G X0   }齐鲁公社EH tHcv9u
}齐鲁公社f:PT Mm
test();齐鲁公社 S|SU,D9]
alert(i); // The global variable i is now 10!齐鲁公社 h0~ V/ot j i%i
因为变量函数中变量 i 并没有使用 var 使其成为函数级的变量,在这个例子中它引用了全局变量。总是使用 var 来声明全局变量是一个很多的做法,但至关重要的一点是使用 var 定义一个函数范围的变量。下面这两个方法在功能上是相同的:齐鲁公社0cd/M/O~ KRwA.P

gwt+l2|0正确的函数齐鲁公社 T$~s-P8^E|0R

齐鲁公社)E:x1}u~R)NCJ

function test() {
+YqXQ8F]4}0   var i=0;齐鲁公社K#z"uSd4I_ b
   for (i=0; i<10; i++) {
*a7xY&{,g2a3Pf9m0      alert("Hello World!");齐鲁公社!g4o&M-a&Sk^T
   }齐鲁公社#j[rK${\+S(E
}齐鲁公社#l qj;D:tG.~
正确的函数

u!R*G9Q5eD7m0 齐鲁公社'P4n%Q7x uv ~

function test() {齐鲁公社 _y1})J;o3e7u
   for (var i=0; i<10; i++) {齐鲁公社's9M0G{.M"f
      alert("Hello World!");
"KCvM3L0   }齐鲁公社8R#JK0y^Qg%B-]
}

%SV%qs8nr)o0

@#cc.P)@.p03. 使用方括号记法

$_m~[Lu;R.W@\0 齐鲁公社 N6_7B{H

当访问由执行时决定或者包括要不能用”.”号访问的对象属性,使用方括号记法。如果你不是一个经验丰富的Javascript程序员,总是使用方括号是一个不错的做法

o;Fvv$YS5ou-[5[|[ s0

a$lFB7N:p3F0对象的属性由两种固定的方法来访问:”.”记法和”[ ]“方括号记法:

Vv5BuKFs^0 齐鲁公社h1Fu*c u$p:`

“.”号记法

#F5o#i&W$[G\K5E7I0 齐鲁公社/L,i3@-ff7h

MyObject.property“[ ]“齐鲁公社/?u&n*zEDN
方括号记法齐鲁公社nv5E#?TB

齐鲁公社!a:s-A#pG8S.U?)b

MyObject["property"]
p\8r*E3kU1|0使用”.”号,属性名是硬代码,不能在执行时改变。使用”[ ]“方括号,属性名是一个通过计算属性名而来的字符串。字符串要以是硬代码,也可能是变量,甚至可以是一个调回一个字母串值的函数。 如果一个属性名在执行产生,方括号是必须,如果你有 “value1″, “value2″, 和 “value3″这样的属性,并且想利用变量 i=2来访问。齐鲁公社-g?4X!c${-z7|r

齐鲁公社k8efl ]uFI"y

这个可以运行:

{1Mn\VBR0

+A#mj ]0l2jO0MyObject["value"+i]齐鲁公社ixR.]b?|-O
这个不可以:齐鲁公社6N ^ l3_&eH-w

齐鲁公社 XiT:h|'L

MyObject.value+i齐鲁公社vT1y N&Z5_@B
并且在某些服务器端环境(PHP、Struts等)下,Form 表单被附加了 [ ] 号来表示 Form 表单在服务器端必须被当作数组来对待。如此,用”.”号来引用一个包含 [ ] 号的字段将不会执行,因为 [ ] 是引用一个 Javascript 数组的语法。所以,[ ] 号记法是必须的:

^ `8s"D%A c{ql9i0

HDw(]5cJ0这个可以运行:齐鲁公社([0T!uW9Ck'y6y

齐鲁公社] @2e j zG

formref.elements["name[]"]
rs#k8\Z$@/?c _0这个不可以:齐鲁公社G*Lo }qk"hF;B

齐鲁公社e6T8SLn']M

formref.elements.name[]齐鲁公社L3}1Ih^dw!\9^8m
推荐使用”[ ]“方括号记法是说当其需要时(明显地)总是使用它。当不是严格需要使用它的时候,它是一个私人的偏好和习惯。一个好的经验原则是,使用”.”号记法访问标准的对象属性,使用”[ ]“方括号记法访问由页面定义的对象属性。这样,document["getElementById"]() 是一个完美可行的”[ ]“方括号记法用法,但 document.getElementById() 在语法上是首选,因为 getElementById 是一个 DOM 规范中定义的一个标准文档对象属性。混合使用这两个记法使哪个是标准对象属性,哪个属性名是由上下文所定义的,在代码中显得清晰明了:齐鲁公社K4imC+UH#|n1X f

n*Nv*z Z*Sw ]$S0document.forms["myformname"].elements["myinput"].value
#L jR:aag0这里,forms 是 document 的一个标准属性,而表单名 myformname 则是由页面所定义的。同时,elements 和 value 属性都是由规范所定义的标准属性。而 myinput 则是由页面所定义的。这页是句法让人非常容易理解(代码的内容),是一个推荐遵循的习惯用法,但不是严格原则。齐鲁公社sn9c$RG4q

"?:J7N.z*i)xN;B+fS3r04.特性检测而非浏览器检测齐鲁公社+rt c Hc5VA/f(o3q

齐鲁公社;| qO}dk w,N W

一些代码是写来发现浏览器版本并基于用户正使用的客户端的对其执行不同行为。这个,总的来说,是一个非常糟的实践。更好的方法是使用特性检测,在使 用一个老浏览器可能不支持的高级的特性之前,首先检测(浏览器的)是否有这个功能或特性,然后使用它。这单独检测浏览器版本来得更好,即使你知道它的性 能。你可以在 http://www.jibbering.com/faq/faq_notes/not_browser_detect.html 找到一个深入讨论这个问题的文章。

9U'tsVH^zy0 齐鲁公社\K?m.^ T9LI

例子:齐鲁公社Q"z6}B3AF.XIG h

s?(bkH ~2g6Y1l#kw0if (document.getElementById) {
0M z)H osX7L0   var element = document.getElementById('MyId');齐鲁公社!ypRQg g:zh
}
0Dg7@"S9nF0else {齐鲁公社W5GMd0[k-~
   alert('Your browser lacks the capabilities required to run this script!');
KetK1v@[0}

Zx,Qg(v.|*V`0 齐鲁公社?f3U)[0{G]V V pF

5. 避免 ‘eval’

e"e-Ax&If v0 齐鲁公社+Y(nj?0R1B`0e

在Javascript中,eval()功能是一个在执行期中执行任意代码的方法。在几乎所有的情况下,eval 都不应该被使用。如果它出现在你的页面中,则表明你所做的有更好的方法。举一个例子,eval 通常被不知道要使用方括号记法的程序员所使用。

4};^}"[m{0 齐鲁公社-R+M4Xo5Hl4kO:I1S2M

原则上,”Eval is evil(Eval是魔鬼)”。别使用它,除非你是一个经验丰富的开发者并且知道你的情况是个例外。齐鲁公社Q6p4H!_9@G"m]6e

齐鲁公社tsk'To(qAX

6. 在锚点中使用 “onclick” 替代 “javascript: Pseudo-Protocol”齐鲁公社1d)vh5yzKy

j-@ f4gy(P~0如果你想在 <a> 标签中触发Javascript 代码,选择 onclick 而非 JavaScript: pseudo-protocol;使用 onclick 来运行的 Javascript 代码必须返回 ture 或者false(or an expression than evalues to true or false [这句要怎么翻译呢? 我是这样理解的:一个优先性高于true 或 false 的表达式])来返回标签本身:如果返回 true,则锚点的 href 将被当作一个一般的链接;如果返回 false,则 href 会被忽略。这就是为什么”return false;” 经常被包含在 onclick 所处理代码的尾部。

LU*`[lb0 齐鲁公社9pP_:i6|uT

正确句法:

A&L.B{`-y8w0 齐鲁公社 d8a,NPrp

<a href="javascript_required.html" onclick="doSomething(); return false;">go</a>
&\tn JpF@el0在这个实例中,”doSomething()” 函数(定义于页面的某个角落)将在被点击时调用。href 将永远不会被启用了Javascript 的浏览器访问。在你可以提醒Javascript 是必须的、而用户未启用之的浏览器中,文档 javascript_required.html 才会被加载。通常,当你确保用户将会开启 Javascript 支持,为尽量简化,链接将只包含 href=”#”。 而这个做法是不被鼓励的。通常有一个不错的做法是:可以提供没用启用 javascript 一个返回本地的页面。

-]QH3d#qp%I*| i0 齐鲁公社5I*aq.M-e;j

有时,众多想要分情况来访问一个链接。例如,当一个用户要离开你的一个表单页面,而想先验证来确保没有东西被改变。在这个情况下,你的 onclick 将会访问一个返回询问链接是否应该被遵循的函数:

ma!p,@]v0

#?!Ga:qFS'G y7S|i&n@6o0有条件的链接访问:

.^#zxtz0

irL#I&qr:vh0<a href="/" onClick="return validate();">Home</a>

#BmL%KI"N0 齐鲁公社c9?] ]V3S I#c

function validate() {齐鲁公社2|'`f7_.i5S.O|
 return prompt("Are you sure you want to exit this page?");
.U}+_VI6`0}
cv:\u'Um J!B0在这个实例中,validate() 函数必须只返回 ture 或 false。ture 的时候用户将被允许问题 home 页面,或 false 的时候链接不被访问。这个例子提示确认(其行为),以访问 ture 或 false,这完全由用户点击”确实”或者”取消”决定。

9vvS0s_+E8Mm#}x0

4W3m7F.`)S'u a0下面是一些”不应该”的例子。如果你在自己的页面中看到下面这样的代码,这是不正确的,需要被修改:

(mgw.zk%G C0 齐鲁公社8w@+C L9f4x9S["V8k

什么是不应该做的:齐鲁公社9Sw([X7F

齐鲁公社p3u}PJ;k&H#U

<a href="javascript:doSomething()">link</a>齐鲁公社u |4t3W5M`{8O'a
<a href="#" onClick="doSomething()">link</a>
Z-F \4wzb\7D|Q2p8}Q,t0<a href="#" onClick="javascript:doSomething();">link</a>齐鲁公社 f*Q-r E8d4yakVv Q
<a href="#" onClick="javascript:doSomething(); return false;">link</a>齐鲁公社+k B@)H4Oz DM

齐鲁公社 i(JG$^b6M+w%]

7.避免同步的 ‘Ajax’ 调用

T1K m)eY,U| H_;y0q0 齐鲁公社D3S#Utq'c} L1v

当使用”Ajax”请求时,你要么选择异步模式,要么使用同步模式。当浏览器行为可以继续执行,异步模式将请求放在后台执行,同步模式则会等待请求完成后才继续。

m2ox k{T7IL r6I0 齐鲁公社^7A)[} H7H(L

应该避免同步模式做出的请求。这些请求将会对用户禁用浏览器,直至请求返回。一旦服务器忙,并需要一段时间来完成请求,用户的浏览器(或者 OS)将不能做任何其他的事,直至请求超时。齐鲁公社 wp C E IL0M

齐鲁公社3X u4b f W

如果你觉得自己的情况需要同步模式,最大的可能是你需要时间来重新想一下你的设计。很少(如果有的话)实际上需要同步模式的 Ajax 请求。
Q.]+|%m*LeI0齐鲁公社 d.Y0g v Q

齐鲁公社I's wd7}]INc,C

ts]`#SNG0
顶:32 踩:31
【已经有51人表态】
5票
感动
4票
路过
5票
高兴
5票
难过
13票
搞笑
4票
愤怒
8票
无聊
7票
同情
上一篇 下一篇
查看全部回复【已有0位网友发表了看法】

网络资源

合作伙伴