关于Google发布的JavaScript代码规范你要知道哪些

代码规范并不是一种编写正确javascript代码的规则,而是为了保持源代码编写模式一致的一种选择。这篇文章给大家介绍了关于google发布的javascript代码规范你要知道哪些,感兴趣的朋友一起看看吧

Google为了那些还不熟悉代码规范的人发布了一个JS代码规范。其中列出了编写简洁易懂的代码所应该做的最佳实践。

代码规范并不是一种编写正确JavaScript代码的规则,而是为了保持源代码编写模式一致的一种选择。对于JavaScript语言尤其如此,因为它灵活并且约束较少,允许开发者使用许多不同的编码样式。

Google和Airbnb各自占据着当前最流行的编码规范的半壁江山。如果你会在编写JS代码上投入很长时间的话,我强烈推荐你通读一遍这两家公司的编码规范。

接下来要写的是我个人认为在Google的代码规范中,与日常开发密切相关的十三条规则。

立即学习“Java免费学习笔记(深入)”;

它们处理的问题都非常具有争议性,包括tab与空格、是否强制使用分号等等。还有一些令我感到惊讶的规则,往往最后都改变了我编写JS代码的习惯。

对于每一条规则,我都会先给出规范的摘要,然后引用规范中的详细说明。我还会举一些适当的反例论证遵守这些规则的重要性。

使用空格代替tab

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

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

// badfunction foo() {∙∙∙∙let name;}// badfunction bar() {∙let name;}// goodfunction baz() {∙∙let name;}

登录后复制

不能省略分号

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

尽管我不明白为什么会有人反对这个规则,但目前分号的使用问题显然已经像“空格 vs tab”这个问题一样产生了巨大的争议。而Google对此表示分号是必须的,是不可省略的。

// badlet luke = {}let leia = {}[luke, leia].forEach(jedi => jedi.father = 'vader')// goodlet 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声明变量。

// badvar example = 42;// goodconst 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;});

登录后复制

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

在处理多行字符串时,模板字符串比复杂的拼接字符串要表现的更出色。

// badfunction sayHi(name) { return 'How are you, ' + name + '?';}// badfunction sayHi(name) { return ['How are you, ', name, '?'].join();}// badfunction sayHi(name) { return `How are you, ${ name }?`;}// goodfunction 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.';// goodconst 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语句。

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

登录后复制

常量的命名规范

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

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

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

// badconst number = 5;// goodconst NUMBER = 5;

登录后复制

每次只声明一个变量

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

// badlet a = 1, b = 2, c = 3;// goodlet a = 1;let b = 2;let c = 3;

登录后复制

使用单引号

只允许使用单引号包裹普通字符串,禁止使用双引号。如果字符串中包含单引号字符,应该使用模板字符串。

// badlet directive = "No identification of self or mission."// badlet saying = 'Say it ainu0027t so.';// goodlet directive = 'No identification of self or mission.';// goodlet saying = `Say it ain't so`;

登录后复制

总结

就像我在开头所说那样,规范中没有需要强制执行的命令。尽管Google是科技巨头之一,但这份代码规范也仅仅是用来当作参考罢了。

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

如果你想要实现一种Google式的代码,那么你可以在项目中制定这些规范。但你可能并不赞成这份代码规范,这时也没有人会阻拦你舍弃其中某些规则。

我个人认为在某些场景下,Airbnb的代码规范比Google的代码规范要出色。但不管你支持哪一种,也不管你编写的是什么类型的代码,最重要的是在脑海中时刻遵守着同一份代码规范。

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

Ajax发送和接收请求

ajax异步加载图片实例分析

浅析json与jsonp区别及通过ajax获得json数据后格式的转换

以上就是关于Google发布的JavaScript代码规范你要知道哪些的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2756161.html

(0)
上一篇 2025年3月8日 07:27:50
下一篇 2025年3月8日 07:27:55

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JS中原始值和引用值的储存方式示例详解

    原始值指的是代表原始数据类型的值,也叫基本数据类型,引用值指的是复合数据类型的值。接下来通过示例代码给大家介绍js中原始值和引用值的储存方式,感兴趣的朋友一起看看吧 在ECMAscript中,变量可以存放两种类型的值,即原始值和引用值 原始…

    2025年3月8日
    200
  • JS动画定时器知识总结

    这篇文章给大家总结了关于js动画中定时器的相关用法以及相关知识点总结,有需要的朋友可以参考学习下。 广义说:一切通过js改变的视觉呈现都叫动画;例如,按钮,链接等元素交互反馈。 狭义说:通过定时器连续调用js函数进行元素属性改变产生的视觉动…

    2025年3月8日
    200
  • 轻量级JS Cookie插件js-cookie的使用方法

    js-cookie插件是一个js操作cookie的插件,源文件只有3.34 kb,非常轻量级,js-cookie也支持npm和bower安装和管理,下面看看js-cookie的具体用法 Cookie是网站设计者放置在客户端的小文本文件,一般…

    编程技术 2025年3月8日
    200
  • 深入浅析Vue.js中 computed和methods不同机制

    这篇文章给大家介绍了vue.js中 computed和methods不同机制,在vue.js中,methods和computed两种方式来动态当作方法使用,文中还给大家提到了computed和methods的区别,感兴趣的朋友一起看看吧 在…

    编程技术 2025年3月8日
    200
  • 如何使用Vue+Nuxt.js 实现服务端渲染

    这次给大家带来如何使用Vue+Nuxt.js 实现服务端渲染,使用Vue+Nuxt.js 实现服务端渲染的注意事项有哪些,下面就是实战案例,一起来看一下。 直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于…

    2025年3月8日 编程技术
    200
  • JavaScript分步实现一个出生日期的正则表达式

    本文把出生日期分割成几个部分,分步地介绍了实现一个出生日期校验的完整过程。对出生日期正则表达式感兴趣的朋友参考下吧 简言 在表单验证中,经常会用正则表达式做出生日期校验。本文把出生日期分割成几个部分,分步地介绍了实现一个出生日期校验的完整过…

    2025年3月8日
    200
  • Vue.js中的computed工作原理

    这篇文章,我们通过实现一个简单版的和vue中computed具有相同功能的函数来了解computed是如何工作的。对vue.js中的computed工作原理感兴趣的朋友一起学习吧 JS属性: JavaScript有一个特性是 Object.…

    编程技术 2025年3月8日
    200
  • 基于JavaScript实现幸运抽奖页面

    这篇文章主要为大家详细介绍了基于javascript实现幸运抽奖页面,具有一定的参考价值,感兴趣的小伙伴们可以参考一下  JS实现简单的幸运抽奖页面,供大家参考,具体内容如下  效果图: 图片素材 : 代码如下,复制即可使用: 立即学习“J…

    2025年3月8日
    200
  • JS中的回调函数实例浅析

    这篇文章主要介绍了js中的回调函数,结合实例形式简单分析了javascript回调函数的感念、功能、使用方法及相关注意事项,需要的朋友可以参考下 本文实例讲述了JS中的回调函数。分享给大家供大家参考,具体如下: 在说回调函数之前,不妨先看一…

    编程技术 2025年3月8日
    200
  • JS实现为动态添加的元素增加事件功能示例

    这篇文章主要介绍了js实现为动态添加的元素增加事件功能,结合实例形式分析了javascript基于事件委托实现针对动态添加的元素增加事件的相关操作技巧,需要的朋友可以参考下 本文实例讲述了JS实现为动态添加的元素增加事件功能。分享给大家供大…

    2025年3月8日
    200

发表回复

登录后才能评论