动态DOM操作—数据双向绑定

一个简易的需求，实现动态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:有什么问题，请大家多多指教。