在打字稿中使用'this'

Question

我刚刚开始学习来自c ++/java背景的typescript/Angular,之前从未接触过任何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原则.

我还在学习,所以我想我应该只是让评论者说出来,但我真的想了解发布的例子中的差异以及为什么一个比另一个更好.我在网上搜索了答案,但我没有取得任何成功(可能是由于不知道要搜索的技术术语？).

对新手的解释会很棒或链接到我能找到答案的地方也会有所帮助.

Answer 1

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 就可以对应用程序启动所需的时间产生很大影响。