文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

经典范例:7个JavaScript优秀实践

2024-12-24 19:19

关注

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

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

以下是构造函数的一个示例:

 

  1. functionFrog(name, gender)  { 
  2.   this.namename 
  3.   this.gender= gender 
  4. Frog.prototype.leap=function(feet) { 
  5.   console.log(`Leaping ${feet}ft into the  air`) 

 

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

 

  1. functionFrog(name, gender)  { 
  2.   this.namename 
  3.   this.gender= gender 
  4.   this.leap=function(feet) { 
  5.     console.log(`Leaping ${feet}ft into the  air`) 
  6.   } 

 

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

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

最终导致本可以避免的性能下降。this.name 和this.gender属性需要在实例上定义,因为现实生活中,frog可能有自己的名字和性别,所以才在实例级别上创建它们。

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

2. 使用TypeScript

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

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

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

3. 编写测试

如果要认真处理一个项目,必须使用测试,这样应用程序才更能够更加可预测、少出错、并灵活应对未来的变化。换句话说,如果打算做一个经得起时间考验的项目,没有比在整个代码中建立测试更好的方法。在代码中投入的测试越多,将其应用于生产环境后,对它的信心也会越多。

测试最好的部分是什么?是能捕捉错误,使其无从出现——有人不想要那种能力吗?我确定我想要。这就是我在项目中写单元测试的原因。

 

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

JavaScript中,当把JSON作为输入传递给JSON.parse时,需要一个正确格式的JSON作为第一个参数。如果格式不正确,会提示JSON解析错误。

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

 

  1. SyntaxError: Unexpected token }in JSON at position 107 

不应总是期望有效的JSON输入,因为它会收到如“>”的奇怪字符,这在今天是很常见的。

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

这个方法很棒,得到了广泛使用。React开发人员可能每天都能看到这种做法,特别是使用Redux工作时。

使用类似方法也能使开发流程变得无比简单,因为它甚至可以很好的记录自己。

 

  1. functioncreateSpecies(type, name,  gender) { 
  2.   if (type ==='frog') { 
  3.     returncreateFrog(name, gender) 
  4.   } elseif (type ==='human') { 
  5.     returncreateHuman(name, gender) 
  6.   } elseif (type == undefined) { 
  7.     thrownewError('Cannot create  a species with an unknown type'
  8.   } 
  9. const myNewFrog =createSpecies('frog''sally''female'

 

6. 使用工厂函数(factory function)

如果你不知道什么是工厂函数,那么它就是一个返回对象的函数(它既不是类,也不是构造函数)。通过这个简单概念,就可以利用JavaScript及其特征来创建强大健壮的应用程序。

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

为什么要用工厂函数?

使用工厂函数可以轻松的生成对象实例,且无需涉及类或new关键字。

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

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

以下是工厂函数的一个简单示例:

 

  1. functioncreateFrog(name) { 
  2.   const children = [] 
  3.   return { 
  4.     addChild(frog) { 
  5.       children.push(frog) 
  6.     }, 
  7.   } 
  8. const mikeTheFrog =createFrog('mike'

 

当使用足够多的工厂函数后,会意识到工厂函数比类构造函数有更强的可重用性。这减少了代码量,缩短了代码重构时间(因为工厂函数最终会返回任意对象),缩短了从一个代码到另一个代码的管理时间。

7. 使函数尽可能的简单

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

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

如果想写更易维护的、简单的、少出错的代码,最好使它尽量简洁短小。代码越简洁,单独测试也会越容易。

如果你更喜欢函数式编程范式,这一点尤其重要。函数执行一件事就应该把它做好,这是常识。

希望对你有用,获得更完美的JavaScript的优秀实践。

来源:今日头条内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯