`

规规矩矩的写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对象解析来实现。

分享到:
评论

相关推荐

    android 自己写的downaloadmanager

    软件更新想必大家都用过,很多是用友盟的下载,但是也有自己公司服务器下载的处理方式,本文主要讲解的是自己下载的处理方法 想必大家就会说,这还用自己做呀,系统自带的一... 好吧,既然这样还是规规矩矩的自己写吧

    通达信指标公式源码规规矩矩做波段(波段操作,配合其它顶底指标使用).doc

    通达信指标公式源码规规矩矩做波段(波段操作,配合其它顶底指标使用).doc

    通达信指标公式源码 规规矩矩做波段副图指标.doc

    "规规矩矩做波段副图指标"是通达信中的一种自定义技术指标公式,旨在帮助投资者识别市场的波动趋势,从而进行更为精准的买卖决策。 这个公式的核心部分是计算"波段线",它是基于移动平均线(SMA)和价格摆动指数...

    河北省2018年中考语文第3部分专题2一对联标语的拟写和仿写复习检测

    例如,上联“规规矩矩写字”,下联可以是“认认真真作文”,这样既保持了字数和词性的对应,也保持了内容的关联性。 标语的拟写则更偏向于实际应用,通常要求简洁明了、具有吸引力,并能有效传达信息。例如,针对...

    滨州市八年级语文3月月考试卷及答案.doc

    7. 对联写作:上联为“规规矩矩写字”,要求写出下联,这涉及到对仗和平仄等对联创作的基本规则。 8. 演讲理解:莱特兄弟的演讲中使用了比喻,这考察了学生对语言寓意的理解和分析能力。 9. 文化宣传:拟写关于...

    VBA常见错误原因分析

    * 规规矩矩定义Option Explicit Dim rg As Range Sub MyCode() Set rg = ActiveCell MsgBox rg.Address End Sub * 变量可以不定义,但这是不推荐的做法。 1.1.2 对象变量的类型不存在或缺少引用 在VBA编程中,...

    培训课件 -PPT美化培训-关于美化这件事.pdf

    在PPT设计中,审美是非常重要的一方面,文章引入了Momo老师的审美造型理论,强调了PPT设计的规规矩矩性和一致性,并提供了一些PPT设计的Tips,例如统一字体、颜色不花等。 最后,文章总结了PPT美化的重要性,并强调...

    部编版2021年三年级语文上册期中考试题一.pdf

    5. 词语替换:用同义词替换句子中的词语,如“规规矩矩”替换“谨守礼法”,检查学生的词汇理解和应用能力。 6. 句式转换:包括直述句改转述句、陈述句改反问句,以及仿写句子,如“石头梆的一声落在地上”,考察...

    excel中输入身份证号后三位变成0现象的解决方法介绍.docx

    因为身份证号作为一串固定的数字并没有运算需求,应该归属于规规矩矩的文本。 下面,我们来介绍三种解决方法: 方法一:使用英文半角的“'”号 在表格中输入英文半角的“'”号(冒号后面那个键),其作用就是将该...

    毕业班学生实习心得体会.doc

    5. 做人原则和职业道德:实习让学生理解并践行企业文化和价值观,如“规规矩矩做人、规规矩矩做事”的原则,诚信和正直在人际交往和职业生涯中的重要性。 6. 角色转变:从学生到职场人士的角色转换,意味着责任和...

    成人大专机电一体化自我鉴定.pdf

    2. **职业素养**:实习期间,作者体会到了“规规矩矩做人,规规矩矩做事”的企业文化和工作原则,明白了诚信、诚实待人对于个人发展的重要性。这表明个人品质和职业道德在职场中的重要地位。 3. **学习态度与方法**...

    税务库货太多情况说明.docx

    描述中提到的“假如公司规规矩矩不偷税,账面上的库存都有实物在仓库”,这意味着企业应该确保其财务报表的真实性,库存量与实物相符。如果库存过多,企业需要考虑库存积压带来的额外成本,如仓储费用、运输费用、...

    万州2011-2012年第一学期期中七年级语文试题及答案精选.doc

    1. **语文学习方法**:题目中提到的“学习语文,应养成良好的学习习惯”,强调了语文学习的基础在于养成好的习惯,如字要规规矩矩地写,话要说得清楚明白,课文要读得透彻,练习要做得扎实,作文要认真对待。...

    大学毕业班学生实习心得体会3篇.docx

    在海规公司,他深刻理解了“规规矩矩做人、规规矩矩做事”的企业精神,体会到诚实、正直在职场中的重要性。实习让他意识到,无论在学校还是工作中,都需要不断学习和自我提升,以适应不断变化的环境。 3. 黄嘉璐...

    七年级语文上册(第一单元)综合测试题(无答案) 新人教版 试题.doc

    6. **语文学习习惯**:强调“字要规规矩矩地写,话要清清楚楚地说,课文要仔仔细细地读,练习要踏踏实实地做”,培养良好的学习习惯。 7. **生活哲理应用**:通过《走一步,再走一步》的故事,引导学生面对困难时...

    小学四年级操行评语.doc

    7. 自我提升:鼓励学生改进不足,如“上课还不够专心”,并提出具体改进建议,如“静下心来写作业”、“规规矩矩地坐在课堂上”。 8. 学习策略:提倡学生运用有效学习方法,如“专心致志地听讲”、“认认真真地完成...

    半透明T形窗体的C#实现

    内容索引:C#源码,菜单窗体,T形窗体,异形窗体,半透明 用C#实现半透明的T形窗体,一个典型的异形窗体实现实例,除了平时我们看到的规规矩矩的窗体外,不规则窗体的应用也越来越广泛,了解异形窗口的创建,对灵活掌握...

    2016春三年级语文下册白公鹅随堂练习题无答案鲁教版.doc

    另外,还有一组是AABB式的词语,如“偷偷摸摸”、“从从容容”,对应的仿写可以是“高高兴兴”、“大大咧咧”、“规规矩矩”、“沸沸扬扬”。 三、词语选用:这部分考察了学生对同义词的理解和应用。例如,“美丽”...

    五年级上册写字教学计划.doc

    通过写字,不仅让学生掌握汉字的基本技能,还能培养他们的耐心和专注力,促进他们形成“规规矩矩写字,堂堂正正做人”的人生观。 二、写字教学遵循的原则 1. 直观性:教学过程中注重生动性和示范性,让学生通过观察...

Global site tag (gtag.js) - Google Analytics