前端代码规范

这是我上家教育saas公司前端同事整理出来的(当时我们公司主要用的前端框架是React)，当时我在这家公司除了主写后端之外，还需要写一些前端代码，按照这个规范写，前端代码可读性、可维护性、可扩展性以及性能都会大大提高。

一、JS篇

1.变量（包括声明，函数参数）

(1)变量均用英文单词（不会要去翻译）

(2)变量较长时用驼峰命名（状态+变量），例如：currentCourseId

或者下划线形式区分，例如：current_courseId

注：无论那种方式代码里只能出现一种

(3)字符串中包含变量：你是最${isPig ? '胖' : '完美'}的吗?

(4)对象属性遵循

const itemName = '优秀';

const newObject = { itemName } 

const newObject = { itemName: itemName };

(5)对象结构赋值，兼容处理 例如:

const { listData = [], ...props } = this.props;

(6)对象取值 尽量采用 … 扩展运算符完成组件间多props的情况

2.方法

(1)方法命名必须遵循驼峰命名，不怕长就怕看不懂，

例如：

handleChangeChecked = () => {}

(2)方法采用es6写法（可省去react绑定当前组件代码）

(3)对于用户交互方法作用于组件的方法，遵循以下:

<div onClick = { handleClick = () => {} }>点击事件</div>

(4)接口请求方法语义化明确 例如：

getListData = () => {}

(5)js方法（filter，map，find等等）遍历时尽可能区分到遍历的是什么item

例如：

listData.map（testItem => ( <div></div>)）

(6)善于运用箭头函数来缩短代码行数,例如过滤:

listData.filter(item => !!item.showFlag)

二、标签篇

(1)文本展示的不要去用自带样式标签，用div/span去代替h1….h5/p

(2)减少无用标签层级，没有样式功能的层级去掉

三、样式篇

(1)sass/less文件必须层级嵌套（防止污染全局样式），当定义一个js文件时，需要给到当前唯一className，并在less样式文件里用className包裹样式

(2)className的值语义化明确，要用‘-’符号隔开，并且不要出现汉字

无变量情况：

className = "course-list-item"

有变量情况：不要在className里面去判断，已变量方式

const status = isOpen ? 'open' : 'close'; className={`item-content-${status}`}

四、整体优化篇

(1)遍历之后item取值做好兼容后，再赋值给标签（方便控制Dom显隐）

(2)抽离基础纯UI展示无状态组件，减少一个render方法层级和行数

(3)render方法拆分化，renderTop，renderMiddle，renderFooter，简称布局大法

(4)一个less样式文件对应一个js文件，用className联通，形成封闭区内的样式渲染

(5)控制单个文件代码<500行