前端开发规范
博客专区 > 阿振 的博客 > 博客详情
前端开发规范
阿振 发表于1年前
前端开发规范
  • 发表于 1年前
  • 阅读 38
  • 收藏 3
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

摘要: 前端开发规范

前端开发规范

规范目的

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

通用约定

  1. 基本准则:符合web标准,语义化html,结构表现行为分离,兼容性优良。页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度。
  2. 文件与目录命名约定:一律小写,必须是英文单词或产品名称的拼音,多个单词用下划线(_)连接。只能出现英文字母、数字和下划线,严禁出现中文;出现版本号时,需要用字母 v 做为前缀,小版本号用点号(.)隔开,比如 global_v8.js 或 detail_v2.2.js;该命名规范适用于 html, css, js, swf, xml, png, gif, jpg, ico 等前端维护的所有文件类型和相关目录。
  3. 文件编码约定:一律使用 UTF-8 编码.
  4. id 和 class 命名约定:内容优先,表现为辅。首先根据内容来命名,比如 main-nav。如果根据内容找不到合适的命名,可以再结合表现来定,比如 skin-blue、 present-tab、col-main;用于样式的 id 和 class 名称一律小写,多个单词用连字符连接,比如 recommend-presents,名称中只能出现小写的 26 个英文字母、数字和连字符(-),任何其它字符都严禁出现;id 和 class 尽量用英文单词命名。确实找不到合适的单词时,可以考虑使用产品的中文拼音;在不影响语义的情况下, id 和 class 名称中可以适当采用英文单词缩写, 比如 col, nav, hd, bd, ft 等, 但切忌自造缩写; id 和 class 名称中的第一个词必须是单词全拼或语义非常清晰的单词缩写, 比如 present、col; 在 JavaScript 代码中当作 hook 用的 id 或 class, 命名规则为驼峰规则,比如:navSubMenu,tableForm。 注意:如果在 JavaScript 和 CSS 中都需要用到,则不用遵守本约定。

HTML编码规范

(1) 语义

使用符合语义的标签书写 HTML 文档, 选择恰当的元素表达所需的含义

<!-- 不推荐 -->
<div onclick="goToRecommendations();">All recommendations</div>
<!-- 推荐 -->
<a href="recommendations/">All recommendations</a>

(2) 大小写

元素的标签和属性名必须小写, 属性值必须加双引号; 例如:

<!-- 不推荐 -->
<A HREF='/'>Home</A>
<!-- 推荐 -->
<a href="/">Home</a>

(3) 空格

去除比不必要的空格; 例如:

<!-- 不推荐 -->
<p>test                  </p>
<!-- 推荐 -->
<p>test</p>

(4) 嵌套

元素嵌套遵循 (X)HTML Strict 嵌套规则; 正确区分自闭合元素和非自闭合元素. 非法闭合包括:
..

共有 人打赏支持
粉丝 11
博文 54
码字总数 58528
×
阿振
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: