js给php注册网页添加实时监听,js 实现watch监听数据变化的代码

1.js

/**

* @desc 属性改变监听，属性被set时出发watch的方法，类似vue的watch

* @author Jason

* @study https://www.jianshu.com/p/00502d10ea95

* @data 2018-04-27

* @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;

});

}

// export default watcher;

2.html

wathc

let 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的变化

总结

以上所述是小编给大家介绍的js 实现watch监听数据变化的代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

js给php注册网页添加实时监听,js 实现watch监听数据变化的代码相关推荐

js电影票预订座位网页js特效
下载地址 js电影票预订座位网页特效,html+css+js代码实现的挑选电影座位网页效果,小型系统的电影座位选择,支持可选座位.选择座位.已选座位等3种状态电影选座代码. dd:
php如何获取图片地址,js如何直接获取网页中图片地址
这次给大家带来js如何直接获取网页中图片地址,js直接获取网页中图片地址的注意事项有哪些,下面就是实战案例,一起来看一下. 第一种方法:js通过正则实现/** * 获取html代码中图片地址 * @p ...
PostgreSQL的数据变化捕获和实时通知——基于Listen-Notify和Server-Sent Events
有这样一个需求:监听某个PostgreSQL的业务数据库,当特定表中的数据发生变化时,实时通知用户. 数据库→后端方案1:轮询监听数据表,最容易想到.实现最简单的,就是轮询. 但是,考虑到实时性, ...
ajax长轮询 java web_网页实时聊天之js和jQuery实现ajax长轮询
众所周知,HTTP协议是无状态的,所以一次的请求都是一个单独的事件,和前后都没有联系.所以我们在解决网页实时聊天时就遇到一个问题,如何保证与服务器的长时间联系,从而源源不段地获取信息. 一直以来的方式 ...
java+jquery实现长轮询案例_网页实时聊天之js和jQuery实现ajax长轮询
众所周知,HTTP协议是无状态的,所以一次的请求都是一个单独的事件,和前后都没有联系.所以我们在解决网页实时聊天时就遇到一个问题,如何保证与服务器的长时间联系,从而源源不段地获取信息. 一直以来的方式 ...
网页添加飘动窗口（图片链接）+ IE8下js解析错误
需求:在网站首页添加一个四处浮动的窗口(实际是一个图片,单击是一个地址链接). 1.网页上找到的一段javascript代码,写成了js文件. 1 var Rimifon = { 2 "Ad ...
如何将实时网页添加到PowerPoint演示文稿
Have you ever wanted to demonstrate a live website during a PowerPoint presentation? Here's how you ...
油猴插件 | JS实现当前网页添加固定按钮
借助油猴插件,在当前网页添加固定按钮当需要增强当前网页的按钮时,我们需要添加按钮实现特定功能,这个可以使用js代码实现,在代码实现过程中发现,style的一个属性z-index需要特定方式实现,详见 ...
小程序中如何实时监听app.js中globalData的数据变化
使用Object.defineProperty(obj, prop, desc)来进行发布订阅 obj 是需要定义属性的当前对象 prop 当前需要定义的属性名 desc 属性描述符 App({onL ...

js给php注册网页添加实时监听,js 实现watch监听数据变化的代码

js给php注册网页添加实时监听,js 实现watch监听数据变化的代码相关推荐

最新文章

热门文章