十个写出漂亮JavaScript 代码的样式规则

更新日期: 2022-07-08阅读: 813标签: 代码

你知道为什么很多人对 php 感到厌恶吗?这主要是因为它的外观。PHP 可以随心所欲,所以会使他变得丑陋。因为 PHP 的创建者没有为 PHP 建议任何大小写或格式。一些开发人员使用 under_score,而另一些开发人员使用 PascalCase。因此,这种不一致最终导致了人们对 PHP 的巨大仇恨。

幸运的是,JavaScript 并非如此,因为编写 JavaScript 代码有一些官方规则。例如,camelCase 是官方推荐的 JavaScript 大小写方法。然而,将这些样式规则提升到一个新的水平并为 JavaScript 创建一个通用的视觉效果是至关重要的,原因如下:

  •  在整个代码库中拥有一致的风格使其易于阅读和变异。
  •  当另一个 JS 开发人员查看你写的代码时,他/她不会感到不舒服,因为一切都很熟悉。
  •  随着项目的进行以及你写的代码越多,如果没有样式指南,维护和改进就会变得越来越困难。
  •  使用这些规则将使你的代码更具可读性和一致性。

下面我们开始吧。

1、使用 Let 和 Const 声明变量

ES2015 引入了 let 和 const 关键字,它们是用来替换 var 的。但是 var 有什么问题呢?嗯,很多。

var 从一开始就在 JavaScript 中,但它对于今天的标准有一些缺点。随着项目的发展,会导致全球范围内的意外行为和污染。

例如,由于 var 不是块范围的,它也在块级标记之外定义,例如 if 和 for。例如,迭代变量 i 是在循环完成后定义的。

示例如下:

var a = 1; // bad
let a = 1; // good
// const and let only exist in the blocks they are defined in.
{
 let a = 1;
 const b = 1;
 var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1

2、尽可能的使用隐式构造函数

如果你正在使用 JavaScript,你应该知道有多种方法可以完成相同的任务。例如,你可以使用三元组或 if-else 块来创建条件逻辑。这种不同的选择有时会导致你写的代码不一致。

要创建一个空对象,可以使用 Object 构造函数或隐式的 {}。字符串、函数、数组、数字等也是如此。

为了保持一致性和易于阅读,尽可能使用隐式构造函数。

// bad
const a = new Object();  
const b = new String("str");
const c = new Function('a', 'b', 'return a + b');
// good
const a = {};
const b = "str";
const c = (a,b) => a + b;

3、字符串首选单引号

为了创建一致性,在所有代码库中使用单引号 ' 代替双引号 " 和模板文字(反引号) `。为了简化此过程,你可以利用 Prettier 立即格式化。

// bad
const name = "Edmon Dantès";
// bad - template literals should contain interpolation or newlines
const name = `Edmon Dantès`;
// good
const name = 'Edmon Dantès';

4、尽可能使用字符串插值

正如我所提到的,在 JavaScript 中,有很多方法可以获得相同的结果,但其中一些方法比其他方法更复杂。要连接字符串,你可以使用 + 运算符、数组上的 join 方法或字符串上的 concat 方法。

然而,对于这项任务,使用模板文字是最复杂和最简单的。

// bad
const str = 'How are you, ' + name + '?';
// bad
const str = ['How are you, ', name, '?'].join();
// good
const str = `How are you, ${name}?`;

5、选择命名函数表达式

一般来说,每个人都有自己喜欢的方法来创建函数,因为 JavaScript 在方法方面非常慷慨。有箭头函数、匿名函数表达式、函数声明等。但是要编写一致且可读的 JavaScript 代码,你应该在任何地方使用一种类型。

函数表达式没有被提升,这意味着要使用一个函数,你需要先在顶部或另一个模块中定义它。此外,名称可以很长且具有描述性,从而防止单独使用注释。因此,代码才会更具可读性。

// bad
function foo() { ... }
// bad
const foo = function () { ... };
// good
// lexical name distinguished from the variable-referenced invocation(s)
const short = function longUniqueMoreDescriptiveLexicalFoo() { ... };

6、在回调中首选箭头函数

有一些方法,例如 map 或 filter,它们将匿名函数作为参数。在这些情况下,有很多选择,但使用箭头函数是最方便和优雅的方式。因为,它在 this 的上下文中创建了箭头函数的一个版本,这通常是你想要的,并且是一种更简洁的语法

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

7、使用严格等式进行等式比较

有两种类型的相等运算符:松散的和严格的。松散的是 == 和 != 比较不关心类型。例如,根据松散比较,2 和 '2' 相等。但是,如果你使用严格的 === 和 !==,那么它也会考虑类型,这通常会是你想要的结果。

// bad
console.log(2 == '2') // true
// good
console.log(2 === '2') // false

8、不要嵌套三元组

三元运算符允许你创建内联条件语句。在 if-else 语句上使用它,你可以真正节省许多代码行。但是,正如它所定义的,它必须是内联的和短的。因为嵌套三元组会极大地损害代码的可读性。

// bad
const foo = maybe1 > maybe2
 ? "bar"
  : value1 > value2  
  ? "baz"  
 : null;
// split into 2 separated ternary expressions
const maybeNull = value1 > value2 ? 'baz' : null;
// good
const foo = maybe1 > maybe2 ? 'bar' : maybeNull;

9、 用空格

为了增加可读性,请确保在评论的开头放置一个空格。

// bad
//is current tab
let isActive = true;
// good
// is current tab
let isActive = true;

10、 选择正确的外壳样式

正如我在介绍中提到的,大小写样式是使代码看起来不错的最重要的概念之一,如果它是一致的。在 JavaScript 中,大小写样式有一些约定。

在命名对象、函数、变量和实例时使用 camelCase。

仅在命名构造函数或类时使用 PascalCase。

在命名不可重新分配的变量和枚举时使用 UPPERCASE_VARIABLES。

根本不要使用snake_case 或kebab-case。

// bad
const StudentCount = 15;
class particle { ... }
function get_name() { ... }
let apiKey = 'cX25zanxsPcdjsbxX985ddXM3';
// good
const studentCount = 15;
class Particle { ... }    
function getName() { ... }
const API_KEY = 'cX25zanxsPcdjsbxX985ddXM3';

写计算机可以理解的代码一点也不难,然而,写人类容易理解的代码是具有挑战性的。这就是为什么在写程序上有一些基本规则,确实会造成好代码和坏代码之间的差异。

在本文中,我尝试使用 AirBNB 的 JavaScript 样式指南来分享我在编写好的 JavaScript 代码时必不可少的规则。这些是我的首选,但如果你看一下这个综合风格指南,我相信你会发现一些你还不知道的东西。

来源: web前端开发

链接: https://fly63.com/article/detial/11867

不要浪费时间写完美代码

一个系统可以维持5年,10年,甚至20年以上,但是代码和设计模式的生命周期非常短,当对一个解决方案使用不同的方法进行迭代的时候,通常只能维持数月,数日,甚至几分钟的时间

Google内部在代码质量上的实践

良好的编程习惯涉及到很多方面,但在软件行业内,大多数的公司或组织都不会把良好的编程习惯列为主要关注点。 例如,具有可读性和可维护性的代码比编写好的测试代码或使用正确的工具更有意义,前者的意义在于可以让代码更易于理解和修改。

减少嵌套,降低代码复杂度

减少嵌套会让代码可读性更好,同时也能更容易的找出bug,开发人员可以更快的迭代,程序也会越来越稳定。简化代码,让编程更轻松!

关于 Google 发布的 JS 代码规范

Google为了那些还不熟悉代码规范的人发布了一个JS代码规范。其中列出了编写简洁易懂的代码所应该做的最佳实践。代码规范并不是一种编写正确JavaScript代码的规则,而是为了保持源代码编写模式一致的一种选择。

你解决的问题比你编写的代码更重要!

程序员似乎忘记了软件的真正目的,那就是解决现实问题。您编写的代码的目的是为了创造价值并使现有世界变得更美好,而不是满足您对自我世界应该是什么的以自我为中心的观点。有人说:如果你拥有的只是一把锤子,那么一切看起来都像钉子一样

tinymce与prism代码高亮实现及汉化的配置

TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能方强大,并且功能配置灵活简单。另一特点是加载速度非常快的。

js函数式编程与代码执行效率

函数式编程对应的是命令式编程, 函数式编程的核心当然是对函数的运用. 而高阶函数(Higher-order)是实现函数式编程的基本要素。高阶函数可以将其他函数作为参数或者返回结果。所以JS天生就支持函数式编程

接手代码太烂,要不要辞职?

朋友发表了一条说说:入职新公司,从重构代码到放弃”,我就问他怎么了?他说,刚进一家新公司,接手代码太烂,领导让我先熟悉业务逻辑,然后去修复之前项目中遗留的bug,实在不行就重构

js高亮显示关键词_页面、搜索关键词高亮显示

页面实现关键词高亮显示:在项目期间遇到一个需求,就是搜索关键词时需要高亮显示,主要通过正则匹配来实现页面关键词高亮显示。在搜索结果中高亮显示关键词:有一组关键词数组,在数组中筛选出符合关键字的内容并将关键字高亮

写优雅的代码,做优雅的程序员

软件工程学什么? 学计算机,写程序,做软件,当程序员。听说学计算机很辛苦? 是的,IT行业加班现象严重。在计算机世界里,技术日新月异,自学能力是程序员最重要的能力之一。选了这个专业,就要时刻保持好奇心和技术嗅觉,不能只满足于完成课内作业。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!