转载-simon：个人总结前端开发规范

标签： simon 个人 前端 | 发表时间：2013-12-09 00:14 | 作者：Beacon_LHX
出处：http://www.iteye.com
（特注：转载只为更好的分享___iteye-simon）

通用约定

文件与目录命名

  • 一律小写, 必须是英文单词或产品名称的拼音, 多个单词用连字符(-)连接. 只能出现英文字母、数字和连字符, 严禁出现中文.
  • 该命名规范适用于 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 g UIld
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 人发表留言，猛击->> 这里<<-参与讨论


ITeye推荐



相关 [simon 个人 前端] 推荐：

转载-simon：个人总结前端开发规范

- - Web前端 - ITeye博客
（特注：转载只为更好的分享___iteye-simon） 通用约定. 一律小写, 必须是英文单词或产品名称的拼音, 多个单词用连字符(-)连接. 只能出现英文字母、数字和连字符, 严禁出现中文.. 该命名规范适用于 html, css, js, swf, php, xml, png, gif, jpg, ico 等前端维护的所有文件类型和相关目录..

Simon 0.4.0发布

- - Solidot
跨平台开源语音识别软件Simon发布了v0.4版. 新版历经了多年的开发，主要新特性有：全新的语音识别层；改进上下文感知准确性和性能；新的对话系统引入脚本变量、整合模板系统、数据引擎和文本语音输出，能支持与用户的完整对话；新的样本评审工具Afaras，Akonadi命令插件，等等. 下载（Windows版，源码）.

ifanr 访谈：德国魔术师 Simon Pierro ——魔术、科技和 iPad

- Avenger - 爱范儿 · Beats of Bits
大家一定还记得 WWDC 前夕，有位魔术师自己制作的一段视频吧，利用 iPad 玩出了精彩的视觉效果. 这段视频被大量转载，于是 ifanr 联系到了这位魔术师 Simon Pierro ，聊聊高科技和魔术之间的有趣话题. 这位有趣的德国魔术师从 2004 年就开始了专业的魔术生涯，他在 Youtube 上发布的 “iOS 5 预览”获得了 300 万的点击量，并因此得到德国的“一周人物”节目的邀请，同时他也在准备参加德国下一届的 Topmedel 表演.

个人整理的前端开发相关的学习网站

- - Starming星光社最新更新
今天有空就整理一些我学习前端开发技术时常看的一些网站，希望能够对刚接触前端开发的朋友们有所帮助. 很多人不知道怎么学前端开发，这里的站点只要你都看过一遍，想必也能成个合格的前端工程师了. W3.ORG是W3C的官方网站，做前端开发的朋友是一定要经常去看看的. 理由我不想多说了，W3.ORG里的官方WEB标准文档如果你都没有认真看过，就不要说你熟悉什么WEB标准.

前端技术

- - CSDN博客综合推荐文章
随着互联网产业的爆炸式增长，与之伴生的Web前端技术也在历经洗礼和蜕变. 尤其是近几年随着移动终端的发展，越来越多的人开始投身或转行至新领域，这更为当今的IT产业注入了新的活力. 尽管Web前端技术诞生至今时日并不长，但随着Web技术的逐渐深入，今后将会在以下几方面发力. JavaScript的兄弟们.

Web前端优化

- - JavaScript - Web前端 - ITeye博客
优点：直接使用浏览器内存的缓存数据，减少网站后台压力，用户体验（速度）好. 缺点：对于时时变化的动态页面，这种情况就不能容忍了，因为每次访问的都是第一次访问的内容，这样即使所请求的页面已经变化了，用户也不可能知道，所以此场景必须要消除这种缓存的影响. 延迟加载，将资源延迟到需要的时候的加载，例如detail页面，相关产品推荐，当用户浏览更多的信息往下拉动滚动时，才进行加载，异步加载可以大幅减少对后端资源的使用，在需要的时候加载，是资源合理使用常用的方式，但是也带来一个问题，当往下拉才去加载，如果性能不够好，用户的体验其实是不好的，“菊花”转动的时间会比较长，同时异步加载对前端性能的作用也是非常明显的，渲染的节点数量大幅减少.

Web 前端测试

- - Web前端 - ITeye博客
Web 网站测试流程和方法（转载）. 进行正式测试之前，应先确定如何开展测试，不可盲目的测试. 一般网站的测试，应按以下流程来进行：. 1）使用HTML Link Validator将网站中的错误链接找出来；. 2）测试的顺序为：自顶向下、从左到右；. 3）查看页面title是否正确. （不只首页，所有页面都要查看）；.

前端xss攻击

- - SegmentFault 最新的文章
实习的时候在项目中有接触过关于xss攻击的内容，并且使用了项目组中推荐的一些常用的防xss攻击的方法对项目进行了防攻击的完善. 但一直没有时间深入了解这东西，在此，做一个简单的梳理. xss跨站脚本攻击(Cross Site Scripting)，是一种经常出现在web应用中的计算机安全漏洞，它指的是恶意攻击者往Web页面里插入恶意html代码，当用户浏览该页之时，嵌入的恶意html代码会被执行，从而达到恶意用户的特殊目的.

初识前端模板

- slackware - 百度泛用户体验
“模板”这个词，可能很多人第一印象是后端的技术（Smarty，Velocity等），但本文要讲的却不是后端的概念，而是前端开发中所使用到的一种技术，也就是“前端模板”技术. 模板的工作原理可以简单地分成两个步骤：模板解析（翻译）和数据渲染. 这两个步骤可分别部署在前端或后端来执行. 如果都放在后端执行，则是像Smarty这样的后端模板，而如果都放在前端来执行，则是我们要探讨的前端模板.

前端的横向发展

- Oasis - 崔凯,前端开发
今天的交流会上，提到了“横向发展”这个词，意指推荐大家学习与前端打交道的相关技术，如：php. 其实“前端”这个词，是2005年才逐渐在国内兴起的. 那之前，国内的网站，通常是TABLE+ASP搞定一切. 做这份工作的人，通称“程序员”. 那是个孤军奋战就能赢得天下的年代. 一个网站丢过来，一个人就全拿了：“写需求==>出设计稿==>做模板==>写程序==>运营.