规规矩矩的写Javascript代码

所谓规规矩矩的写Javascript代码,强调的就是不要把Javascript代码混杂到Html代码里,服务端编程一般强调MVC分离,客户端编程一样存在这样的分离:我们可以把Html看作是M,而Css看做是V,至于Javascript则看成是C。

01 <html>
02 <head>
03 <title>DEMO</title>
04 <script type="text/javascript">
05 function demo(id, name) {
06     alert("id: " + id + ", name: " + name);
07 }
08 </script>

09 </head>
10 <body>
11 <ul id="list">
12 <li id="prefix_1" onclick='demo(1, "a");'>a</li>
13 <li id="prefix_3" onclick='demo(3, "b");'>b</li>
14 <li id="prefix_5" onclick='demo(5, "c");'>c</li>
15 </ul>

16 </body>
17 </html>


上面的代码是典型的混合编码方式,一个主要特征是事件触发使用的是html硬编码的onclick方式,这无疑不满足我们上面所说的MVC分离,所以应该重构,使用DOM的方式动态添加,具体如下:

01 <html>
02 <head>
03 <title>DEMO</title>
04 </head>
05 <body>
06 <ul id="list">
07 <li id="prefix_1">a</li>
08 <li id="prefix_3">b</li>
09 <li id="prefix_5">c</li>
10 </ul>

11 <script type="text/javascript">
12 var child = document.getElementById("list").childNodes;
13 for (var i = 0; i < child.length; i++) {
14     if (child[i].tagName != "LI") {
15         continue;
16     }
17     child[i].onclick = function() {
18         alert("id: " + this.id.split("_")[1] + ", name: " + this.innerHTML);
19     }
20 }
21 </script>

22 </body>
23 </html>


重构之后,html干净了,javascript代码则统一放到了页面底部,可以进一步放到一个js文件里以便缓存。动态添加事件时,事件方法里所需要的数据最好都通过DOM元素获得,比如id,或者innerHTML(顺便说一句,innerText是IE ONLY的,一般不用)。

有人喜欢使用自定义属性来设置参数,然后通过document.getElementById("...").getAttribute("...");获取:

<li myid="1" myname="foobar">foobar</li>

但这样的页面无法通过w3c有效性判断(Html5允许自定义名字是data-开头的属性,但Html5离正式应用还有好长一段路要走),不是一个好方法。

还有一些人喜欢把数据放到class属性里,然后通过document.getElementById("...").className获取:

<li class="id:1 name:foobar">foobar</li>

虽然如此能通过w3c验证,但毕竟class是供Css使用的,如此一来就不满足我们前面说的MVC分离了。

最后一点需要说明的是,在循环里定义方法时,千万注意不要掉入闭包的陷阱,比如说上面代码里this.innerHTML,如果换成child[i].innerHTML,这会始终指向最后一个循环元素。

 

 

 

看了以上转载,一个想法:HTML代码中只设置id 、name基础属性。CSS、event可以通过DOM对象解析来实现。

你可能感兴趣的:(JavaScript,编程,mvc,html5,css)