Web界面编程状态变化和JS开发框架(React/Angular/Ember)

iefreer 发表于 2016-12-11 18:46:50

标签: javascript, framework, state, change

- +

UI编程中的一个关键课题就是界面组件化(可复用)以及组件状态管理。

稍早一些的windows程序员可能接触过MFC,其界面编程中有一个DDX(DoDataExchange)的机制,用来绑定界面组件和数据成员。

通过这样的绑定,由框架来负责当数据发生变化时完成相应UI的更新,而无需开发者编写代码,这无疑简化了编程。

而在早期的Web开发中,数据都是通过后台程序提供,所以UI的更新一般都是通过页面刷新或者局部Ajax请求来完成的,并没有一个独立的状态管理概念,如果说有状态,那么状态也是由后台进行远端管理的,前端只是负责构建文档并渲染。

这样当然是简单的,但同时也是低效的。

为了应对组件化和状态变更管理这些UI编程的基本要求,业界先后发展了一些JS开发框架。

Backbone.js:事件通知

Backbone.js和ExtJS属于第一代JS组件化开发框架,提供可复用的界面组件,如按钮、表单、表格等。

这些框架的思想是提供了事件通知接口,但具体内容的处理留给开发者。

When the model changes, an event is produced but the updating of the UI is not covered by the framework

开发者需要去处理细节,并考虑性能方面的影响,这样就会比较麻烦些。

Ember.js:数据绑定(Data Binding)

Ember通过类似DDX的方式绑定了数据和界面组件。该框架像Backbone一样发送事件,但是不同的是,Ember框架同时处理事件的接收,并完成界面更新,这意味着有一个侦听器用于更新连接到用户界面的事件。当接收到一个事件时,该侦听器知道要做什么。

When the model changes, a binding updates the relevant locations in the DOM

这个方式下,Ember完全掌控控件数据和视图,缺点是Ember必须始终注意到数据模型中发生的变化,数据模型必须继承Ember特定的API接口。

AngularJS:脏数据检查(Dirty Check)

和Ember一样,Angular也帮助处理数据更新的细节,但和Ember主动通知的设计思路不同,Angular采用了一种观察者模式,当应用程序状态发生改变时,Angular检查每个被观察的对象,如果发现有变化,则执行更新:

Changes in the model are being actively watched from watchers set up in view templates

这样的好处是数据模型(Model)要轻量和灵活些,不需要遵循特定接口,缺点是model没有主动性,比较“傻瓜”,必须有人从外部来检查它的变化。每次点击、HTTP应答和超时处理都将触发一个digest程序,来执行这些watchers。

ECMAScript 7中的Object.observe特性将帮助简化watchers的动作。

React:虚拟DOM(Virtual Dom)

React在状态变更处理中,使用了一种貌似偷懒的方法,既不用通知,也不用观察,而是完全“重绘”,看起来好像和服务器重绘一样,但技巧就在于服务器重绘是绘制真实的DOM,而React引入了一个虚拟DOM的概念,这个虚拟DOM是一个轻量级的JS简单对象(PO),在这个对象上操作要远比真实DOM要快得多。第一次绘制时,建立虚拟DOM:

The model is first projected to a Virtual DOM, which is then rendered to a real DOM

发生变化后,React创建一个新的虚拟DOM,比较和上次虚拟DOM的区别,然后把差异部分在真实DOM上更新。

When the model changes, the Virtual DOM is re-rendered. The two version of the virtual DOM are compared, and the changes patched in the real DOM

所以React的性能取决于比较程序是否足够有效和智能,优点是消除了状态跟踪,缺点显然是占用了较多的内存。

还有一些方案如增量DOM,是内存和性能的折衷,这里不再赘述。

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

发送私信

最新评论

请先 登录 再评论.
相关文章
  • Blender2.7给平面模型添加纹理贴图

    在blender中给模型添加纹理,需要有2个步骤:首先在对象属性栏中给该对象添加材料和纹理建立纹理映射添加材料和纹理这是常见操作,略过步骤。但是仅仅这样操作,...

  • WebGL、Asm.js和WebAssembly概念简介

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

  • ES6小知识:动态对象键(Dynamic Object Keys)语法简介

    在ES5,对象的键(key)总是被解释为字符串。ES6允许我们使用计算的值作为对象的键,使用方括号:[myKey]const

  • JavaScript语言多编程范式简介

    和C++等语言类似,JS支持多范式(paradigms)编程。我们常常混合这些范式来完成一些大型Web项目。JS支持3种编程范式:命令式、面向对象和函数式。命令式(Imperative JavaScript)命令式就是简单的从上而下完成任务,流水账过程式编码风格:function

  • 如何使用CSS3合成模式(blend-mode)和滤镜(filter)实现彩色蜡笔(时光机)照片特效

    在之前的文章中我们已经详细讲解过CSS3滤镜(filter,也可称之为过滤器)的工作方式,本文将实现一个当下流行的时光机相片特效实例来说明其实际用途。
    我们...

  • 通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质

    常常听到人们对于HTML5的讨论,看了页面头部这个那个就是HTML5,误认为HTML5只是新增些标签“而已”,学完了

  • HTTP1.1协议现状、问题和解决方案

    HTTP的现状最早的HTTP协议非常简单,只能用来传送文本,方法也只有GET,后来逐步发展到1.1,能够支持多种MIME格式数据(如文本、文件),支持GET,POST,HEAD,OPTI...

  • HTML5、Hybrid APP、Native APP对比和技术选型

    HTML5和Native APP都很容易理解。为了获得HTML5的移植性和移动本地应用的高性能,搞出来一些混合APP的解决方案。比如Apache的Cordova(也就是以前的PhoneGap),...

  • 粒子运动模拟 - Verlet积分算法简介

    Verlet算法是经典力学(牛顿力学)中的一种最为普遍的积分方法,被广泛运用在分子运动模拟(Molecular Dynamics Simulation),行星运动以及织物变形模拟等领域...

  • 使用Canvas绘制完美的不完美圆形

    真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canva...

  • Three.js 3D打印数据模型文件(.STL)加载

    3D打印是当下和未来10年产品技术主流方向之一,影响深远。对于电子商务类的3D打印网站,一个主要功能是把商品以3D的方式呈现出来,也就是3D数据可视化技术。HTML...

  • 如何使用纯CSS3实现一个3D泡沫

    要实现一个逼真的泡沫,涉及到比较复杂的光学/物理学知识。我们这里先简化下问题,实现一个相对简单而足够实用的泡沫元素。我们可以把基础的泡沫元素应用在很多场景中,比如水景、泡咖啡、啤酒甚至火焰特效中。泡沫首先是一个圆形元素.bubble

  • 使用CSS3实现流星雨动画教程

    很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。要实现这样的效果,有两种方法,一个是使用Canvas,一个是使用纯CSS3,我们这里介绍第2种方...

  • 更多...