Object.defineproperty 實現原理

時間  2019-11-09
標籤 object.defineproperty object defineproperty 實現 原理 简体版
原文   原文鏈接 
<body>
    <input id="input" type="text" />
	<div id="text"></div>
</body>
複製代碼

Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性， 並返回這個對象。bash

  • 經過這個ES5的方法就能夠直接很簡單粗暴的說明雙向綁定的原理:

存取描述符同時具備如下可選值mvvm

  • get函數

    • 一個給屬性提供 getter 的方法，若是沒有 getter 則爲 undefined。當訪問該屬性時，該方法會被執行，方法執行時沒有參數傳入，可是會傳入this對象（因爲繼承關係，這裏的this並不必定是定義該屬性的對象）。 默認爲 undefined。

  • setui

    • 一個給屬性提供 setter 的方法，若是沒有 setter 則爲 undefined。當屬性值修改時，觸發執行該方法。該方法將接受惟一參數，即該屬性新的參數值。 默認爲 undefined。

#Vue 雙向數據綁定原理this

實現mvvm的雙向綁定，是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調。就必需要實現如下幾點：spa

  • 一、實現一個數據監聽器Observer，可以對數據對象的全部屬性進行監聽，若有變更可拿到最新值並通知訂閱者
  • 二、實現一個指令解析器Compile，對每一個元素節點的指令進行掃描和解析，根據指令模板替換數據，以及綁定相應的更新函數
  • 三、實現一個Watcher，做爲鏈接Observer和Compile的橋樑，可以訂閱並收到每一個屬性變更的通知，執行指令綁定的相應回調函數，從而更新視圖
  • 四、mvvm入口函數，整合以上三者

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程