2. 程式人生 > >Object.defineProperty實現雙向繫結原理

Object.defineProperty實現雙向繫結原理

阿新 • • 發佈：2018-12-17

什麼是雙向繫結？

1.當一個物件（或變數）的屬性改變，那麼呼叫這個屬性的地方顯示也應該改變，模型到檢視（model => view）

2.當呼叫屬性的這個地方改變了這個屬性（通常是一個表單元素），那麼這個物件（或變數）的屬性也會改為最新的值 ，即檢視到模型（view => model）

我們怎麼知道物件的屬性變了？

上文說到，Object.defineProperty 設定物件屬性的描述欄位裡面有兩個屬性 set （設定屬性時被呼叫）和get（獲取屬性時被呼叫），只說不練，你再講什麼？眼見為實好嗎？OK ，上程式碼

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

var user = {};

var defaultName = "狂奔的蝸牛";

Object.defineProperty(user,"name",{

get:function(){

console.log("你是不是來獲取值啦");

return defaultName;

},

set:function(value){

console.log("你是不是來設定值啦"

);

defaultName = value;

}

})

console.log(user.name);

user.name = "狂奔的蘿蔔";

console.log(user.name);

get和set存取時被呼叫

如上圖所示 每當我獲取user.name屬性時，get方法被呼叫，get 方法對應的函式被執行，輸出 你是不是來獲取值啦；每當我設定user.name屬性時，set方法對應的函式被執行，輸出 你是不是來設定值啦 ； 是的，我們監控到了程式碼對user.name屬性的存取。

說明 假設id="model" 的元素的 value 是user.name的值，既然我們可以在改變屬性的執行日誌輸出（console.log("你是不是來設定值啦");），那麼，我們在設定值的時候給id="model" 的元素設定下新值，不就實現了從模型到檢視？！！，說幹就幹

模型到檢視（model => view）的同步

說明 假設id="model" 的元素的 value 是user.name的值，既然我們可以在改變屬性的執行日誌輸出（console.log("你是不是來設定值啦");），那麼，我們在設定值的時候給id="model" 的元素設定下新值，不就實現了從模型到檢視？！！，說幹就幹

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<body>

手寫一個簡單雙向繫結<br/>

<input type="text" id="model"><br/>

<div id="modelText"></div>

</body>

<script>

var user = {};

var defaultName = "狂奔的蝸牛";

document.querySelector("#model").value = defaultName;

document.querySelector("#modelText").textContent = defaultName;

//定義屬性 監控改變

Object.defineProperty(user,"name",{

get:function(){

console.log("你是不是來獲取值啦");

return defaultName;

},

set:function(newValue){

console.log("設定新值");

defaultName = newValue;

console.log("實現 模型 => 檢視");

document.querySelector("#model").value = newValue;

document.querySelector("#modelText").textContent = newValue;

}

})

console.log("2s 後改變值");

setTimeout(() => {

//改變值

user.name = "狂奔的蘿蔔";

}, 2000);

</script>

模型到檢視（model => view）的同步

檢視到模型（view => model）的同步

問： 我們能捕捉到view對值更改嗎？

答：可以！！ id="model" 的input元素的 value 是user.name的值，填充在這個文字框裡面，文字框有個“ keyup” 事件，當我們在文字框中輸入文字的時候，文字框的值會跟著改變，並且會連續觸發keyup事件，那麼我們只需要監聽這個事件，是不是就可以捕捉到view對值的更改了？？既然文字框的值會跟著改變，我們獲取最新的值再把新值更新到user.name屬性，不就實現了檢視到模型（view => model）的同步？沒程式碼說個啥

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

<body>

手寫一個簡單雙向繫結<br/>

<input type="text" id="model"><br/>

<div id="modelText"></div>

</body>

<script>

var user = {};

var defaultName = "狂奔的蝸牛";

var model = document.querySelector("#model");

var modelText = document.querySelector("#modelText");

model.value = defaultName;

modelText.textContent = defaultName;

//定義屬性 監控改變

Object.defineProperty(user,"name",{

get:function(){

console.log("你是不是來獲取值啦");

return defaultName;

},

set:function(newValue){

console.log("設定新值");

defaultName = newValue;

model.value = newValue;

modelText.textContent = newValue;

}

})

model.addEventListener("keyup", function () {

user.name = this.value;

console.log("實現 檢視 => 模型");

}, false)

</script>

view2model.gif

【最終原始碼】

在上述程式碼的基礎上，加入了 使用者輸入中文的判斷（使用者輸入中文時，頻繁觸發 keyup事件，但實際上輸入並沒有結束。）

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>雙向繫結</title>

</head>

<body>

手寫一個簡單雙向繫結<br/>

<input type="text" id="model"><br/>

<div id="modelText"></div>

</body>

<script>

var model = document.querySelector("#model");

var modelText = document.querySelector("#modelText");

var defaultName = "defaultName";

var userInfo = {}

model.value = defaultName;

Object.defineProperty(userInfo, "name", {

get: function () {

return defaultName;

},

set: function (value) {

defaultName = value;

model.value = value;

console.log("-----value");

console.log(value);

modelText.textContent = value;

}

})

userInfo.name = "new value";

var isEnd = true;

model.addEventListener("keyup", function () {

if (isEnd) {

userInfo.name = this.value;

}

}, false)

//加入監聽中文輸入事件

model.addEventListener("compositionstart", function () {

console.log("開始輸入中文");

isEnd = false;

})

model.addEventListener("compositionend", function () {

isEnd = true;

console.log("結束輸入中文");

})

</script>

</html>

【完結】

Object.defineProperty 可以做很多好玩兒的，自己慢慢探索哈~

相關推薦

Object.defineProperty實現雙向繫結原理

什麼是雙向繫結？ 1.當一個物件（或變數）的屬性改變，那麼呼叫這個屬性的地方顯示也應該改變，模型到檢視（model => view） 2.當呼叫屬性的這個地方改變了這個屬性（通常是一個表單元素），那麼這個物件（或變數）的屬性也會改為最新的值 ，即檢視到模型（view

強大的JS方法Object.defineProperty詳解及VUE.JS雙向繫結原理

Object.defineProperty是一個很了不起的方法。vue.js之所以能夠實現雙向繫結便是拜它所賜！defineProperty直接翻譯過來即是“定義屬性”，不過該方法可不僅僅是定義屬性這麼簡單，咱們還可以通過它來對屬性進行攔截設定！ 我們知道物

理解前端資料雙向繫結原理——Object.defineProperty()

理解前端資料雙向繫結原理:Object.defineProperty() Object.definedProperty方法可以在一個物件上直接定義一個新的屬性、或修改一個物件已經存在的屬性，最終返回這個物件。 語法 Object.definePrope

Vue雙向繫結原理實現——觀察者模式

前言 Vue 框架是一種 MVVM 框架，它有一個很大的特點就是資料雙向繫結，在開發過程中我們只需要操作 Model ，而不需要修改 View ，使用起來 VR 因吹斯汀。但是它的實現原理並不複雜，主要是運用了設計模式中的觀察者模式，也可以說是加了鉤子函式。下面用原生 JS 實現一下。

angularjs的雙向繫結原理實現

angularjs的雙向繫結用js程式碼來實現 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>雙向繫結的js實現</title>

轉 vue實現雙向資料繫結之原理及實現篇 vue的雙向繫結原理及實現

轉自：canfoo#! vue的雙向繫結原理及實現 前言 先上個成果圖來吸引各位： 程式碼：                          &nb

vue雙向繫結原理（簡單實現原理附demo）

先上效果圖 簡單的實現資料的雙向繫結首先來了解一個東西：Object.defineProperty() https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/

vue的雙向繫結原理及實現

前言 使用vue也好有一段時間了，雖然對其雙向繫結原理也有了解個大概，但也沒好好探究下其原理實現，所以這次特意花了幾晚時間查閱資料和閱讀相關原始碼，自己也實現一個簡單版vue的雙向繫結版本，先上個成果圖來吸引各位： 程式碼： 效果圖： 是不是看起來跟vue的

Vue雙向繫結原理，教你一步一步實現雙向繫結

當今前端天下以 Angular、React、vue 三足鼎立的局面，你不選擇一個陣營基本上無法立足於前端，甚至是兩個或者三個陣營都要選擇，大勢所趨。 所以我們要時刻保持好奇心，擁抱變化，只有在不斷的變化中你才能利於不敗之地，保守只能等死。 最近在學習 Vue，一直以來對它的雙向繫結只能算了解並不深入，最近幾天

剖析Vue原理&實現雙向繫結MVVM

本文能幫你做什麼？ 1、瞭解vue的雙向資料繫結原理以及核心程式碼模組 2、緩解好奇心的同時瞭解如何實現雙向繫結 為了便於說明原理與實現，本文相關程式碼主要摘自vue原始碼, 並進行了簡化改造，相對較簡陋，並未考慮到陣列的處理、資料的迴圈依賴等，也難免存在一些問題，歡迎大家

Vue雙向繫結原理及實現

先上個成果圖：   是不是看起來跟vue的使用方式差不多？接下來就來從原理到實現，從簡到難一步一步來實現這個SelfVue。由於本文只是為了學習和分享，所以只是簡單實現下原理，並沒有考慮太多情況和設計，如果大家有什麼建議，歡迎提出來。 本文主要介紹兩大內容： 1. vue資料雙向繫結的原理。 2. 實現簡單

淺析VUE雙向繫結原理，實現資料監聽並通知訂閱者

淺析VUE雙向繫結原理，實現屬性變化的監聽 本文引用了“鄧木琴居然被盜用了”的文章內容，博文地址: https://segmentfault.com/a/1190000006599500一、VUE雙向繫結原理簡單介紹 Vue的雙向繫結是通過資料劫持結合釋出-訂閱者模式實

雙向繫結原理

雙向繫結原理 <input type="text" oninput="evtInput()" id="input"/> <p id="text"></p> // 1、定義物件vue,其中有個屬性：name let vue = { name:

Vue 實現雙向繫結的幾種方法

1. v-model 指令 <input v-model="text" /> 上例不過是一個語法糖，展開來是： <input :value="text" @input="e => text = e.target.value"

面試問題：Vuejs如何實現雙向繫結

最近出去面試，栽在這個問題上，提到vuejs，面試官一般會讓你說vuejs的特點，一般就要回答virtual dom tree, dom tree diff, 以及資料雙向繫結,然後面試官會追問你，vuejs是如何實現資料雙向繫結的，前面的問題算基礎的話，能答出這個就更上一個臺階，說明你的思考能力不停留在表層

資料雙向繫結原理

資料雙向繫結 1.AngularJS: AngularJS 採用“髒值檢測”的方式 資料發生變更後，對於所有的資料和檢視的繫結關係進行一次檢測，識別是否有資料發生了改變，有變化進行處理，可能進一步引發其他資料的改變，所以這個過程可能會迴圈幾次，一直到不再有資料變

Vue 2.3.4原始碼分析之雙向繫結原理

    要想實現雙向繫結需要做到兩點：1.如何監聽data物件是否改變；2.物件變化後如何去更新檢視    一、如何監聽data物件是否改變     在Vue監聽data物件是否改變主要通過defineReactive方法來做到的，就是利用Object.definePrope

angularjs中的雙向繫結原理解析

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me

Vue雙向繫結原理（一）文件片段DocumentFragment

DocumentFragment介紹 JavaScript有以下幾種建立節點的方式： createAttribute(name)：　　　　　　　用指定名稱name建立特性節點 createComm

angular資料雙向繫結原理

資料雙向繫結就是頁面操作實時反應到資料，資料變化實時顯示在頁面通過編寫程式碼，將從伺服器獲取的資料進行處理，然後展現到檢視上。每當資料有變更時，我們會再次進行渲染，從而更新檢視，使得檢視與資料保持一致。頁面則通過使用者的互動，產生狀態、資料的變化，這個時候，通過程式碼，將檢視