前端常用规范

一、规范目的

概述

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

所有必须、禁止等词表示强调，不表示必须，如果能遵守最好

Tab键统一约定用4个空格代替（避免有的工具Tab键位2个空格）
每个样式属性或js语句后要加分号，方便压缩工具“断句”

注释
代码是写给人看的，只是机器偶尔执行一下。
注释永远不闲多的，一定要写注释

html 注释

这里是内容

css 注释
/* header /
这里是css内容
/ end header */

二、文件规范

文件命名规则

文件名称统一用小写的英文字母、数字和中划线的组合，其中不得包含汉字、空格和特殊字符；命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义。（每个规范前面都有各自的命名规则）

fe		前端开发目录
 	src	开发环境
 	dist	生产环境
 	H5	移动端页面
 	pc	Pc端页面
 	html	存放html文件
 	images	存放图片
 	css	存放css文件
 	js	存放js文件

常用命名规则

头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：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

HTML 规范

html5 doctype，字符编码统一使用使用utf-8
统一的文档类型，保证每个页面的表现形式统一

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>

</body>
</html>

兼容IE meta 写法(在web页面中使用)
使IE浏览器解析页面使用IE最高版本解析

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

资源规范
css 放到head中
javascript 放置到body内，主题内容后
style 默认type为text/css ,可以省去
script 默认 type 为 text/javascript ，可以省去

实用为王
尽量使用语义标签，减少使用div、span 无语义标签

图片背景图
修饰图片尽量使用背景图片来展示
切图请保存为最优格式，透明图片保存为 PNG24 格式

属性顺序
HTML属性应该按照一下顺序排列，确保易读性

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

class用于标识高度可复用组件，因此应该排在首位。id用于标识具体组件，应当谨慎使用（例如，页面内的书签），因此排在第二位。

javascript 生成的标签
通过js生成的标签内容，不易查找和修改，性能也会降低，减少使用。如果使用请分析它的利和弊

CSS 规范

id 和 class 命名约定

1， id 和 class命名只能使用字符、数字、中划线 - ，一律使用小写字符
2， id 和 class 根据内容来命名
3，使用js操作的id或者class，一律使用J_ 开头，后面的命名使用大驼峰的写法，例如J_Header

每个属性后必须加分号 ;

方便压缩工具“断句”

空格的使用

.header {
	color: red;
}

选择器 { 之前要有空格
属性名 : 后要有空格
属性名 : 前禁止加空格
一个原因是美观，其次IE 6存在一个bug，IE6bug

多选择器规则之间换行

当样式针对多个选择器时，每个选择器占一行

/* 推荐的写法 */
a.btn,
input.btn,
input[type="button"] {
	......
}

（禁止）将样式写为单行，如

.header { color: red;}

单行显示不好备注，这应该是压缩工具的活

（禁止）向0后添加单位，只为了格式统一如

.hader { 
	margin: 0px;
}

（禁止）使用 css 原生 import

css 原生import 有很多弊端，比如会增加请求数，我没有验证过
推荐文章：Don't use @import

（推荐）属性的书写顺序，举个例子：

.header {
	/*定位*/
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	/*盒模型*/
	width: 50px;
	height: 50px;
	padding: 10px;
	border: 1px solid red;
	margin: 10px;
	/*文字系列*/
	font-size: 12px;
	line-height: 20px;
	text-align: center;
	/*背景*/
	background: red;
	/*其他*/
}

定位相关, 常见的有：display position left top float 等
盒模型相关, 常见的有：width height margin padding border 等
文字系列，font, line-height, letter-spacing, color- text-align等
背景，background 等
其他 animation，transition，z-index 等

按照这样的顺序书写可见提升浏览器渲染dom的性能

简单举个例子，网页中的图片，如果没有设置width和height，在图片载入之前，他所占的空间为0，但是当他加载完毕之后，那块为0的空间突然被撑开了，这样会导致，他下面的元素重新排列和渲染，造成重绘（repaint）和回流（reflow）。我们在写css的时候，把元素的定位放在前头，首先让浏览器知道该元素是在文本流内还是外，具体在页面的哪个部位，接着让浏览器知道他们的宽度和高度，border等这些占用空间的属性，其他的属性都是在这个固定的区域内渲染的，差不多就是这个意思吧~

小图片需要生成css sprite 图片

IE Hack 使用

/* 针对ie的hack */
 selector {
     property: value;     /* 所有浏览器 */ 
     property: value\9;   /* 所有IE浏览器 */ 
     property: value\0;   /* IE8 */
     +property: value;    /* IE7 */
     _property: value;    /* IE6 */
     *property: value;    /* IE6-7 */
 }

禁止使用行内样式

<p style="font-size:12px;">我是一段文字</p>

尽量做个样式和结构分离，不然维护成本比较高

css reset（重置）样式

推荐网址：http://www.cssreset.com/

链接的样式，按照这个顺序来写

a:link -> a:visited ->a:hover a:active

css 选择器禁止标签名，也称为禁止使用子元素选择器，例如：

.header span {
	color: red;
}

使用标签名，让结构和样式耦合度高，不利于后期修改

javascript 代码规范

一个代码段不超过15行，特殊的例子除外

每句代码后（必须）加分号“;”

变量、常量、类的命名

（1）变量使用小驼峰命名法，以首字母小写开始，例如：headFirst
（2）常量采用全大写命名，例如：FEEL_NAME
（3）类采用大驼峰的命名法，例如：HeadFirst

左大括号“{”可以居行尾，右大括号“}”可以居行首

if (a == b) {
	// 这里是内容
}

if,for,switch,do 总是用大括号来包裹，即时结构体内只有一个语句

if (a == b) {
	return a;
}

函数或者类都要添加类描述

	/** 	 
	 * * 简述 	 
	 *  	 
	 * 功能详细描述  	 
	 *  	 
	 * @param <String> arg1 参数1  	 
	 * @param <Number> arg2 参数2，默认为0  	 
	 * @return <Boolean> 看xxx是否成功
	 */
	function fooFunction (arg1, arg2) {

	}

字符串拼接

字符串拼接，应使用数组保存字符串片段，使用时调用join方法。避免使用+或+=的方式拼接较长的字符串，每个字符串都会使用一个小的内存片段，过多的内存片段会影响性能。如

不好的拼接方式，+=  	
var str = '';  	
for (var i = 0, len = list.length; i < len; i++) {   	
	str+= '<div>' + list[i] + '</div>';  	
}  	
dom.innerHTML = str;  	

正确拼接方式，Array的push+join  	
var str = [];  	
for (var i = 0, len = list.length; i < len; i++) {    	
	str.push('<div>'+ list[i] + '</div>');  	
}  	
dom.innerHTML = str.join('');

在局部函数内定义变量，必须置于顶部

因为变量声明提前的原则，无论你定义到哪里，在解析的时候都会声明提前

（推荐）在需要以{}闭合的代码段前增加换行

// 没有换行，小的代码段无法区分
 if (wl && wl.length) {
     for (i = 0, l = wl.length; i < l; ++i) {
         p = wl[i];
         type = Y.Lang.type(r[p]);
         if (s.hasOwnProperty(p)) {
             if (merge && type == 'object') {
                 Y.mix(r[p], s[p]);
             } else if (ov || !(p in r)) {
                 r[p] = s[p];
             }
         }
     }
 }
 // 有了换行，逻辑清楚多了
 if (wl && wl.length) {

     for (i = 0, l = wl.length; i < l; ++i) {
         p = wl[i];
         type = Y.Lang.type(r[p]);

         if (s.hasOwnProperty(p)) {
             // 处理merge逻辑
             if (merge && type == 'object') {
                 Y.mix(r[p], s[p]);
             } else if (ov || !(p in r)) {
                 r[p] = s[p];
             }
         }
     }
 }

（推荐）使用局部变量缓存反复查找的对象（包括但不限于全局变量、dom查询结果、作用域较深的对象）

 // 缓存对象
 var getComment = function() {
     var dom = $("#common-container"),               // 缓存dom
         appendTo = $.appendTo,                      // 缓存全局变量
         data = this.json.data;                      // 缓存作用域链较深的对象

 }

当需要使用this时，建议使用_this 来缓存

// 缓存this
function Row(name) {
var _this = this;

_this.name = name;
$(".row").click(function() {
    _this.getName();
});
}

在缓存this时，有使用self的、that、_this ，这里我们统一下，使用this

获取元素

获取单个元素
通常，我们使用document.getElementById来获取dom元素，避免使用document.all。document.getElementById是标准方法，兼容所有浏览器
IE8使用document.getElementsByClassName来获取dom元素会出现报错情况，尽量避免使用getElementsByClassName获取dom元素。如果使用JQ来获取DOM元素也尽量避免使用etElementsByClassName获取dom元素，提高性能

jquery规范

1.同一的对象的操作不超过三个动作可以写入一行（代码的可读性）
2.对于同一对象的多个操作，建议每行写一个操作。
3.如果闲代码块太多，可以以代码块来换行；
4.如果获取的对象是jQuery 对象，建议以$ 符号开头例如：$nav = $(“#nav”); 以区分javascript对象和jQuery对象

如果你有好的建议，请提出来，一起来完善

参考网址
http://www.cnblogs.com/hustskyking/p/javascript-spec.html

posted @ 2016-05-23 09:50 诚人小李阅读(405) 评论(0) 编辑收藏举报

刷新页面返回顶部

诚人小李

重头再来，破釜沉舟