前端代码规范

50 阅读1分钟

html规范

1、采用语义化标签。例如:<footer /> <header />
2、如果标签内部没有内容就采用自闭合形式。例如<div />
3、属性值采用双引号,其余情况下使用单引号。例如:<div class="header" />

css规范

1、类名使用小写加-形式。例如:comp-image
2、避免嵌套超过3层。 3、子选择器尽量使用>。例如:.comp-image > span
4、省略掉0后面的单位。例如:margin-right: 0;

文件命名规范

1、文件夹的命名采用小写加-命名。例如:insp-content
2、react的文件命名尽量与组件名字保持一致

js规范

1、this的转换命名用self
2、if switch等后面要跟{}
3、undefined的判断要用:type of a === 'undefined' 4、常量的命名要全部大写加-。例如:STATUS_LABEL

react的命名

1、组件文件必须用export default导出。
2、组件事件函数需要on加动词。例如:onClick,onSubmit
3、如果组件的属性过多,需要每个属性一行。例如:

<Image 
    src=""
/>

4、总组件的文件夹需要命名为:components,同时该文件夹下面要有一个index文件导出所有组件。 5、一个组件内部的html结构尽量不要嵌套超过3级,如果超过了建议用小组件代替。
6、一个组件文件夹内部的可以包括index.jsx,以及其它用组件名字命名的.jsx,这些用组件名字命名的jsx文件就是该组件的子组件。

缩进规范

1、缩进采用一个tab,两个空格。