动态DOM操作—数据双向绑定
2018-10-24 本文已影响0人
z_hboot
一个简易的需求，实现动态DOM更新。
后台获取设备数据（ID、name、content...），初始化页面加载完，后台会实时推送设备的content（一张图片，设备当前回显）。前台就要去更新页面的数据，不使用框架很难去查找具体的设备DOM节点在哪，进行更新。在了解了Vue的数据双向绑定原理后，不使用框架可以简易实现该需求。
了解Proxy 值set拦截，快速了解基本原理。
//自定义辅助工具方法，对一些错误可自己处理。
{
createDom: createDom, // 创建节点
addClass: addClass, // 添加class
addValue: addValue, // 添加文本值
addAttr: addAttr // 添加或更新属性
};
1.实现需求，动态DOM数据渲染。
效果实现
function monitor_1024(obj) {
var deviceInfo = {
deviceId: obj.deviceId,
deviceName: obj.deviceName,
content: obj.content,
};
let _this = this;
// 拦截属性的值更新操作、DOM自动更新的核心
// 可自定义字段检查过滤
this.proxyInfo = new Proxy(deviceInfo, {
get(target, prop) {
if (prop in target) {
return Reflect.get(target, prop);
} else {
throw new ReferenceError("Property " + prop + " does not exits");
}
},
set(target, prop, value) {
if (prop == "content") {
// content 值发生变化时，拦截，进行DOM更新
let title = $(_this.item)
.find(".main")
.find(".content")
.find("img");
util.addAttr(title[0], value);
}
Reflect.set(target, prop, value);
}
});
// 定义各属性dom自动更新
var item = util.createDom("div");
util.addClass(item, "itemInfo");
var header = this.createHeader();
var body = this.createBody();
item.appendChild(header);
item.appendChild(body);
// 渲染到DOM
$("#monitorInfo").append(item);
// 保存DOM对象
this.item = item;
}
// 创建头部
monitor_1024.prototype.createHeader = function() {
// 创建头部
// ...
return header;
};
monitor_1024.prototype.createBody = function() {
// 创建内容部分
// ...
return main;
};
// 获取后台接口数据
let obj = [
{
deviceId:'0101',
deviceName:'test',
content:'**/datas/001.png'
},{
deviceId:'1101',
deviceName:'test',
content:'**/datas/101.png'
}
]
// 用于保存每个设备的实例，
var map = new Map();
for(item of obj){
let p = new monitor_1024(item);
//保存对象示例,以ID为键值
map.set(item.deviceId,p);
}
初始化数据完成，基本功能完成了，下次的数据更新也只是调用。
2.后台数据推送了
页面无刷新，数据更新
// 这是新的数据
let obj = [
{
deviceId:'0101',
deviceName:'test',
content:'**/datas/011.png'
},{
deviceId:'1101',
deviceName:'test',
content:'**/datas/101.png'
}
]
// 数据更新
for(item of obj){
if(map.has(item.deviceId)){
// proxyInfo 是Proxy的实例查看文章前连接，了解Proxy
map.get(item.deviceId).proxyInfo.content = item.content;
}
}
功能完成了，实现数据的双向绑定。
ps:有什么问题，请大家多多指教。
