结构和样式,行为的分离

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了结构和样式,行为的分离相关的知识,希望对你有一定的参考价值。

实现高质量的代码需要我们在结构和样式,行为的分离的基础上做到:精简,重用,有序。

精简:尽量减小文件的大小,提高页面加载速度。

重用:提高代码的重用性,减少冗余代码,提高开发速度。

有序:提高代码的结构性,组织好代码结构更利于维护和应变特殊情况。

 

 

在我们的工作中你可能会遇到这样的代码,或者说你可能写出这样的代码

技术分享

<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标签。

技术分享

下载

技术分享


以上是关于结构和样式,行为的分离的主要内容,如果未能解决你的问题,请参考以下文章

行为 样式 结构 相分离的网站

行为样式结构相分离的页面

我对于前端开发的一些基本准则

《编写高质量代码》--笔记

结构与表现的分离

Jquery行为层和表示层的分离