没有合适的资源?快使用搜索试试~ 我知道了~
javascript实现数据双向绑定的三种方式小结
2 下载量 34 浏览量
2020-10-20
05:52:12
上传
评论
收藏 71KB PDF 举报
温馨提示
试读
5页
本篇文章主要介绍了javascript实现数据双向绑定的三种方式小结,前端的视图层和数据层有时需要实现双向绑定,目前实现数据双向绑定主要有三种,有兴趣的可以了解一下。
资源推荐
资源详情
资源评论
javascript实现数据双向绑定的三种方式小结实现数据双向绑定的三种方式小结
本篇文章主要介绍了javascript实现数据双向绑定的三种方式小结,前端的视图层和数据层有时需要实现双向绑
定,目前实现数据双向绑定主要有三种,有兴趣的可以了解一下。
前端数据的双向绑定方法前端数据的双向绑定方法
前端的视图层和数据层有时需要实现双向绑定(two-way-binding),例如mvvm框架,数据驱动视图,视图状态机等,研究了几
个目前主流的数据双向绑定框架,总结了下。目前实现数据双向绑定主要有以下三种。
1、手动绑定、手动绑定
比较老的实现方式,有点像观察者编程模式,主要思路是通过在数据对象上定义get和set方法(当然还有其它方法),调用时手
动调用get或set数据,改变数据后出发UI层的渲染操作;以视图驱动数据变化的场景主要应用与input、select、textarea等元
素,当UI层变化时,通过监听dom的change,keypress,keyup等事件来出发事件改变数据层的数据。整个过程均通过函数调
用完成。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>data-binding-method-set</title>
</head>
<body>
<input q-value="value" type="text" id="input">
<div q-text="value" id="el"></div>
<script>
var elems = [document.getElementById('el'), document.getElementById('input')];
var data = {
value: 'hello!'
};
var command = {
text: function(str){
this.innerHTML = str;
},
value: function(str){
this.setAttribute('value', str);
}
};
var scan = function(){
/**
* 扫描带指令的节点属性
*/
for(var i = 0, len = elems.length; i < len; i++){
var elem = elems[i];
elem.command = [];
for(var j = 0, len1 = elem.attributes.length; j < len1; j++){
var attr = elem.attributes[j];
if(attr.nodeName.indexOf('q-') >= 0){
/**
* 调用属性指令,这里可以使用数据改变检测
*/
command[attr.nodeName.slice(2)].call(elem, data[attr.nodeValue]);
elem.command.push(attr.nodeName.slice(2));
}
}
}
}
/**
* 设置数据后扫描
*/
function mvSet(key, value){
data[key] = value;
scan();
}
/**
* 数据绑定监听
*/
elems[1].addEventListener('keyup', function(e){
mvSet('value', e.target.value);
}, false);
scan();
资源评论
weixin_38741531
- 粉丝: 6
- 资源: 946
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功