前端规范汇总（参考）

Posted 2020-12-03 wendyandjken

1、命名

两种书写方式：

        ①连词线 ( - ) 分隔，如content_title；

        ②驼峰，又分为大驼峰（ContentTitle）和小驼峰（contentTitle）。

具体规范：

       ①文件名：小写，如包含多个单词时，单词之间使用半角的连词线 ( - ) 分隔；

       ②组件名：大驼峰，如Header.vue；

       ③class类名：小写，如包含多个单词，单词间使用半角的连词线 ( - ) 分隔；

       ④变量名：小驼峰；

       ⑤常量名：全部大写，如包含多个单词，单词间使用半角的连词线 ( _) 分隔;

       ⑤函数名：小驼峰，其中构造函数使用大驼峰；

注意：

       以上命名必须语义化，并且函数命名时，前缀需为动词，例如can，has，is，get，set等。

 

2、注释

两种方式：

       ①单行注释：//(双斜线)与注释文字之间保留一个空格

       ②多行注释：/ *注释说明* / 

注意：

       ①若至少三行注释时，第一行为/*，最后行为*/，其他行以*开始，并且注释文字与*保留一个空格。例如：/*

      ②函数(方法)注释也是多行注释的一种，但是包含了特殊的注释要求，例如：

       /*

        * 查询

        * @param body

        * @returns {Object}

        */

 

 

 

3、HTML规范

       ①标签语义化，不能全是div、span；

       ②img标签中，alt属性不为空；

　　①尽量不要写行内样式；

       ③尽量不使用嵌入式样式，如<div style=“margin-top:20px”></div>；

       ④公共的class类名，比如content、conttent_title等，只做公共布局用；

4、CSS规范

       ①省略0后面的单位，例如：margin-right: 0;

       ②最佳实践，我们应该遵循以下顺序（应该按照下表的顺序，不做强求）：

       结构性属性：

1. display
2. position, left, top, right etc.
3. overflow, float, clear etc.
4. margin, padding

       表现性属性：

• background, border etc.
• font, text

 

 

5、使用严格等于（===）判断

       区别说明：

       ①==， 两边值类型不同的时候，要先进行类型转换，再比较。

       ②===，不做类型转换，类型不同的一定不等。

 

        * 分块定义异步组件 使用 AMD 风格的 require

        * const Home = resolve => require([‘./Home.vue‘], resolve)

        */

 

6.路由

 

　　一个页面对应一个文件夹，对应组件放在对应页面文件夹里面，路由名尽量简洁，语义化，

　　文件名对应路由名，对应vuex模块名

　　

　　　

 

7.请求文件

　　后缀必须为驼峰Api

　　

 

 8.vueX文件结构规范

　　模块化： 

　　机构化：

 

  

 

 

//觉得OK，右下角顶一下，谢谢