前端开发规范文档

文件规范

1. tpl, css, js, image文件均归档至<系统开发规范>约定的目录中;

2. tpl文件命名:英文命名, 后缀.html,请重命名与php文件同名,以方便后端添加功能时查找对应页面;

3. css文件命名:英文命名, 后缀.css,由小写字母、数字及下划线组成,公用common.css,其他页面依实际模块需求命名;

4. js文件命名  : 英文命名, 后缀.js,由小写字母、数字及下划线组成, 用common.js,其他依实际模块需求命名。


HTML书写规范

1. 文档类型声明及编码:统一为html5声明类型;编码统一为,书写时利用IDE实现层次分明的缩进;

2. 非特殊情况下样式文件必须外链至<head></head>之间;非特殊情况下JavaScript文件必须外链至页面底部</body>前;

3. 引入JS库文件,文件名须包含库名称及版本号及是否为压缩版,比如jquery-1.7.1.min.js;引入插件,文件名格式为库名称+插件名称,比如jQuery.cookie.js;

4. 所有编码均遵循xhtml标准,标签 & 属性 & 属性命名 必须由小写字母、数字及中划线组成,且所有标签必须闭合;属性值必须用双引号包括;

5. 充分利用无兼容性问题的html自身标签, 比如span, em, strong, optgroup, label等等;需要为html元素添加自定义属性的时候,可以使用须以“data-”为前缀来添加自定义属性,避免使用“data:”等其他命名方式;

6. 语义化html,如标题根据重要性用h(同一页面只能有一个h1),段落标记用p,列表用ul,内联元素中不可嵌套块级元素;

7. 尽可能减少div嵌套;

8. 书写链接地址时,必须避免重定向,例如:href=“http://www.example.com/”, 即须在URL地址后面加上“/”;

9. 在页面中尽量避免使用style属性,即style=“...”,应该尽量使用class或者id来定义新的样式,然后再对应的css文件里面修改。


CSS规范

《CSS编码规范》


JavaScript规范

1. 文件编码统一为utf-8,书写过程过, 每行代码结束必须有分号;原则上所有功能均根据项目需求原生开发,以避免网上down下来的代码造成的代码污染(沉冗代码、与现有代码冲突…);

2. 库引入:原则上仅引入jQuery库,若需引入第三方库,须与团队其他人员讨论决定;

3. 变量命名:驼峰式命名,原生JavaScript变量要求是纯英文字母,首字母须小写, 如iTaoLun;要求变量集中声明,避免全局变量;

4. 类命名:首字母大写,驼峰式命名,如 ITaoLun;

5. 函数命名:首字母小写驼峰式命名, 如iTaoLun();

6. 命名语义化, 尽可能利用英文单词或其缩写;

7. 尽量避免使用存在兼容性及消耗资源的方法或属性,比如eval_r() & innerText;

8. 后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用,以避免编码错误时乱码显示;

9. 代码结构明了,加适量注释,提高函数重用率;

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


图片规范

1. 每个模块都会增加一个图片文件夹,方便后期维护和处理,图片文件命名尽量跟css文件的命名相同,尽量使用小写命名;

2. 图片格式仅限于 jpg、png、gif;

3. 命名全部用小写字母、数字及中划线组合,其中不得包含汉字、空格和特殊字符;尽量用易懂的词汇,便于团队其他成员理解;命名分头尾两部分,用中划线隔开, 比如ad-left01.gif、btn-submit.gif;

4. 在保证视觉效果的情况下选择最小的图片格式与图片质量,以减少加载时间;

5. 尽量避免使用半透明的png图片;

6. 运用css sprite技术集中小的背景图或图标,减小页面http请求。


注释规范

1. html注释: 注释格式,只能在注释的始末位置,不可置入注释文字区域;

2. <!-- 头部 -->  <!-- //头部 -->包围,请务必要分开注释的文字(即注释文字中加空格);

3. css注释:注释格式 /**/;

4. JavaScript注释,单行注释使用 //...,多行注释使用  /**/。

原文出处:http://caibaojian.com/web-fontend-doc.html


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值