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

2. 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/u012125579/article/details/52744093

https://www.zhihu.com/question/40975678

https://www.zhihu.com/question/22284218

8.更多讨论

1.Angular1存在哪些问题?

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

2.angular1和angular2有什么不同?

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

3.angular对seo友好吗?

对seo不是特别友好

PPT

视频

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

推荐阅读更多精彩内容