Web前端开发规范(一)
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>
helloworld.css
.helloDiv {
width: 100%;
height: 20px;
line-height: 20px;
text-align: center;
}
. helloFont {
font-size: 14px;
color: #cccccc;
}
helloworld.js
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>
Web前端开发规范(一)的更多相关文章
- WEB前端开发规范
WEB前端开发规范 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档.本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本 ...
- WEB前端开发规范文档(转)
http://codeguide.bootcss.com/ 编写灵活.稳定.高质量的 HTML 和 CSS 代码的规范上面的文档 再结合下面的规范: 无论是从技术角度还是开发视角,对于web前端开发 ...
- 网站开发进阶(三十八)Web前端开发规范文档你需要知道的事
Web前端开发规范文档你需要知道的事 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进 ...
- Web前端开发规范文档你需要知道的事
Web前端开发规范文档你需要知道的事 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进 ...
- WEB前端开发规范文档[转]
为新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益的. 本文档由本人编写, 部分意见来源于网络, 以此感谢, ...
- Web 前端开发规范手册
一.规范目的 Web 前端开发规范手册 1.1 概述 ......................................................................... ...
- Web前端开发规范手册
一.规范目的 1.1 概述 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. ...
- Web前端开发规范文档(google规范)
(Xee:其实没什么规范约束,但是养成一种好习惯,何乐而不为?) 区分大小写 xhtml 区分大小写,xhtml要求 标签名 属性名 值都要小写,并且要有双引号和 标签闭合. css 元素名称以及i ...
- Web前端开发规范文档你需要知道的事--HTML、css、js、文档等需要规范内容
规范目的 为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,特制订此文档.本规范文档一经确认,前端开发人员必须按本文档规范进行前台页面开发.本文档如有不对或者不 ...
- ***网Web前端开发规范(初稿)
这几天一直在梳理关于前端方面的开发规范,现在暂时梳理了HTML的开发规范,暂且放置于此! 规范目的: 使开发流程更加规范化 文件命名规范:(需审批) 1.项目命名 全部采用小写方式, 以下划线分隔. ...
随机推荐
- win10系统重装
问题描述 win10开启热点网卡坏了,没折腾好.然后把系统网卡折腾坏了. 所以重装了系统,写下我的环境从零到晚上的过程 1安装系统 用WePE安装win10,镜像采用:cn_windows_10_en ...
- springdataRedis连接redis集群
配置文件: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http:// ...
- 学习C/C++需要掌握哪些知识
初级阶段 1.C语言 数据类型.变量.内存布局.指针基础: 字符串.一维数组.二维数组: 一级指针,二级指针,三级指针,N级指针概念,指针数组和数组指针: 结构体.文件的使用: 动态库的封装和设计: ...
- hdu6441 Find Integer 求勾股数 费马大定理
题目传送门 题目大意: 给出a和n,求满足的b和c. 思路: 数论题目,没什么好说的. 根据费马大定理,当n>2时不存在正整数解. 当n=0或者1时特判一下就可以了,也就是此时变成了一个求勾股数 ...
- BestCoder Round #64 1001
Numbers Accepts: 480 Submissions: 1518 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 6553 ...
- 2015苏州大学ACM-ICPC集训队选拔赛(2)1002
草爷要的雷 Problem Description 扫雷一直是风靡实验室的重要娱乐游戏,在赛前赛后.刷题疲惫的时候,扫一局雷经常可以让队员们感受到身心的振奋,毕竟,劳逸结合刷题,防猝死才是硬道理.但是 ...
- python 文件与异常
####文件### r: -只能读 不能写 -读取文件不存在,是会报错 r+: - 可以执行读写操作; - 文件不存在, 报错: w: -只能写,不能读 -会清空文件内容 -文件不存在,会新建文件 w ...
- sqlserver 数据库阻塞和死锁
参考原文:http://blog.csdn.net/ha196200/article/details/44985597 (1) 数据库阻塞: 假设第一个连接T1占有且没有释放资源,第二个连接T2请求同 ...
- chrome插件 crap jsonview
最近有用到几个非常好用的Chrome 记录一下: 1.Crap Api debug,直接在Chrome标签打开的,界面大概长这样,方便调试 2. adblock 比较大众 3. tampermonk ...
- Photoshop入门教程(五):滤镜
学习心得:滤镜通常用于摄影行业,是安装在相机镜头前用于过滤自然光的附加镜头,从而获得一些特殊的效果.同理,Photoshop的滤镜也是为了产生特殊的效果.Photoshop滤镜分为两类:一种是内部滤镜 ...