欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js技巧之十幾行的代碼實(shí)現(xiàn)vue.watch代碼

 更新時間:2018年06月09日 22:48:50   作者:JasonWild  
相信很多的用vue的人都知道vue雙向綁定的原理建立在,給屬性綁定了getter和setter,在屬性被改變的同時觸發(fā)視圖的再渲染。而本期也是借助這兩個內(nèi)置方法實(shí)現(xiàn)vue內(nèi)的watch

getter和setter

getter 是一種獲得屬性值的方法,setter是一種設(shè)置屬性值的方法。
屬性被賦值 a = 1的時候, a 的原型內(nèi)的setter就會被觸發(fā);
而 console.log(a) 的時候,a 的原型內(nèi)的getter就會被觸發(fā)。

實(shí)現(xiàn)getter和setter

我們不能直接給變量的setter和getter 綁定事件函數(shù),為了實(shí)現(xiàn)綁定我們要借助Object對象來構(gòu)造帶有setter和getter的屬性。

這里有前輩總結(jié)的 幾種實(shí)現(xiàn)getter和setter的方法,而且他還總結(jié)了一些Object.prototype內(nèi)控制屬性枚舉的特性的隱式屬性。

我這里選用了比較好構(gòu)造的一種 Object.defineProperty

概要
Object.defineProperty() 方法直接在一個對象上定義一個新屬性,或者修改一個已經(jīng)存在的屬性, 并返回這個對象。
語法
Object.defineProperty(obj, prop, descriptor)
參數(shù)
obj
需要定義屬性的對象。
prop
需被定義或修改的屬性名。
descriptor
需被定義或修改的屬性的描述符。

  1. 第一個參數(shù),被構(gòu)造的屬性的this指向的對象
  2. 第二個參數(shù),被構(gòu)造的屬性名
  3. 第三個參數(shù),構(gòu)造的規(guī)則(上面的文字鏈接最后面有介紹)
(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" 是否可以被再配置,默認(rèn)是false。false的話
Object.defineProperty(o,"a",{set : function(val){}} );

再修改時會不起作用或者報錯,一般默認(rèn)false。

構(gòu)造我們的vue.watch

目標(biāo)實(shí)現(xiàn),以下是我們想要的達(dá)到的效果

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

創(chuàng)建構(gòu)造對象

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事件觸發(fā)

/**
 * @desc 屬性改變監(jiān)聽,屬性被set時出發(fā)watch的方法,類似vue的watch
 * @author Jason
 * @date 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;
  • 為了函數(shù)內(nèi)部的健壯性,getBaseType是用來做類型校驗(yàn)的。
  • Object.defineProperty(this),this把上下文指向當(dāng)前對象。
  • this.$watch[_key].call(this,val,oldVal),把監(jiān)聽事件的上下文頁綁定到當(dāng)前對象,方便在watch內(nèi)通過this獲取對象內(nèi)的值,如下
let wm = new watcher({
  data:{
    a: 0,
    b: 'hello'
  },
  watch:{
    a(newVal,oldVal){
      console.log(this.b);
    }
  }
})

總結(jié)

有人可能會問為什么不直接用vue呢。你也知道vue是一個工程級別的框架,做比較大的項(xiàng)目當(dāng)然是用vue,react;但是單單做一個展示性的官網(wǎng)或者做個移動端的H5宣傳頁也用上vue嗎?那當(dāng)然是沒有必要的。
用上這一個watcher類,可以讓你頁面的狀態(tài)控制有條理、有跡可循。
比如幾個按鈕聯(lián)動一個或幾個視圖的改變和動效的時候,你就不用在每個按鈕的click時都觸發(fā)一下修改

 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個以上動作聯(lián)動的話,也未必會用上。

相關(guān)文章

  • 使用JS調(diào)用工控機(jī)(Windows)虛擬鍵盤

    使用JS調(diào)用工控機(jī)(Windows)虛擬鍵盤

    在工控機(jī)觸摸屏中,通過瀏覽器web端進(jìn)行表單輸入,當(dāng)聚焦表單輸入框并不會出現(xiàn)虛擬鍵盤進(jìn)行輸入,本文介紹將給大家介紹如何通過js調(diào)用工控機(jī)(Windows)虛擬鍵盤,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
    2024-01-01
  • uni-app中彈窗的使用與自定義彈窗

    uni-app中彈窗的使用與自定義彈窗

    眾所周知彈窗在我們實(shí)際開發(fā)場景中是非常常用的,最近在工作中就遇到了相關(guān)需求,所以下面這篇文章主要給大家介紹了關(guān)于uni-app中彈窗使用與自定義彈窗的相關(guān)資料,需要的朋友可以參考下
    2022-04-04
  • 使用js實(shí)現(xiàn)html標(biāo)簽、文本的隱藏、顯示、刪除及添加

    使用js實(shí)現(xiàn)html標(biāo)簽、文本的隱藏、顯示、刪除及添加

    在設(shè)計網(wǎng)頁時,有時需要靜態(tài)或動態(tài)地隱藏標(biāo)簽或顯示被隱藏的標(biāo)簽,那該怎么實(shí)現(xiàn)呢?這篇文章主要給大家介紹了關(guān)于使用js實(shí)現(xiàn)html標(biāo)簽、文本的隱藏、顯示、刪除及添加的相關(guān)資料,需要的朋友可以參考下
    2023-06-06
  • JS獲取iframe中marginHeight和marginWidth屬性的方法

    JS獲取iframe中marginHeight和marginWidth屬性的方法

    這篇文章主要介紹了JS獲取iframe中marginHeight和marginWidth屬性的方法,涉及javascript操作iframe屬性的技巧,并分析了marginHeight和marginWidth屬性的功能,非常具有實(shí)用價值,需要的朋友可以參考下
    2015-04-04
  • JS中怎樣判斷undefined(比較不錯的方法)

    JS中怎樣判斷undefined(比較不錯的方法)

    用servlet賦值給html頁面文本框值后,用alert來彈出這個值.結(jié)果顯示"undefined".下面為大家介紹下具體的判斷方法,大家可以參考下
    2014-03-03
  • ionic js 模型 $ionicModal 可以遮住用戶主界面的內(nèi)容框

    ionic js 模型 $ionicModal 可以遮住用戶主界面的內(nèi)容框

    這篇文章主要介紹了ionic js 模型 $ionicModal 可以遮住用戶主界面的內(nèi)容框的相關(guān)資料,需要的朋友可以參考下
    2016-06-06
  • 淺談JavaScript函數(shù)參數(shù)的可修改性問題

    淺談JavaScript函數(shù)參數(shù)的可修改性問題

    這篇文章主要是對JavaScript函數(shù)參數(shù)的可修改性進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2013-12-12
  • 使弱類型的語言JavaScript變強(qiáng)勢

    使弱類型的語言JavaScript變強(qiáng)勢

    Javascript (ECMA Script)是一種弱類型的語言.這并不意味著它沒有數(shù)據(jù)類型,只是變量或者Javascript對象屬性不需要一個特定類型的值分配給它或者它始終使用相同的值.Javascript中的變量同樣支持自由類型轉(zhuǎn)換成為適用(或者要求)的內(nèi)容以便于使用.
    2009-06-06
  • 微信小程序如何訪問公眾號文章

    微信小程序如何訪問公眾號文章

    這篇文章主要介紹了微信小程序如何訪問公眾號文章,隨著小程序不斷的發(fā)展,現(xiàn)在個人的小程序也開放了很多功能了,個人小程序直接打開公眾號鏈接。在群里看到的一款小程序,點(diǎn)擊可以直接閱讀文章了,需要的朋友可以參考下
    2019-07-07
  • JS字符串拼接的幾種方式(最新推薦)

    JS字符串拼接的幾種方式(最新推薦)

    在 JavaScript 中,使用字符串連接有 幾 種方式:連接符(+)、反引號(`)、join()、concat(),這篇文章主要介紹了JS字符串拼接的幾種方式,需要的朋友可以參考下
    2023-01-01

最新評論