一文了解前端三大框架Angular+Vue+React

Angular

1、简介

AngularJS诞生于2009年,由Misko Hevery等人创建,是一款构建用户界面的前端框架,后为Google所收购。AngularJS是一个应用设计框架与开发平台,用于创建高效、复杂、精致的单页面应用,通过新的属性和表达式扩展了 HTML,实现一套框架,多种平台,移动端和桌面端。AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等。Angular是AngularJS的重写,Angular2以后官方命名为Angular,2.0以前版本称为AngualrJS。AngularJS是用JavaScript编写,而Angular采用TypeScript语言编写,是ECMAScript 6的超集。

2、产生背景

为了克服HTML在构建应用上的不足而设计的。通过以下技术来解决静态网页技术在构建动态应用上的不足:

  • 类库:类库是一些函数的集合,它能帮助开发者写WEB应用。起主导作用的是开发者的代码,由开发者来决定何时使用类库。类库有:jQuery等。
  • 框架:框架是一种特殊的、已经实现了的WEB应用,只需要对它填充具体的业务逻辑。这里框架是起主导作用的,由它来根据具体的应用逻辑来调用开发者的代码。框架有:knockout、sproutcore等。

AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为指令(directives)的结构,让浏览器能够识别新的语法。例如:

  • 使用双大括号{{}}语法进行数据绑定
  • 使用DOM控制结构来实现迭代或者隐藏DOM片段
  • 支持表单和表单的验证
  • 能将逻辑代码关联到相关的DOM元素上
  • 能将HTML分组成可重用的组件

3、优势

  • Angular框架支持各种平台而且功能强大,提供了各种工具和可维护的方式来构建项目的模式。正确使用它时就不会遇到难以修改及测试的代码结构
  • Angular是使用TypeScript构建的,而TypeScript又依赖于JS ES6,所以不需要学习全新的语言,但仍然可以获得静态类型,接口,类,命名空间,装饰器等功能。
  • Angular中的组件是分离的,可以轻而易举的替换各种组件。使用Angular,不会紧密地耦合演示文稿和应用程序的逻辑,会使标记更清晰,更简单。
  • Angular的目的在于进行全面测试,它支持使用Jasmine和Protractor等工具进行单元测试和端到端测试。
  • Angular同适用移动和pc端,它是一个适用于多个平台的框架。而且在此框架中可以找到许多有用的第三方工具。

Vue

1、简介

Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用,采用自底向上增量开发的设计。Vue的核心库只关注视图层,易于上手,便于与第三方库或既有项目整合。当与现代化的工具链以及各种支持类库结合使用时,Vue能够为复杂的单页应用(SPA)提供驱动。Vue有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。Vue.js不是一个全能框架,它只聚焦于视图层。

2、语言特点

  • 易用:在有HTML,CSS,JavaScript的基础上,快速上手。Vue.js的API是参考AngularJS、KnockoutJS、Ractive.js、Rivets.js。Vue.js的API中包含了许多Vue.js的独特功能。
  • 灵活:简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。
  • 性能:20kbmin+gzip运行大小、超快虚拟DOM、最省心的优化。

React

1、简介

React是用于构建用户界面的JavaScript库,起源于Facebook的内部项目,该公司对市场上所有JavaScript MVC框架都不满意,决定自行开发一套,用于架设Instagram的网站。由于React的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单,从最早的UI引擎变成了一整套前后端通吃的Web App解决方案。衍生的React Native项目,目标更是宏伟,希望用写Web App的方式去写Native App。如果能够实现,整个互联网行业都会被颠覆,因为同一组人只需要写一次UI,就能同时运行在服务器、浏览器和手机。
React主要用于构建UI。可以在React里传递多种类型的参数,如声明代码,帮助你渲染出UI、可以是静态的HTML DOM元素、可以传递动态变量、甚至是可交互的应用组件。

2、框架特点

  • 声明式设计:React采用声明范式,可以轻松描述应用。
  • 高效:React通过对DOM的模拟,最大限度地减少与DOM的交互。
  • 灵活:React可以与已知的库或框架很好地配合。
  • 3
    点赞
  • 3
    收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页
评论 3

打赏作者

Bunnyrrr

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值