前端开发框架技术选型: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)混合在一起的方式以及引入的状态变化中间过程,对于大型应用有助于组件化,
但对于小型应用,实际上比脚本和标记分离更难以维护。
最新评论
- 相关文章
2019年开源WebRTC媒体服务器选型比较
什么是WebRTC服务器?在WebRTC的早期开始,该技术的主要卖点之一是它允许点对点(浏览器到浏览器)通信,几乎没有服务器的干预,服务器通常仅用于信令(比如用于...
Monaco Editor 编辑器拷贝粘贴功能调用和获取选中文本
有时候需要在monaco editor外部调用编辑器的内置功能比如希望在页面主工具栏实现一些快捷操作。button
WebAssembly工作原理和JavaScript语言性能对比分析
本文简单说明WebAssembly(简称wasm)工作原理和高性能的原由(和JavaScript相比)。不过需要提醒的是Wasm并非设计来完全替代JS,而是对JS的一个强大补充,JS中...
创建非矩形网页页面元素的常用技术和实例代码
非矩形设计正在变成一种时尚,比如波浪形、菱形、三角形等:而随着技术发展,这种设计在技术实现上也变得更容易。本文以最简单的三角形为例,演示使用5种方法来...
React JSX语法简介
JSX是一种类似XML的标签语法,用来简化代码,我们可以不使用JSX,但了解并使用也没什么坏处:)在React中,JSX是一个使用 React.createElement() API的快捷方式...
函数式JavaScript编程基础概念:Curry和Partial Application
本文介绍JS函数式编程中的两个概念:柯里(Curry)和部分应用程序(Partial Application)。什么是应用程序(Application)将函数应用于其参数以产生返回值的过...
使用HTML5 Canvas实现的界面元素截屏功能
粒子运动模拟 - Verlet积分算法简介
Verlet算法是经典力学(牛顿力学)中的一种最为普遍的积分方法,被广泛运用在分子运动模拟(Molecular Dynamics Simulation),行星运动以及织物变形模拟等领域...
Three.js入门教程6 - 创建全景图和纹理
全景图非常酷。使用Three.js做一个属于自己的全景图并不是那么困难。要做一个全景图,你需要一个软件用来做一张全景图片。我使用了iPhone上的Microsoft Photosyn...
Three.js入门教程5 - 10个必须知道的编程技巧
作者为Google的Paul,关于如何写出好的WebGL代码的文章。和很多开发者一样,我通过实践学习,但同时我也向其他更有经验的开发者们学习。在过去的几个月中,我在c...
浏览器控制台报JS脚本执行错误:Module is not defined
现在JS分成了两个分支,一部分在服务器端发展如NodeJS,一部分是传统的浏览器运行环境。
有些插件在编写JS代码时,是针对Node编写的,所以直接在浏览器中使...使用Canvas绘制完美的不完美圆形
真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canva...
如何使用CSS3实现一个3D商品标签
使用3D缎带形状的标签是常见的一个设计模式,用在商品折扣、文章标题或网站推荐信息上,来突出显示重点内容,吸引用户视觉焦点。实现的方法有2种,一种是使用背...
div 、section 、article的区别和使用场景
div 、section 、article的区别和使用场景
主要区别,以及适用场合如下:
1、div在html早期版本就支持了,section和article是html5提出的两个雨衣话标... 更多...