内容简介:当你第一次从其他框架切换到 Angular 是否会有些迷茫,在感叹框架大而全的同时却对其中很多概念不尽了解?近期,为了给不断加入团队的新同学营造一个快速上手的环境,于是把团队的项目代码仔细阅读了一遍,从中挑出了一些在大家提交代码中反复会「犯的错误」,并总结成一系列值得 Angular 新手注意和学习的一些最佳实践。
当你第一次从其他框架切换到 Angular 是否会有些迷茫,在感叹框架大而全的同时却对其中很多概念不尽了解?近期,为了给不断加入团队的新同学营造一个快速上手的环境,于是把团队的项目代码仔细阅读了一遍,从中挑出了一些在大家提交代码中反复会「犯的错误」,并总结成一系列值得 Angular 新手注意和学习的一些最佳实践。
本分享共分为三个部分,首先会从中后台系统中最经典的部分——响应式表单开始,介绍表单在验证、控制可用性中的一些优化用法和避免死循环的建议,然后第二部分着重从书写规范和编码建议给出了一些用例、以方便大家在日后的开发过程中能有更好的 Code Review 体验,分享的最后一章会就 Angular 项目构建优化给出一些建议。
以下为分享大纲:
- Reactive Forms
- Control Validation
- Infinite Loops
- Control Disabling
- Clean code
- Variable and function names
- Code comments
- Subscribe in templates
- Memory leaks
- Imports with path aliases
- Optimization
- Lazy Loading for main bundle
- Bundle Analyzer
- Lazy Loading for images
- Virtual Scrolling
- Fonts, etc.
注:本分享中提及的虚拟滚动意指 CDK,但未展开分享,感兴趣的同学可以自行搜索相关资料了解。
参考
- https://netbasal.com/angular-reactive-forms-tips-and-tricks-bb0c85400b58
- https://itnext.io/clean-code-checklist-in-angular-%EF%B8%8F-10d4db877f74
- https://itnext.io/how-to-optimize-angular-applications-99bfab0f0b7c
- https://blog.bitsrc.io/lazy-loading-images-using-the-intersection-observer-api-5a913ee226d
- https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
- https://github.com/webpack-contrib/webpack-bundle-analyzer
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
JSON 在线解析
在线 JSON 格式化工具
HTML 编码/解码
HTML 编码/解码