JS代理对象Proxy初体验简单的数据驱动视图

目录
  • 引言
  • Proxy对象是什么
  • 使用Proxy写一个简单的数据驱动视图

引言

上大学的时候，最流行的框架是JQuery，它是事件驱动类型的，也就是说，当一个数据与DOM的某个内容相关联的时候，我需要在这个数据改变之后，去操作DOM来进行同步：

<div id="data">数据</div>

var data = "数据"
// 通过某种事件数据发生了变化
data = "新数据"
$("#data").text = data

简单的交互中，这个方式看起来还是方便，但是一旦交互庞大起来，代码就臃肿得不行。

而在我快毕业的时候Angular,Vue,React兴起，我们发现了一种新的方式——数据驱动，也就是说，通过DOM与数据的“绑定”我们可以直接修改数据，DOM内容直接就出现了变化。

<div>{{data}}</div>

var data = "数据"
// ...某种方式进行了绑定
data = "新数据"

DOM中的内容直接就变成了新数据。使用起来非常方便，代码也比较简洁，在当时看来感觉很神奇。

不同的数据驱动的框架，其绑定原理和过程都各有不同，并且都比较复杂。不过今天我们简化一下，用JS的Proxy代理对象来实现数据驱动。（顺便一提，Vue3的响应式数据就用了这个原理，当然，会比今天的例子复杂得多）

Proxy对象是什么

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。具体的使用方法为：

new Proxy(要代理的对象，代理的事件对象）

可以代理的事件有如下几个：

事件 描述
get 读取属性
set 设置属性
delete delete操作符
ownKeys getWonPropertyNames方法和 getOwnPropertySymbols
construct new操作符
defineProperty defineProperty方法
getOwnPropertyDescriptor getOwnPropertyDescriptor方法
preventExtensions preventExtensions方法
isExtensible isExtensible方法
setPrototypeOf setPrototypeOf方法（也就是设置.__proto__）
getPrototypeOf getPrototypeOf方法（也就是取.__proto__）

使用Proxy写一个简单的数据驱动视图

既然了解了Proxy的基本用法了，那么我们就可以使用它来代理对象的setter来实现数据驱动了。

首先定义一个与数据同ID的DOM元素:

<div id="firstName"></div>
<div id="age"></div>

为data设置Proxy代理，代理其setter，在其中对DOM进行操作：

var data = {
  firstName: "",
  age: 0
}
var p_data = new Proxy(data, {
    set: function (obj, prop, newval) {
      document.getElementById(prop).innerText = newval;
      obj[prop] = newval;// 别忘了实现原有逻辑
      return true; // setter代理的要求，处理成功后返回true
    }
})

之后设定初值，并设定相关交互，并且注意，操作的都是代理p_data而并非data:

p_data.firstName = "两秒后显示姓名……"
p_data.age = 25
setTimeout(() => {
  p_data.firstName = "林语琛"
}, 2000)
document.getElementById("grow").onclick = function() {
  p_data.age++
}

这样就实现了数据驱动，只要任意对p_data的属性值进行修改，DOM的内容就可以直接变化了：

JS

var data = {
  firstName: "",
  age: 0
}
var p_data = new Proxy(data, {
    set: function (obj, prop, newval) {
      document.getElementById(prop).innerText = newval;
      obj[prop] = newval;
      return true
    }
})
p_data.firstName = "两秒后显示姓名……"
p_data.age = 25
setTimeout(() => {
  p_data.firstName = "林语琛"
}, 2000)
document.getElementById("grow").onclick = function() {
  p_data.age++
}

以上就是JS代理对象Proxy初体验简单的数据驱动视图的详细内容，更多关于JS Proxy数据驱动视图的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 如何通过Proxy实现JSBridge模块化封装

    最近公司在做一个项目,通过把我们自己的Webview植入第三方APP,然后我们的业务全部通过H5实现.至于为什么不直接用第三方APP WebView,主要是身处金融行业,需要做一些风控相关功能. 由于是Hybrid APP的性质,所以web与Native的通信是无法避免的:而为什么我要封装jsBridge,主要在于下面两点: 公司APP的JSBridge提供了数据的序列化和全局函数的注入,而我们这次由于包大小考虑,这一块需要H5自己来实现: 原生提供的接口协议太多,记住麻烦: 回调的写法不太人性

  • nuxt.js服务端渲染中axios和proxy代理的配置操作

    需要npm axios? 刚开始,我以为需要像普通的vue SPA开发那样,需要npm axios,这种方式的确可以生效.但在使用时并不方便.尤其是设置代理比较麻烦,而且在asyncData里与在普通methods里使用方式不一样. 后来在nuxt的github上发现了nuxt是默认集成了axios的,所以不需要npm axios,但是需要进行适当的配置. 以上是百度到的,发现老是报错,现在网上的教程完全是在扯淡,npm axios 是不需要安装了,但是 @nuxtjs/axios 要安装啊 第

  • js Proxy的原理详解

    js Proxy的原理详解

    什么是代理模式 引入一个现实生活中的案例 我们作为用户需要去如何评估一个房子的好坏.如何办理住房手续等一些列繁琐的事物吗?显然,用户肯定不愿意这样做.用户最关心的是结果,用户对房子提出需求以及提供对等价值的金钱就可以获得满意的房子,这就是结果. 那么谁为用户去解决一系列繁琐的买房过程呢?当然就是"房屋中介"了!房屋中介的作用就是在房地产开发经营与消费的供求市场中,为交易物体提供评估.交易.代理.咨询等服务及善后服务的机构. 结合案例理解代理模式的定义 在某些情况下,一个对象不适合或者不

  • JavaScript的Proxy对象详解

    目录 一.Proxy 是什么? 二.怎么用? 1.使用 Proxy 的简单实例 2.目标对象被正确修改 3.使用 set handler 做数据验证 4.扩展构造函数 总结 一.Proxy 是什么? Proxy 对象用于拦截并修改目标对象的指定操作. // 语法 const p = new Proxy(target, handler) target :目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理). handler :以函数作为属性的对象,实现拦截和自定义操作. 二.怎么用

  • JS带你深入领略Proxy的世界

    JS带你深入领略Proxy的世界

    1. Proxy 的基本结构 Proxy 的基本使用方式: /** * target: 表示要代理的目标,可以是object, array, function类型 * handler: 是一个对象,可以编写各种代理的方法 */ const proxy = new Proxy(target, handler); 例如我们想要代理一个对象,可以通过设置 get 和 set 方法来代理获取和设置数据的操作: const person = { name: 'wenzi', age: 20, }; con

  • JavaScript中的Proxy对象

    Js中Proxy对象 Proxy对象用于定义基本操作的自定义行为,例如属性查找.赋值.枚举.函数调用等. 语法 const proxy = new Proxy(target, handler); target: 要使用Proxy包装的目标对象,可以是任何类型的对象,包括原生数组,函数,甚至另一个代理. handler: 一个通常以函数作为属性的对象,各属性中的函数分别定义了在执行各种操作时代理proxy的行为. 描述 Proxy用于修改某些操作的默认行为,也可以理解为在目标对象之前架设一层拦截,

  • JS代理对象Proxy初体验简单的数据驱动视图

    JS代理对象Proxy初体验简单的数据驱动视图

    目录 引言 Proxy对象是什么 使用Proxy写一个简单的数据驱动视图 引言 上大学的时候,最流行的框架是JQuery,它是事件驱动类型的,也就是说,当一个数据与DOM的某个内容相关联的时候,我需要在这个数据改变之后,去操作DOM来进行同步: <div id="data">数据</div> var data = "数据" // 通过某种事件数据发生了变化 data = "新数据" $("#data")

  • node.js爬虫框架node-crawler初体验

    百度爬虫这个词语,一般出现的都是python相关的资料. py也有很多爬虫框架,比如scrapy,Portia,Crawley等. 之前我个人更喜欢用C#做爬虫. 随着对nodejs的熟悉.发现做这种事情还是用脚本语言适合多了,至少不用写那么多的实体类.而且脚本一般使用比较简单. 在github上搜索node+spider,排名第一的就是node-crawler github:https://github.com/bda-research/node-crawler 简单使用 npm 安装: np

  • JS JSON对象转为字符串的简单实现方法

    由于ie6,7不支持JSON.stringify(json),  我们只好自己再写一个函数来替换这个方法. 代码如下: 复制代码 代码如下: function JsonToStr(o) {var arr = [];var fmt = function(s) {if (typeof s == 'object' && s != null) return JsonToStr(s);return /^(string|number)$/.test(typeof s) ? "'"

  • js中为什么Proxy一定要配合Reflect使用

    js中为什么Proxy一定要配合Reflect使用

    目录 引言 前置知识 单独使用 Proxy Proxy 中的 receiver Reflect 中的 receiver 总结 结尾 引言 EcmaScript 2015 中引入了 Proxy 代理 与 Reflect 反射 两个新的内置模块. 我们可以利用 Proxy 和 Reflect 来实现对于对象的代理劫持操作,类似于 Es 5 中 Object.defineProperty()的效果,不过 Reflect & Proxy 远远比它强大. 大多数开发者都了解这两个 Es6 中的新增内置模块

  • vue.js 初体验之Chrome 插件开发实录

    vue.js 初体验之Chrome 插件开发实录

    背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见的动画效果都封装起来了,非常实用.但是有时候在开发中,仅仅只是需要某一两个动画效果,把整个CSS文件都引入,这样不是太好. 需求就出现了,能不能有一个工具可以直接预览Animate.css对应的动画效果,并且生成对应的动画代码呢? 作为一个UI开发,平时跟Chrome浏览器打交道最多,于是就整了一个Chrome插件可以及时预览对应Animate.css中的动画效果并生成对应的动画代码,这样在实际开发中

  • js原型链与继承解析（初体验）

    js原型链与继承解析（初体验）

    首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询obj的原型,我们通过判断obj的原型是否与Object.prototype相等来证明是否存在obj的原型,答案返回true,所以存在.然后我们定义一个函数foo(),任何一个函数都有它的prototype对象,即函数的原型,我们可以在函数的原型上添加任意属性,之后通过new一个实例化的对象可以共享其属性(下面的两个例子会详细介绍). function foo(){} fo

  • Hibernate初体验及简单错误排除代码详解

    Hibernate初体验及简单错误排除代码详解

    Hibernate是什么,有多少好处,想必查找这类博文的都知道,所以就不多说了.下面是我对Hibernate简单使用的一个小小的总结.与君(主要是刚入门的)共勉吧! 创建的顺序 创建Hibernate的配置文件 创建持久化的类 创建对象-关系的映射文件 通过HibernateAPI编写访问数据库的代码 关于详细的步骤 导入Hibernate必须的jar包(hibernate-release-版本号.Final\lib\required) 然后是导入MySQL的jdbc的驱动(mysql-conn

  • JS动态给对象添加事件的简单方法

    WEB项目中,我们常常会碰到要动态对相应的对象添加事件,如下,有id="txtPrice"的文本框控件: <div> <input type="text" id="txtPrice" name = "txtPrice" value = "0"/> <div> 现在我们为其动态添加一事件,JS核心代码如下: document.getElementById("txt

  • JS window对象简单操作完整示例

    本文实例讲述了JS window对象简单操作.分享给大家供大家参考,具体如下: 例1: <html> <head> <title>js---window函数</title> <meta charset="UTF-8"/> <script type="text/javascript"> // 显示框:没有返回值,出现一个提示框 var sto; var stl; function testAler

  • JS document对象简单用法完整示例

    JS document对象简单用法完整示例

    本文实例讲述了JS document对象简单用法.分享给大家供大家参考,具体如下: <html> <head> <title>js-document对象学习</title> <meta charset="UTF-8"/> <script type="text/javascript"> // 直接获取对象 function testGetElementById(){ //通过id获取对象 // v

随机推荐