D2JS 将数据绑定视为“对象-路径-渲染/收集 ”组成。主要 DOM  元素和对象绑定,称为 d2js.root,非主要元素指定数据路径,通过路径定位到值,根据值可进行渲染或收集。

为何要设计路径概念?页面域中的对象,其成员值对象经常在变化,如果每个DOM元素都直接绑定到对象,下次渲染时可能成员对象已经被新的成员值对象取代了。如图中,当执行下面代码后

person.friends.shift()

Linda 成为顺序为 0 的朋友。由于 td 使用的是 “0,name”这样的形式说明的字符串,而不是 {name:”Tim”,tel:”…”} 对象,因此可以再次从 person 对象展开得到新的索引为 0 的 friend 对象 Linda。

d2js 使用 data 说明数据路径。带有数据路径的元素在渲染或收集时,从最近的(closest)含有 d2js.root 的元素所绑定的对象开始,按数据路径层层展开。

该设计动静结合,相对稳定的对象,通过 bindRoot 绑定后基本不再活动,相对不稳定的对象,通过数据路径约定,每次渲染重新定位值。

此外,d2js 还有一个单根的全局数据对象,d2js.root,其又是 d2js.dataset 的别名。html 元素也可以使用 <element d2js.root="member"> 方式(而不是 bindRoot)说明数据对象。关于该方式可详见 d2js 示例。

d2js 框架不是一个灵敏绑定框架,也不是双向绑定框架。许多使用灵敏框架的人都在找怎么避免文本框一敲界面就乱动——加 onchange/oninput 容易,禁止 onchange/oninput 难。

实际业务开发中,收集行为极少发生,界面与对象并不需要实时同步。有时界面以 24fps 速率刷新,有时在用户强制行为后刷新,这些行为各有特色,实时同步实现繁琐且又无实际价值,只对初学者有“哇,全自动化什么都不用干了”的快感。

取消灵敏绑定,渲染收集可以局部进行,程序员可根据业务情景决定刷新哪部分界面,页面开发变得更直接灵活。而灵敏绑定方案里,程序员面对的是一个强大的黑匣子,很难识别数据与界面是如何发生关系的,难以跟踪运行过程,难以排查错误。

D2JS 的数据绑定的更多相关文章

  1. UWP中新加的数据绑定方式x:Bind分析总结

    UWP中新加的数据绑定方式x:Bind分析总结 0x00 UWP中的x:Bind 由之前有过WPF开发经验,所以在学习UWP的时候直接省略了XAML.数据绑定等几个看着十分眼熟的主题.学习过程中倒是也 ...

  2. MVVM模式和在WPF中的实现(二)数据绑定

    MVVM模式解析和在WPF中的实现(二) 数据绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...

  3. 前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定

    一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...

  4. vue双向数据绑定原理探究(附demo)

    昨天被导师叫去研究了一下vue的双向数据绑定原理...本来以为原理的东西都非常高深,没想到vue的双向绑定真的很好理解啊...自己动手写了一个. 传送门 双向绑定的思想 双向数据绑定的思想就是数据层与 ...

  5. 【Win 10应用开发】分阶段进行数据绑定

    使用x:Bind扩展标记进行数据绑定,是在编译阶段完成,至于说性能优化方面,大概主要是优化CPU资源的使用,因为免去了运行阶段进行绑定的过程.当然,使用这个标记仅仅是绑定上的优化,并不包括数据源.数据 ...

  6. WPF入门:数据绑定

    上一篇我们将XAML大概做了个了解 ,这篇将继续学习WPF数据绑定的相关内容 数据源与控件的Binding Binding作为数据传送UI的通道,通过INotityPropertyChanged接口的 ...

  7. SAP CRM 客户控制器与数据绑定

    当用户从视图离开时,视图将失去它的数据.解决这个问题,需要引入客户控制器(Custom Controller)(译者注:SAP CRM客户端中,不同地方的Custom Controller会翻译为“客 ...

  8. AngularJS 系列 01 - HelloWorld和数据绑定

    目录导读: AngularJS 系列 学习笔记 目录篇 前言: 好记性不如烂键盘,随笔就是随手笔记,希望以后有用. 本篇目录: 1. Hello World 2. AngularJS中的数据绑定 3. ...

  9. D2js 的邦联式架构

    d2js 的接口单独看有点像小手工业者,每个人摆弄着自己的小功能,但是在 update 的一声号令下,它们也可以组合起来,发挥出整体的功效,变为流水线上的工人--这一切是自然而隐蔽的进行的,小手工业者 ...

随机推荐

  1. Microsoft HoloLens 技术解谜(上)

    HoloLens 是什么? HoloLens 是微软发布的可穿戴式增强现实计算设备,它拥有这么几个关键要素: 它是增强现实产品,即 Augmented Reality(AR),AR 技术将计算机生成的 ...

  2. html5--indexedDB

    http://www.cnblogs.com/Johnny_Z/archive/2012/11/04/2753331.html http://database.51cto.com/art/201202 ...

  3. QT内置的ICON资源

    QT内置的ICON资源保存在QStyle类里. 可以通过成员函数 QStyle::standardIcon 来获取. 保存的icon有: enum QStyle::StandardPixmap Thi ...

  4. JSch - Java实现的SFTP(文件下载详解篇)(转)

    上一篇讲述了使用JSch实现文件上传的功能,这一篇主要讲述一下JSch实现文件下载的功能.并介绍一些SFTP的辅助方法,如cd,ls等.   同样,JSch的文件下载也支持三种传输模式:OVERWRI ...

  5. 《深度探索c++对象模型》chapter3 Data语意学

    一个空的class:如 class X{} ; sizeof(X)==1; sizeof为什么为1,他有一个隐晦的1 byte,那是被编译器安插进去的一个char,这使得class2的两个object ...

  6. 深入浅出Node.js (附录D) - 搭建局域NPM仓库

    D.1 NPM仓库的安装 D.1.1 安装Erlang和CouchDB D.1.2 搭建NPM仓库 D.2 高阶应用 D.2.1 镜像仓库 D.2.2 私有模块应用 D.2.3 纯私有仓库 D.3 总 ...

  7. ♫【Git】

    git - 简易指南 (√) fatal:remote error:You can't push to git://github.com/username/*.git  (√) git clone g ...

  8. HDU-2149 Public Sale

    http://acm.hdu.edu.cn/showproblem.php?pid=2149 巴什博奕(Bash Game): Public Sale Time Limit: 1000/1000 MS ...

  9. Mac下搭建Eclipse Android开发环境

    之前一直是用windows搞android开发,但windows这个性能也真是让人醉了,终于一狠心,砸锅卖铁买了Mac.然后就开始在Mac上搭建android开发环境, 其实也不麻烦,关键是找准下载地 ...

  10. leetcode 合并区间

    使用最简单的排序方法: /** * Definition for an interval. * public class Interval { * int start; * int end; * In ...