前端代码规范

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

一、JS篇

1.变量(包括声明,函数参数)

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

(2)变量较长时用驼峰命名(状态+变量),例如:currentCourseId

或者下划线形式区分,例如:current_courseId

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

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

(4)对象属性遵循

1
2
3
4
5
6

const itemName = '优秀';

const newObject = { itemName }

const newObject = { itemName: itemName };

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

1
2

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

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

2.方法

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

例如:

1
2

handleChangeChecked = () => {}

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

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

1
2

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

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

1
2

getListData = () => {}

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

例如:

1
2

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

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

1
2

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

二、标签篇

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

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

三、样式篇

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

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

无变量情况:

1
2

className = "course-list-item"

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

1
2

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行

文章目录
  1. 一、JS篇
    1. 1.变量(包括声明,函数参数)
    2. 2.方法
  2. 二、标签篇
  3. 三、样式篇
  4. 四、整体优化篇