es6数据变更同步到视图层的方法


Posted in Javascript onMarch 04, 2019

数据变更同步到视图层有一个很重要的东西就是Proxy,Proxy的作用就是可以隐藏真正的对象,而用户去修改它的代理对象.Proxy可以监听数据的变化,例如

<div id="test">
  name:{{name}}
  age:{{age}}
</div>
<script>
  let el = document.getElementById('test');
  let datainner = {
    name:"Jack",
    age:"18"
  }
  let template = el.innerHTML;
  let data = new Proxy(datainner,{
    set(obj,name,value){
      console.log(name+"的值被操纵成了value"+value)
      obj[name]=value;
      console.log("数据改变了");
      render()
    }
  })
  data.name="Jack Chen"
</script>

es6数据变更同步到视图层的方法

es6数据变更同步到视图层的方法

可以监控到data数据的改变,然后就可以将数据渲染到html中,就可以实现es6数据同步到视图层

最终代码

<script>
  let el = document.getElementById('test');
  let datainner = {
    name:"Jack",
    age:"18"
  }
  let template = el.innerHTML;
  let data = new Proxy(datainner,{
    set(obj,name,value){
      console.log(name+"的值被操纵成了"+value)
      obj[name]=value;
      console.log("数据改变了");
      render();
    }
  })
  render();
  //数据渲染
  function render(){
    el.innerHTML = template.replace(/\{\{\w+\}\}/g,str=>{
      str=str.substring(2,str.length-2);
      console.log(datainner[str]);
      return datainner[str]
    })
  }
</script>

最终效果

es6数据变更同步到视图层的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
Mar 30 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
AngularJS 使用 UI Router 实现表单向导
Jan 29 Javascript
详细探究ES6之Proxy代理
Jul 22 Javascript
微信小程序 WebSocket详解及应用
Jan 21 Javascript
javascript实现右下角广告框效果
Feb 01 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 Javascript
简单快速的实现js计算器功能
Aug 17 Javascript
Vue项目中如何引入icon图标
Mar 28 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 Javascript
使用webpack构建应用的方法步骤
Mar 04 #Javascript
详解element-ui中form验证杂记
Mar 04 #Javascript
JS使用数组实现的队列功能示例
Mar 04 #Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 #Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 #Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
Mar 04 #Javascript
使用ESLint禁止项目导入特定模块的方法步骤
Mar 04 #Javascript
You might like
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
Google官方支持的NodeJS访问API,提供后台登录授权
2014/07/29 NodeJs
nodejs下打包模块archiver详解
2014/12/03 NodeJs
javascript动态创建及删除元素的方法
2014/12/22 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
JS实现超精简响应鼠标显示二级菜单代码
2015/09/12 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
javascript基本数据类型和转换
2017/03/17 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
extjs简介_动力节点Java学院整理
2017/07/17 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
vuex进阶知识点巩固
2018/05/20 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
React实现全选功能
2020/08/25 Javascript
python实现将excel文件转化成CSV格式
2018/03/22 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
Python 实现集合Set的示例
2020/12/21 Python
.NET面试10题
2014/02/24 面试题
如何定义一个可复用的服务
2014/09/30 面试题
自荐信的五个重要部分
2013/10/29 职场文书
大学生年度自我鉴定
2013/10/31 职场文书
五年级音乐教学反思
2014/02/06 职场文书
助人为乐模范事迹材料
2014/06/02 职场文书
公务员中国梦演讲稿
2014/08/19 职场文书
股东授权委托书范本
2014/09/13 职场文书
返乡农民工证明
2015/06/24 职场文书
靠谱准确的求职信
2019/04/02 职场文书
CSS3实现模糊背景的三种效果示例
2021/03/30 HTML / CSS
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript