编写高质量的代码--基础:结构和样式,行为的分离

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

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

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

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

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

<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>
时间: 2024-10-06 00:59:47

编写高质量的代码--基础:结构和样式,行为的分离的相关文章

[编写高质量iOS代码的52个有效方法](一)Objective-C基础

[编写高质量iOS代码的52个有效方法](一)Objective-C基础 参考书籍:<Effective Objective-C 2.0> [英] Matt Galloway 先睹为快 1.了解Objective-C语言的起源 2.在类的头文件中尽量少引入其他头文件 3.多用字面量语法,少用与之等价的方法 4.多用类型常量,少用#define预处理器指令 5.用枚举表示状态.选项.状态码 目录 编写高质量iOS代码的52个有效方法一Objective-C基础 先睹为快 目录 第1条了解Obje

编写高质量Python代码的59个有效方法

作者Brett Slatkin是 Google公司高级软件工程师.他是Google消费者调查项目的工程主管及联合创始人,曾从事Google App Engine的Python基础架构工作,并利用Python来管理众多的Google服务器.Slatkin也是PubSubHubbub协议的联合创始人,还用Python为Google实现了针对该协议的系统.他拥有哥伦比亚大学计算机工程专业学士学位. 精彩书评 "Slatkin所写的这本书,其每个条目(item)都是一项独立的教程,并包含它自己的源代码.

[编写高质量iOS代码的52个有效方法](三)消息和运行期

[编写高质量iOS代码的52个有效方法](三)消息和运行期 参考书籍:<Effective Objective-C 2.0> [英] Matt Galloway 先睹为快 11.理解objc_msgSend的作用 12.理解消息转发机制 13.用"方法调配技术"调试"黑盒方法" 14.理解"类对象"的用意 目录 编写高质量iOS代码的52个有效方法三消息和运行期 先睹为快 目录 第11条理解objc_msgSend的作用 第12条理解

[编写高质量iOS代码的52个有效方法](十一)系统框架

[编写高质量iOS代码的52个有效方法](十一)系统框架 参考书籍:<Effective Objective-C 2.0> [英] Matt Galloway 先睹为快 47.熟悉系统框架 48.多用块枚举,少用for循环 49.对自定义其内存管理语义的容器使用无缝桥接 50.构建缓存时选用NSCache而非NSDictionary 51.精简initialize与load的实现代码 52.别忘了NSTimer会保留其目标对象 目录 编写高质量iOS代码的52个有效方法十一系统框架 先睹为快

编写高质量JavaScript代码的68个有效方法

简介: <Effective JavaScript:编写高质量JavaScript代码的68个有效方法>共分为7章,分别涵盖JavaScript的不同主题.第1章主要讲述最基本的主题,如版本.类型转换要点.运算符注意事项和分号局限等.第2章主要讲解变量作用域,介绍此方面的一些基本概念,以及一些最佳实践经验.第3章主要讲解函数的使用,深刻解析函数.方法和类,并教会读者在不同的环境下高效使用函数.第4章主要讲解原型和对象,分析JavaScript的继承机制以及原型和对象使用的最佳实践和原则.第5章

编写高质量javascript代码的基本要点

javascript入门比较快,基础方面也比较简单,但如果想写出高质量的javascript代码也绝非易事,下图是在下整理的编写高质量javascript代码的基本要点,希望能够对各位有所帮助.

Effective Python之编写高质量Python代码的59个有效方法

                                                     这个周末断断续续的阅读完了<Effective Python之编写高质量Python代码的59个有效方法>,感觉还不错,具有很大的指导价值.下面将以最简单的方式记录这59条建议,并在大部分建议后面加上了说明和示例,文章篇幅大,请您提前备好瓜子和啤酒! 1. 用Pythonic方式思考 第一条:确认自己使用的Python版本 (1)有两个版本的python处于活跃状态,python2和pyt

[编写高质量iOS代码的52个有效方法](十)Grand Central Dispatch(GCD)

[编写高质量iOS代码的52个有效方法](十)Grand Central Dispatch(GCD) 参考书籍:<Effective Objective-C 2.0> [英] Matt Galloway 先睹为快 41.多用派发队列,少用同步锁 42.多用GCD,少用performSelector系列方法 43.掌握GCD及操作队列的使用时机 44.通过Dispatch Group机制,根据系统资源状况来执行任务 45.使用dispatch_once来执行只需要运行一次的线程安全代码 46.不

JavaScript手札:《编写高质量JS代码的68个有效方法》(一)(1~5)

编写高质量JS代码的68个有效方法(一) *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table, pre { marg