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

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

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

【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的区别:

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

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

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

    4、angularJS的所有指令和方法都是绑定在$scoPE上的，而vueJS是new出来一个实例，

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

    5、angularJS是由google开发和维护的，vueJS是由个人维护的；

    6、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.@L_360_15@。 而 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)。