web前端工程师的一些代码规范建议

 时间:2024-11-01 17:57:08

1、项目结构项目命名规范项目:用项目对应的英文单词命名文件及文件夹:全部英文小写字母,可以使用中线,不可出现其他字符,如login,my-order调用 `/lib`里面的文件需包含版本号,压缩文件需包含`min`关键词,其他插件则可不包含,如:`/lib/jquery.1.9.1.js`格式&编码文本文件: `.xxx` UTF-8_\(无BOM\)_ 编码图片文件: `.png` _(PNG-24)_ `.jpg` _(压缩率8-12)_动态图片: `.gif`压缩文件: `.tar.gz` `.zip``.rar`

web前端工程师的一些代码规范建议

2、CSS 命名规范所有的命名用小写的英文单词不使用简单的方位词直接命名,如"left","bottom"不缩写单词,除非一看就明白的单词长名称或词组可以使用下划线作为连接符避免选择器嵌套层级过多,少于3级不要随意使用id,id应该按需使用,而不能滥用使用CSS缩写属性 ,比如padding:0 10px 5px 5px等等,这样精简代码同时又能提高用户的阅读体验。

web前端工程师的一些代码规范建议

3、CSS格式化使用不换行方式书写,增加书写速度px像素(Pixel),相对长度单位,像素px是相对于显示器屏幕分辨率而言的。em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。rem也是相对长度单位,但相对的只是HTML根元素。vw代表视窗(Viewport)的宽度为1%,如果视窗宽度为1000px,那么50vw = 500pxvh代表窗口高度的百分,如果视窗高度为800px,那么50vh = 400px公司项目使用时注意事项:现有项目都是使用px作为单位,现推荐使用rem,vw,vh作为单位

web前端工程师的一些代码规范建议

4、JS 变量命名命名方法:小驼峰式命名命名规范:前缀应当是名词。(函数的名字前缀为动词,以此区分变量和函数)命名建议:尽量在变量名字中体现所属类型,如:length、count等表示数字类型;而包含name、title表示为字符串类型。

web前端工程师的一些代码规范建议

5、JS 函数命名命名方法:小驼峰式命名法命名规范:前缀应当为动词命名建议:可使用常见动词约定

web前端工程师的一些代码规范建议

6、S 常量命名命名方法:名称全部大写命名规范:使用大写字母和下划线来组合命名,下划线用以分割单词示例

web前端工程师的一些代码规范建议

7、使用短线(-)或句点(.)作为分隔符号,推荐使用句点,最好使用小写英文字符,不要使用其他符号和扩展字符,如 jQuery UI 1.9.0 的源文件可命名为"jquery-ui-1.9.0.js"使用 .js 扩展名,这个扩展名的兼容性最好。其实任何扩展名都可以,只要是 text 类型、编码正确即可用句点分隔表示名称中的从属关系,范围大的在前,如jQuery 的表单插件 Form既可以命名为jquery.form.js

8、js 注意事项书写格式JS 换行缩进:采用tab(打散为4个空格)结束行需添加分号`;`性能尽量选用局部变量而不是全局变量尽量使用链式写法尽量减少DOM调用将js脚本放到页面底部使用jquery的data来存取数据,减少对dom的操作使用on方法绑定事件,这是jquery的推荐使用选择器的选择:尽量不用标签选择器,能用ID选择器的就不用class选择器

9、标签使用规范尽量减少标签层级双标签必须闭合,单标签用斜线闭合HTML第一行统一使用HTML5标准<!DOCTYPE html>一律统一标签结尾斜杠的书写形式:`<br />` `<hr />` 注意之间空格避免使用已过时标签,如:`<font>` `<frame>` `<s>``<img>`标签默认缺省格式:`<img src="#" alt="缺省时文字" />``<a>`标签缺省格式:`<a href="#" title="链接名称">xxx</>` 注:`target="_blank"` 根据需求决定style、link、script可省略type属性,因为 text/css 和 text/javascript 分别是他们的默认值

web前端工程师的一些代码规范建议

10、注意事项手机端的自适应布局尽量采用弹性布局,而不是百分比`css`文件都 置于头部HTML换行缩进:采用 tab空格其他效果`js`及`统计代码` 文件置于尾部手机端的页面都按750px来做,显示效果按375px 图片规范图片大小:切图时使用web格式保存,减小图片大小图片尺寸:一律采用整数,如20X20,50X50图片合并:小图片一律要合并,并保存对应的psd文件,以便后期修改

  • 如何安装Python的pyo模块?
  • 勇敢的心世界大战攻略:[6]新沙佩勒
  • 称霸天下攻略之怎么获得宠物黑风老祖?
  • 桂林自驾游必去哪些景点?
  • 如何制作东北土豆地三鲜
  • 热门搜索
    核心价值观手抄报内容 防震减灾手抄报资料 英语手抄报内容5年级 端午节手抄报句子大全 4k手抄报版面设计图 清明节手抄报内容50字 手抄报装饰小图案 推广普通话手抄报简单 感恩父母手抄报大全 读书名言手抄报