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 相关文章推荐
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
Oct 23 Javascript
Redis基本知识、安装、部署、配置笔记
Mar 05 Javascript
JavaScript程序设计之JS调试
Dec 09 Javascript
jQuery控制frames及frame页面JS的方法
Mar 08 Javascript
Node.js中使用jQuery的做法
Aug 17 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
VUE页面中加载外部HTML的示例代码
Sep 20 Javascript
微信小程序 input输入及动态设置按钮的实现
Oct 27 Javascript
小程序hover-class点击态效果实现
Feb 26 Javascript
Vue快速实现通用表单验证的方法
Feb 24 Javascript
Postman动态获取返回值过程详解
Jun 30 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
php判断字符以及字符串的包含方法属性
2008/08/30 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
用javascript操作xml
2006/11/04 Javascript
javascript (用setTimeout而非setInterval)
2011/12/28 Javascript
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
jQuery中filter()和find()的区别深入了解
2013/09/25 Javascript
jquery中event对象属性与方法小结
2013/12/18 Javascript
快速学习jQuery插件 Form表单插件使用方法
2015/12/01 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
深入解读Node.js中的koa源码
2019/06/17 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
2019/11/11 Javascript
在webstorm中配置less的方法详解
2020/09/25 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
Python lxml模块的基本使用方法分析
2019/12/21 Python
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
美国顶级水上运动专业店:Marine Products
2018/04/15 全球购物
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
高分子材料与工程专业推荐信
2013/12/01 职场文书
体育教育个人自荐信范文
2013/12/01 职场文书
公司薪酬管理制度
2014/01/31 职场文书
护理专科自荐书范文
2014/02/18 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
软件测试专业推荐信
2014/09/18 职场文书
今日说法观后感
2015/06/08 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js