前端开发规范概述
2024-06-27 本文已影响0人
东方三篇
前端开发规范概述
本文详细阐述Web前端开发中各项规范概要，包括基本原则、文件命名、Html、Css、Js、图片和测试等相关内容。
实际开发请按照具体项目为准!
1. 基本规范
符合web标准（UTF-8，HTML5），语义化html（HTML5新增要求，减少div和span等无特定语义的标签使用，结构表现行为分离（HTML-CSS-JS代码分离，不同行为代码高内聚低耦合），兼容性优良（早期版本浏览器兼容，移动端和PC端设备兼容）.页面性能方面（减少请求次数，例如使用精灵图和sass语法），代码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度（减小repaint和reflow）。
2. 常用命名方式
-
命名名称 命名解释 命名示例 使用场景 camelCase 小驼峰式命名法 — 首字母小写 handleClick，myFun, dataList 函数名称、变量名称 PascalCase 大驼峰式命名法 — 首字母大写 TodoList, Person、MyComponent 类(class)、组件（vue通用组件） kebab-case 短横线连接式 date-pick.css、todo-list、my-app、date-util.js css文件名称(css类,id等命名)、项目名称、js文件 Snake 下划线连接式 data_loading.html、banner_news.jpg html文件, 图片等静态资源 PS: 静态文件下划线，编译文件短横线！
3. Html
html规范模板: [模板地址](https://www.jianshu.com/p/f47e6c3e34c5)
4. Css
-
样式文件必须写上 @charset 规则，并且一定要在样式文件的第一行首个字符位置开始写，编码名用 “UTF-8”。
@charset "UTF-8"; .container { width: 100%; # 建议单行书写。 height: 100%; }
-
class与id的使用：id是唯一的并是父级的，class是可以重复的并是子级的，所以id仅使用在大的模块上，class可用在重复使用率高及子级中。命名要语义化，简明化。
-
属性值引号, 统一使用单引号。
body { font-family: 'Sans' }
-
书写代码前，提高样式重复使用率。
-
充分利用html自身属性及样式继承原理减少代码量。
-
背景图片请尽可能使用精灵图技术，减小http请求，考虑到多人协作开发，精灵图按模块制作。
-
杜绝使用兼容ie8。
-
避免兼容性属性的使用，比如text-shadow||css3的相关属性。
-
减少使用影响性能的属性，比如position：absolute||float。
-
必须为大区块样式添加注释，小区块适量注释。
-
代码缩进与格式：建议单行书写。
-
Vue项目以及预编译器的使用: Vue&Css。
-
页面的缩放配置信息：页面缩放方案。
-
项目功能css初始化模板：css初始化模板、github上流行模板地址
5. Js
- 文件编码统一为utf-8。
- 变量命名：驼峰式命名.原生JS变量要求是纯英文字母，首字母小写，如myVue。
- 类命名：首字母大写，驼峰式命名.如MyVue。
- 函数命名：首字母小写驼峰式命名.如myVue()。
- 命名语义化，尽可能利用英文单词或其缩写。
- 尽量避免使用存在兼容性及消耗资源的方法或属性，比如eval_r()&innerText。
- 后期优化中，Js非注释类中文字符须转换成unicode编码使用，以避免编码错误时乱码显示。
- 代码结构明了，加适量注释.提高函数重用率。
- 注重与html分离，减小reflow，注重浏览器性能。
6. 图片
- 命名全部用小写英文字母_的组合，其中不得包含汉字||空格||特殊字符；尽量用易懂的词汇，便于团队其他成员理解。另，命名分头尾两部分，用下划线隔开，比如ad_left01.gif||btn_submit.gif。
- 在保证视觉效果的情况下选择最小的图片格式与图片质量，以减少加载时间。
- 尽量避免使用半透明的png图片(若使用，请参考css规范相关说明)。
- 运用css精灵图技术集中小的背景图或图标，减小页面http请求。
