博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
监听js变量的变化_JS编程实用技巧:监听变量数据变化。
阅读量:5870 次
发布时间:2019-06-19

本文共 1610 字,大约阅读时间需要 5 分钟。

在JS编程中,如果能监测变量的内容,当变量值发生变化时,实时发出通知,这定是一项很有用的功能。

d9580432e180c664efc727ccd5313988.png

下面就来实现它。
监听效果
先来看效果,当变量值发生变化时,自动提示出旧值和新值:

542014326f0b1721c7ab43ef521cbc2b.png

实现方式
用一个例程实现上述效果。
一个js、一个html。
js内容:

a6503a806f57c4a91e3e5899449bfab7.png

/**
* @desc 属性改变监听,属性被set时出发watch的方法,类似vue的watch
* @study https://www.jshaman.com/
* @constructor
* @param {object} opts - 构造参数. @default {data:{},watch:{}};
* @argument {object} data - 要绑定的属性
* @argument {object} watch - 要监听的属性的回调
* watch @callback (newVal,oldVal) - 新值与旧值
*/
class watcher{
constructor(opts){
this.$data = this.getBaseType(opts.data) === 'Object' ? opts.data : {};
this.$watch = this.getBaseType(opts.watch) === 'Object' ? opts.watch : {};
for(let key in opts.data){
this.setData(key)
}
}
getBaseType(target) {
const typeStr = Object.prototype.toString.apply(target);
return typeStr.slice(8, -1);
}
setData(_key){
Object.defineProperty(this,_key,{
get: function () {
return this.$data[_key];
},
set : function (val) {
const oldVal = this.$data[_key];
if(oldVal === val)return val;
this.$data[_key] = val;
this.$watch[_key] && typeof this.$watch[_key] === 'function' && (
this.$watch[_key].call(this,val,oldVal)
);
return val;
},
});
}
}
html内容:

58c20f777de4345ac3b60c0b9f7171f9.png

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>wathch</title>
</head>
<body>
<script src="./watch.js"></script>
<script>
let wm = new watcher({
data:{
b: 'hello'
},
watch:{
b(newVal,oldVal){
console.log("old value = ", oldVal,",new value = ",newVal);
}
}
})
wm.b = "http://JShaman.com";
wm.b = "http://ShareWAF.com";
</script>
</body>
</html>
将两个文件存放在同一目录下,打开html文件即可看到效果。

转载地址:http://dutnx.baihongyu.com/

你可能感兴趣的文章