前端开发框架技术选型:Angular2 VS React VS jQuery

iefreer 发表于 2016-12-12 12:58:22

标签: angular, angular2, react

- +

Angular和React是主流的2个前端开发框架,但是严格来说两者并非对等的概念。

Angular是一个基于MVC(或者MVVM)的框架,包含model(模型)/view(视图)/controller(控制器),

React只有view(视图)层。而Angular2使用TypeScript重建了整个框架,好处是可以利用TypeScript的增强语法。

相对而言Angular是一个重量级的开发框架,而React是一个界面库,React要加上Flux可以成为一个快速开发框架。

Angular通过双向绑定提供了更多的交互性,另外也提供了方便构建单页应用的服务和路由。

React的主要目标是给开发者提供表现层可复用的声明式界面插件,背后的事情留给开发者来完成。

而jQuery我们都很熟悉,是一个可扩展的开发库。

Angular架构

angular_arch.jpg

Angular的后台机制设计吸收了BackboneJS和Knockout等其他早期JS框架的很多概念,整体架构包含模块(Module)、模板(Template)、组件(Component)、元数据(Metadata)、双向绑定、指令(Directive)和依赖注入(Dependency Injection)。其中DI主要是用于在创建组件时由Injector自动注入所依赖的服务层逻辑,这是沿用Java里面的类似概念。

React架构(Flux)

blob.png

Flux纸面意思表示“变化”,体现了该架构的意图,就是为了应对Web端数据变化越来越多的客观情况。

Flux本质上是表示上图这样一个单向数据流的实现,这在桌面和本地应用被实现过N种类似版本,只是现在搬迁到Web上来了。

  1. 当用户和视图(View)交互发生变化时,触发一个动作(Action);

  2. 动作被分发器(Dispatcher)派发给该动作对应的回调函数来更新数据模型(Store);

  3. Store数据更新后会发送change事件来通知View;

  4. 控制器视图(controller-views)侦听change事件并接收新数据做出相应的界面更新。

Angular和React功能比对表
FeaturesAngular2React
AuthorGoogleFacebook
LanguageTypeScriptJSX, ES5, ES6
DesigningJavaScript into HTMLJavaScript Centric
JavaScriptLessMore
FailureRun-timeCompile-time
DOMRegularVirtual
Binding1 / 2- wayUni-directional
TemplatingIn.ts filesIn.jsx file
Mobile SupportIonic FrameworkReact Native
MVCYesV-only
RenderingServer-sideServer-side

无论使用Angular还是React,相比jQuery,都会在前端引入新的复杂度,

那么为什么还需要这些框架呢?如前所述,这源于客观上Web端有了越来越多的数据和交互,

一个大型的界面程序(如Facebook自己的应用)需要有一些最佳实践(如组件化)来规范化这些交互过程,

提高代码在团队之间的可复用性和可维护性。看下面个图,对于复杂应用,我们会有直观的认识:

jquery-style-vs-react-style.png

当交互事件繁杂时,要避免一团糟,如果我们使用jQuery就需要自行实现一个中间管理(事件代理)对象并重构相应的业务代码,

而React已帮你很好的实现了。下面是分别使用jQuery和React实现的微博评论框界面组件代码,可以自己体会下:

http://wow.techbrood.com/fiddle/31660

http://wow.techbrood.com/fiddle/31659


最后,尽管本文说明了Angular和React的设计思路和好处,但是需要指明的是不要盲目使用这些框架。

我们认为对于小的网页应用,使用jQuery仍然要简洁直观(容易理解)得多,就是查找元素/侦听事件/操作DOM。

React把标记(HTML)和行为(JS)混合在一起的方式以及引入的状态变化中间过程,对于大型应用有助于组件化,

但对于小型应用,实际上比脚本和标记分离更难以维护。

possitive(2) negative(0) views4512 comments0
私信 收藏 分享
分享到

发送私信

最新评论

请先 登录 再评论.
相关文章
  • WebGL、Asm.js和WebAssembly概念简介

    随着HTML技术的发展,网页要解决的问题已经远不止是简单的文本信息,而包括了更多的高性能图像处理和3D渲染方面。这正是要引入WebGL、Asm.js和WebAssembly这些技...

  • 常见面试题JS语言中四种函数调用方式实例讲解

    JS的语言世界中函数(function)是一等公民,函数的调用有多种方法。普通调用这个是最常见和直接的方式:function

  • 使用HTML5 Canvas实现的界面元素截屏功能

    如果网站出现问题,常常需要截图来提交反馈,这个功能很实用。使用HTML5的Canvas可以实现这个目标。我们首先引入

  • 使用SVG和CSS3创建圆形进度条动画

    圆形进度条是一个经典的控制面板元素,常用于显示任务进度,比如用户档案的完整程度,或者升级状态。有很多方法来实现圆形进度条,比如用JS, CSS3, Canvas, SVG...

  • 学习使用CSS制作进度条

    进度条是基础的界面控件,可用于多种场合,比如任务完成进度,手机充电状态等。本文介绍一个简单实用的进度条制作方法。预期效果如下图所示:直观上,我们可以把该进度条控件分为2个部分,外部的边界用来表示固定的目标范围,里面的条形部分用来表示当前进度。外部目标范围元素的CSS代码编写如下:.pb-scope

  • 纹理基础知识和过滤模式详解

    1、 为什么在纹理采样时需要texture filter(纹理过滤)。
    我们的纹理是要贴到三维图形表面的,而三维图形上的pixel中心和纹理上的texel中心并不一至(pixe...

  • Blender2.7 快捷键一览表

    通用操作
    停止当前操作:ESC
    快捷搜索:SPACE撤销:ctrl+z重做:ctrl+shift+z渲染:F12
    单选:鼠标右键(RMB)全选:A
    框选:B
    刷选:...

  • Three.js入门教程5 - 10个必须知道的编程技巧

    作者为Google的Paul,关于如何写出好的WebGL代码的文章。和很多开发者一样,我通过实践学习,但同时我也向其他更有经验的开发者们学习。在过去的几个月中,我在c...

  • WebGL入门教程5 - 详解纹理滤镜(Texture Filter)

    WebGL中使用纹理贴图来实现细腻的物体表面观感,其中一个重要的参数是纹理滤镜(Texture Filter)。
    这个参数用来处理当对象出现缩放时,纹理如何处理中间...

  • 如何使用WebGL实现空气高温热变形动画特效

    我们在炎炎夏日,或者在火堆旁,经常会观察到热源周围空气的不稳定波动现象。本文将讲解如何通过WebGL来实现这个特效。该效果可用于热变形、波浪、水面波光等场...

  • jQuery Ribbles - 基于WebGL的水面涟漪动效插件

    使用jQuery

  • div 、section 、article的区别和使用场景

    div 、section 、article的区别和使用场景
    主要区别,以及适用场合如下:
    1、div在html早期版本就支持了,section和article是html5提出的两个雨衣话标...

  • 更多...