Web前端开发规范

2021-05-31 11:29:43

摘要：Web前端开发规范

规范目的

为提高团队协作效率,方便日后项目维护

通用规范

必须保证eslintrc不报错误和警告

编码统一为utf-8;

编码必须格式化, 比如缩进

tab统一为两个空格

vue文件代码结构必须统一如下:

<html>html代码<html>

<javascript>javascript代码</javascript>

<styles>css样式代码</styles>

文件命名规范

驼峰式命名法介绍

Pascal Case 大驼峰式命名法：首字母大写。eg：StudentInfo、UserInfo、ProductInfo
Camel Case 小驼峰式命名法：首字母小写。eg：studentInfo、userInfo、productInfo

文件资源命名

文件名不得包含空格
文件命名遵循小驼峰式命名法
vue组件命名遵循大驼峰式命名法,页面vue文件除外

HTML规范

html需要遵循语义化,避免错误使用标签,避免不必要的代码,如行内元素和块元素的使用
避免不必要的代码嵌套
标签属性的定义,确保全部使用双引号,不得使用单引号
不在元素上使用 style 属性
ID需确保项目唯一
class命名尽量直接使用常用名词,如使用常用名词(如:name,title等),写样式必须有两层嵌套,避免样式冲突

CSS样式规范

公用样式需要根据作用区分文件维护
书写代码前, 考虑并提高样式重复使用率;
充分利用html自身属性及样式继承原理减少代码量
element-ui.scss // 用于覆盖element-ui样式的
mixin.scss // 公用基础类
variables.css // 公用样式变量,如主题色等,方便后面调整样式
确认避免重复样式使用
不得直接使用常用名词命名等class,需要嵌套使用
选择器(包括伪类)嵌套不得多于4层
不得使用important, 除非用于覆盖第三方样式

javascript规范

命名语义化,可读性强
注意规范添加注释
避免全局命名空间污染
常量命名: 使用大写字母和下划线来组合命名，下划线用以分割单词
const MAX_COUNT = 10;
const URL = 'http://www.baidu.com';
变量命名: 小驼峰式命名
私有属性和方法同样遵循小驼峰式命名,并且需要下划线( _ )开头
function Student(name) {
  var _name = name;  // 私有成员

  // 公共方法
  this.getName = function() {
    return _name;
  }
  // 公共方式
  this.setName = function(value) {
    _name = value;
  }
}
var st = new Student('tom');
st.setName('jerry');
console.log(st.getName()); // => jerry：输出_name私有变量的
函数命名: 小驼峰式命名,用户主动调用的方法需要加handle开头,如下
<button @click="handleSubmit">提交</button>
function handleSubmit() {
  console.log('提交表单')
}

VUE规范

vue 主页面文件一般使用小驼峰式命名,组件vue文件使用大驼峰式命名
路由直接映射到页面目录,ssr自动生成路由的项目除外
功能组件存放在页面目录即可,通用组件存放在components目录
data变量需要做好归类,如下
data() {
  return {
    map: {},  // 列表页面筛选条件集合
    page: {},  // 分页参数集合,多个分页可以后面加别名,如: pageUser
    ctrl: {},  // 页面控制(Control)集合,用于控制模块显示隐藏等操作,太多控制属性可以加别名
    opts: {}, // 页面下拉菜单的枚举列表
  }
}

页面规范

UI尺寸统一使用small规格
页面按钮统一使用plain风格的按钮,注意按钮类型的使用,danger级别的按钮操作必须使用确认弹窗
dialog对话框和tab页面的使用: 一般展示八个简单选项内容的组件用dialog弹窗展示,多数据或者内容比较复杂的使用tab页面展示
dialog对话框一般竖型布局宽度固定600px,横向布局一行最多两个选项,宽度固定900px
存在多层dialog对话框嵌套的,第二层对话框的尺寸要比上一级小40px,如此类推