前端规范汇总(参考)

Posted wendyandjken

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端规范汇总(参考)相关的知识,希望对你有一定的参考价值。

1、命名

两种书写方式:

        ①连词线 ( - ) 分隔,如content_title;

        ②驼峰,又分为大驼峰(ContentTitle)和小驼峰(contentTitle)。

具体规范:

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

       ②组件名:大驼峰,如Header.vue;

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

       ④变量名:小驼峰;

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

       ⑤函数名:小驼峰,其中构造函数使用大驼峰;

注意:

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

 

2、注释

两种方式:

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

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

注意:

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

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

       /*

        * 查询

        * @param body

        * @returns {Object}

        */

 技术分享图片

 

 

3HTML规范

       ①标签语义化,不能全是div、span;

       ②img标签中,alt属性不为空;

  ①尽量不要写行内样式;

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

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

4CSS规范

       ①省略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,右下角顶一下,谢谢

 

 

 

 

以上是关于前端规范汇总(参考)的主要内容,如果未能解决你的问题,请参考以下文章

前端规范一(命名规范)

前端规范

web前端规范

常用htmlCSSjavascript前端命名规范

Beta冲刺代码规范

常用htmlCSSjavascript前端命名规范