前端开发规范

团队开发需要遵守一定的开发规范,有效降低bug率,提高维护效率,方便代码review,本章基于Airbnb公司发布的规范,做出了常用的规范总结

Airbnb JavaScript规范

  1. 使用空格+2代替tab(主流编辑器设置tab = 2个空格)

  2. 不能省略分号

  3. es6相关:

杜绝var

优先使用箭头函数

使用模板字符串取代连接字符串

  1. 常量的命名规范

常量命名应该使用全大写格式,并用下划线分割,如果常量是函数,那么采用驼峰式命名法

const NUMBER = 5;

const Sum = () => {};

  1. 每次只声明一个变量,const放一起,let放一起,不要使用链接变量分配

// bad

const a = 1, b = 2;

// good

const a = 1;

const b = 2;

let i;

let length;

  1. 静态字符串一律使用单引号或反引号,不使用双引号。动态字符串使用反引号。

const a = 'foobar';

const b = foo${a}bar;

类型

  1. 基本类型(string,number,boolean,null,undefined,symbol):直接存取

    复杂类型(object,array,function): 通过引用的方式存取

引用

  1. 使用const let申明引用类型,避免使用var

对象

  1. 字面值创建对象,一个地方定义对象所有的属性,对象方法的简写形式(略)

    属性值简写形式,并且将你的所有缩写放在对象声明的开始

    只有对那些不合法的属性名标识符添加引号

    使用... 而不是Object.assign

数组

  1. 字面量声明数组

    使用数组展开操作符...拷贝数组 const itemsCopy = [...items];

    向数组添加元素时,使用push itemsCopy.push('abracadabra')

    将类数组对象(array-like)转换成数组时,使用...而不是Array.from

    当需要对可遍历对象进行map操作时,使用Array.from而不是展开操作符...,避免新建一个临时数组。

    数组方法回调需要有返回值

    如果数组有多行,请在打开和关闭数组括号之前使用换行符

解构

  1. 访问和使用对象的多个属性时用对象解构操作

    使用数组解构

    使用对象解构来实现多个返回值,而不是数组解构

字符串

  1. 以编程方式构建字符串时,使用模板字符串而不是连接符 同6

    不超过100个字符的字符串不应该使用连接符或者换行书写

    不要过多的转义字符串

函数

  1. 使用命名函数表达式而不是函数声明

    把立即执行函数包裹在圆括号里

    不要在非函数块(if、while等等)内声明函数。

    不要用arguments命名参数,不要使用arguments,用rest语法...代替

    用默认参数语法而不是在函数里对参数重新赋值。把默认参数赋值放在最后

    函数签名部分要有空格,不要对参数重新赋值

    函数的缩进:每行值包含一个参数,每行逗号结尾

箭头函数

  1. 如果函数体由一个没有副作用的表达式语句组成,删除大括号和return

    万一表达式涉及多行,把他包裹在圆括号里更可读。

类 & 构造函数

  1. 常用class,避免直接操作prototype

    用extends实现继承

模块

  1. 不要用import通配符,就是 * 这种方式

    不要直接从import中直接export

    一个路径只 import 一次

    在一个单一导出模块里,用 export default 更好

    import 放在其他所有语句之前

    多行import应该缩进,就像多行数组和对象字面量

迭代器和生成器

  1. 不要用遍历器for。用JavaScript高级函数代替for-in、for-of

用数组的这些迭代方法: map() / every() / filter() / find() / findIndex() / reduce() / some()/ ...

用对象的这些方法: Object.keys() / Object.values() / Object.entries() 去产生一个数组,这样你就能去遍历对象了

其他

  1. 做幂运算时用幂操作符

    在你需要的地方声明变量,但是要放在合理的位置

    不要使用一元自增自减运算符使用num + =

1而不是num ++或num ++

  1. 多行注释用/** ... */

    单行注释用//,将单行注释放在被注释区域上面。如果注释不是在第一行,那么注释前面就空一行

    所有注释开头空一个,方便阅读

  1. tab用两个空格

    在大括号前空一格

    在控制语句(if, while 等)的圆括号前空一格。在函数调用和定义时,参数列表和函数名之间不空格

    用空格来隔开运算符

    文件结尾空一行

    在一个代码块后下一条语句前空一行

    不要用空白行填充块

    花括号里加空格

    , 前不要空格, , 后需要空格

    调用函数时,函数名和小括号之间不要空格 func();

    在对象的字面量属性中, key value 之间要有空格

    行末不要空格,避免出现多个空行。 在文件末尾只允许空一行

    额外结尾逗号

    避免一行代码超过100个字符(包含空格) 注意:长字符串不受此规则限制

开发建议

  1. 新项目建议遵守eslint规范,解决eslint报错的过程就是纠正代码规范的过程. eslint常见规范:

(1) 空格报错

大括号'{}'内部前后需要空格 A space is required after '{' A space isrequired before '}' (在'{'前也要空一格)

,后需要空格 A space is required after ','

赋值:后需要空格Missing spacebefore value for key 'key'

中缀运算符必须间隔Infix operatorsmust be spaced

(2) 其他常见报错

使用点表示法代替[] data[]is better written in dot notation 改为data.base

已声明某变量,但从未读取其值

缩进报错,双引号报错,let未重新分配使用const

  1. 代码规范
  1. 好的处理表格配置处理
  1. 归总相同代码,统一处理逻辑

规范参考

Airbnb JavaScript 编码规范:https://github.com/lin-123/javascript (推荐食用)

Google JavaScript 编码规范:https://google.github.io/styleguide/jsguide.html

Idiomatic JavaScript 编码规范:https://github.com/rwaldron/idiomatic.js

HTML/CSS/JS编码规范:https://www.cnblogs.com/lvhw/p/7451351.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,723评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,485评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,998评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,323评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,355评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,079评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,389评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,019评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,519评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,971评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,100评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,738评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,293评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,289评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,517评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,547评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,834评论 2 345

推荐阅读更多精彩内容

  • 参考airbnb规范,该规范是airbnb定义的eslint规范,从github上来看,受欢迎程度很高,选择这个做...
    li4065阅读 2,253评论 0 0
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,095评论 0 3
  • 命名编码规范 驼峰式命名法介绍 -Pascal Case 大驼峰式命名法:首字母大写。eg:StudentInfo...
    莫言默言阅读 3,783评论 0 5
  • 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护,输出高质量的文档,特制订此文档。 本规范文档一经确认...
    行走的蛋白质阅读 314评论 0 0
  • 学校里每天吃泡面的汤都不倒入旁边的马桶而是直接套个塑料袋扔进垃圾桶,更有甚者直接扔进垃圾桶。这给保洁阿姨造成很大的...
    ee443263c014阅读 255评论 1 5