Angular 之我见
<p><img src="https://img2020.cnblogs.com/blog/999445/202008/999445-20200831140317414-740141346.jpg" alt="" loading="lazy"></p><p>很久没有写过技术软文了，虽然 Angular 发布已有四年，得到了越来越多人的关注及认可，但是仍然有很多人不分青红皂白的进行诋毁。我打算结合自己的经历从客观的角度聊一聊我眼中的 Angular。</p>
<p>本人刚做前端接触的是 jQuery，对 MVVM 库和框架知之甚少，且身边没有独当一面的大牛引领，全靠视频教程和自己的摸索。后来做新项目也是选择了 Vue 技术栈，主要是自己菜，害怕 hold 不住其它框架。再后来无意中接触到 Angular，仿佛醍醐灌顶，完全被 Angular 文档吸引，感叹其双向绑定的设计巧思以及数据驱动的无穷魅力。</p>
<p>从我这几年使用框架的经验来看，前端框架的下限是一样的，也就是说如果没有统一的规范以及优秀的架构，所有框架都很容易写出难以维护的垃圾代码。即使是 Angular，同样也有这样的问题（大部分是不熟悉 Angular 造成的），但是 Angular 最大的优势是它的上限，只要参考官方风格指南的建议并且灵活运用依赖注入、响应式表单、拦截器等功能，系统维护及迭代都非常轻松。</p>
<p>从我自建的 Angular 学习交流群来看，现在想要学习 Angular 或者深入了解的朋友越来越多，但是仍然有很多人想尽各种理由为了黑而黑。本文简单总结了一些常用的黑梗并从自己熟悉的角度进行反驳，希望喜欢 Angular 的朋友不忘初心，不要受这些观点影响。</p>
<h2 id="升级梗">升级梗</h2>
<blockquote>
<p>AngularJS 到 Angular 的断崖式升级太坑了！</p>
</blockquote>
<p>AngularJS 和 Angular 本来就是两个时代的框架，Angular 只是沿袭了 AngularJS 的设计理念，前端技术的飞速发展以及 Angular 超前的技术选型使得 1 到 2 的升级不可能是平滑的过度，而且 Angular 诞生的初衷就是摒弃 AngularJS 中陈旧的糟粕的技术实现。假如两者真的没有断崖式更新的话，那么 Angular 得到的吐槽和谩骂一定比现在更多。另外我想说一点，即使两个框架存在巨大的鸿沟，但是官方依然给出了升级方案，我觉得这已经非常良心了。我相信从 AngularJS 升级到 Angular 显然比换框架重构的代价低。</p>
<h2 id="后端梗">后端梗</h2>
<blockquote>
<p>Angular 不就是后端那一套嘛！</p>
</blockquote>
<p>这个梗的影响力和杀伤力都称得上 NO.1，就连 Vue 作者在 Angular 刚发布时也甩了一个后端梗进行冷嘲热讽。</p>
<p>我是一名纯前端，后端只简单接触过 PHP，我并不清楚到底哪些才算是后端那一套。从最开始接触 Angular 到复杂系统的开发，我只知道装饰器、依赖注入这些写法很自然也很灵活，并没有因为这些概念承受太多的心智负担。另一方面，现在的招聘 JD 中一般都会加一项： <strong>有后端经验者优先</strong>。可见现在的用人单位更加注重全面的综合素养，对于没有后端经验的前端开发者，使用 Angular 对于横向技术的拓展更为有利，所以秉承后端那一套绝对不是坏事。换个角度，我们再来看看如日中天的 TypeScript，它也不过是秉承后端思维的语言。如果有人因为后端思维而不接受 Angular 的话，那么 TypeScript 也同样应该被抵制，但事实是接受 TypeScript 的开发者越来越多，比如某某框架底层也改 TS 了。</p>
<h2 id="招聘梗">招聘梗</h2>
<blockquote>
<p>Angular 招人太难了！</p>
</blockquote>
<p>从我做面试官的角度来看，有 Angular 开发经验的候选人确实很少，如果单纯从框架使用的熟练度招人 Angular 确实吃亏。但是面试中涉及具体框架的问题已经越来越少，更多的还是宏观的基础知识，也就是说以同等条件招一个 vue 开发者也是一样的问题。我上一家公司的某部门就是 vue 技术栈，一个季度也没招到合适的候选人。</p>
<p>其实招聘难并不代表用人难，我们部门的后端实习生也就两天时间就能上手 Angular 了，后来我也带过前端实习生，简单教了一下，也很快完成了需求。<strong>招人的难易程度不在于框架，因为基础扎实的前端本就难得。</strong></p>
<h2 id="黑盒梗">黑盒梗</h2>
<blockquote>
<p>Angular 把 Webpack 的相关配置都封死了不灵活。</p>
</blockquote>
<p>很多人喜欢吐槽 Angular CLI 把 Webpack 配置写死了，相比其它框架提供 config 目录来说不灵活。关于 Angular CLI 可以拆分 Webpack 配置项就不说了，现在单纯讨论这种设计到底有没有好处。其实这也是一种开闭原则，将复杂常用的功能包装，然后通过外部参数项进行配置。这种设计方式根本就不新鲜，大部分插件也都是类似的实现原则。其中比较典型的插件比如大名鼎鼎的 ag-grid 和 fullcalendar，两个插件的功能都很复杂而且都没有暴露 DOM 结构，都是通过 JSON 数据进行自定义配置，有些功能因为没有完整的 DOM 结构确实操作起来会有些难受，但是好处就是轻便，使用简单。</p>
<p>从我这两年做项目的经历来看，使用 Angular CLI 的配置完全足够，并没有遇到必须独立配置项的情况。</p>
<h2 id="生态梗">生态梗</h2>
<blockquote>
<p>Angular 生态不行，组件库很少。</p>
</blockquote>
<p>Angular 在 v5 之后生态已经逐步完善，组件库及插件的数量完全不逊色于其它框架，而质量上更是有过之而无不及。Angular 官方也亲自维护了一套 Material 组件库，质量之高无需多言。Google 内部还有一套 React 编写的 MDC 组件库，但是经过对比之后发现质量和 Angular Material 还是差一个档次。还有一个社区维护的基于 Angular 指令的 Flex Layout 布局神器，更是强大到没朋友。之所以强大，是因为它不仅实现了 Flex 布局，而且集成了 Grid 布局，这也是我知道的唯一一个 CSS Grid 框架。</p>
<h2 id="总结">总结</h2>
<p>除了以上提到的常用黑梗之外，很有很多其它不常见的吐槽观点。<strong>欲加之罪，何患无辞？</strong> Angular 还有很多待解决的 issue，所以随便挑一个 issue 出来都可以吐槽一番。只盯着缺点看的人，满眼都是缺点。</p>
<p>就在写这篇文章的时候，又看到了一个观点清奇的黑梗，开始吐槽 Angular 的 decorator，言外之意应该是 Angular 是装饰器的重度用户，而装饰器还没有被标准化（这个标准看起来和 TS 的差距越来越大，而且 TS 的装饰器也只是实验特性），一旦装饰器被标准化，看你 Angular 怎么收场。黑的确实高明，不了解的人很容易被吓住，其实 Angular 的装饰器和 TS 并没有直接关系，只是一个语法糖，而且 Angular 也有自己的一套静态编译，即使标准的变化再大，Angular 都有足够的弹性应对，业务侧使用 <code>ng update</code> 也可以很容易地进行代码替换。</p>
<p>本文并不是想对比框架间的优劣，只是希望 Angular 可以被公正对待。如果不喜欢 Angular，也请不要恶意诋毁。</p>
<p>最近看到有朋友想找 Angular 相关的岗位，列举一下自己知道的公司及部门，欢迎大家纠正补充[偷笑]</p>
<ul>
<li>若干外企（绝对香）</li>
<li>阿里云</li>
<li>华为云</li>
<li>灵雀云</li>
<li>海致 BDP</li>
<li>Worktile</li>
<li>猿辅导</li>
<li>博客园</li>
<li>中信银行软开（部分系统）</li>
<li>360 大数据中心（部分项目）</li>
<li>马蜂窝系统部</li>
<li>竹云</li>
<li>中兴大数据</li>
</ul>
</div>
<div id="MySignature" role="contentinfo">
<div class="signature-main">
<p>感谢您的阅读，如果您对我的文章感兴趣，可以关注我的博客，我是叙帝利，下篇文章再见！</p>
<hr>
<p>高颜值的渐变编辑器组件，支持所有 CSS 渐变语法 https://github.com/acrodata/gradient-picker</p>
<p>一款小而美的颜色选择器组件 https://github.com/acrodata/color-picker</p>
<p>低代码平台必备轻量级 GUI 库 https://github.com/acrodata/gui</p>
<p>适用于 Angular 的 CodeMirror 6 组件 https://github.com/acrodata/code-editor</p>
<p>适用于 Angular 的水印组件（防删除，盲水印） https://github.com/acrodata/watermark</p>
<p>支持拖拽和缩放的弹窗组件 https://github.com/acrodata/rnd-dialog</p>
<p>开发低代码平台的必备拖拽库 https://github.com/ng-dnd/ng-dnd</p>
<p>基于 Angular Material 的中后台管理框架 https://github.com/ng-matero/ng-matero</p>
<p>Angular Material Extensions 扩展组件库 https://github.com/ng-matero/extensions</p>
<p>Unslider 轮播图插件纯 JS 实现 https://github.com/nzbin/unsliderjs</p>
<p>仿 Windows 照片查看器插件 https://github.com/nzbin/photoviewer</p>
<p>仿 Windows 照片查看器插件 jQuery 版 https://github.com/nzbin/magnify</p>
<p>完美替代 jQuery 的模块化 DOM 库 https://github.com/nzbin/domq</p>
<p>简化类名的轻量级 CSS 框架 https://github.com/nzbin/snack</p>
<p>与任意 UI 框架搭配使用的通用辅助类 https://github.com/nzbin/snack-helper</p>
<p>单元素纯 CSS 加载动画 https://github.com/nzbin/three-dots</p>
<p>有趣的 jQuery 卡片抽奖插件 https://github.com/nzbin/CardShow</p>
<p>悬疑科幻电影推荐 https://github.com/nzbin/movie-gallery</p>
<p>锻炼记忆力的小程序 https://github.com/nzbin/memory-stake</p>
</div><br><br>
来源：https://www.cnblogs.com/nzbin/p/12229876.html
頁:
[1]