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:聂义中

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容