簡單實現乙個雙向繫結

看了一些關於雙向繫結的文章，現在來整理一下思路。

首先實現雙向繫結有三個步驟：

需要乙個方法來識別哪乙個的view被繫結了相應的資料

需要監視資料和view的變化

需要將所有變化傳播到繫結的物件和對應的view

為了解決第乙個問題，要在對應的dom上新增相應的data-bind-屬性，比如：

num:

為了解決第二個問題，一方面監聽資料改變，需要這樣新增乙個set()方法進行監聽：

const vue = ,
set(key, val) 
}

規定通過set(key, val)的方式來修改資料。

另一邊監聽對應檢視改變就直接監聽input事件。

為了解決第三個問題就需要用發布訂閱模式實現乙個事件樞紐：

const eventhub = ,
on(eventname, callback),
emit(eventname, ...rest)
}}

一方面將資料層的變化傳播到檢視,需要用特定名稱與dom上的屬性對應：

//觸發事件就修改檢視
eventhub.on('num:change', (val) => )
//通過set()修改data來觸發對應的change事件
set(key, val)

將檢視層的變化傳播到資料：

$(`input[data-bind-num]`).on('input', function() )

至此雙向繫結就實現完成！但是這樣乙個個寫事件名和屬性名有點蠢，優化一下

const fn = (prop_name) => `,//對應dom的data屬性名
eventname: `$:change`//對應資料的change事件名稱
}      
}//給所有data繫結change事件,給所有data對應的view繫結input事件
object.keys(vue.data).map((key) => ]`).val(val)
$(`div[$]`).text(val)
})//view改變data
$(`input[$]`).on('input', function() )
})

這樣實現的雙向繫結依賴於用set()來改變資料，而我們都希望通過vm.property = value這種方式直接來修改資料，這就需要用到object.defineproperty()來劫持各個資料的getter,setter。

//給各個資料新增***，用資料劫持替換原先的set(key,value)
const observer = 
object.keys(obj).map((key) => )
},definereactive(obj, key, val) ,
set(newval)  從$->$`)
//當資料變化就貴觸發對應的change事件
eventhub.emit(fn(key).eventname, newval)
val = newval}})
}}

改變data效果：

修改input效果：

文章相關**已經同步到

github，歡迎查閱~

react如何實現乙個基本的資料雙向繫結

首先react本身並不像vue一樣具有雙向資料繫結這個概念，react只是mv，也就是資料層可以影響檢視層，那麼如果想要用react實現雙向資料繫結應該怎麼去實現呢？首先定義乙個子元件 import react,from react 引入react class todolist extends co...

前端雙向繫結的簡單實現

本文學習了完整的在最下面會展示有關於圖形化的程式設計，我們往往會採用mvvm的模式來進行程式設計，將頁面抽象成資料可以讓程式設計變得更好把握，網頁前端也是如此，頻繁的dom操作勢必造成邏輯上的混亂，當專案特別龐大的時候，比如開發前端excel時，乙個單元格合併操作會造成大量dom元素的變更,刪除...

實現雙向繫結

ng和vue都有雙向資料繫結。vue是資料劫持，ng是藏之檢測一 vue雙向資料繫結訪問器屬性是物件中的一種特殊屬性，它不能直接在物件中設定，而必須通過 defineproperty 方法單獨定義。此例實現的效果是隨文字框輸入文字的變化，span 中會同步顯示相同的文字內容在js或控制台顯式...

簡單實現乙個雙向繫結

react如何實現乙個基本的資料雙向繫結

前端雙向繫結的簡單實現

實現雙向繫結

相關推薦