博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js技巧:十几行的代码实现vue.watch
阅读量:5877 次
发布时间:2019-06-19

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

最近忙得狗一样,有一段时间没有更新了,虽然是僵尸博主,但是有点小收获还是要来唠叨一下的。

相信很多的用vue的人都知道vue双向绑定的原理建立在,给属性绑定了getter和setter,在属性被改变的同时触发视图的再渲染。而本期也是借助这两个内置方法实现vue内的watch

getter和setter

getter 是一种获得属性值的方法,setter是一种设置属性值的方法。

属性被赋值 a = 1的时候, a 的原型内的setter就会被触发;

console.log(a) 的时候,a 的原型内的getter就会被触发。

实现getter和setter

我们不能直接给变量的setter和getter 绑定事件函数,为了实现绑定我们要借助Object对象来构造带有setter和getter的属性。

这里有前辈总结的 ,而且他还总结了一些Object.prototype内控制属性枚举的特性的隐式属性。

我这里选用了比较好构造的一种 Object.defineProperty

概要    Object.defineProperty() 方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象。语法    Object.defineProperty(obj, prop, descriptor)参数    obj        需要定义属性的对象。    prop        需被定义或修改的属性名。    descriptor        需被定义或修改的属性的描述符。复制代码
  1. 第一个参数,被构造的属性的this指向的对象
  2. 第二个参数,被构造的属性名
  3. 第三个参数,构造的规则(上面的文字链接最后面有介绍)
(function () {    var o = { a : 1}//声明一个对象,包含一个 a 属性,值为1    Object.defineProperty(o,"b",{        get: function () {            return this.a;        },        set : function (val) {            this.a = val;        },        configurable : true    });    console.log(o.b);//==> 1    o.b = 2;    console.log(o.b);//==> 2})();复制代码

configurable是指 "b" 是否可以被再配置,默认是false。false的话

Object.defineProperty(o,"a",{set : function(val){}} ); 再修改时会不起作用或者报错,一般默认false。

构造我们的vue.watch

目标实现,以下是我们想要的达到的效果

import watcher from './watcher.js';let wm = new watcher({    data:{        a: 0     },    watch:{        a(newVal,oldVal){            console.log('newVal:'+newVal);            console.log('oldVal:'+oldVal);        }    }})vm.a = 1 // newVal:1// oldVal:0复制代码

创建构造对象

class watcher{    constructor(opts){        this.$data = opts.data;        for(let key in opts.data){            this.setData(key,opts.data[key])        }    }    setData(_key,_val){        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;                return val;            },        });    }}export default watcher;复制代码

添加 watch事件触发

/** * @desc 属性改变监听,属性被set时出发watch的方法,类似vue的watch * @author Jason * @date 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;复制代码
  1. 为了函数内部的健壮性,getBaseType是用来做类型校验的。
  2. Object.defineProperty(this),this把上下文指向当前对象。
  3. this.$watch[_key].call(this,val,oldVal),把监听事件的上下文页绑定到当前对象,方便在watch内通过this获取对象内的值,如下
let wm = new watcher({    data:{        a: 0,        b: 'hello'    },    watch:{        a(newVal,oldVal){            console.log(this.b);        }    }})复制代码

总结

有人可能会问为什么不直接用vue呢。你也知道vue是一个工程级别的框架,做比较大的项目当然是用vue,react;但是单单做一个展示性的官网或者做个移动端的H5宣传页也用上vue吗?那当然是没有必要的。

用上这一个watcher类,可以让你页面的状态控制有条理、有迹可循。

比如几个按钮联动一个或几个视图的改变和动效的时候,你就不用在每个按钮的click时都触发一下修改

btn1.onclick=function(){    var a = 'haha';    document.getElementById('id').innerHTML = a; } btn2.onclick=function(){    var a = 'xixi';    document.getElementById('id').innerHTML = a; }复制代码
let wm = new watcher({    data:{        a: "",    },    watch:{        a(newVal,oldVal){            document.getElementById('id').innerHTML = newVal;        }    }})btn1.onclick=function(){    wm.a = 'haha'; } btn2.onclick=function(){    wm.a = 'xixi'; }复制代码

但是如果你的视图不被2个以上动作联动的话,也未必会用上。

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

你可能感兴趣的文章
Zabbix汉化方法
查看>>
Java I/O系统基础知识
查看>>
Java多线程设计模式(2)生产者与消费者模式
查看>>
基于whoosh的flask全文搜索插件flask-msearch
查看>>
对象并不一定都是在堆上分配内存的
查看>>
刘宇凡:罗永浩的锤子情怀只能拿去喂狗
查看>>
php晚了8小时 PHP5中的时间相差8小时的解决办法
查看>>
JS(JavaScript)的初了解7(更新中···)
查看>>
svn文件管理器的使用
查看>>
Ansible playbook 使用
查看>>
for/foreach/linq执行效率测试
查看>>
js /jquery停止事件冒泡和阻止浏览器默认事件
查看>>
杭电1698--Just a Hook(线段树, 区间更新)
查看>>
长春理工大学第十四届程序设计竞赛(重现赛)I.Fate Grand Order
查看>>
好作品地址
查看>>
[翻译]Protocol Buffer 基础: C++
查看>>
runloop与线程的关系
查看>>
[Bzoj2246]迷宫探险(概率+DP)
查看>>
[译] 感受 4px 基线网格带来的便利
查看>>
oracle常用函数
查看>>