js监听input值变化_JS编程实用技巧：监听变量数据变化。

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

下面就来实现它。

监听效果

先来看效果，当变量值发生变化时，自动提示出旧值和新值：

实现方式

用一个例程实现上述效果。

一个js、一个html。

js内容：

/*** @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内容：

   wathch

将两个文件存放在同一目录下，打开html文件即可看到效果。