angular有哪些优缺点?

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

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

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

【angular有哪些优缺点?  】

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

 1.背景介绍

  1.1 AngularJS由来？

AngularJS是由Google建立的一种JS框架，使用它能够扩展应用程序中的HTML词汇， 从而在web应用程序中使用HTML声明动态内容。 AngularJS可让你扩展HTML的语法，以便清晰、简洁地表示应用程序中的组件， 并容许将标准的HTML做为你的模板语言，AngularJS能够经过双向数据绑定自动从拥有JavaScript对 象（模型）的UI（视图）中同步数据。

 2.知识剖析

 

Angularjs-优势

         1.双向数据绑定,数据绑定多是AngularJS最酷最实用的特性。它可以帮助你避免书写大量的初始代码从而节约开发时间。一个典型的web应用可能包含了80%的代码用来处理，查询和监听DOM。数据绑定是的代码更少，你能够专一于你的应用。

       2.代码模块化，每一个模块的代码独立拥有本身的做用域，model，controller等。

       3.强大的directive能够将不少功能封装成HTML的tag,属性或者注释等，这大大美化了HTML的结构，加强了可阅读性。

       4.依赖注入，将这种后端语言的设计模式赋予前端代码，这意味着前端的代码能够提升重用性和灵活性，将来的模式可能将大量操做放在客户端，服务端只提供数据来源和其余客户端没法完成的操做

Angularjs-缺点

       1.验证功能错误信息显示比较薄弱，须要写不少模板标签

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

       3.ng提倡在控制器里面不要有操做DOM的代码，对于一些jQuery 插件的使用，若是想不破坏代码的整洁性，须要写一些directive去封装插件，可是如今有不少插件的版本已经支持Angular了，如：jQuery File Upload Demo</p>

       4.AngularJS 太笨重了，没有让用户选择一个轻量级的版本，固然1.2.X后，Angular也在作一些更改，好比把route，animate等模块独立出去，让用户本身去选择。

      

 3.常见问题

    Angularjs适用于作什么样的网站 

4.解决方案

1.Web应用页面是很是适合AngularJS使用的，一样不须要SEO，一样能够多方模块化加载，并且常常须要页面上的调整，这样就可以发挥AngularJS的优点了。

2.AngularJS主要考虑的是构建CRUD（增删改查）应用。幸运的是，大多数的WEB应用都是CRUD应用。

5.编码实战

6.扩展思考

  1.angularjs和vue的区别:

    一、vueJS简单易学,而angularJS的上手较高；

    二、vue专一于View层，主打的是快速便捷，而angularJS功能则比较全面，固然体量也较大，相对没有vue那么便捷；

    三、angularJS的指令都是ng-xxx，而vueJS的指令都是v-xxx；

    四、angularJS的全部指令和方法都是绑定在$scope上的，而vueJS是new出来一个实例，

    全部的方法和指令都在这个实例上，一个页面上能够有多个vue实例，可是angularJS的对象只能有一个；

    五、angularJS是由google开发和维护的，vueJS是由我的维护的；

    六、vueJS通常用于移动端的开发，而angularJS通常应用于大型的项目

2.React的优势

1.React伟大之处就在于，提出了Virtual Dom这种新颖的思路，而且这种思路衍生出了React Native，有可能会统一Web/Native开发。在性能方面，因为运用了Virtual Dom技术，Reactjs只在调用setState的时候会更新dom，并且仍是先更新Virtual Dom，而后和实际Dom比较，最后再更新实际Dom。这个过程比起Angularjs的bind方式来讲，一是更新dom的次数少，二是更新dom的内容少，速度确定快ReactJS更关注UI的组件化，和数据的单向更新，提出了FLUX架构的新概念，如今React能够直接用Js ES6语法了，而后经过webpack编译成浏览器兼容的ES5，开发效率上有些优点. 

2.React Native生成的App不是运行在WebView上，而是系统原生的UI，React经过jsx生成系统原生的UI，iOS和Android的React UI组件仍是比较类似的，大量代码能够复用维护UI的状态,Angular 里面使用的是 $scope，在 React 里面使用的是 this.setState。 而 React 的好处在于，它更简单直观。全部的状态改变都只有惟一一个入口 this.setState()，Angular 就比较复杂，不知道背后使用了哪些黑魔法。同构的JavaScript 

3.单页面JS应用程序的最大缺陷在于对搜索引擎的索引有很大限制。React对此有了解决方案。 

React能够在服务器上预渲染应用再发送到客户端。它能够从预渲染的静态内容中恢复同样的记录到动态应用程序中。 

由于搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化

3.vue优势

Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是经过尽量简单的 API 实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。

Vue.js的特性以下：1.轻量级的框架2.双向数据绑定3.指令4.插件化

7.参考文献

         参考一：

         

         参考二：

         

8.更多讨论

 1.Vue和React共同点

vue,react 共性： 

 

虚拟dom实现快速渲染 

 

轻量级响应式组件 

 

服务端渲染易于集成路由工具，打包工具及状态管理工具

 

    

 2.SPA vs. MPA

从字面上理解，SPA（单页面应用程序）整个应用只有一个页面，只加载一次Web静态资源，包括HTML+CSS+javascript，在导航过程当中不须要从新加载渲染整个页面。而MPA偏偏相反，也就是每一个页面都须要独立完整的从后端加载和渲染，早期的网站大多属于MPA。

 

3.框架的模块化和打包

一开始，Web应用尚未这么复杂，JavaScript根本没有模块化的概念，算得上封装的只是function和object，当即执行函数（IIFE）达到了封装私有变量的目的，避免了全局变量受到文件内变量的污染。随着前端应用的发展，命名冲突、依赖复杂致使的问题迫令人们开始考虑模块化的问题。模块系统将互相依赖的多个文件和目录拆分，全部代码均可以按需加载并彼此访问。

最先，伴随着node.js的兴起，CommonJS成功解决了服务器端JS的模块化。可是因为其采用同步加载的方式，加载资源会形成浏览器的“假死”，因此并不适合Web应用的模块化。后来，AMD（异步模块定义）成为浏览器端模块加载的规范，比较流行的库是RequireJS。RequireJS要求模块定义使用define关键字，以下形式：define(['dep'], function(dep){})，模块导入使用require关键字。可见，RequireJS会预先加载依赖，完成后触发回调函数。与RequireJS相似的还有阿里大牛玉伯开发的SeaJS，但模块定义规范不一样于AMD，它延续CommonJS规范，称为CMD（公共模块定义）。惋惜的是，玉伯认可“如今能够给SeaJS立碑了”。

ES6以后，JavaScript语言自己终于支持模块化了。不须要将全部代码都放在一个IIFE或回调中，只须要在模块中声明须要的内容，全部的声明都被限定在模块的做用域中，对全部脚本和模块全局不可见，而后将须要暴露的模块资源使用export关键字导出，当其它模块依赖此模块时再经过import关键字导入。因为出现较晚，ES6的模块化还不太完善（好比按需加载），浏览器支持也有限，但能够预见，在不远的未来，ES内置的模块化将取代第三方库。

RequireJS/SeaJS能够认为是一种在线“编译”模块的方案，至关于在页面上加载一个AMD/CMD规范解释器。这样浏览器就能解析define，require，exports，module这些关键字，也就实现了模块化。而Browserify/Webpack是预编译模块打包的方案，不须要在浏览器中加载解释器。你在本地直接写JS，无论是AMD/CMD/ES6风格的模块化，它都能编译成浏览器认识的JS。

Webpack已经成为最流行的打包工具，它为全部的静态资源提供单一的依赖树，对JavaScript、CSS等资源进行灵活的操做，并将向浏览器发送内容的数量和次数最小化。其强大之处不只仅在于它统一了JS的各类模块系统，取代了Browserify、RequireJS、SeaJS的工做，更重要的是它的万能模块加载理念，即全部的资源均可以且也应该模块化。

Parcel是刚刚出世不久的打包或者说是构建工具，是Webpack强有力的对手。相对于配置复杂的Webpack，它号称超级快（速度是Webpack的两倍）、零配置，同时还提供了一个开箱即用的开发服务器，经过热更新来支持快速开发。Parcel也有些不完善的地方，如不支持SourceMap，不能剔除无效代码（TreeShaking)。