Web界面编程状态变化和JS开发框架(React/Angular/Ember)
UI编程中的一个关键课题就是界面组件化(可复用)以及组件状态管理。
稍早一些的windows程序员可能接触过MFC,其界面编程中有一个DDX(DoDataExchange)的机制,用来绑定界面组件和数据成员。
通过这样的绑定,由框架来负责当数据发生变化时完成相应UI的更新,而无需开发者编写代码,这无疑简化了编程。
而在早期的Web开发中,数据都是通过后台程序提供,所以UI的更新一般都是通过页面刷新或者局部Ajax请求来完成的,并没有一个独立的状态管理概念,如果说有状态,那么状态也是由后台进行远端管理的,前端只是负责构建文档并渲染。
这样当然是简单的,但同时也是低效的。
为了应对组件化和状态变更管理这些UI编程的基本要求,业界先后发展了一些JS开发框架。
Backbone.js:事件通知
Backbone.js和ExtJS属于第一代JS组件化开发框架,提供可复用的界面组件,如按钮、表单、表格等。
这些框架的思想是提供了事件通知接口,但具体内容的处理留给开发者。
开发者需要去处理细节,并考虑性能方面的影响,这样就会比较麻烦些。
Ember.js:数据绑定(Data Binding)
Ember通过类似DDX的方式绑定了数据和界面组件。该框架像Backbone一样发送事件,但是不同的是,Ember框架同时处理事件的接收,并完成界面更新,这意味着有一个侦听器用于更新连接到用户界面的事件。当接收到一个事件时,该侦听器知道要做什么。
这个方式下,Ember完全掌控控件数据和视图,缺点是Ember必须始终注意到数据模型中发生的变化,数据模型必须继承Ember特定的API接口。
AngularJS:脏数据检查(Dirty Check)
和Ember一样,Angular也帮助处理数据更新的细节,但和Ember主动通知的设计思路不同,Angular采用了一种观察者模式,当应用程序状态发生改变时,Angular检查每个被观察的对象,如果发现有变化,则执行更新:
这样的好处是数据模型(Model)要轻量和灵活些,不需要遵循特定接口,缺点是model没有主动性,比较“傻瓜”,必须有人从外部来检查它的变化。每次点击、HTTP应答和超时处理都将触发一个digest程序,来执行这些watchers。
ECMAScript 7中的Object.observe特性将帮助简化watchers的动作。
React:虚拟DOM(Virtual Dom)
React在状态变更处理中,使用了一种貌似偷懒的方法,既不用通知,也不用观察,而是完全“重绘”,看起来好像和服务器重绘一样,但技巧就在于服务器重绘是绘制真实的DOM,而React引入了一个虚拟DOM的概念,这个虚拟DOM是一个轻量级的JS简单对象(PO),在这个对象上操作要远比真实DOM要快得多。第一次绘制时,建立虚拟DOM:
发生变化后,React创建一个新的虚拟DOM,比较和上次虚拟DOM的区别,然后把差异部分在真实DOM上更新。
所以React的性能取决于比较程序是否足够有效和智能,优点是消除了状态跟踪,缺点显然是占用了较多的内存。
还有一些方案如增量DOM,是内存和性能的折衷,这里不再赘述。


最新评论
- 相关文章
2019年NodeJS框架Koa和Express选型比较
Koa和Express都是NodeJS的主流应用开发框架。
Express是一个完整的nodejs应用框架。Koa是由Express团队开发的,但是它有不同的关注点。Koa致力于核心中间件...Monaco Editor 编辑器拷贝粘贴功能调用和获取选中文本
有时候需要在monaco editor外部调用编辑器的内置功能比如希望在页面主工具栏实现一些快捷操作。button
A-Frame WebVR(网页虚拟现实)快速开发入门教程
WebVR和WebGL应用程序接口使得我们已经可以在浏览器上创建虚拟现实(VR)体验,但从工程化的角度而言,开发社区还需要更多方便强大的开发库来简化编程,Mozilla的
WebGL Roadmap
Unity 5.0 shipped with a working preview of our WebGL technology in March this year. Since then, Google has disabled (by default) NPAPI support in the...
NodeJS、Java和PHP性能考量和若干参考结论
首先需要说明的是,严格而言NodeJS和Java、PHP并非对等概念,NodeJS是基于JS的一个应用程序,而Java/PHP是语言。我们这里实际指的是分别使用node、java和php来实...
深入理解CSS3滤镜(filter)功能和实例详解
CSS3滤镜功能源自SVG滤镜规范,SVG滤镜最早用来给矢量图添加类似PS中像素图的一些特效。
把这个滤镜功能引入到普通HTML元素中可以带来很有趣的效果(模糊、...HTML5动画背后的数学 - 粒子群仿生算法简介
本站收录了多个算法可视化动画,如模拟鸟群运动:http://wow.techbrood.com/fiddle/30529等等。这里面除...
使用SVG和CSS3创建圆形进度条动画
圆形进度条是一个经典的控制面板元素,常用于显示任务进度,比如用户档案的完整程度,或者升级状态。有很多方法来实现圆形进度条,比如用JS, CSS3, Canvas, SVG...
三维向量的简单运算和实用意义
在WebGL的实际应用中我们广泛使用向量的几何运算来计算角度、距离,判断点线、点面之间的关系,比如物体之间的碰撞检测。本文简要介绍三维计算机图形学中常用的...
Three.js入门教程6 - 创建全景图和纹理
全景图非常酷。使用Three.js做一个属于自己的全景图并不是那么困难。要做一个全景图,你需要一个软件用来做一张全景图片。我使用了iPhone上的Microsoft Photosyn...
如何基于Canvas来模拟真实雨景Part2:重力掉落和雨滴融合
SVG过滤器feColorMatrix矩阵变换效果用法详解
在计算机图形学(数学)中,矩阵乘法可用于把空间向量进行几何变换。我们可以把颜色的值(RGBA)表示成一个四维空间向量:color = (r, g, b, a);那么就可以应用...
在PHP网页程序中执行Sass/Compass命令
我们需要在wow云开发平台支持sass/compass等预编译样式语言,为此我们首先尝试了scssphp扩展,但是在支持最新语法上,经常会出现异常。所以我们采用了代理的方式...
更多...