所谓规规矩矩的写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对象解析来实现。
分享到：
相关推荐
通达信指标公式源码 规规矩矩做波段副图指标.doc
软件更新想必大家都用过，很多是用友盟的下载，但是也有自己公司服务器下载的处理方式，本文主要讲解的是自己下载的处理方法 想必大家就会说，这还用自己做呀，系统自带的一... 好吧，既然这样还是规规矩矩的自己写吧
通达信指标公式源码规规矩矩做波段（波段操作，配合其它顶底指标使用）.doc
将input和img放同一行，img标签总是比input高出一个头，非常难看。之前试过好多方法，都不行。...后来无意中发现同时给input和img添加vertical-align:middle就行： ...这样代码就会规规矩矩地水平对齐了。
一款很有意思的插件，可以通过编辑网格点来实现规规矩矩的模型发生形变保存成动画，觉得编辑的点少可以做模型的时候多添加几段点线，
内容索引:C#源码,菜单窗体,T形窗体,异形窗体,半透明 用C#实现半透明的T形窗体，一个典型的异形窗体实现实例，除了平时我们看到的规规矩矩的窗体外，不规则窗体的应用也越来越广泛，了解异形窗口的创建，对灵活掌握...
子窗口，我们想使这些子窗口排列得规规矩矩，互不重叠，当父窗口的尺寸变了时各个子窗 口能适时调整自己的尺寸和位置，使各个子窗口之间的位置大小比例关系不变。当移动其中 一个或几个子窗口时，别的子窗口能及时为...
里面的内容规规矩矩，有板有眼，没有那种大气，也没有很深入的讲解，好像一本规矩的教科书，所以一开始我非常不了解他为什么被称作“圣经”。 这本书我读了至少3遍，从大二初，一直到大三上学期，期间我在做开发的...
路径方向与非零环绕原则平时我们画的图形都是规规矩矩的，那么如果我们用线条画了个抽象派作品，就像下面这图一样，童鞋们知道怎么用fill()染色呢？ 这里就要用到数学上的一个方法——非零环绕原则，来判断哪块区域...