前端开发框架技术选型: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)混合在一起的方式以及引入的状态变化中间过程,对于大型应用有助于组件化,
但对于小型应用,实际上比脚本和标记分离更难以维护。
最新评论
- 相关文章
3D感知和建模关键硬件技术:双目、3D结构光和TOF
无论VR、AR和3D打印,其核心技术包含3D成像和建模。而3D建模属于劳动密集型的工作,耗时耗力,凡这类工作都会是被新技术革命的地方,自动3D建模技术就是为了解决...
CSS3原生变量(Native Variables)新特性简介
对Web开发者来说,一个盼望已久的特性是CSS终于支持原生变量了!
变量是程序语言中用来解决代码重复和进行表达式计算的关键概念(想想数学方程式中的x)。...CSS3特性查询(Feature Query: @supports)功能简介
这是2017年不能不了解和学习的一个CSS新特性,非常实用,考虑到现实世界浏览器的复杂性,该特性本应该先于其他新特性出来。我们已经知道使用媒体查询(Media Que...
React JSX语法简介
JSX是一种类似XML的标签语法,用来简化代码,我们可以不使用JSX,但了解并使用也没什么坏处:)在React中,JSX是一个使用 React.createElement() API的快捷方式...
JavaScript语言多编程范式简介
和C++等语言类似,JS支持多范式(paradigms)编程。我们常常混合这些范式来完成一些大型Web项目。JS支持3种编程范式:命令式、面向对象和函数式。命令式(Imperative JavaScript)命令式就是简单的从上而下完成任务,流水账过程式编码风格:function
使用HTML5 FileReader和Canvas压缩用户上传的图片
手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力。因此在某些应用下(对图片要求不那么高)我们可以在客户端来压缩图片,然后再提交给服务器。总体...
HTML5、Hybrid APP、Native APP对比和技术选型
HTML5和Native APP都很容易理解。为了获得HTML5的移植性和移动本地应用的高性能,搞出来一些混合APP的解决方案。比如Apache的Cordova(也就是以前的PhoneGap),...
Three.js 对象局部坐标转换为世界坐标
在Three.js中进行顶点几何计算时,一个需要注意的地方是,需要统一坐标系。比如你通过Three.js提供的API创建了一个球体网孔对象,那么默认情况下,各网孔顶点的...
三维向量的简单运算和实用意义
在WebGL的实际应用中我们广泛使用向量的几何运算来计算角度、距离,判断点线、点面之间的关系,比如物体之间的碰撞检测。本文简要介绍三维计算机图形学中常用的...
Blender2.7 快捷键一览表
通用操作
停止当前操作:ESC
快捷搜索:SPACE撤销:ctrl+z重做:ctrl+shift+z渲染:F12
单选:鼠标右键(RMB)全选:A
框选:B
刷选:...WebVR简介和常用资源链接
什么是WebVR这是一个实验性的JavaScript API,提供了在用户网页浏览器中访问虚拟现实设备的统一接口。当前主流VR设备如Oculus Rift DK2、谷歌的CardBoard、三星...
CSS3图片混合(Blend)效果及其参考计算公式一览表
在Photoshop软件中,混合是将两个图层的色彩值进行合成,从而创造出大量的效果。在这些效果的背后实际是一些简单的数学公式在起作用。下面所介绍的公式仅适用于R...
IE各版本CSS Hack(兼容性处理)语法速查表
为了兼容IE各个版本,需要在CSS中添加额外的代码,比如以前常用的_width。之所以工作,是因为浏览器会忽略不能解析的样式规则,因此举个例子来说,把_width写在w...
更多...