Google技术:你不了解Google最新发布的JS代码规范 的最佳实践

执笔记忆的空白 2018-04-08 16:07:34 ⋅ 150 阅读


Google为不是很熟悉前端JS代码标准的人发布了《JS代码标准》,文中列举了编写简单易懂的代码最佳事件。


代码标准并不是一种编写正确JavaScript代码的规矩,而是为了保持源代码编写形式共同的一种挑选。对于JavaScript言语特别如此,由于JavaScript束缚很少,开发者可以编写各种各样的编码样式。


当前最流行的编码规范Google和Airbnb各占半壁江山,如果想要深入前端学习建议学习一下这两家公司的编码规范。


使用空格代替tab

除了每一行的终止符序列,ASCII水平空格符(0x20)是唯一一个可以出现在源文件中任意位置的空格字符。这也意味着,tab字符不应该被使用,以及被用来控制缩进。

规范随后指出应该使用2个,而不是4个空格带实现缩进。

// bad
function foo() { ∙∙∙∙let name; }
// bad
function bar() { ∙let name; }
// good
function baz() { ∙∙let name; }

不能省略分号

每个语句必须以分号结尾。不允许依赖于JS自动添加分号的功能。

尽管省略了分号在浏览器里面是支持的,但目前分号的使用问题显然已经像“空格 vs tab”这个问题一样产生了巨大的争议。然而Google编码规范对此表示分号是必须的,是不能够省略的。

// bad
let luke = {}
let leia = {} [luke, leia].forEach(jedi => jedi.father = 'vader')
// good
let luke = {};let leia = {}; [luke, leia].forEach((jedi) => {  jedi.father = 'vader'; });

暂时不要使用ES6 module

ES6才刚刚成型整个开发社区还不够活跃一些模块的语义尚不完全确定,建议暂时不要使用,比如export和import关键字。如果后续有相关规范制定完成,可以采用。
// 暂时不要编写下面的代码://
------ lib.js ------
export function square(x) {    
   return x * x; }export function diag(x, y) {    
   return sqrt(square(x) + square(y)); }
//------ main.js ------
import { square, diag } from 'lib';
译者注:感觉遵守这条规范不大现实,毕竟现在已经有babel了。而且使用React时,最佳实践就是使用ES6模块吧。

不推荐代码水平对齐

Google的代码规范允许但不推荐对代码进行水平对齐。即使之前的代码中做了水平对齐的处理,以后也应该避免这种行为。

对代码进行水平对齐会在代码中添加若干多余的空格,这让相邻两行的字符看上去处于一条垂直线上。

// bad
{  
 tiny:   42,    longer: 435, };
// good
{  
 tiny: 42,  longer: 435, };

抛弃var

建议开始使用const或者let来声明所有局部变量。如果变量不需要被重新赋值,默认应该使用const。应该拒绝使用关键字var。

我不知道是因为没有人能说服他们,还是说因为旧习难改。目前我仍能看到许多人在StackOverFlow或其他地方使用var声明变量。

// bad
var example = 42;
// good
const example = 42;

优先使用箭头函数

箭头函数提供了一种简洁的语法,并且避免了一些关于this指向的问题。相比较与function关键字,开发者应该优先使用箭头函数来声明函数,尤其是声明嵌套函数。

坦白说,我曾以为箭头函数的作用只在于简洁美观。但现在我发现原来它们还有更重要的作用。

// bad
[1, 2, 3].map(function (x) {  
   const y = x + 1;  return x * y; });
// good
[1, 2, 3].map((x) => {  
   const y = x + 1;  return x * y; });

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

在处理多行字符串时,模板字符串比复杂的拼接字符串要表现的更出色。
// bad
function sayHi(name) {  
   return 'How are you, ' + name + '?'; }
// bad
function sayHi(name) {  
   return ['How are you, ', name, '?'].join(); }
// bad
function sayHi(name) {  
   return `How are you, ${ name }?`; }
// good
function sayHi(name) {  
   return `How are you, ${name}?`; }

不要使用续行符分割长字符串

在JS中, \也代表着续行符。Google的代码规范不允许在不管是模板字符串还是普通字符串中使用续行符。尽管ES5中允许这么做,但如果在 \后跟着某些结束空白符,这种行为会导致一些错误,而这些错误在审阅代码时很难注意到。

这条规则很有趣,因为Airbnb的规范中有一条与之不相同的规则

Google推荐下面这样的写法,而Airbnb则认为应该顺其自然,不做特殊处理,该多长就多长。

// bad (建议在PC端阅读)
const longString = 'This is a very long string that \    far exceeds the 80 column limit. It unfortunately \    contains long stretches of spaces due to how the \    continued lines are indented.';
// good
const longString = 'This is a very long string that ' +    'far exceeds the 80 column limit. It does not contain ' +    'long stretches of spaces since the concatenated ' +    'strings are cleaner.';

优先使用for...of

在ES6中,有3种不同的for循环。尽管每一种有它的应用场景,但Google仍推荐使用 for...of

真有趣,Google居然会特别指定一种for循环。虽然这很奇怪,但不影响我接受这一观点。

以前我认为for...in适合遍历Object,而for...of适合遍历数组。因为我喜欢这种各司其职的使用方式。

尽管Google的规范与这种使用方式相冲突,但Google对for...of的偏爱依然让我觉得十分有趣。

不要使用eval语句

除非是在code loader中,否则不用使用eval或是Function(...string)结构。这个功能具有潜在的危险性,并且在CSP环境中无法起作用。

MDN中有一节专门提到不要使用eval语句。

// bad
let obj = { a: 20, b: 30 };
let propName = getPropName();  
// returns "a" or "b"
eval( 'var result = obj.' + propName );
// good
let obj = { a: 20, b: 30 };
let propName = getPropName();  
// returns "a" or "b"
let result = obj[ propName ];  
//  obj[ "a" ] is the same as obj.a

常量的命名规范

常量命名应该使用全大写格式,并用下划线分割

如果你确定一定以及肯定一个变量值以后不会被修改,你可以将它的名称使用全大写模式改写,暗示这是一个常量,请不要修改它的值。

遵守这条规则时需要注意的一点是,如果这个常量是一个函数,那么应该使用驼峰式命名法。

// bad
const number = 5;
// good
const NUMBER = 5;

每次只声明一个变量

每一个变量声明都应该只对应着一个变量。不应该出现像 let a = 1,b = 2;这样的语句。
// bad
let a = 1, b = 2, c = 3;
// good
let a = 1;let b = 2;let c = 3;

使用单引号

只允许使用单引号包裹普通字符串,禁止使用双引号。如果字符串中包含单引号字符,应该使用模板字符串。
// bad
let directive = "No identification of self or mission."
// bad
let saying = 'Say it ain\u0027t so.';
// good
let directive = 'No identification of self or mission.';
// good
let saying = `Say it ain't so`;

总结

规范中没有需要强制执行的命令。Google虽然是现今科技巨头之一,但这份代码规范也仅仅是用来当作参考罢了。

Google是一家人才汇聚的科技公司,雇佣着出色的程序员来编写优秀的代码。能够看到这样的公司发布的代码规范是一件很有趣的事情。

原文地址:https://medium.freecodecamp.org/google-publishes-a-javascript-style-guide-here-are-some-key-lessons-1810b8ad050b 
作者:Daniel Simmons 
摘要:本文总结了Google发布的JavaScript代码规范中比较重要的部分,适合想要养成良好代码规范的读者借鉴。

更多精彩内容请关注“IT实战联盟”公众号哦~~~



全部评论: 0

    我有话说:

    「开源资讯」Guava 28.2 发布Google Java 核心工具库

    前言 Guava 28.2 发布了,Guava 是 Google 一个开源项目,包含许多 Google 核心 Java 常用库,如:集合 [collections] 、缓存 [caching

    Adobe 发布最后 Flash 更新:官方强烈建议立即卸载

    外媒 Winfuture 报道,Adobe Flash 格式迅速从动画网络故事英雄变成了网络广告反派,让 PC 速度变慢,最终成为恶意软件载体。 该 Flash 格式已经经历了二十年

    可能知道CRUD

      本系列旨在系统学习提升Mysql技能,更完整内容可以参考阿里新零售数据库设计与实战 DB引擎 可能知道CRUD INSERT 情况一 Duplicate key 当批量更新,如果

    为什么要使用 Node.js?这几点必须知道!

    经过这几年发展,前端普遍进入了技术深水区,只会Web页面开发已经难以满足企业需求,Node逐渐成为了刚性技能。 但Node在业务上使用还没有那么普及,有的时候想用老板还同意,本文将从4个角度

    Netty 最佳实践

    李林锋https://www.infoq.cn/article/netty-million-level-push-service-design-points/ 1. 背景 1.1. 话题来源 最近

    Google 将仅允许使用 OAuth 访问账户,开发者懵了

    真的是在保护 Google 帐户安全性?

    Linux 5.10.8 发布最终解决了 Btrfs 性能问题

    Linux 内核 5.10.8 已经发布。作为 Linux LTS 5.10 系列最新版本,此次更新解决了 Btrfs 文件系统性能问题。 Btrfs 是一种支持写入时复制

    「轻阅读」“来我公司做技术总监吧” “要写代码吗?” “代码来干嘛?”

    标题来源于一段真实对话,老赵,小李都是我朋友,我作为中间人介绍他们认识,我们约在上海码农圣地--张江某咖啡馆。

    「轻阅读」图文并茂带了解分布式架构演进

    初始阶段架构初始阶段 小型系统 应用程序、数据库、文件等所有资源都在一台服务器上通俗称LAMP

    Google Code:Google guava工具类快速使用

    Guava是对Java API补充,对Java开发中常用功能进行更优雅实现,使得编码更加轻松,代码容易理解。

    前后端分离实践—正确开启Mockjs姿势

    不得不了解姿势----mockjs造数据

    Dgraph 1.2.8 发布,事务性分布式图形数据库

    Dgraph 1.2.8 发布了。Dgraph 是一个可扩展,分布式,低延迟图数据库,目标是提供 Google 生产水平规模和吞吐量,在超过 TB 结构数据里,为用户提供足够低延迟实时

    「轻阅读」Dubbo 如何成为连接异构微服务体系最佳服务开发框架

    实现异构微服务体系间共存或迁移,关键点在打通异构体系间协议与服务发现,得益于 Dubbo 自身对多协议、多注册模型支持

    2018年8个技巧来构建更好Node.js应用程序

    2018年8个技巧来构建更好Node.js应用程序

    京东技术:Sieve—Android 内存分析系统 | 解决内存溢出问题

    内存问题是个老大难,对用户来说,泄漏或者合理内存使用最终会反映到性能和体验上,并且极易造成 OOM( Out Of Memories ) 而闪退, 而对开发者来说更为头疼......

    Google 宣布正式开源 Jib ,帮助 Java 应用快速容器化

    Google 本周宣布开源一款新 Java 工具 Jib ,旨在让开发者使用他们熟悉工具更轻松地将 Java 应用程序容器化。

    想更好理解Node.jsBuffer吗?看一下这个。

    不论是否是科班出身,认真读完,想必会给带去一些收获.