前端代码规范

一、 基本规则描述

1 、变量命名、函数:

a 、变量命名语义化;

b 、不能使用拼音;

c 、函数的命名建议动词开头;


2 、常量命名全部使用大写字母;


3 、提示语归类(暂定):所有的提示语写入到一个 JS 文件里,便于管理;


4 、正则表达式:正则表达式写在一个 JS 文件里,方便管理;


5 、接口路径分类管理,写在不同的 JS 文件里;


6 、文件的编码格式: UTF-8 ;


7 、修改别人的代码:日期、说明、修改人、开始、结束、 bug 号;


8 、禁止在 html 里写行内样式,可以在 html 里动态绑定行内样式


10 、使用 ES6 的新语法(包含但不限于以下几种):

a 、解构赋值:

b 、箭头函数:

c 、模板字符串:


11 、其它规范细则请参考第五条《代码规范细则》



二、 CSS 样式

1 、 css 样式文件头部注释:

模块:【公共模块】

页面名称:【 common.css 】

说明:【公共的样式】

作者

日期


2 、 样式的名称全部使用小写,用下户线“ _ ”,结束添加分好“;”;


3 、公共的样式名称:【 common_ 样式名称】


4 、组件内的样式名称:【页面名称 / 模块名称 _ 样式名称】


5 、公共的样式文件,样式要分组 【 font 】【 padding 】【 margin 】



三、 VUE 模板

1 、文件命名:驼峰法命名,【父模块 + 功能名 +.vue 】;


2 、 vue 模板文件头部注释:

模块:【一级模块 - { 二级模块 } - { 三级模块 } 】

页面名称:【页面的名称 .vue 】

说明:【页面的对应的功能描述】

作者:【创建人】

日期:【创建日期】


3 、页面标签;

<template></template>

<script></script>

<style scoped></style>


4 、 javascript 方法注释:

描述:【方法的功能】

作者

时间

参数:【数据类型】【参数描述】

return :【数据类型】【参数描述】



5 、 HTML 标签使用要求:

a 、标签要语义化;

b 、标签要成对,开始标签结束标签

c 、页面模块要分组,注释要写清楚


d 、代码缩进要按照标准,要有层级关系,层次分明;



四、组件

1 、文件命名:【功能名称 +.vue 】;


2 、组件头部注释:

模块

页面名称

说明

作者

日期

demo :【描述组件如何使用、自定义参数说明】




五、代码规范细则

使用两个空格进行缩进 。


除需要转义的情况外,字符串统一使用单引号。


不要定义未使用的变量。


关键字后面加空格


函数声明时括号与函数名间加空格。


始终使用   ===   替代   == 。

例外:   obj == null   可以用来检查   null || undefined 。


字符串拼接操作符 (Infix operators) 之间要留空格。


逗号后面加空格。


else 关键字要与花括号保持在同一行。


多行 if 语句的的括号不能省。


不要丢掉异常处理中 err 参数。


使用浏览器全局变量时加上   window.   前缀。


不允许有连续多行空行。


对于三元运算符   ?   和   :   与他们所负责的代码处于同一行


每个 var 关键字单独声明一个变量。


条件语句中赋值语句使用括号包起来。这样使得代码更加清晰可读,而不会认为是将条件判断语句的全等号( === )错写成了等号( = )



单行代码块两边加空格。


对于变量和函数名统一使用驼峰命名法。


不允许有多余的行末逗号。


始终将逗号置于行末。


点号操作符须与属性需在同一行。


文件末尾留一空行。


函数调用时标识符与括号间不留间隔。


键值对当中冒号与值之间要留空白。


构造函数要以大写字母开头。


无参的构造函数调用时要带上括号。


对象中定义了存值器,一定要对应的定义取值器。


子类的构造器中一定要调用   super


使用数组字面量而不是构造器。


避免使用   arguments.callee   和   arguments.caller 。


避免对类名重新赋值。


避免修改使用   const   声明的变量。


避免使用常量作为条件表达式的条件(循环语句除外)。


正则中不要使用控制符。


不要使用   debugger 。


不要对变量使用   delete   操作。



不要定义冗余的函数参数。


类中不要定义冗余的属性。


对象字面量中不要定义重复的属性。


switch   语句中不要定义重复的   case   分支。


同一模块有多个导入时一次性写完。


正则中不要使用空字符。


不要解构空值。


不要使用   eval() 。


catch   中不要对错误重新赋值。


不要扩展原生对象


避免多余的函数上下文绑定。


避免不必要的布尔转换。


不要使用多余的括号包裹函数。


switch   一定要使用   break   来将条件分支正常中断。


不要省去小数点前面的 0 。


避免对声明过的函数重新赋值。


不要对全局只读对象重新赋值。


注意隐式的   eval() 。


嵌套的代码块中禁止再定义函数。


不要向   RegExp   构造器传入非法的正则表达式。


不要使用非法的空白符。


禁止使用   __iterator__ 。


外部变量不要与对象属性重名。



不要使用标签语句。


不要书写不必要的嵌套代码块。


不要混合使用空格与制表符作为缩进。

除了缩进,不要使用多个空格。


不要使用多行字符串。


new   创建对象实例后需要赋值给变量。


禁止使用   Function   构造器。


禁止使用   Object   构造器。


禁止使用   new require 。


禁止使用   Symbol   构造器。


禁止使用原始包装器。


不要将全局对象的属性作为函数调用。


不要使用八进制字面量。


字符串字面量中也不要使用八进制转义字符。


使用   __dirname   和   __filename   时尽量避免使用字符串拼接。


使用   getPrototypeOf   来替代   __proto__ 。


不要重复声明变量。


正则中避免使用多个空格。


return 语句中的赋值必需有括号包裹。


避免将变量赋值给自己


避免将变量与自己进行比较操作。


避免使用逗号操作符。


不要随意更改关键字的值。


禁止使用稀疏数组( Sparse arrays )。


不要使用制表符。


正确使用 ES6 中的字符串模板。


使用   this   前请确保   super()   已调用。


用   throw   抛错时,抛出   Error   对象而不是字符串。


行末不留空格。


不要使用   undefined   来初始化变量。


循环语句中注意更新循环变量。


如果有更好的实现,尽量不要使用三元表达式。


return , throw , continue   和   break   后不要再跟代码。


finally   代码块中不要再改变程序执行流程。


关系运算符的左值不要做取反操作。


避免不必要的   .call()   和   .apply() 。


避免使用不必要的计算值作对象属性。


禁止多余的构造器。


禁止不必要的转义。


import, export 和解构操作中,禁止赋值到同名变量。


属性前面不要加空格。


禁止使用   with 。


对象属性换行时注意统一代码风格。


代码块中避免多余留白。


展开运算符与它的表达式间不要留空白。


遇到分号时空格要后留前不留。


代码块首尾留空格。


圆括号间不留空格。


一元运算符后面跟一个空格。


注释首尾留空格。


模板字符串中变量前后不加空格。


检查   NaN   的正确姿势是使用   isNaN() 。


用合法的字符串跟   typeof   进行比较操作。


自调用匿名函数 (IIFEs) 使用括号包裹。


yield *   中的   *   前后都要有空格。


不要使用分号。


不要使用   (,   [, or   `   等作为一行的开始。在没有分号的情况下代码压缩后会导致报错,而坚持这一规范则可避免出错。


参考链接:

https://standardjs.com/rules-zhcn.html#javascript-standard-style

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Web 前端代码规范 最后更新时间:2017-06-25 原始文章链接:https://github.com/bx...
    白小明0927阅读 7,278评论 1 15
  • 前端代码规范 JavaScript代码编写规范 缩进 每一层级由4个空格组成,避免使用制表符(Tab)进行缩进。 ...
    佛系少女不佛系阅读 5,101评论 0 1
  • 命名规范 注释 eslint编码规范 使用两个空格进行缩进。eslint: indentfunction hell...
    王_凯阅读 4,003评论 0 2
  • 官网 中文版本 好的网站 Content-type: text/htmlBASH Section: User ...
    不排版阅读 9,961评论 0 5
  • 一、前端编辑器 vscode 对angular、typescript有着非常友好的支持,轻便快捷,代码统一,一键格...
    ElliottsSu阅读 4,525评论 0 2

友情链接更多精彩内容