js给php注册网页添加实时监听,js 实现watch监听数据变化的代码
1.js
/**
* @desc 屬性改變監(jiān)聽，屬性被set時出發(fā)watch的方法，類似vue的watch
* @author Jason
* @study https://www.jianshu.com/p/00502d10ea95
* @data 2018-04-27
* @constructor
* @param {object} opts - 構(gòu)造參數(shù). @default {data:{},watch:{}};
* @argument {object} data - 要綁定的屬性
* @argument {object} watch - 要監(jiān)聽的屬性的回調(diào)
* 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;
},
});
}
}
// export default watcher;
2.html
wathclet wm = new watcher({
data:{
a: 0,
b: 'hello'
},
watch:{
a(newVal,oldVal){
console.log(newVal, oldVal); // 111 0
}
}
})
wm.a = 111
3. 給vm.a 從新賦值 就能看到 newVal 和oldVal的變化
總結(jié)
以上所述是小編給大家介紹的js 實(shí)現(xiàn)watch監(jiān)聽數(shù)據(jù)變化的代碼，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
總結(jié)
以上是生活随笔為你收集整理的js给php注册网页添加实时监听,js 实现watch监听数据变化的代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql数据库建设网站,网站设计与建设
- 下一篇： 动态规划算法php,php算法学习之动态