Web前端开发规范文档

规范目的：

　　使开发流程更加规范化。

通用规范：

  • TAB键用两个空格代替（windos下tab键占四个空格，linux下TAB键占八个空格）。

  • CSS样式属性或者JAVASCRIPT代码后加“;”方便压缩工具“断句”。

  • 文件内容编码均统一为UTF-8。

  • CSS、JAVASCRIPT中的非注释类中文字符须转换成unicode编码使用,以避免编码错误时乱码显示。

文件规范：

  • 文件名用英文单词，多个单词用驼峰命名法。

  • 一些浏览器会将含有这些词的作为广告拦截，文件命名、ID、CLASS等所有命名避免以下词汇。
  • `ad`、`ads`、`adv`、`banner`、`sponsor`、`gg`、`guangg`、`guanggao`等

html书写规范：

　　

文档类型声明统一为HTML5声明类型，编码统一为UTF-8。

<meta charset="UTF-8">

　

　<HEAD>中添加信息。

<meta name="author" content="smile@kang.cool">//作者

<meta name="description" content="hello">//网页描述

<meta name="keywords" content="a,b,c">//关键字,“，”分隔

<meta http-equiv="expires" content="Wed, 26 Feb 1997 08：21：57 GMT">//设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅

<meta http-equiv="Pragma" content="no-cache">//禁止浏览器从本地机的缓存中调阅页面内容

<meta http-equiv="Window-target" content="_top">//用来防止别人在框架里调用你的页面

<meta http-equiv="Refresh" content="5;URL=http://kahn1990.com/">//跳转页面，5指时间停留5秒 网页搜索机器人向导。用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引

<meta name="robots" content="none">//content的参数有all,none,index,noindex,follow,nofollow，默认是all

<link rel="Shortcut Icon" href="favicon.ico">//收藏图标

<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">//网页不会被缓存

　　

非特殊情况下CSS样式文件外链至HEAD之间，JAVASCRIPT文件外链至页面底部。

<!DOCTYPE html>

<html>

<head>

    <link rel="stylesheet" href="css/main.css">

</head>

<body>

    <!-- 逻辑代码 -->

    <!-- 逻辑代码底部 -->

    <script src="lib/jquery/jquery-2.1.1.min.js"></script>

</body>

</html>

 　　

引入JAVASCRIPT库文件，文件名须包含库名称及版本号及是否为压缩版。

jQuery-1.8.3.min.js

　　

引入JAVASCRIPT插件, 文件名格式为库名称+.+插件名称。

jQuery.cookie.js

　

命名方式：

CLASS --> nHeadTitle --> CLASS遵循小驼峰命名法（little camel-case）

ID --> n_head_title --> ID遵循名称+_

NAME --> N_Head_Title --> NAME属性命名遵循首个字母大写+_

<div class="nHeadTitle" id="n_head_title" name="N_Head_Title"></div>

css书写规范：

　　CSS书写顺序

.header {

/* 显示属性 */

    display || visibility

    list-style

    position top || right || bottom || left

    z-index

    clear

    float

/* 自身属性 */

    width max-width || min-width

    height max-height || min-height

    overflow || clip

    margin

    padding

    outline

    border

    background

/* 文本属性 */

    color

    font

    text-overflow

    text-align

    text-indent

    line-height

    white-space

    vertical-align

    cursor

    content

    };　

　兼容多个浏览器时，将标准属性写在底部

-moz-border-radius: 15px; /* Firefox */

-webkit-border-radius: 15px; /* Safari和Chrome */

border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 *//标准属性

使用z-index属性尽量z-index的值不要超过150（通用组的除外），页面中的元素内容的z-index不能超过10（提示框等模块除外但维持在150以下），不允许直接使用（999~9999）之间大值。　

　

减少使用影响性能的属性。

position:absolute;

float:left;//如这些定位或浮动属性

减少在CSS中使用滤镜表达式和图片repeat,尤其在body当中,渲染性能极差, 如果需要用repeat的话,图片的宽或高不能少于8px。

javaScript书写规范：

代码格式

"()"前后需要跟空格

"="前后需要跟空格

","后面需要跟空格

JSON对象需格式化对象参数

if、while、for、do语句的执行体用"{}"括起来

"{}"格式如下

if (a==1) {

    //代码

};　

下面类型的对象不建议用new构造

new Number

new String

new Boolean

new Object //用{}代替

new Array //用[]代替

图片规范：

命名应用小写英文、数字、_组合，便于团队其他成员理解

header_btn.gif

header_btn2.gif

页面元素类图片均放入img文件夹,测试用图片放于img/testimg文件夹，psd源图放入psdimg文件夹。

图片格式仅限于gif、png、jpg等。用png图片做图片时,要求图片格式为png-8格式。

注释规范：

JAVASCRIPT、CSS文件注释需要标明作者、文件版本、创建/修改时间、重大版本修改记录、函数描述、文件版本、创建或者修改时间、功能、作者等信息。
/* 注释块 */

 

开发及测试工具约定：

测试工具: 前期开发仅测试FireFox & IE8 & IE9 & Opera &Chrome & Safari

 

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

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

    本文转载自谈笑涧<WEB前端开发规范文档> 为 新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益 ...

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

    规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合 ...

  3. 【转载】开发备必：WEB前端开发规范文档

    规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必 须按本文档规范进行前台页面开发. 本文档如有不对或者 ...

  4. 开发备必：WEB前端开发规范文档

    为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必 须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地 ...

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

    规范目的: 使开发流程更加规范化. 通用规范: TAB键用两个空格代替(WINDOWS下TAB键占四个空格,LINUX下TAB键占八个空格). CSS样式属性或者JAVASCRIPT代码后加“;”方便 ...

  6. Web 前端开发规范文档

    通用规范: TAB键用两个空格代替(WINDOWS下TAB键占四个空格,LINUX下TAB键占八个空格). CSS样式属性或者JAVASCRIPT代码后加“;”方便压缩工具“断句”. 文件内容编码均统 ...

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

    http://www.w3cfuns.com/notes/26488/c2ae788c77f835357025026a148b9863.html

  8. Web项目开发规范文档

    http://www.kancloud.cn/chandler/css-code-guide/51267

  9. WEB前端开发规范文档[转]

    为新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益的. 本文档由本人编写, 部分意见来源于网络, 以此感谢, ...

随机推荐

  1. XCODE UITextField 中的属性和用法

    XCODE  UITextField  中的属性和用法 一些基本的用法 UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedR ...

  2. 【BZOJ2821】作诗(Poetize) 分块

    Description 神犇SJY虐完HEOI之后给傻×LYD出了一题:SHY是T国的公主,平时的一大爱好是作诗.由于时间紧迫,SHY作完诗之后还要虐OI,于是SHY找来一篇长度为N的文章,阅读M次, ...

  3. Android -- ListView(SimpleAdapter) 自定义适配器

    aaarticlea/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBA ...

  4. 深入浅出 - Android系统移植与平台开发（九）－ JNI介绍

    作者:唐老师,华清远见嵌入式学院讲师. JNI是在学习Android HAL时必须要面临一个知识点,如果你不了解它的机制,不了解它的使用方式,你会被本地代码绕的晕头转向,JNI作为一个中间语言的翻译官 ...

  5. ECMAScript中关于如何获取this的定义

    文章中一些名词的翻译存疑,没有查过正式的中文名称 前面都是具体过程的解释,懒得看可以直接看获取思路 有关this的取值请移步JavaScript笔记--this的取值 获取this的过程 Runtim ...

  6. light oj 1047 - Neighbor House 动态规划

    题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=87730#problem/C 题目: Description The peopl ...

  7. python 之ConfigParser

    ConfigParser 简介ConfigParser是用来操作配置文件的模块. 说明:[**]为配置文件的section,基本格式为 [section] key = valueeg: [db] db ...

  8. [转载]CRect::DeflateRect

    1基本内容 void DeflateRect(int x,int y); void DeflateRect(SIZE size); void DeflateRect(LPCRECT lpRect); ...

  9. java final方法的作用

    1. 不想让别人修改方法实现. 2. 在方法调用时使用内嵌调用. 3. 有效的“关闭”动态绑定,这样编译器就可以为final方法调用生成更有效的代码. Java编程思想: “然而,大多数情况下,这样做 ...

  10. Larbin初试

    前阵子找工作的时候经常会看到epoll多路复用的知识点,无奈自己一点都不懂.慌忙之际也只能去了解个大概.所以最近闲下来之后想要基于epoll机制实现一个比较有用的东西,刚好最近又想爬些东西,希望这次能 ...