结构和样式，行为的分离

结构和样式，行为的分离

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

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

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

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

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

　　下载　　

多么美丽的代码。。。。

首先，不说代码的合理性，我们只讨论代码的标准，这里的代码没有遵从最基础的web标准-结构样式和行为的分离。上面的代码是一段html，css，js驳杂在一起的代码。为了提高网页性能和方便团队开发，我们应该将结构、样式和行为分别用单独文件分离开，如下。

test.html 文件：

　　下载　　

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

下载

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。