angular有哪些优缺点?

                           【JS-10-angular有哪些优缺点?】

                                                                      分享人：聂义中

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

angular有哪些优缺点之前，简单的介绍一下什么是angular。

记得在最开始学习前端知识的时候，了解到前端三个基础html、CSS、JavaScript，他们可以简单的                    表示为结构、样式和行为。

jQuery实质上就是提供了一些前端常用的，针对元素的处理的简便写法，可以把它看作一个JS的工具包。

Angular则是一个MVVM框架。

要说清楚什么是MVVM框架，需要了解MVC框架，了解MVC框架，需要了解一下前端开发的历史。

前端开发的历史和趋势

什么是前端？什么是后端？

前端：针对浏览器的开发，代码在浏览器运行

后端：针对服务器的开发，代码在服务器运行

互联网发展的早期，前后端开发是一体的，前端代码是后端代码的一部分。

1、后端收到浏览器的请求

2、生成静态页面

3、发送到浏览器

所以最初的网站是没有样式，更没有行为互动，只有结构，光秃秃的html。但在那个时候已经是很伟大的很先进的东西。

那时的网站开发，采用的是后端 MVC模式。

1、Model（模型层）：提供/保存数据

2、Controller（控制层）：数据处理，实现业务逻辑

3、View（视图层）：展示数据，提供用户界面

前端只是后端 MVC的 V。（切图仔的由来？）

那时的前端工程师，实际上是模板工程师，负责编写页面模板，比如我们现在写的静态页面。

后端代码读取模板，替换变量，渲染出页面。

Ajax技术诞生，改变了一切。

2004年：Gmail

2005年：Google地图

前端不再是后端的模板，可以独立得到各种数据。

因为Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

Ajax技术促成了 Web2.0的诞生。

Web1.0：静态网页，纯内容展示

Web2.0：动态网页，富交互，前端数据处理

从那时起，前端变得复杂了，对前端工程师的要求越来越高。

前端 MVC框架

前端通过 Ajax得到数据，因此也有了处理数据的需求。

前端代码变得也需要保存数据、处理数据、生成视图，这导致了前端 MVC框架的诞生

2010年，Backbone.js

Backbone将前端代码分成两个基本部分。

Model：管理数据

View：数据的展现

没有 C。因为，前端 Controller与后端不同。

不需要，也不应该处理业务逻辑

只需要处理页面逻辑，响应用户的一举一动,也就是和用户的交互

所以，前端 Controller相对比较简单。Backbone没有 C，只用事件来处理页面逻辑。

Router

前端还有一种天然的方法，可以切换视图，那就是 URL。

通过 URL切换视图，这就是 Router（路由）的作用。(html、js、angular）

前端 MVVM框架

另一些框架提出 MVVM模式，用 ViewModel代替 Controller。

Model

View

View-Model：简化的 Controller，唯一作用就是为 View提供处理好的数据，不含其他逻辑。

本质：view绑定 view-model，视图与数据模型强耦合。数据的变化实时反映在 view上，不需要手动处理。

MVC、MVVM、MVW，这里重点理解一下MVVM。

Mmodel模型

Vview视图

VMviewmodel视图的模型

Ppresenter展示器

Ccontroller控制器

Wwhatever随意

View视图 通俗易懂。就是前端的 HTML， CSS和 与 HTMLCSS有关的JS代码。 写一个Form表格，由 HTML架起，CSS做美化，JS来进行动画控制。

Model模型。简单说是起到连接服务器，和商业逻辑的形成。 这里面很多需要异步处理，并且有需求独立更新。因此，必须和视图分离。

而连接上面这两者的就是 ViewModal试图模型。 这里只做连接，并不起到控制。保证独立性。在多个 View和多个 Modal之前做到很好的桥梁的作用。

P起到的作用更多是展示,部分控制，换句话说 Angular里面那么多 ng-show后面的代码都可以理解为 P。

C起到的主体控制。比如读取 M的数据，然后插入一个模块到 V视图里。 如果用 Angular来解读,Controller就是 C。

W则不分的那么具体。更为灵活。

前端可以做到：

读写数据

切换视

用户交互

这意味着，网页其实是一个应用程序。

SPA=Single-pageapplication

2010年后，前端工程师从开发页面，变成了开发“前端应用”（跑在浏览器里面的应用程序）。

Angular

Google公司推出的 Angular是最流行的 MVVM前端框架。

它的风格属于 HTML语言的增强，核心概念是双向绑定。

Vue

Vue.js是现在很热门的一种前端 MVVM框架。

它的基本思想与 Angular类似，但是用法更简单，而且引入了响应式编程的概念

React

React是从Facebook起源的最著名的库。它使你的前端非常舒适，是一个非常独特的客户端库。

React.JS的核心目标是使前端能够高效开发和重用声明的插件。

                回到angular

Angular目前有两个比较大的版本，一个是 1.X，一个是 5.0，对于 2.0以下的版本统称为 AngularJS，从 2.0版本开始称为 Angular。

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

2.知识剖析

            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，随着绑定数量的增加性能就会越低。               

2.Angular2.0推翻重做使得目前不宜采用此框架

Angular1.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模块功能相当强大。除了双向绑定之类的基本功能，还能通过programaticAPI控制dom元素的表单行为。                也有成型API提供自定义validator。这一点Vue只有v-model和第三方库。对于后台之类的重表单应用，还是Ng2有优势。           

                2.依赖注入:

                无论你喜不喜欢DI，这就是Angular2的强大功能之一。有DI可以在不改变代码结构的情况下完成功能替换。                Vue则需要程序员自己规划代码组织，用来支持共享组件。DI也可以用于类似modulelocalstate的功能。                比如，一个视频播放控件有几个子组件完成，子组件需要分享一个状态。这一点Angular2有原生的serviceinjectionpattern。而Vue则没有官方推荐。                           3.对标准向后兼容:

                Angular2在一些细节上对标准有更好的支持。比如 listdiffer算法中 Angular2可以支持实现了Symbol.iterator的对象，                而Vue只能支持Array。对Observable和Promise，Angular2在应用的各个地方，                甚至模板级别都有支持(asyncpipe)。而Vue需要vue-rx等第三方库支持。Angular2的组件有shadowdom的实现可以选择，而Vue目前还没有。           

               4.测试:

                Angular2一开始就设计好了如何对组件进行测试，而Vue组件虽然也很好写测试，但是没有官方推荐的唯一标准。                除此以外，Angular2还有一些小功能比如检验模板的类型安全，不过AoT本身似乎还没有稳定，所以不能算优势。对TS的支持也是Angular好，                当然前提是你喜欢TS。总体而言，就是Angular框架的全面性是难以撼动的。           

5.编码实战

6.扩展思考

7.参考文献

参考一：参考链接

参考二：知乎

8.更多讨论

【1】Angular1怎么操作DOM元素？

解答：angular11. 操作DOM元素太过于麻烦，还需要封装在自定义指令里面。

【2】angular自带的JQlitegai怎么使用？

解答：它是jQuery的轻量级版本，用法跟jQuery基本一样。

【3】angular2好用还是angular1好用？

解答：作为升级版，肯定功能得到了一定的优化，angular2肯定是强大一些。

鸣谢

感谢大家观看

 BY:聂义中

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~