ANGULAR有哪些优缺点?

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【ANGULAR有哪些优缺点?】

 

你们好，我是IT修真院武汉分院学员曾健，一枚正直纯洁善良的WEB前端程序员。

今天给你们分享一下，修真院官网JS任务10，深度思考中的知识点——ANGULAR有哪些优缺点?

1.背景介绍

Angular.js是google开发者设计和开发的一套前端开发框架，帮助你简化前端开发的负担。

AngularJS 经过新的属性和表达式扩展了 HTML。

AngularJS 能够构建一个单一页面应用程序

那么AngularJS有哪些优势与缺点呢？

2.知识剖析

AngularJS的优势与缺点：

AngularJS的优势：

1.良好的应用程序结构：

一般状况下，咱们编写 JavaScript 没有明确的结构。虽然在编写小应用程序的时候没有问题，但这显然是不适合于大规模的应用程序。

使用 AngularJS，您能够经过MVC（模型 - 视图 - 控制器）或MVVM （模型 - 视图 - 视图模型）模式来组织源代码。

AngularJS 是一个 MVW 框架，其中W表明能够用于任何项目。你能够组织你的代码模块，它可显著提升应用程序的可测试性和可维护性。数据、业务逻辑、视图的分离。

2.双向数据绑定

数据绑定确定是 AngularJS 最佳功能之一。

你能够声明绑定的模型到 HTML 元素。当模型发生变化时，视图会自动更新，反之亦然。

这能够减小大量的传统样板代码，保持模型和视图同步。

3.指令

自定义Directive，比jQuery插件还灵活，可是须要深刻了解Directive的一些特性，简单的封装容易，复杂一点官方没有提供详细的介绍文档，咱们能够经过阅读源代码来找到某些咱们须要的东西，如：在directive使用 $parse；

4.HTML 模板

AngularJS 使用 HTML 模板，这使事情变得简单，并容许设计人员和开发人员同时工做。

设计人员能够按照一般的方式建立用户界面，而开发人员可使用声明性绑定语法很容易配合不一样的UI组件的数据模型。

5.依赖注入

ng模块化比较大胆的引入了Java的一些东西（依赖注入），可以很容易的写出可复用的代码，对于敏捷开发的团队来讲很是有帮助，咱们的项目从上线到目前，UI变化很大，在摸索中迭代产品，可是js的代码基本上不多改动。

AngularJS的缺点:

1.性能

双向数据绑定是一把双刃剑。随着组件增长，项目愈来愈复杂，双向数据绑定带来性能问题。

双向数据绑定是如何影响性能的？在JavaScript（ES5）中，并无实现当变量或对象改变时发出通知的功能，Angular的实现方法被叫作“Dirty-checking（脏检查机制）”，经过跟踪数据的改变再动态更新用户界面（UI）。 在Angular的做用域中任何操做的执行都会引起Dirty-checking，随着绑定数量的增长性能就会越低。

1. Angular 2.0推翻重作使得目前不宜采用此框架

Angular 1.x版本实际上是个比较旧的东西了，如今看来有些理念过期了，好比依赖注入、本身独特的模块化，这些东西其实在ES6下已经很好地被解决了。 Angular的2.0几乎是一个推翻重作的框架，估计不会有1.X的upgrade方案。因此若是如今新开始的项目采用Angular的话，会是一个很尴尬的时机。一样，如此大的改动彷佛也反面印证了1.X并非那么好。

3.学习成本高

使用Angular须要学习大量的概念，包括但不限于： 

○ 模块

○ 控制器

○ 指令

○ 做用域

○ 模板

○ 链式函数

○ 过滤器

○ 依赖注入

4.不适合类型开发：

(1：内容网站，须要SEO的。(SEO目前也有了prerender解决方案) https//prerender.io

(2：交互频繁的，如游戏之类交互体验网站。

(3，太过于简单的页面。

Angular更适合于CRUD的管理系统开发。

3.常见问题

Angular2 相比 Vue 有什么优点？

4.解决方案

Angular2相对于Vue的优点在Vue2.0以后已经削弱不少了。好比SSR（Vue2已经原生支持）和全栈式框架（官方推荐Vuex+Vue-Router），native端也有阿里巴巴的weex。可是Angular2在API设计的完整度和覆盖度上仍是Vue所不能及的，主要有这么几点:

1. Angular2原生Form支持： Angular2原生的Form模块功能至关强大。除了双向绑定之类的基本功能，还能经过programatic API 控制dom元素的表单行为。也有成型API提供自定义validator。这一点Vue只有v-model和第三方库。对于后台之类的重表单应用，仍是Ng2有优点。
2. 依赖注入不管你喜不喜欢DI，这就是Angular2的强大功能之一。有DI能够在不改变代码结构的状况下完成功能替换。（如，在desktop和mobile有不一样功能，能够经过注入不一样service实现，而共用相同的template和directive）。Vue则须要程序员本身规划代码组织，用来支持共享组件。DI也能够用于相似module local state的功能。好比，一个视频播放控件有几个子组件完成，子组件须要分享一个状态。这一点Angular2有原生的service injection pattern。而Vue则没有官方推荐。
3. 对标准向后兼容Angular2在一些细节上对标准有更好的支持。好比 list differ 算法中 Angular2 能够支持实现了Symbol.iterator的对象，而Vue只能支持Array。对Observable和Promise，Angular2在应用的各个地方，甚至模板级别都有支持(async pipe)。而Vue须要vue-rx等第三方库支持。Angular2的组件有shadow dom的实现能够选择，而Vue目前尚未。
4. 测试Angular2一开始就设计好了如何对组件进行测试，而Vue组件虽然也很好写测试，可是没有官方推荐的惟一标准（固然，对视图是否须要测试还有待探讨）。除此之外，Angular2还有一些小功能好比检验模板的类型安全（即，模板里能在编译器保证没有引用model未定义的变量），不过AoT自己彷佛尚未稳定，因此不能算优点。对TS的支持也是Angular好，固然前提是你喜欢TS。整体而言，就是Angular2里你能想到的都有了，你没想到的它也有了。框架的全面性是难以撼动的。（固然，为此也付出了至关的代价）。

5.编码实战

6.扩展思考

面对众多的框架，咱们该如何进行选择？

遇到ng1的时候，我处处宣扬jQuery太落后了，咱们有jqLite就是为了干掉jQuery。

遇到React的时候，我处处宣扬ng1太落后了，狂黑ng1的性能和围绕$scope的一些设计缺陷。

遇到Vue的时候，我处处宣扬React太死板了，不容许任何的魔法，而Vue有恰到好处，精心设计的魔法。

遇到Elm的时候，我处处宣扬React的Redux是抄袭者，Vue过于动态，狂黑由于没有tagged union+pattern match，redux和vuex用起来都很丑。

直到有一天我一我的负责了一个巨型的项目，既有茫茫多的CURD，又有状态复杂的特殊界面。

这个项目前端是用react + nuclear.js(那时尚未redux)写的。

在写CURD时怀念双向绑定，写onChange/value写的想砸键盘。

在写状态复杂的界面时赞叹React+Nuclear.js组合纯函数+外置state简直是神器，避免了无数个bug。

在代码堆成山的时候会想若是我用的是强类型的Elm是否是能够避免90%的低级错误？

完成这个项目以后，我不再会去捧或黑了。设计是优雅仍是愚蠢，其实取决于使用场景。 你用的每一个框架都有秒杀别人的地方，也都会有用起来很傻的情况。

不谈具体项目讲哪一个有优点纯属耍流氓。

7.参考文献

http://blog.csdn.net/u0121255...

https://www.zhihu.com/questio...

https://www.zhihu.com/questio...

8.更多讨论

1.Angular1存在哪些问题？

绑定， 一不当心， 绑太多了，能卡死的页面半天出不来

2.angular1和angular2有什么不一样？

1.0.X升级到1.2.X，貌似有比较大的调整，没有完美兼容低版本，升级以后可能会致使一个兼容性的BUG

3.angular对seo友好吗？

对seo不是特别友好