1、前言
网页开发技术从1989年开始至今已经走过了20余年,从最初纯粹的学术交流,到门户网站、电子商务网站、博客、E-mail、Web游戏、SNS网站等,以及到如今的移动Web网站(其实可以认为是PCWeb开发的一个延伸)的开发,已经涉及到我们的工作、学习、生活等各个方面。
网页开发在外行人眼中也许有难度,高不可攀,但是对于内行人来说,是很简单 的,只要有一个文本编辑器,有个入门的教程,就可以制作属于自己的网页。但是在开发网页的时候,不仅仅是要求实现心中的模型,更要考虑我们开发出来的代码 的可维护性,为将来可能出现的变化做好一切的准备。
请对照你曾经开发过的网页代码,看看在你的代码中是否存在着以下的问题:
- 没有一个合理的网页布局,div布局、table布局随处可见,到处混用;
- HTML标签名称大小写不统一,一会大写,一会小写,更有甚者,同一个名称中都会出现大小写混合的场景;
- 标签属性定义的时候,有的属性值加引号,有的属性名称不加引号,甚至,同一个标签的多个属性值,有的有引号,有的没有引号;
- 代码中出现已经被淘汰不再使用的标签、属性;
- CSS样式组织混乱,<style>标签定义样式、<link>标签外链、标签内style属性直接定义这三种定义方式随处都有;
- Javascript代码随处可见,<script>标签内、直接写在HTML标签内;
- Javascript代码和CSS代码随处可见,凌乱不堪;
- Javascript代码风格不一,缩进有使用四格Tab键、八格Tab键、直接多个Space缩进,原生Javascript、jQuery编码方式等,各式各样的风格并存;
- 任何HTML代码、CSS代码、Javascript代码中看不到一点注释;
- 。。。。。。
如果你的代码中存在上面所列出的问题的话,那你维护这样的前端代码要付出的成本,我想我不告诉你,你也是可以想象到的,要是你想象不到,那我就无话可说了。。。于是,就有了所谓的Web标准。Web标准,用最简单的话来说,就是把网页的结构(HTML)、样式(CSS)和行为(Javascript)进行分离,当然标准在哪里?那就必须是W3C这样权威的组织推行的Web标准了。
虽然存在Web标准,但是前端工作的维护在现实中确实存在中很大的难度,之于原因,借鉴了一些权威书籍的介绍,这里简单做一个说明:
- 浏览器的角度:在现在浏览器遍地开花的时代,移动端也是同样如此,不同的浏览器对前端代码的解析存在着很多差异性,所以对于每一个做前端的开发人员来说,浏览器的兼容性是一个最为苦闷的问题;
- 技术角度:不同的公司、不同的团队、不同的工程师,对前端代码的技术实现方案都有着各自的认知,或深或浅,尤其是现在HTML5、CSS3、jQuery等各种Javascript开发框架以及多如牛毛的第三方Javascript插件,这种情况下,代码的可维护性程度就会很容易降低。
- 团队合作的角度:针对移动端的网页来说,对用户体验和网页的表现能力要求是很高的, 就会导致我们为移动端开发的前端代码复杂度就会越来越高,而对于团队合作来说,要求就更加高了。如果团队合作不默契,没有一套统一的标准和规范,那么你就需要花很多的时间去维护这些出自不同团队成员的代码。
其实对每一个前端开发人员来说,所追求的的目标无非就是追求高质量的前端代码,提高代码的可维护性,请每一个进行移动网页前端代码开 发的人记住,要让你的代码做到:精简、重用、有序。精简就意味着你的代码文件比较小,这样利于客户端下载和访问;重用提高了开发速度,同样也可以保证代码 的精简;有序要求我们很好地组织代码,便于维护。
为了提高工作效率,便于团队成员更好地阅读和修改彼此的代码,更为了便于更好地维护前端代码,也为了能让我们的开发更加规范化,所以结合了Web标准、网络资料以及个人平时的工作经历,总结出了一些前端开发过程中的一些规范化要求和建议。因为本人接触前端是从移动网站的开发做起的,所以很多规范和建议都是针对移动网页来说的,如果本文中有不对或者不合适的部分请评论提出,不甚感激。
2、基本Web标准
一个符合基本Web标准的网页前端代码,HTML标签中的标签名应该全部都是小写的,属性的定义需要加上引号,CSS样式和Javascript代码不要夹杂在HTML标签中,而是应该分别单独存放在CSS样式文件和Javascript脚本文件中。理想状态下,一个网页的前端代码应该由.html文件、.css文件、.js文件这基本的三部分组成。
示例代码:
helloworld.html
<link rel=”stylesheet” type=”text/css” href=”helloworld.css” /> <script type=”text/javascript” src=”helloworld.js” /> <div class=”helloDiv”> <span class=”helloFont”>Hello world!</span> <input type=”text” name=“yourName” id=”yourName” maxlength=”20” /> </div>
.helloDiv { width: 100%; height: 20px; line-height: 20px; text-align: center; } . helloFont { font-size: 14px; color: #cccccc; }
var inputObj = document.getElementById(“yourName”); inputObj.onmouseover = function() { this.focus(); } inputObj.onfoucs = function() { this.select(); }
如示例代码一样,HTML标签只用来负责承载网页内容的显示,而样式定义交给了CSS,而所谓的行为动作定义交给了Javascript。
将HTML、CSS、Javascript分成三个文件来存放,这其实是一个最理想的状态,但是实际我们开发的过程中,会因为一些特殊原因,需要把CSS和Javascript的代码和HTML代码放在同一个文件中,但是即使这样的情况下,我们也需要在HTML文件中,将样式和行为从标签中尽量分离出来。
示例代码:
helloworld.html<style type=”text/css”> .helloDiv { width: 100%; height: 20px; line-height: 20px; text-align: center; } . helloFont { font-size: 14px; color: #cccccc; } </style> <script type=”text/javascript”> var inputObj = document.getElementById(“yourName”); inputObj.onmouseover = function() { this.focus(); } inputObj.onfoucs = function() { this.select(); } </script> <div class=”helloDiv”> <span class=”helloFont”>Hello world!</span> <input type=”text” name=“yourName” id=”yourName” maxlength=”20” /> </div>