前端开发规范概述

本文详细阐述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: 静态文件下划线，编译文件短横线！

  Vue开发命名规范

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请求。

7. 代码格式化和Eslint校验

8. 维护README.md文件内容

8. 测试