时间戳

首页 > 解决方案 > 在打字稿中过度使用“this”

javascript - 在打字稿中过度使用“this”

问题描述

我刚刚开始学习 typescript/Angular，来自 c++/java 背景，之前从未接触过任何 Web 开发的东西。我用一些 FormControls 写了一小段代码，有人提出了我不理解的改进建议。

代码如下：

this.myFormData = { ...data };    
this.myForm.controls['name'].setValue(this.myFormData.name);
this.myForm.controls['address'].setValue(this.myFormData.address);
this.myForm.controls['age'].setValue(this.myFormData.age);
this.myForm.controls['gender'].setValue(this.myFormData.gender);
this.myForm.controls['mailing_list'].setValue(this.myFormData.mailing_list);

我被告知我应该将其更改为：

this.myFormData = { ...data };
const formControls = this.myForm.controls;
formControls['name'].setValue(this.myFormData.name);
formControls['address'].setValue(this.myFormData.address);
formControls['age'].setValue(this.myFormData.age);
formControls['gender'].setValue(this.myFormData.gender);
formControls['mailing_list'].setValue(this.myFormData.mailing_list);

原因是它会节省内存。我质疑这一点，认为这可能是一些过早的优化，但同行评审员确信每次访问“this”并搜索“myForm”并获取“控件”都是说明软件开发的DRY原则的不好做法。

我还在学习，所以我想我应该只接受审稿人的话，但我真的很想了解发布的示例中的差异以及为什么一个比另一个更好。我在网上搜索了答案，但没有成功（可能是因为不知道要搜索的技术术语？）。

对新手的解释会很好，或者我可以找到答案的链接也会有所帮助。

标签： javascriptangulartypescriptrxjs

解决方案

Angular 使用 Uglify 将重写以下代码。

丑化之前

this.myFormData = { ...data };    
this.myForm.controls['name'].setValue(this.myFormData.name);
this.myForm.controls['address'].setValue(this.myFormData.address);
this.myForm.controls['age'].setValue(this.myFormData.age);
this.myForm.controls['gender'].setValue(this.myFormData.gender);
this.myForm.controls['mailing_list'].setValue(this.myFormData.mailing_list);

丑化后

this.a={ ...data };this.b.controls['name'].setValue(this.a.name);this.b.controls['address'].setValue(this.a.address);this.b.controls['age'].setValue(this.a.age);this.b.controls['gender'].setValue(this.a.gender);this.b.controls['mailing_list'].setValue(this.a.mailing_list);

这在 Angular 中会自动为您发生，它所带来的性能提升远远超过您通过最小化使用 获得的性能提升this，但这里的问题不在于对内存的引用。它是源代码生成的较大文件。

让我们重写源代码以支持缩小。

const data = { ...data };    
const controls = this.myForm.controls;
controls['name'].setValue(data.name);
controls['address'].setValue(data.address);
controls['age'].setValue(data.age);
controls['gender'].setValue(data.gender);
controls['mailing_list'].setValue(data.mailing_list);

这将像这样缩小：

const a={ ...data };const b=this.myForm.controls;b['name'].setValue(a.name);b['address'].setValue(a.address);b['age'].setValue(a.age);b['gender'].setValue(a.gender);b['mailing_list'].setValue(a.mailing_list);

从 CPU 性能的角度来看，两个源代码示例之间的可测量速度没有差异。

从文件大小的角度来看，将获得可以以字节为单位的增益。这是您在编写源代码时获得的东西，大多数人没有时间稍后返回并重写代码行只是为了缩小几个字节。

将大型项目减少 100kb 可以对应用程序启动所需的时间产生很大影响。

推荐阅读