前端开发规范文档

 

目的

提高团队协作效率,方便前后端功能添加和后期优化及维护。

一,通用规范

1、Tab键用4个空格代替(windows下Tab键占4个空格);

2、统一文档编码为”UTF-8”,统一文档类型为<!DOCTYPE html>,统一收藏夹图标,统一字体;

3、禁止在js/json中使用关键字命名;

4、if、while、when、switch语句的执行体用”{}”括起来,禁止省略花括号;

5、禁止在return关键字及要返回的表达式之间换行;

6、必须为大区块样式或功能模块添加注释,小区块适量注释;

7、特殊符号使用转义字符表示;

8、Html、css、js、images文件均归档到<系统开发规范>约定的目录中去;

9、Css属性或者javascript代码以“;”结尾,也方便压缩工具断句;

10、引入JS库文件,文件名须包含库名称及版本及是否为压缩版,比如jquery-1.4.1.min.js;引入插件,文件名格式为库名称+插件名称,比如jQuery.cookie.js;

11、以var严格模式声明变量,切勿在一段js代码中同时使用var、let、const声明变量;

12、符合web标准,语义化html,使结构、表现和行为的有效分离,代码要求简洁明了有序,尽可能较少服务器负载,保证最快的解析速度;

一、文件/资源命名

1、确保文件命名以英文字母而不是数字开头,以特殊字符开头的文件一般有特殊的含义和用处,如register-form.html;

2、资源的字母名称须全为小写,这是因为在某些对大小写字母敏感的操作系统中,当文件通过工具压缩混淆后,或认为修改过后,大小写不同导致引用文件不同的错误,很难被发现;

3、需要对文件增加前后缀或特定的扩展名(如.min.js,.min.css),或一串前缀(如123.main.min.css)情况下,建议使用点分隔符来区分这些在文件名中带有清晰意义的元数据;

4、文件存放位置的规范,如css存放.css样式文件,javascript存放.js文件;

二、协议

1、引用图片,样式和脚本时,不要指定引入资源所带的具体协议;

三、CSS书写规范

1、不要在标签上直接写样式;

2、不要将CSS样式写成单行;

3、不要在CSS样式中使用expression表达式;

4、不要在CSS样式中使用@import;

5、每个样式属性后加”;”;

6、样式兼容模式加前缀:-webkit、-o-、-moz-;

7、Margin、padding、border使用合并方式书写;

四、HTML书写规范

1、非特殊情况下,CSS样式文件外链到<head>之间,JavaScript文件外链到页面底部;

2、标签、属性由英文小写组成,所有标签除(br、img、hr、input、link等个别外)必须闭合;

3、属性值由””双引号;

4、尽可能减少<div>等标签的嵌套,减少代码量及提高代码可读性;

5、语义化html,如段落标记使用<p>,列表用<ul>等,内联元素中不可嵌套块级元素;

五、JavaScript书写规范

(1)命名规范

1、常量名:全部大写,单词间用”_”下划线分隔,如:CSS_BTN_NUM;

2、对象的属性和方法名:小驼峰式,如:bindEvent = “click”;

3、类名(构造器):小驼峰式首字母大写,如:Current,DefaultConfig;

4、函数名:小驼峰式,如:current(),defaultConfig();

5、变量名:小驼峰式,如:current,defaultConfig;

(2)代码格式

1、”()”括号前后需要空格;

2、”=”等号前后需要空格;

3、”,”逗号前后需要空格;

4、if、while、when、switch语句的执行体用”{}”括起来;

5、数组,对象内避免额外的”逗号”,如:var arr = [“sex”,”year”,”name”,];

6、使用严格条件判断,用”===”代替”==”;

六、注释

1、Javascript、css文件注释需要标注创建/修改时间,重大版本修改记录,功能描述,函数描述;

七、图片规范

1、命名以小写英文、数字、”_”组合,便于团队其他成员理解,如header_btn.png;

2、重要图片加上alt属性,重要的元素加上title;

3、保证图片质量的前提下,使用sprite技术集中小的背景图和图标,减少页面http请求和加载时间;

 

八、代码检查

1、对于JavaScript,建议使用JSLint或JSHint;

6、Css、JS、Html等在线格式化工具;

原文地址:https://www.cnblogs.com/xieyongbin/p/9774682.html

时间: 2024-08-01 12:33:53

前端开发规范文档的相关文章

【转载】WEB前端开发规范文档

本文转载自谈笑涧<WEB前端开发规范文档> 为 新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益的. 本文档由本人编写, 部分意见来源于网络, 以此感谢, 片面及有误的地方, 希望大家指正. 另, 本文档部分规范是为我所在项目组所写, 使用时请根据实际项目需求修改.以下为[WEB前端开发规范文档]正文点此查看WEB版本 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量

WEB前端开发规范文档

规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本准则 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度. 文件规范 1. html, css, js, images文件均归档至约定的目录中;

开发备必:WEB前端开发规范文档

为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必 须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本准则 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的 解析速度. 文件规范 1. html, css, js, images文件均归档至<系统开发规范>约

超详细Web前端开发规范文档

规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改.基本准则符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.文件规范1. html, css, js, images文件均归档至<系统开发规范>约定的

【转】Web前端开发规范文档

规范目的: 使开发流程更加规范化. 通用规范: TAB键用两个空格代替(WINDOWS下TAB键占四个空格,LINUX下TAB键占八个空格). CSS样式属性或者JAVASCRIPT代码后加“;”方便压缩工具“断句”. 文件内容编码均统一为UTF-8. CSS.JAVASCRIPT中的非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示. 文件规范: 文件名用英文单词,多个单词用驼峰命名法. 一些浏览器会将含有这些词的作为广告拦截:ad.ads.adv.banner.spo

Web 前端开发规范文档

通用规范: TAB键用两个空格代替(WINDOWS下TAB键占四个空格,LINUX下TAB键占八个空格). CSS样式属性或者JAVASCRIPT代码后加“;”方便压缩工具“断句”. 文件内容编码均统一为UTF-8. CSS.JAVASCRIPT中的非注释类中文字符须转换成unicode编码使用,以避免编码错误时乱码显示. 文件规范: 文件名用英文单词,多个单词用驼峰命名法. 一些浏览器会将含有这些词的作为广告拦截,文件命名.ID.CLASS等所有命名避免以上词汇. `ad`.`ads`.`ad

WEB前端开发规范文档(转)

http://codeguide.bootcss.com/  编写灵活.稳定.高质量的 HTML 和 CSS 代码的规范上面的文档 再结合下面的规范: 无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考. 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或

前端开发规范文档(html,css,js)

首先吐槽一句,本来想上传word文档的,可是发现博客不能上传word文档,这就很尴尬了. 首先声明该规范不是本人写的,网上搜前端规范发现这个很详细就先复制下来做笔记,当然不可能啥都按规范来,每个公司的规范都不一样..仅供参考 前端开发规范文档 Html规范 1 代码风格 1.1 缩进 **[强制]**使用 4 个空格作为一个缩进层级,不允许使用 2 个空格或 tab 字符: 2 属性 2.1 属性引号 **[强制]**对于属性的定义使用双引号,不允许使用单引号,不允许不使用引号: 示例: <!-

Web前端开发规范文档(google规范)

(Xee:其实没什么规范约束,但是养成一种好习惯,何乐而不为?) 我推荐去看看google的开发规范,然后从他的当中去总结自己的开发规范. Google HTML/CSS代码风格指南 Google JavaScript 编码规范指南 ------------------------------------------------------------------------------------------------------------------------------- 绝大多数项