原生JS数据绑定的实现

时间: 2018-02-24阅读: 3571标签: 数据

双向数据绑定是非常重要的特性 —— 将js模型与html视图对应,能减少模板编译时间同时提高用户体验。我们将学习在不使用框架的情况下,使用原生js实现双向绑定 —— 一种为Object.observe(译注:现已废弃,作者写博客时为14年11月),另一种为覆盖get / set。PS: 第二种更好,详情请参阅底部的TL;DR(译注:too long;don't read. 直译为“太长,不想看”,意译为“简单粗暴来吧”)

1: Object.observe 和 DOM.onChange

Object.observe()是一种新特性,其在ES7中实现,但在最新的Chrome中已可用 —— 允许对JS对象进行响应式更新。简单说就是 —— 只要对象(的属性)发生变化就调用回调函数

一般用法为:

log = console.log
user = {}
Object.observe(user, function(changes){    
    changes.forEach(function(change) {
        user.fullName = user.firstName + " " + user.lastName;         
    });
});

user.firstName = 'Bill';
user.lastName = 'Clinton';
user.fullName // 'Bill Clinton'

这很方便,且能实现响应式编程 —— 保证所有内容都是最新的。

如下:

//<input id="foo">
user = {};
div = $("#foo");
Object.observe(user, function(changes){    
    changes.forEach(function(change) {
        var fullName = (user.firstName || "") + " " + (user.lastName || "");         
        div.text(fullName);
    });
});

user.firstName = 'Bill';
user.lastName = 'Clinton';

div.text() //Bill Clinton

JSFiddle

如上,我们自己实现了模型到数据的绑定!封装一下(译注:此处原文为Let’s DRY ourselves with a helper function. DRY即 don't repeat yourself)

//<input id="foo">
function bindObjPropToDomElem(obj, property, domElem) { 
  Object.observe(obj, function(changes){    
    changes.forEach(function(change) {
      $(domElem).text(obj[property]);        
    });
  });  
}

user = {};
bindObjPropToDomElem(user,'name',$("#foo"));
user.name = 'William'
$("#foo").text() //'William'

JSFiddle

换一种方式 —— 将DOM元素与JS值绑定起来。简单的方法是使用jQuery.change

//<input id="foo">
$("#foo").val("");
function bindDomElemToObjProp(domElem, obj, propertyName) {  
  $(domElem).change(function() {
    obj[propertyName] = $(domElem).val();
    alert("user.name is now "+user.name);
  });
}

user = {}
bindDomElemToObjProp($("#foo"), user, 'name');
//enter 'obama' into input
user.name //Obama.

JSFiddle

简直不要太方便,在实际开发时,可以将两者结合,通过函数来创建一个双向数据绑定:

function bindObjPropToDomElem(obj, property, domElem) { 
  Object.observe(obj, function(changes){    
    changes.forEach(function(change) {
      $(domElem).text(obj[property]);        
    });
  });  
}

function bindDomElemToObjProp(obj, propertyName, domElem) {  
  $(domElem).change(function() {
    obj[propertyName] = $(domElem).val();
    console.log("obj is", obj);
  });
}

function bindModelView(obj, property, domElem) {  
  bindObjPropToDomElem(obj, property, domElem)
  bindDomElemToObjProp(obj, propertyName, domElem)
}

注意:在双向绑定时,需正确进行DOM操作,因为不同的DOM元素(input,div,textarea,select)有不同的取值方式(text,val)。同时注意:双向数据绑定并不是必须的 —— “输出型”元素一般不需要视图到模型的绑定,而“输入型”元素一般不需要模型到视图的绑定。

下面为第二种方式:

2: 深入'get'和'set'属性

上面的解决方法并不完美。比如直接的修改并不会自动触发jQuery的“change”事件 —— 例如,直接通过代码对DOM进行修改,比如以下代码不起作用:

$("#foo").val('Putin')
user.name //still Obama. Oops.

现在,我们来用一种更激进的方式实现 —— 重写getter和setter。因为我们不仅要监测变化,我们将重写JS最底层的功能,即get/setting变量的能力,所以不那么“安全”。后面我们将会看到,这种元编程的方式有多强大。

那么,如果我们可以重写get和set对象值的方法会怎么样呢?这也是数据绑定的实质。用 Object.defineProperty() 即可实现.

其实,以前就有已废弃且非标准实现方式,但通过Object.defineProperty的实现方式更好(最重要的是标准),如下所示:

user = {}
nameValue = 'Joe';
Object.defineProperty(user, 'name', {
  get: function() { return nameValue }, 
  set: function(newValue) { nameValue = newValue; },
  configurable: true //to enable redefining the property later
});

user.name //Joe 
user.name = 'Bob'
user.name //Bob
nameValue //Bob

现在user.name是nameValue的别名。但可做的不仅仅是创建新的变量名 - 我们可以通过它来保证模型和视图的一致。如下:

//<input id="foo">
Object.defineProperty(user, 'name', {
  get: function() { return document.getElementById("foo").value }, 
  set: function(newValue) { document.getElementById("foo").value = newValue; },
  configurable: true //to enable redefining the property later
});

user.name现在绑定到#foo元素。这种底层的方式非常简洁 —— 通过定义(或扩展)变量属性的get / set实现。由于实现非常简洁,因此可以根据情况轻松扩展/修改代码 —— 仅绑定或扩展get / set中的一个,比如绑定其他数据类型。

可封装如下:

function bindModelInput(obj, property, domElem) {
  Object.defineProperty(obj, property, {
    get: function() { return domElem.value; }, 
    set: function(newValue) { domElem.value = newValue; },
    configurable: true
  });
}

使用:

user = {};
inputElem = document.getElementById("foo");
bindModelInput(user,'name',inputElem);

user.name = "Joe";
alert("input value is now "+inputElem.value) //input is now 'Joe';

inputElem.value = 'Bob';
alert("user.name is now "+user.name) //model is now 'Bob';

JSFiddle

注意:上面的domElem.value只对input元素有效。(可在bindModelInput中扩展,对不同的DOM类型使用对应的方法来设置它的值)。

思考:

  • DefineProperty浏览器兼容性良好 。
  • 注意:上面的实现中,在某些场景下,视图可认为是符合SPOT (single point of truth )原则的,但该原则常常被忽视(因为双向数据绑定也就意味着等价)。然而,深究下去可能就会发现问题了,在实际开发中也会遇到。 —— 比如,当删除DOM元素时,关联的模型会自动注销么?答案是不会。bindModelInput函数在domElem元素上创建了一个闭包,使DOM元素常驻在内存中 —— 并保持模型与模型的绑定关系 —— 即使DOM元素被移除。即使视图被移除了,但模型依旧存在。反之一样 —— 若模型被移除了,视图依然能够正常显示。在某些刷新视图和模型无效的情况下,理解这些内部原理就能找到原因了。

(译注:SPOT简单翻译为“单点原则”,即引起变化最好的是由单一入口引起的,而不是由多个入口引起的,比如一个函数,其返回结果最好仅由参数决定,这样输入和输出才能一致,而不会由于其他变化导致用一个输入会出现不同的输出)

这种自己实现的数据绑定方法与Knockout或Angular等框架的数据绑定相比,有一些优点,例如:

  • 理解:一旦掌握数据绑定的源码,不仅理解更深入,而且也能对其进行扩展和修改。
  • 性能:不要将所有东西都绑定在一起,只绑定所需的,避免监测过多对象
  • 避免锁定:若所用的框架不支持数据绑定,则自行实现的数据绑定更强大

缺点是由于不是真正的绑定(没有脏检查),有些情况会失败 —— 视图更新时不会触发模型中的数据,所以当试着同步视图中的两个DOM元素时将会失败。也就是说,将两个元素绑定到同一个模型上时,只有更新模型,则两个元素才会被正确更新。可以通过自定义一个更新函数来实现:

//<input id='input1'>
//<input id='input2'>
input1 = document.getElementById('input1')
input2 = document.getElementById('input2')
user = {}
Object.defineProperty(user, 'name', {
  get: function() { return input1.value; }, 
  set: function(newValue) { input1.value = newValue; input2.value = newValue; },
  configurable: true
});
input1.onchange = function() { user.name = user.name } //sync both inputs.

TL;DR:

当需要使用原生JS创建模型和视图的双向数据绑定时,如下:

function bindModelInput(obj, property, domElem) {
  Object.defineProperty(obj, property, {
    get: function() { return domElem.value; }, 
    set: function(newValue) { domElem.value = newValue; },
    configurable: true
  });
}

//<input id="foo">
user = {}
bindModelInput(user,'name',document.getElementById('foo')); //hey presto, we now have two-way data binding.

感谢阅读,本文也发布在 JavaScript Weekly, 可在reddit回复我

翻译来源:  原生JS数据绑定
原文出处 native_javascript_data_binding 


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/435

js进制数之间以及和字符之间的转换

js要处理十六进制,十进制,字符之间的转换,发现有很多差不多且书写不正确的方法.一个一个实践才真正清楚如何转换,现在来记录一下它们之间转换的方法。

哪种方式更适合在React中获取数据?

当执行像数据获取这样的I/O操作时,你必须发起获取请求,等待响应,将响应数据保存到组件的状态中,最后渲染。异步的数据获取会要求额外的工作来适应React的声明性,React也在逐步改进去最小化这种额外的工作

FromData_ajax提交数据

一般想要不刷新页面提交数据时,可以使用ajax提交。如果数据量不大可以自己写json数据用ajax提交到后台服务,但是数据量多且需要动态添加数据时,自己写json格式数据就有点麻烦了,这时候就需要FormData来替我们完成数据的装载了

leetcode 1032. Stream of Characters

用字典树即可解决。首先在init的时候,把words中所有word逆置后存入字典树中;在query的时候,也有逆序的方式记录所有历史query过的值,同时判断其前缀是否存在于字典树中即可。

React 中获取数据的 3 种方法及它们的优缺点

在执行 I/O 操作(例如数据提取)时,要先发送网络请求,然后等待响应,接着将响应数据保存到组件的状态,最后进行渲染。在 React 中生命周期方法、Hooks和 Suspense是获取数据的方法。

常见的Hadoop十大应用误解

Hadoop是一个由Apache基金会所开发的分布式系统基础架构。 用户可以在不了解分布式底层细节的情况下,开发分布式程序。 充分利用集群的威力进行高速运算和存储。 以下是常见的Hadoop十大应用误解和正解。

双向数据绑定与单向数据绑定的各自优势和关系

在react中是单向数据绑定,而在vue和augular中的特色是双向数据绑定。为什么会选择两种不同的机制呢?我猜测是两种不同的机制有不同的适应场景,查了一些资料后,总结一下。

使用Proxy实现双向绑定

vue3.0要用Proxy来实现双向绑定,因此先来尝试一下实现方法。原来vue2的实现使用Object.defineProperty,监听set,但对于数组直接下标给数组设置值监听不了。

React中获取数据的3种方法:哪种最好?

在执行 I/O 操作(例如数据提取)时,要先发送网络请求,然后等待响应,接着将响应数据保存到组件的状态,最后进行渲染。在 React 中生命周期方法、Hooks和 Suspense是获取数据的方法。

17 款可视化工具,让你的数据更美观

想让数据变得更好看?不必成为经验丰富的数据科学家,也不必成为平面设计师。有一些能让数据从简单的表格变成多种多样的图形,地图甚至词“云”。并不是所有的工具都适合你,但这些工具确实很有用

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!