前端开发框架技术选型:Angular2 VS React VS jQuery
Angular和React是主流的2个前端开发框架,但是严格来说两者并非对等的概念。
Angular是一个基于MVC(或者MVVM)的框架,包含model(模型)/view(视图)/controller(控制器),
React只有view(视图)层。而Angular2使用TypeScript重建了整个框架,好处是可以利用TypeScript的增强语法。
相对而言Angular是一个重量级的开发框架,而React是一个界面库,React要加上Flux可以成为一个快速开发框架。
Angular通过双向绑定提供了更多的交互性,另外也提供了方便构建单页应用的服务和路由。
React的主要目标是给开发者提供表现层可复用的声明式界面插件,背后的事情留给开发者来完成。
而jQuery我们都很熟悉,是一个可扩展的开发库。
Angular架构
Angular的后台机制设计吸收了BackboneJS和Knockout等其他早期JS框架的很多概念,整体架构包含模块(Module)、模板(Template)、组件(Component)、元数据(Metadata)、双向绑定、指令(Directive)和依赖注入(Dependency Injection)。其中DI主要是用于在创建组件时由Injector自动注入所依赖的服务层逻辑,这是沿用Java里面的类似概念。
React架构(Flux)
Flux纸面意思表示“变化”,体现了该架构的意图,就是为了应对Web端数据变化越来越多的客观情况。
Flux本质上是表示上图这样一个单向数据流的实现,这在桌面和本地应用被实现过N种类似版本,只是现在搬迁到Web上来了。
当用户和视图(View)交互发生变化时,触发一个动作(Action);
动作被分发器(Dispatcher)派发给该动作对应的回调函数来更新数据模型(Store);
Store数据更新后会发送change事件来通知View;
控制器视图(controller-views)侦听change事件并接收新数据做出相应的界面更新。
Angular和React功能比对表
Features | Angular2 | React |
Author | ||
Language | TypeScript | JSX, ES5, ES6 |
Designing | JavaScript into HTML | JavaScript Centric |
JavaScript | Less | More |
Failure | Run-time | Compile-time |
DOM | Regular | Virtual |
Binding | 1 / 2- way | Uni-directional |
Templating | In.ts files | In.jsx file |
Mobile Support | Ionic Framework | React Native |
MVC | Yes | V-only |
Rendering | Server-side | Server-side |
无论使用Angular还是React,相比jQuery,都会在前端引入新的复杂度,
那么为什么还需要这些框架呢?如前所述,这源于客观上Web端有了越来越多的数据和交互,
一个大型的界面程序(如Facebook自己的应用)需要有一些最佳实践(如组件化)来规范化这些交互过程,
提高代码在团队之间的可复用性和可维护性。看下面个图,对于复杂应用,我们会有直观的认识:
当交互事件繁杂时,要避免一团糟,如果我们使用jQuery就需要自行实现一个中间管理(事件代理)对象并重构相应的业务代码,
而React已帮你很好的实现了。下面是分别使用jQuery和React实现的微博评论框界面组件代码,可以自己体会下:
http://wow.techbrood.com/fiddle/31660
http://wow.techbrood.com/fiddle/31659
最后,尽管本文说明了Angular和React的设计思路和好处,但是需要指明的是不要盲目使用这些框架。
我们认为对于小的网页应用,使用jQuery仍然要简洁直观(容易理解)得多,就是查找元素/侦听事件/操作DOM。
React把标记(HTML)和行为(JS)混合在一起的方式以及引入的状态变化中间过程,对于大型应用有助于组件化,
但对于小型应用,实际上比脚本和标记分离更难以维护。
最新评论
- 相关文章
HTML5 And Canvas 2D Specs Are Now Feature Complete, First HTML 5.1 Working Draft Published
We’ve been writing about HTML5 for quite a while, but, until today, the actual HTML5 specs and standards were still moving targets. Now, however, the...
函数式JavaScript编程基础概念:Curry和Partial Application
本文介绍JS函数式编程中的两个概念:柯里(Curry)和部分应用程序(Partial Application)。什么是应用程序(Application)将函数应用于其参数以产生返回值的过...
JavaScript事件模型图解
在JavaScript中用户交互的核心部分就是事件处理。本文为对事件模型和处理机制的总体性描述。Event是什么?
event是用户操作网页时发生的交互动作,比如clic...如何使用CSS3合成模式(blend-mode)和滤镜(filter)实现彩色蜡笔(时光机)照片特效
在之前的文章中我们已经详细讲解过CSS3滤镜(filter,也可称之为过滤器)的工作方式,本文将实现一个当下流行的时光机相片特效实例来说明其实际用途。
我们...深入理解CSS3滤镜(filter)功能和实例详解
CSS3滤镜功能源自SVG滤镜规范,SVG滤镜最早用来给矢量图添加类似PS中像素图的一些特效。
把这个滤镜功能引入到普通HTML元素中可以带来很有趣的效果(模糊、...使用HTML5 FileReader和Canvas压缩用户上传的图片
手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力。因此在某些应用下(对图片要求不那么高)我们可以在客户端来压缩图片,然后再提交给服务器。总体...
使用SVG和CSS3创建圆形进度条动画
圆形进度条是一个经典的控制面板元素,常用于显示任务进度,比如用户档案的完整程度,或者升级状态。有很多方法来实现圆形进度条,比如用JS, CSS3, Canvas, SVG...
深度贴图(depth map)概念简介和生成流程
Depth map 深度图是一张2D图片,每个像素都记录了从视点(viewpoint)到遮挡物表面(遮挡物就是阴影生成物体)的距离,这些像素对应的顶点对于观察者而言是“可...
纹理基础知识和过滤模式详解
1、 为什么在纹理采样时需要texture filter(纹理过滤)。
我们的纹理是要贴到三维图形表面的,而三维图形上的pixel中心和纹理上的texel中心并不一至(pixe...WebGL入门教程4 - 使用纹理贴图(Texture Map)
3D建模和纹理贴图的关系就好比人体和皮肤(或着装)的关系,3D建模用来处理空间属性,而贴图适合用来处理细腻的表面属性。如果不使用贴图,而想在表面达到足够的...
使用Canvas绘制完美的不完美圆形
真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canva...
Canvas实例教程:图像移动、大小调整和裁剪
本文介绍如何使用JavaScript和HTML5 Canvas元素来移动、调整大小和...
在PHP网页程序中执行Sass/Compass命令
我们需要在wow云开发平台支持sass/compass等预编译样式语言,为此我们首先尝试了scssphp扩展,但是在支持最新语法上,经常会出现异常。所以我们采用了代理的方式...
更多...