前端代码规范1.0

意义：该规范旨在统一前端代码书写，规范前端代码标准，为共同协作打下良好基础，提高工作效率。

 

文件夹/文件命名

图片文件夹：image，images，img

Js代码文件夹：js

Css文件夹：css

首页：index。

其他页面根据具体情况来定，可以是中文名，英文名，拼音等，以方面认识为主。

 

页面框架布局

 

样式名称

样式名称的规则为根据对应位置的英文来命名。如：

头部：header

导航：nav

页尾：footer

消息：news，message

分页：page，

下拉：select

复选框：checked，

单选：radio，

返回：back，

按钮：btn

登录：login

注册：reg

选择：choose

时间:time

星星：start

图标：ico

列表：list

高度：height，

宽度：width

边线：border,borderTop, borderRight,borderBottom,BorderLeft

外边距：margin，marginTop,marginRight,marginBottom,marginLeft

内边距：padding, paddingTop，paddingRight，PaddingBottom，paddingLeft

清除：clear，clearfix

浮动:floatLeft，floatRight

内容：content/container

尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

登录条：loginbar

标志：logo

广告：banner

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

友情链接：friendlink

版权：copyright

滚动：scroll

内容：content

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinus

指南：guild

服务：service

注册：regsiter

状态：status

投票：vote

合作伙伴：partner

注释的写法:

  /* Footer */

  内容区

  /* End Footer */

id的命名:

  (1)页面结构

  容器: container

  页头：header

  内容：content/container

  页面主体：main

  页尾：footer

  导航：nav

  侧栏：sidebar

  栏目：column

  页面外围控制整体布局宽度：wrapper

  左右中：left right center

 

  (2)导航

  导航：nav

  主导航：mainbav

  子导航：subnav

  顶导航：topnav

  边导航：sidebar

  左导航：leftsidebar

  右导航：rightsidebar

  菜单：menu

  子菜单：submenu

  标题: title

  摘要: summary

 

  (3)功能

  标志：logo

  广告：banner

  登陆：login

  登录条：loginbar

  注册：regsiter

  搜索：search

  功能区：shop

  标题：title

  加入：joinus

  状态：status

  按钮：btn

  滚动：scroll

  标签页：tab

  文章列表：list

  提示信息：msg

  当前的: current

  小技巧：tips

  图标: icon

  注释：note

  指南：guild

  服务：service

  热点：hot

  新闻：news

  下载：download

  投票：vote

  合作伙伴：partner

  友情链接：link

  版权：copyright\

 

Header区域代码规范

head区是指HTML代码的<head>和</head>之间的内容。

必须加入的标签

公司版权注释  <!--- The site is designed by EHM,Inc 07/2005 --->

网页显示字符集

中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">

万国码：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

英 语：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

网页制作者信息  <META name="author" content="webmaster@maketown.com">

网站简介  <META NAME="DESCRIPTION" CONTENT="xxxxxxxxxxxxxxxxxxxxxxxxxx">

搜索关键字  <META NAME="keywords" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">

网页的css规范  <LINK href="../css/style.css" rel="stylesheet" type="text/css">

网页标题  <title>xxxxxxxxxxxxxxxxxx</title>

可以选择加入的标签

设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅。

<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：//www.****.com">  5指时间停留5秒

网页搜索机器人向导。用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。

<META NAME="robots" CONTENT="none">

CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。

/*********移动端mate代码*********/

<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<meta name="format-detection" content="telephone=no">

 

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

所有的javascript的调用尽量采取外部调用.

<SCRIPT LANGUAGE="JavaScript" SRC="script/xxxxx.js"></SCRIPT>

附<body>标签：

<body>标签不属于head区，这里强调一下，为了保证浏览器的兼容性，必须设置页面背景<body bgcolor="#FFFFFF">

 

 

样式定义规则：

  1. 尽量使用样式拼接，使用多个样式进行定义。如：按钮样式，主样式btn{}定义高度，行高，居中，圆角等。用宽度样式定义按钮的宽度，有背景样式定义按钮的背景，用内边距定义内边距。等等。

.btn{

Height:30px;

Line-height:30px;

Text-align:center;

Font-size:14px;

Border-radius:4px;

Border:none;

}

.btn_big{

Width:100px;

Background-color:#f00;

Color:#fff;

}

  1. 定义样式是尽量的用具体的样式属性来定义。如：背景图片：background-image,背景颜色：background-color,左侧外边距：margin-left,右侧内边距：padding-right,等等。
  2. 布局尽量用相同的样式来定义，通过模块来展示不同。尽量考虑通用性。减少重复代码编写。
  3. 属性的书写顺序，布局定位属性-->自身属性-->文本属性-->其他属性如：position，top，left，z-index，width，height，font-size，color，cursor等等。

布局属性主要包括：display、list-style、position（相应的top、right、bottom、left）、float、clear、visibility、overflow；

自身属性主要包括：width、height、margin、padding、border、background；  

文本属性主要包括：color、font、text-decoration、text-align、vertical-align、white-space。 \其他：content。

相关的属性声明应当归为一组，并按照下面的顺序排列：

Positioning

Box model

Typographic

Visual

由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box

model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。

其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。

.declaration-order {

/* Positioning */

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

z-index: 100;

/* Box-model */

display: block;

float: right;

width: 100px;

height: 100px;

/* Typography */

font: normal 13px "Helvetica Neue", sans-serif;

line-height: 1.5;

color: #333;

text-align: center;

/* Visual */

background-color: #f5f5f5;

border: 1px solid #e5e5e5;

border-radius: 3px;

/* Misc */

  • opacity: 1;

}

  1. 代码缩进。Css样式，html，js代码都书写是都必须注意缩进。整齐统一，既方便自己查阅，也方便同事查阅。
  2. 所有的标记都必须合理嵌套。 

说明：XHTML要求有严谨的结构，所有的嵌套都必须按顺序。下面是一些标记的禁止嵌套： 

a：不能包含其他的a元素； 

pre：不能包含其他img、object、big、small、sub或者sup元素。 

button：不能包含其他input、select、textarea、label、button、form、fieldset、iframe或者isindex元素。 

label：不能包含其他的label元素。 form：不能包含其他的form元素。

  1. 所有的特殊符号用转义编码表示  说明：以下是一些常用的特殊符号以及对应的转义编码，注意转义字符之间无空格。

 

  1. css和Javascript尽量通过外部引用，不要在XHTML中出现表现形式的代码

说明：将样式写在一个独立的.css文件中，以后不用修改每个页面，只需要修改.css

文件而改变页面的样式。

  1. css样式定义的边距方向，劲量一致。如：为了进行页面区块分隔，设置上下边距，要么都设置为上边距，要么都设置为下边距，不要混合使用。
  2. 页面通用的一些样式属性可以单独定义。拼接使用。如：margin-left，padding-left，clear，position，font-size，font-family等等。
  3. 样式书写前，需要清除默认样式，统一样式基本设置。
  4. 对页面的一些基本样式需要统一设置，如最小字号，默认文字颜色，基本字体，基础行高等等。
  5. 注意样式的兼容性，在需要兼容的地方使用兼容性写法，在需求要求的浏览器兼容考虑范围内进行兼容性设置。

从后往前，依次是，firefox,ie9 ,ie8,ie7,ie6.

selector{

background-color:#f00; /*all*/

background-color:#0ff\0; /* ie 8/9 */

background-color:#0f0\9\0; /* ie9 */

*background-color:#00f; /*ie7*/

_background-color:#ff0; /*ie6*/

background-color//:#090; /*非IE*/

background-color:#900\9; /*所有ie*/

}

 

 

 

  1. HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。

Class,id, name,data-*,src, for, type, href,title, alt,aria-*, role

 

class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎

使用（例如，页面内的书签），因此排在第二位。

  1. 将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者

放在文档底部。如果你把他们分开了，将来只会被大家遗忘。下面给出一个典型的实例。

.element { ... }

.element-avatar { ... }

.element-selected { ... }

@media (min-width: 480px) {

.element { ...}

.element-avatar { ... }

.element-selected { ... }

}

  1. 注意为样式写注释，可以为某一模块，用注释标注出来；也可以是某一功能的样式用注释标注出来。以方便查看，和方便选择为前提。

html注释: 注释格式 <!--这儿是注释-->, '--'只能在注释的始末位置,不可置入注释文字区域;

css注释: 注释格式 /*这儿是注释*/;

JavaScript注释, 单行注释使用'//这儿是单行注释' ,多行注释使用 /* 这儿有多行注释 */;

 

17. LOGO的国际标准规范

为了便于INTERNET上信息的传播，一个统一的国际标准是需要的。实际上已经有了这样的一整套标准。其中关于网站的LOGO，目前有三种规格：

88*31 这是互联网上最普遍的LOGO规格。

120*60 这种规格用于一般大小的LOGO。

120*90 这种规格用于大型LOGO。

这一条可以根据各自的实际情况来订，但是尽量的合乎标准。

Js代码规范

  1. 书写过程中, 每行代码结束必须有分号; 原则上所有功能均根据项目需求进行原生开发, 以避免网上down下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || ...);
  2. 库引入: 原则上仅引入jQuery库, 若需引入第三方库, 须与团队其他人员讨论决定;
  3. 变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun; jQuery变量要求首字符为'_', 其他与原生JavaScript 规则相同, 如: _iTaoLun; 另, 要求变量集中声明, 避免全局变量.
  4. 类命名: 首字母大写, 驼峰式命名. 如 ITaoLun;
  5. 函数命名: 首字母小写驼峰式命名. 如iTaoLun();
  6. 命名语义化, 尽可能利用英文单词或其缩写;
  7. 尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval() & innerText;
  8. 后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示;
  9. 代码结构明了, 加适量注释. 提高函数重用率;

10.注重与html分离, 减小reflow, 注重性能.

posted @ 2016-07-12 10:27  修路  阅读(265)  评论(0)  编辑  收藏  举报