原生JS實現雙向繫結

2021-09-12 01:10:12 字數 824 閱讀 7802

現在框架都可以實現雙向繫結,vue中實現雙向繫結的原理是利用object.defineproperty

定義訪問器屬性要使用object.defineproperty,接收三個引數:屬性所在的物件,屬性的名字,乙個描述符物件。

<

!doctype html>

"en"

>

"utf-8"

>

title<

/title>

<

/head>

>

"text" id=

"txt"

>

"show-txt"

>

<

/p>

<

/div>

var obj =

;// obj為content屬性所在的物件,content為obj物件的屬性

// get 讀取訪問器屬性返回有效的值;set 傳入新值

object.

defineproperty

(obj,

'content',,

set:

function

(newvalue)})

;// keyup 鍵被鬆開

document.

addeventlistener

('keyup'

,function

(e))

;<

/script>

<

/body>

<

/html>

addeventlistener

原生js實現資料雙向繫結

最近接觸了vue,在談到 vue等等的 mvvm 框架之前,先了解什麼是資料雙向繫結以及如何利用原生 js實現資料雙向繫結 單向資料繫結 指先把模板寫好,然後把模板和資料 資料可能來自後台 整合到一起形成html 然後把這段 html 插入到文件流裡 缺點 一旦html 生成就沒有辦法改變,如果有新...

用原生JS模擬雙向繫結

雙向繫結 這裡的雙向繫結分兩步實現,一是從js的變數繫結到dom 也就是顯示的html檔案 二是從dom繫結到js的變數。對一般的object,可以使用getter和setter實現該效果。對於array,可以修改原型實現,這裡的實現是參考如何監聽 js 中變數的變化?這裡用到的時object.de...

原生JS模擬Vue雙向資料繫結

童鞋們都應該知道vue2.x很重要的特性 資料雙向繫結 虛擬dom 所以在面試的時候就經常有面試官問小白同學說資料雙向繫結原理是什麼,虛擬dom是什麼,給我實現乙個唄。所以給大家展示乙個最簡的雙向繫結的案例,也參考了網上一些資料。至於虛擬dom的實現後面再說吧,網上資料也很多很全因為畢竟react都...