数据劫持-白红宇

数据劫持

阅读量：325 次

发布时间：2019-03-04

本文共 1478 字，大约阅读时间需要 4 分钟。

数据劫持

代码分析：

<body>	<input type="text" id="data" value="hello world"></body><script>	// 定义一个对象	var obj = {    		data : "hello world"	}</script>

1. 实现文本框中的内容发生了变化，对象中的data也要跟着发生变化，保持一致

如何监听到文本框中的值发生变化呢？
使用oninput事件：在用户输入时触发

var text = document.getElementById('data');text.oninput = function(){   	obj.data = this.value;	console.log(obj.data);}

在这里插入图片描述

2. 实现对象中的data值发生了变化，文本框的值也要跟着变化

如何监听到对象的值正在发生变化？
- 监听数据变化 - 脏数据查询 - 死循环：轮询
- 但是死循环性能受影响
Object构造函数有一个方法叫defineProperty()
可以劫持到数据发生变化的时机

Object.defineProperty(obj,'data',{   	get(){   		// 当获取obj对象的data的值的时候，就会先经过get方法		// get方法返回的值，就是最终访问到的值		return text.value;	},	set(val){   		// set方法，是当给obj的data赋值的时候，会先经过set方法，并将要设置的值获取到		text.value = val;		console.log("正在给obj的data改值，值是：" + val);	}})

在这里插入图片描述

总代码

<body><input type="text" id="data" value="hello world"></body><script>var obj = {        data:"hello world"}// 文本框中的内容发生了变化，对象中的data也要跟着发生变化 - 一致// 如何监听到文本框中的值发生变化呢？ - oninputvar text = document.getElementById('data')text.oninput = function(){        // console.log(this.value);    obj.data = this.value}// 如果对象中的data值发生了变化，文本框的值也要跟着变化 - 一致// 如何监听到对象的值正在发生变化？// 监听数据变化 - 脏数据查询 - 死循环：轮询// 死循环性能受影响// Object构造函数有一个方法叫defineProperty() - 可以劫持到数据发生变化的时机Object.defineProperty(obj,'data',{        get(){            // 当获取obj对象的data的值的时候，就会先经过get方法 - get方法返回的值，就是最红访问到的值        return text.value    },    set(val){     // set方法，是当给obj的data赋值的时候，会先经过set方法，并将要设置的值获取到        // console.log("正在给obj的data改值，值是：" + val);        text.value = val    }})</script>