js技巧：十幾行的程式碼實現vue.watch

JensonWild發表於2018-05-22
JSVue

最近忙得狗一樣，有一段時間沒有更新了，雖然是殭屍博主，但是有點小收穫還是要來嘮叨一下的。

相信很多的用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的屬性。

這裡有前輩總結的 幾種實現getter和setter的方法，而且他還總結了一些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個以上動作聯動的話，也未必會用上。

相關文章