个人总结前端开发规范

通用约定

文件与目录命名

  • 一律小写, 必须是英文单词或产品名称的拼音, 多个单词用连字符(-)连接. 只能出现英文字母、数字和连字符, 严禁出现中文.
  • 该命名规范适用于 html, css, js, swf, php, xml, png, gif, jpg, ico 等前端维护的所有文件类型和相关目录.
  • js 和 css 压缩文件, 统一以 -min 结尾, 比如源码文件为 kissy.js, 压缩后为 kissy-min.js .压缩之前的文件使用 –src 结尾。
  • 调整自己的编辑器tab制表符一率采用4个空格

前端工程文件组织

注:
  • 在resourse/img/中新增一个test文件夹,目的是上传自己的测试图片、占位图片,请勿将网站正式的文件放于此文件夹内,因为此文件夹的内容随时有可能呗任何人删除
  • 前端的亲们在写完css文件准备上传时,注意检查一下css文件需要的的图片是否存在,是否存在多余的图片,尽量删除。

文件编码约定

所有文件一律采用utf-8编码

id 和 class 命名约定

  • id 和 class 的命名总规则为: 内容优先,表现为辅. 首先根据内容来命名, 比如 main-nav. 如果根据内容找不到合适的命名, 可以再结合表现来定, 比如 skin-blue, present-tab, col-main.
  • class 名称一律小写, 多个单词用连字符连接, 比如 recommend-presents.
  • class 名称中只能出现小写的 26 个英文字母、数字和连字符(-), 任何其它字符都严禁出现.
  • id的命名采用驼峰命名法,首字母小写,如:mainNav
  • 仅在 JavaScript 代码中当作 hook 用的 id 或 class, 命名规则为 J_UpperCamelCase``(请注意, ``J_ 后的首字母也大写!), 其中字母 J 代表 JavaScript, 也是钩子(hook)的象形. 注意:如果在 JavaScript 和 CSS 中都需要用到, 则不用遵守本约定
  • id 和 class 尽量用英文单词命名 . 确实找不到合适的单词时, 可以考虑使用产品的中文拼音, 比如 wangwang, dating. 对于中国以及淘宝特色词汇, 也可以使用拼音, 比如 xiaobao, daigou. 除了产品名称和特色词汇, 其它任何情况下都严禁使用拼音.
  • 在不影响语义的情况下, id 和 class 名称中可以适当采用英文单词缩写, 比如 col, nav, hd, bd, ft 等, 但切忌自造缩写.(常用缩写总结在css规范部分)
  • id 和 class 名称中的第一个词必须是单词全拼或语义非常清晰的单词缩写, 比如 present, col.
  • 在自动化测试脚本中当作 hook 用的 class, 命名规则为 T_UpperCamelCase, 其中字母 T 代表 Test.

HTML规范

约定

  • 所有页面元素的z-index属性值控制在1000以下,将1000-2000留给组件级调用,2000以上用于解决特殊情况下的适应问题;
  • 所有的标签及属性名采用小写,DOCTYPE除外;
  • 保证标签语义化;
  • 分离思想,所有的样式除特殊情况,css样式不能内联写在style属性中;
  • table中使用caption,thead,tbody,tfoot标签时若是使用则建议全部使用
  • 如非项目需要,不使用html5特有的标签,如canvas。

DOCTYPE

页面文档类型统一使用HTML5 DOCTYPE. 代码如下:

<!doctype html>

另外一种DOCTYPE

采用过渡型 - 相对较为宽松

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Namespace

<html xmlns="http://www.w3.org/1999/xhtml">

编码

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

编码

声明方法遵循HTML5的规范.

<meta charset="utf-8" >

注释

<!--{nav start}-->
<!--{nav end}-->

元素

推荐使用的元素
  1. 结构元素:blockquote, body, br, div, h1 - h6, head, hr, html, p
  2. 头部元素:base, link, meta, script, style, title
  3. 列表元素:ul, ol, li, dl, dt, dd
  4. 文本格式元素:a, abbr, acronym, address, bdo, cite, code, del, dfn, em, ins, kbd, noscript, pre, q, samp, small, span, strong, sub, sup, var
  5. 表单元素:button, fieldset, legend, form, input, label, optgroup, option, select, textarea
  6. 多媒体元素:area, img, map, object, param
  7. 表格元素:caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr
  8. 窗体元素:iframe
不推荐使用的元素
  1. 结构元素:无
  2. 头部元素:无
  3. 列表元素:dir, menu
  4. 文本格式元素:b, basefont, big, blink, center, comment, font, i, marquee, nobr, plaintext, ruby, s, strike, u, wbr, xmp
  5. 表单元素:isindex
  6. 多媒体元素:applet, bgsound, embed, noembed
  7. 表格元素:无
  8. 窗体元素:frame, frameset, noframes
转世重生的元素
  1. s - 表示 sprite, 可以用 <s></s<> 来做 icon 的占位元素
  2. b - 表示 border, 可以用来作为圆角的占位元素
  3. i - 预留,尚未想到合理的复活理由(可以考虑作为单个图标的展位符,表示icon)

CSS规范

基本规范

  • 模块命名要注意带上模块名,下面尽可能的简写,页面级(app应用级)命名应该尽量简洁
  • 尽可能地使用css-sprite
  • 尽量通过class属性定义样式,将id留给hook
  • 尽量不要在css中使用expression
  • 组件开发中,可以先不考虑性能,尽量使用选择符组以方便html调用,如 .table-ctrl tbody tr td.selected{}
  • font中的字体用英文或unicode代替,如黑体可写成SimHei:font:12px/1.5 SimHei ,tahoma,arial,\5b8b\4f53,sans-serif;
  • 写css属性时,‘:’后面加一个空格增加可读性

引用

统一以link形式引入,不推荐内嵌形式引入css, 不推荐<style></style>标签出现在body中。不推荐内联CSS。如有特别需要(短期推广,特定情况的页面/404错误页面),请尽量放在head标签内

<style type="text/css" media="style/x.css"></style>

常规引入css文件

<link rel="stylesheet" type="text/css" href="style/x.css"></link>

常用css属性顺序建议

  • 显示属性(display, list-style, position, float, clear)
  • 盒模型(width, height, margin, padding, border, background)
  • 文本属性(color, font, text-decoration, text-align, vertical-align, white-space, other text, content)

注释风格

头注释
/*---------------------------------------------------------------------------------------------
@Filename: main.css
@Description: 全局css定义
@Version: 1.0.0(2009-12-28)YYYY-MM-DD
@author: simon-shen
==STRUCTURE:========================================= 
$__header 
$__menu
==NOTES:=============================================
2011-11-2:
初始生成。
2011-11-3:
更改文档结构和注释
--------------------------------------------------------------------------------------------*/
区块
/*__header
--------------------------------------------------------------------------------------------*/

/*__menu
--------------------------------------------------------------------------------------------*/

编码风格

Css组合嵌套的时候采用换行以提高可读性
h2 { color: red; } 
.w3cbbs { color: red; } 
.w3cbbs_52css { color: red; }

则可以这样写

h2,
.w3cbbs,
.w3cbbs_52css { color: red; }
如果对css文件不适用最小化处理,发布时采用single-line处理,如:
.form-normal .field{position:relative;border-bottom:1px solid #ddd;overflow:hidden;}
常用css命名参考
导航nav页头header
主导航mainnav页面主体main
顶导航topnav内容content
子导航subnav页脚footer
菜单menu版权copyright
子菜单submenu登陆login
标志logo侧栏sidebar
广告banner搜索search
滚动scroll标签页tab
小技巧tips合作伙伴partner
加入joinus标题title
注册regsiter指南gUIld
新闻news下载download
按钮button状态status
服务service投票vote
注释note友情链接friendlink

Javascript规范

命名参考

原则: * 尽量避免潜在冲突; * 精简短小, 见名知意

  • 全局变量以$开头,如$user,相当于:window.$user
  • 常量全部大写,单词以下划线分隔,如STATIC_ROOT
  • 变量采用驮峰式写法,如userIcon,UserRelation
  • 类名首字母大写,如Object = function(){}
  • 普通变量、命名空间,首字母小写
  • 局部变量可缩写,命名空间,类名尽量不缩写
  • 条件表达式、正则表式式,如果很复杂,给其命名
  • 枚举量, 同常量;
  • 私有变量, 属性和方法, 名字以下划线开头,如_init(),_param;
  • 保护变量, 属性和方法, 名字同普通变量名;
  • 方法和函数的可选参数, 名字以 opt_ 开头, 使用 @param 标记说明;(试行)
  • 使用 @param 标记说明;
  • 外部代码和内部代码使用不同的命名空间;
  • 重命名那些名字很长的变量, 不要在全局范围内创建别名, 而仅在函数块作用域中使用;
  • 文件名应全部使用小写字符, 且不包含除 - 和 _ 外的标点符号;
  • 临时的重复变量建议以 i, j, k, ..., 命名;

原则

  • 任何插件的开发都要写入version参数,至少要在注释中注明版本信息及修改内容.
  • 声明变量时, 必须加上 var 关键字.
  • 尽量减少全局变量的使用.
  • 语句总是以分号结尾.
  • 不要在块内声明函数.
  • 标准特性优于非标准特性(如果类库有提供, 优先使用类库中的函数).
  • 不要封装基本类型.
  • 只在解析序列化串时使用 eval() .
  • 禁止使用 with .
  • 减少使用 continue 和 break .
  • 仅在函数内使用 this .
  • 使用 Array/Object 直接量, 避免使用 Array/Object 构造器.
  • 禁止修改内置对象的原型.
  • 坚决不在主页面中嵌入逻辑脚本,
  • 坚决不在ajax载入的HTML片段里面嵌入脚本,载入后要执行代码,可以写在回调里面

编码风格

引用
<script type="text/javascript" src=”xx”></script>
页面内的脚本只作初始化及参数配置使用
<script type="text/javascript">
$(function(){
$.nav.init({
id : 1,
name : 'simon'
})
})
</script>

注:具体使不使用init()函数视具体情况及个人编程习惯而定,但是个人建议使用,方便读代码的人找到入口

行与缩进

语句行

  • 尽可能不要让每行超过 120 个字符;
  • 语句必须以分号作为结束符, 不要忽略分号;

空格

  • 数值操作符(如, +/-/*/% 等)两边留空;
  • 赋值操作符/等价判断符两边留一空格;
  • for 循环条件中, 分号后留一空格;
  • 变量声明语句, 数组值, 对象值及函数参数值中的逗号后留一空格;
  • 空行不要有空格;
  • 行尾不要有空格;
  • 逗号和冒号后一定要跟空格;
  • 点号前后不要出现空格;
  • 空对象和数组不需要填入空格;
  • 函数名末尾和左括号之间不要出现空格;

空行

  • 逻辑上独立的代码块使用空行分隔;
  • 文件末尾留 1~2 个空行;
  • 不要吝啬空行. 尽量使用空行将逻辑相关的代码块分割开, 以提高程序的可读性.
变量声明
  • 多个变量声明时, 适当换行表示;
  • 参照 var 关键字, 缩进一层次;
函数参数
  • 函数参数写在同一行上;
  • 传递匿名函数时, 函数体应从调用该函数的左边开始缩进;
  • 数组和对象初始化时:如果初始值不是很长, 尽量保持写在单行上;
  • 初始值占用多行时, 缩进一层次;
  • 对象中, 比较长的变量/数值, 不要以冒号对齐;
  • 二元/三元操作符:操作符始终跟随前行;
  • 实在需要缩进时, 按照上述缩进风格;
  • 表达式中的缩进同变量声明时;
括号
  • 原则: 不要滥用括号, 必要时一定要使用.
  • if/else/while/for 条件表达式必须有小括号;
  • 语句块必须有大括号;
  • 一元操作符(如 delete, typeof, void)或在某些关键词(如 return, throw, case, new) 之后, 不要使用括号;
语句行
  • 变量如有较广的作用域, 使用全局变量; 如果是在类中, 可以设计成为一个类的成员;
  • 函数体中, 多个局部变量集中在一起声明, 避免分散;
  • 适当延迟变量的初始化;
字符串
  • JS 代码中, 单行字符串使用单引号;
  • JS 代码中, 多行字符串使用 + 拼接形式, 不要使用 \ 拼接;
  • HTML 中 Element 属性, 使用双引号;

标准文档实例

通用模板库

准备中……

资源列表

小技巧总结

准备中……

备注

  1. 此文档只作前端开发参考用,本意只为规范前端开发人员的编码规范,使各成员之间的代码更易理解,并不想打压各位前端的创造灵感;
  2. 此文档还有待调整,如果有不足的地方可以私信发给我!
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值