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

数据变更同步到视图层有一个很重要的东西就是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>

可以监控到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>

最终效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

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

    数据变更同步到视图层有一个很重要的东西就是Proxy,Proxy的作用就是可以隐藏真正的对象,而用户去修改它的代理对象.Proxy可以监听数据的变化,例如 <div id="test"> name:{{name}} age:{{age}} </div> <script> let el = document.getElementById('test'); let datainner = { name:"Jack", age:&quo

  • Android端内数据状态同步方案VM-Mapping详解

    Android端内数据状态同步方案VM-Mapping详解

    目录 背景 问题拆解 目标 方案调研 EventBus 基于k-v的监听.通知 全局共享数据Model实例 基于注解的对象映射方案VM-Mapping 特点 思考 突破View层级的限制 突破类型的限制 详细设计 映射 数据驱动UI 总体流程 其它细节 方案对比 方案收益 后续计划 背景 西瓜在feed.详情页.个人主页有一块功能区,包括了点赞.收藏.关注等功能.这些功能长久以来都是孤立的:多个场景下点赞.收藏.关注等状态或数量不一致.在以往的业务迭代中,都是业务A有了需求,就加个点赞的请求,把

  • 浅析Vue中拆分视图层代码的5点建议

    一.框架的定位 框架通常只是一种设计模式的实现,它并不意味着你可以在开发中避免所有分层设计工作. SPA 框架几乎都是基于 MVC 或 MVVM 设计模式而建立起来的,这些模式都只是宏观的分层设计,当代码量开始随着项目增大而增多时,问题就会越来越多.许多企业内部的项目仍然在使用 angularjs1.X ,你会发现许多 controller 的体积大到令人发指,稍有经验的团队会利用好 angularjs1 构建的 controller , service , filter 以及路由和消息机制来完

  • SQLServer 2008 CDC功能实现数据变更捕获脚本

    CDC:Change Data Capture 复制代码 代码如下: --步骤:本文中以GPOSDB为例 --第一步.对目标库显式启用CDC:--在当前库使用sys.sp_cdc_enable_db.返回0(成功)或1(失败).--注意,无法对系统数据库和分发数据库启用该功能.且执行者需要用sysadmin角色权限.--该存储过程的作用域是整个目标库.包含元数据.DDL触发器.cdc架构和cdc用户.--使用以下代码启用:USE GPOSDB  --要启用CDC的数据库GOEXECUTE sys

  • 剖析后OpLog订阅MongoDB的数据变更就没那么难了

    剖析后OpLog订阅MongoDB的数据变更就没那么难了

    目录 前言 oplog简介 解析oplog 代码 结语 前言 我们开源了一个订阅分发mysql的binlog的项目,一直用的非常好,忽然有天开发说能不能支持MongoDB的数据订阅呢,MongoDB的使用度也挺广泛的.安排.经过简单的了解后发现MongoDB也有类似binlog的机制,最终花了两天时间把功能完成,并统一抽象集成到binlog开源项目中,使用和binlog同一套订阅分发模型管理MongoDB数据源.整个过程非常顺利,比整mysql的binlog要简单的多了. oplog简介 先来聊

  • 微信小程序配置视图层数据绑定相关示例

    微信小程序配置视图层数据绑定相关示例

    目录 官方文档 一.小程序结构目录 1.1 小程序文件结构和传统web对比 1.2 基本的项目目录 二.配置介绍 2.1 配置介绍 2.2 全局配置app.json 2.3 page.json 三.视图层 3.1 数据绑定 3.1.1 普通写法 3.1.2 组件属性 3.1.3 bool类型 3.2 运算 3.2.1 三元运算 3.2.2 算数运算 3.2.3 逻辑判断 3.2.4 字符串运算 3.2.5 注意 3.3 列表渲染 3.3.1 wx:for 3.3.2 wx:for 3.3.3 w

  • SpringBoot整合Thymeleaf与FreeMarker视图层技术

    SpringBoot整合Thymeleaf与FreeMarker视图层技术

    目录 整合Thymeleaf 1. 创建工程添加依赖 2. 配置Thymeleaf 3. 配置控制器 4. 创建视图 5. 运行 整合FreeMarker 1. 创建项目添加依赖 2. 配置FreeMarker 3. 控制器 4. 创建视图 5. 运行 整合Thymeleaf Thymeleaf是新一代Java模板引擎,类似于Velocity.FreeMarker等传统Java模板引擎.与传统Java模板引擎不同的是,Thymeleaf支持HTML原型,既可以让前端工程师在浏览器中直接打开查看样

  • Django视图层与模板层实例详解

    Django视图层与模板层实例详解

    目录 theme: channing-cyan 网页伪静态 视图层 1.视图函数的返回值问题 2.视图函数返回json格式数据 3.form表单携带文件数据 4.FBV与CBV 5.CBV源码分析 模板层 1.模板语法传值 2.模板语法传值的范围 3.模板语法值过滤器 4.模板语法标签(类似于python中的流程控制) 5.自定义标签函数.过滤器.inclusion_tag 6.模板的继承 7.模板的导入 theme: channing-cyan 网页伪静态 将动态网页伪装成静态网页,可以提升网

  • CI映射(加载)数据到view层的方法

    本文实例讲述了CI映射(加载)数据到view层的方法.分享给大家供大家参考,具体如下: CI有个恶心的东西,就是需要把所有的数据都要放到$data数组中才能映射到view层,如: 当前我从数据库的link表(友情链接表,字段:id  name   url),搜索出来的数据方式: $query = $this->db->query("select id,name,url from cg_link where 1"); $links = $query->result();

  • 微信小程序教程系列之视图层的条件渲染（10）

    微信小程序教程系列之视图层的条件渲染（10）

    本教程为大家分享了使用wx:if进行视图层的条件渲染,供大家参考,具体内容如下 使用wx:if进行视图层的条件渲染 示例: wxml:使用view <!--index.wxml--> <button bindtap="EventHandle">按钮</button> <!-- wx:if --> <view wx:if="{{boolean==true}}"> <view class="bg

随机推荐