结构和样式,行为的分离
2017-05-09 10:00
387 查看
实现高质量的代码需要我们在结构和样式,行为的分离的基础上做到:精简,重用,有序。
精简:尽量减小文件的大小,提高页面加载速度。
重用:提高代码的重用性,减少冗余代码,提高开发速度。
有序:提高代码的结构性,组织好代码结构更利于维护和应变特殊情况。
在我们的工作中你可能会遇到这样的代码,或者说你可能写出这样的代码
多么美丽的代码。。。。
首先,不说代码的合理性,我们只讨论代码的标准,这里的代码没有遵从最基础的web标准-结构样式和行为的分离。上面的代码是一段html,css,js驳杂在一起的代码。为了提高网页性能和方便团队开发,我们应该将结构、样式和行为分别用单独文件分离开,如下。
test.html 文件:
test.css 文件:
test.js 文件
或者你如果实在必须写在html页面内才舒服,那么最好也要用如下用上style和script标签。
精简:尽量减小文件的大小,提高页面加载速度。
重用:提高代码的重用性,减少冗余代码,提高开发速度。
有序:提高代码的结构性,组织好代码结构更利于维护和应变特殊情况。
在我们的工作中你可能会遇到这样的代码,或者说你可能写出这样的代码
<td width="100%" height="20" class="f9pt" align="center"> <font color="#346F0E">下载</font> <input type="text" name="wd" size="40" onMouseOver="this.focus()" onFocus="this.select()" style="margin-bottom:-5px;font-size:16px;height:1.78em;font-family:arial,sans-serif,宋体;padding-top:2px;padding-left:1px" maxlength="100"> </td>
多么美丽的代码。。。。
首先,不说代码的合理性,我们只讨论代码的标准,这里的代码没有遵从最基础的web标准-结构样式和行为的分离。上面的代码是一段html,css,js驳杂在一起的代码。为了提高网页性能和方便团队开发,我们应该将结构、样式和行为分别用单独文件分离开,如下。
test.html 文件:
<link rel=”stylesheet” type=”text/css” href=”test.css” /> <td class="f9pt myTd"> <span class=”myFont”>下载</span> <input type=”text” name=”wd” size=”40” id=”myInput” maxlength=”100” /> </td> <script type=”text/Javascript” src=”test.js”></script>
test.css 文件:
.myTd{width:100%;height:20px;text-align:center;} .myFont{color:#346F0E;} #myInput{margin-bottom:-5px;font-size:16px;height:1.78em;font-family:arial,sansserif,宋体;padding-top:2px;padding-left:1px}
test.js 文件
var myInput = document.getElementById(“myInput”); myInput.onmouseover = function(){ this.focus(); } myInput.onfocus = function(){ this.select(); }
或者你如果实在必须写在html页面内才舒服,那么最好也要用如下用上style和script标签。
<style type=”text/CSS”> .myTd{width:100%;height:20px;text-align:center;} .myFont{color:#346F0E;} #myInput{margin-bottom:-5px;font-size:16px;height:1.78em;font-family:arial,sansserif,宋体;padding-top:2px;padding-left:1px} </style> <td class="f9pt myTd"> <span class=”myFont”>下载</span> <input type=”text” name=”wd” size=”40” id=”myInput” maxlength=”100” /> </td> <script type=”text/Javascript”> var myInput = document.getElementById(“myInput”); myInput.onmouseover = function(){ this.focus(); } myInput.onfocus = function(){ this.select(); } </script>
相关文章推荐
- 编写高质量的代码--基础:结构和样式,行为的分离
- 结构和样式,行为的分离
- 结构和样式,行为的分离
- Javascript 笔记与总结(2-15)结构、样式、行为分离
- 前端开发如何实现结构、样式、行为彻底分离
- 结构-行为-样式-angularJs
- 结构-行为-样式-有趣的函数
- 网页结构层、表示层和行为层的彻底分离
- 实现lightBox时的样式与行为分离减少JS第1/2页
- 结构、表现、行为 分离
- 最大限度的分离table的样式与结构
- 谈谈web前端结构与行为的分离
- web前端结构与行为的分离
- 结构/表现/行为分离的选项卡(jQ版和原生JS版)
- 实用的js 焦点图切换效果 结构行为相分离
- OOCSS(样式和结构的分离与容器和内容的分离)
- 结构/表现/行为完全分离的选项卡(jQ版和原生JS版)
- 结构,表现,行为分离
- OOCSS(样式和结构的分离与容器和内容的分离)
- 表现、结构、行为分离的选项卡效果