来源:Pexels

1. 编写布局函数时,在 .prototype上添加方法

根据我头两年打仗JavaScript的经历,如果你是一名JavaScript新手,可能会对这部分有些陌生。

经典html项目案例经范例例7个JavaScript最佳实践 Angular

(请记住,这并不适用于类,由于类已经将方法附加到它们的prototype上。

以下是布局函数的一个示例:

functionFrog(name, gender) {

this.name= name

this.gender= gender

}

Frog.prototype.leap=function(feet) {

console.log(`Leaping ${feet}ft into the air`)

}

为什么不像以下示例一样,直接附加leap方法呢?

functionFrog(name, gender) {

this.name= name

this.gender= gender

this.leap=function(feet) {

console.log(`Leaping ${feet}ft into the air`)

}

}

当把方法直接添加到prototype时,它们将在布局函数创建的所有实例之间共享。

换句话说,利用上个例子,如果创建三个独立的 Frog (从 this.leap = function() {...}),然后以创建三个独立的副本结束。
这是一个问题,由于leap方法总是保持不变,不须要在实例上建立自己的副本。

终极导致本可以避免的性能低落。
this.name 和this.gender属性须要在实例上定义,由于现实生活中,frog可能有自己的名字和性别,以是才在实例级别上创建它们。

这里是盛行的request 包利用这种方法的一个示例(在GitHub上)。

2. 利用TypeScript

TypeScript不仅能为类型安全供应强大防御,还能帮助预防缺点,已经在JavaScript社区中得到了广泛运用。

利用TypeScript能使编译器在代码运行之前对潜在的缺点进行监测并显示警告。

但这还远不能阐明为什么TypeScript可以适用于任何情形。
TypeScript最好的一点是许可在主流浏览器支持之前利用JavaScript中的新特色,由于这些特色被编译成更早期的JavaScript版本,因此能在旧版本的浏览器中运行。

3. 编写测试

如果要负责处理一个项目,必须利用测试,这样运用程序才更能够更加可预测、少出错、并灵巧应对未来的变革。
换句话说,如果打算做一个经得起韶光磨练的项目,没有比在全体代码中建立测试更好的方法。
在代码中投入的测试越多,将其运用于生产环境后,对它的信心也会越多。

测试最好的部分是什么?是能捕捉缺点,使其无从涌现——有人不想要那种能力吗?我确定我想要。
这便是我在项目中写单元测试的缘故原由。

来源:Pexels

4. 利用JSON.parse或JSON.stringify时,务必考虑利用 try/catch

JavaScript中,当把JSON作为输入通报给JSON.parse时,须要一个精确格式的JSON作为第一个参数。
如果格式禁绝确,会提示JSON解析缺点。

来自JSON解析缺点的危险是接管无效的JSON会导致运用程序崩溃。
最近我们的一个web项目失落败了,由于另一个内置程序包没有在try/catch里安装JSON.parse 。
终极导致了web页面失落效,而且由于JavaScript运行时被毁坏,除非内置程序包修复它,否则无法改动缺点。

SyntaxError: Unexpected token }in JSON at position 107

不应总是期望有效的JSON输入,由于它会收到如“>”的奇怪字符,这在本日是很常见的。

5. 利用常规的.type属性进行区分

这个方法很棒,得到了广泛利用。
React开拓职员可能每天都能看到这种做法,特殊是利用Redux事情时。

利用类似方法也能使开拓流程变得无比大略,由于它乃至可以很好的记录自己。

functioncreateSpecies(type, name, gender) {

if (type ==='frog') {

returncreateFrog(name, gender)

} elseif (type ==='human') {

returncreateHuman(name, gender)

} elseif (type == undefined) {

thrownewError('Cannot create a species with an unknown type')

}

}

const myNewFrog =createSpecies('frog', 'sally', 'female')6. 利用工厂函数(factory function)

如果你不知道什么是工厂函数,那么它便是一个返回工具的函数(它既不是类,也不是布局函数)。
通过这个大略观点,就可以利用JavaScript及其特色来创建强大健壮的运用程序。

必须知道,当函数被new关键字调用时,该函数就不再是工厂函数了。

为什么要用工厂函数?

利用工厂函数可以轻松的天生工具实例,且无需涉及类或new关键字。

实在质上意味着,它们终极会被当做函数来对待,即可用于组合工具、函数,乃至Promise函数。
这表明可以将工厂函数稠浊搭配,以创建一个升级版工厂函数,然后连续和别的函数或工具组合创建成更强的工厂函数。
其可能性是无穷无尽的。

考虑到这一点,将其与好的代码实践相结合,它便开始大放光彩了。

以下是工厂函数的一个大略示例:

functioncreateFrog(name) {

const children = []

return {

addChild(frog) {

children.push(frog)

},

}

}

const mikeTheFrog =createFrog('mike')

当利用足够多的工厂函数后,会意识到工厂函数比类布局函数有更强的可重用性。
这减少了代码量,缩短了代码重构韶光(由于工厂函数终极会返回任意工具),缩短了从一个代码到另一个代码的管理韶光。

来源:Pexels

7. 使函数尽可能的大略

众所周知,在JavaScript中很可能有同时做很多事情的大型函数。

编程新手可能以为这是一件好事——之前当我写了很大篇幅可以事情的代码后,我的自我觉得非常好。
这对我来说很主要,并给予我很大信心。
毕竟它能正常运行,我就把自己的代码有多么冗长这件事抛之脑后了。
天哪,当时太稚子了。

如果想写更易掩护的、大略的、少出错的代码,最好使它只管即便简洁短小。
代码越简洁,单独测试也会越随意马虎。

如果你更喜好函数式编程范式,这一点尤其主要。
函数实行一件事就该当把它做好,这是知识。

希望对你有用,得到更完美的JavaScript的最佳实践。

留言点赞关注

我们一起分享AI学习与发展的干货

如转载,请后台留言,遵守转载规范