JavaScript中MVVM框架是如何實現雙向綁定的,web中間開發

前端全棧工程師 2021-09-18 13:45:16 阅读数:616

javascript mvvm 框架 web

var j = new Jsonob(data, callback)


上面代碼中,我們定義了一個 callback 回調函數,以及一個保存著普通 json 對象的變量 data,最後實例化了一個監測對象,對 data 進行變化監測,當變化發生的時候,執行給定的回調進行必要的變化通知,這樣,我們通過一些手段就可以達到數據綁定的效果。
Object.defineProperty
---------------------
ES5 描述了屬性的特征,提出對象的每個屬性都有特定的描述符,你也可以理解為那是屬性的屬性。。。
ES5 把屬性分成兩種,一種是**數據屬性**,一種是**訪問器屬性**,我們可以使用 Object.defineProperty() 去定義一個數據屬性或訪問器屬性。如下代碼:

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.

var obj = {}

obj.name = ‘yyf’


上面的代碼我們定義了一個對象,並給這個對象添加了一個屬性 name,值為 ‘yyf’,我們也可以使用 Object.defineProperty() 來給對象定義屬性,上面的代碼等價於:

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

var obj = {}

Object.defineProperty(obj, ‘name’, {

value: ‘yyf’, //屬性的值

writable: true, //是否可寫

enumerable: true, //是否能够通過for in枚舉

configurable: true //是否可使用delete删除

})


這樣我們就使用 Object.defineProperty 給對象定義了一個屬性,這樣的屬性就是數據屬性,我們也可以定義訪問器屬性:

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

var obj = {}

Object.defineProperty(obj, ‘age’, {

get: function() {

return 20

},

set: function(newVal) {

this.age += 20

}

})


訪問器屬性允許你定義一對 getter/setter ,當你讀取屬性值的時候底層會調用 get 方法,當你去設置屬性值的時候,底層會調用 set 方法。
知道了這個就好辦了,我們再回到最初的問題上面,如何檢測一個普通對象的變化,我們可以這樣做:
> 遍曆對象的屬性,把對象的屬性都使用 Object.defineProperty 轉為 getter/setter ,這樣,當我們修改一些值的時候,就會調用 set 方法,然後我們在 set 方法裏面,回調通知,不就可以了嗎,來看下面的額代碼:

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

// index.js

const OP = Object.prototype

export class Jsonob {

constructor(obj, callback) {

最後

其實前端開發的知識點就那麼多,面試問來問去還是那麼點東西。所以面試沒有其他的訣竅,只看你對這些知識點准備的充分程度。so,出去面試時先看看自己複習到了哪個階段就好。

這裏再分享一個複習的路線:(以下體系的複習資料是我從各路大佬收集整理好的)

《前端開發四大模塊核心知識筆記》

JavaScript中MVVM框架是如何實現雙向綁定的,web中間開發_前端

最後,說個題外話,我在一線互聯網企業工作十餘年裏,指導過不少同行後輩。幫助很多人得到了學習和成長。

 CodeChina開源項目:【大廠前端面試題解析+核心總結學習筆記+真實項目實戰+最新講解視頻】

我意識到有很多經驗和知識值得分享給大家,也可以通過我們的能力和經驗解答大家在IT學習中的很多困惑,所以在工作繁忙的情况下還是堅持各種整理和分享。

版权声明:本文为[前端全棧工程師]所创,转载请带上原文链接,感谢。 https://gsmany.com/2021/09/20210918134516025j.html