编码规范

前端开发编码规范之编码规范思维导图分享！下图内容完整丰富，包括HTML编码规范、CSS编码规范、JS编码规范、组建规范、解决跨域问题等知识要点。跟着这份导图一起学习，零基础也能快速入门！

编码规范

• HTML编码规范
  • id
    • 表格和表单都有一个唯一标记
  • h1-h5
    • 遵循从大到小，体现文档结构，利于搜素引擎
  • 图片
    • alt标签不为空
  • 关注点分离
    • 尽可能将结构、表现、行为分离
    • 代码中不涉及任何的表现元素，如style，font等，除了特殊情况，如框架中的定义
  • 内容之上
    • 不用img元素当做专门用来做视觉设计的元素
    • img和svg被引入到HTML的唯一理由是他们呈现出了与内容相关的一些信息
• CSS编码规范
  • 文件
    • 单个css文件建议少于300行
  • 排版规范
    • 规则分离
      • 规则之间始终有一个空行分隔
    • 选择器嵌套
      • 尽量避免嵌套没有任何内容的选择器
      • 嵌套选择器和css属性之间空一行
    • 嵌套顺序
      • 当前选择器的样式属性 => 父级选择器的伪类选择器，如:hover => 伪类元素如:after => 父级选择器的声明样式 .selectd => 子选择器
    • 单行
      • 如HTML中内联css，必须单行
      • 每一条规则的大括号{前加空格，}前前加空格
      • 属性名冒号之前不加空格，：之后加空格，每一个属性值后必须添加；号，并且分号后空格
      • 多个selector共用一个是样式集，则多个selector必须写成多行形式
    • 多行
      • 每一条规则的大括号{前添加空格
      • 多个selector共用一个是样式集，则多个selector必须写成多行形式
      • 每一条规结束的大括号}必须与规则选择器的第一个字符对齐
      • 属性冒号：之前不加空格，冒号：之后加空格，属性值之后添加分号
  • 属性编写规范
    • 编写顺序
      • 显示属性 => 自身属性 =>文本属性 => 其他属性
    • 显示属性——位置
      • position、top、bottom、left、right、z-index、display、float、clear等
    • 自身属性——大小
      • width、height、padding、margin等
    • 自身属性——背景
      • background、border等
    • 文本属性——文字
      • color、text-align、font、line-height等
  • 字体规则
    • 为了防止文件合并及编码转换时造成问题，建议将样式中文字体名字改成对应的英文名字，如黑体（SimHei）、宋体（SimSun）、微软雅黑（Microsoft Yahei）
    • 字体粗细采用具体数值，粗体bold写成700，正常normal写成400
    • 为了对font-family取值进行统一，更好的支持各个操作系统上各个浏览器的兼容性，font-family不允许在业务代码中随意设置
  • css.db规则
• JS编码规范
  • 引用
    • 所有的引用使用const；避免使用var；确保无法对引用重新赋值，也不会导致出现bug或难以理解
    • 如果一定需要可变动的引用，使用let代替var；let是块级作用域，而var是函数作用域
    • 注意let和const都是块级作用域，只存在于被定义的区块内
  • 对象
    • 使用字面量创建对象：const item= {}
    • 创建有动态属性名的对象时，使用可计算的属性名称：obj[getKey('enabled')] = true =》const obj = { [getKey('enabled')]: true }
    • 使用对象方法的简写：即addValue: function (value) {} =》addValue(value) { }
    • 使用对象属性值的简写，更短更有描述性：const obj = { username: username } => const obj = { username}
    • 简写的属性放在对象属性的最前面，清晰明了知道哪些属性简写了
  • 数组
    • 使用字面量创建对象：const item= [ ]
    • 向数组添加元素，使用push方法来代替通过长度直接赋值（arr[arr.lenght]=xxx）
    • 使用拓展运算符...复制数组：const item2 = [...items]
    • 使用Array.from把一个类数组对象转为数组
  • 解构
    • 使用解构存取和使用多属性对象，解构能减少临时引用属性
    • 对数组使用解构赋值。const first = arr[0] => const [first, second] = arr
    • 需要回传多个值时，使用对象解构，而不是数组解构（因为增加属性或者改变排序不会改变调用时的位置）：const [left, __, top] = fn(input) => const { left, right } = fn (input) // fn 的return也是{ }不是[ ]
  • 字符串
    • 字符串超过80个字节使用字符串连接号换行，过度使用字串连接符号可能会造成性能影响，应使用 ‘+’进行字符串拼接代替过度使用字符串连接符
    • 程序化生成字符串时，使用模板字符串代替字符串连接：‘abc’ + name =》 `abc${name}`
  • 函数
    • 使用函数声明式代替函数表达式：const fn = function（） {} => fn （）{}
    • 直接给函数的参数指定默认值，不要使用一个变化的函数参数
    • 两个函数之间隔空一行
  • 箭头函数
    • 必须使用函数表达式时（或传递一个匿名函数时），使用箭头函数符号
    • 如果一个函数适合用一行写出并且只有一个参数，把花括号，圆括号，return省略掉，否则就不省略
  • 构造函数
    • 总是使用class，避免直接操作prototype，因为class更为简洁易读
      • // bad function Queue(contents = []) { this._queue = [...contents]; } Queue.prototype.pop = function() { const value = this._queue[0]; this._queue.splice(0, 1); return value; } => class Queue { constructor(contents = []) { this._queue = [...contents]; } pop() { const value = this._queue[0]; this._queue.splice(0, 1); return value; } }
    • 使用 extends 继承。，因为extends是一个内建的原型继承方法且不会破坏instanceof
    • 构造函数内的方法可返回this来帮助链式调用
  • 变量
    • 一直使用const声明变量，如果不这样会产生全局变量。需要避免全局命名空间污染
    • 使用var声明每一个变量，增加新变量将变得更加容易，不用担心调换错;和,
    • 将所有的const和let分组，当需要把已赋值的变量 赋值给未赋值的变量的时非常有用
    • 在需要的地方给变量赋值，但请把他们放在一个合理的位置（let和const是块级作用域不是函数作用域）
  • 常量
  • 类的成员
  • 比较运算符
    • 优先使用===和！==而不是==和！=
    • 条件表达式例如if语句通过抽象ToBoolean强制计算他们的表达式且总是遵循下面规则：
    • 对象=》true；
    • undefined和null=》false；
    • 布尔值=》布尔值
    • 数字除了+0，-0，NaN -》false，其他=》true
    • 字符串：空字符串‘’=》false；其他=》true
  • 遍历
    • for.. of ：数组、字符串
    • for...in ：对象，包括所有继承的属性
  • 提交
    • 代码注释console和debugger后再提交
  • 深复制
  • 能用浅复制解决尽量用浅复制解决 注意值类型和引用类型的处理，对于数组对象，应尽量使用深浅复制
    • 子主题
    • 子主题
  • 浅复制
  • 延伸
    • 纯函数
    • 柯里化
    • 装饰器
  • vue相关
    • 尽量使用set，慎用forceupdate
• 组件规范
  • 每个vue组件代码建议不超过200行，若超出建议拆分组件 组件一般情况下可拆分成 基础/ui部分 和 业务部分 基础组件：承载呈现，基础功能，不和业务耦合部分 业务组件：业务功能、业务特殊数据等
  • UI组件/基础组件
    • 开发的时候注意可拓展性，支持数据传参进行渲染，支持插槽slot
    • 设置有mixin，mixin中放了基础信息和方法
    • 每个vue组件代码建议不超过200行，若超出建议拆分组件
  • 容器组件
    • 和当前业务耦合性比较高，由多个基础组件组成，可承载当前页的业务接口请求和数据(vuex)
  • 组件存放位置
    • ui组件放置在src/components/中，包含.vue，.js，readme.md描述组件的基本信息，readme如下表：
    • 业务组件放置在业务模块部分即可
  • 组件通讯
    • 使用props和$emit来数据分发和传送
  • 组件的挂载和销毁
    • 通过v-if 控制组件的挂载和销毁：<testcomponent v-if='componentActive'> </testcomponent>
    • 通过is控制组件的挂载和销毁：<component  is='componentName'> </component>
• 解决跨域问题
• 性能优化
• 其他规范