本文說的mvvm框架以react為列,其他應該也是類似的;
react實際上僅僅是幫助我們再View層簡化,讓我們僅僅需要專注數據,只要數據改變,所有的視圖就會自己跟隨着改變,
本人自己做react項目目前大概一個多月,然而,好幾次都仍然想着使用jQuery的方式,經過同事的指點,發現了此jQuery之所有被我們所棄用,並不是盲目的想要摒棄以前的東西,而是真的使用它遠沒用不用他效率高!,
以今天自己寫的項目的一個小點來說:
handleSave(e) {
let textareaEles = document.querySelectorAll("textarea[data-id]"); let textareaDataArr = []; for (let i = 0; i < textareaEles.length; i++) { debugger; let textareaEle = textareaEles[i]; textareaEle.dataId; textareaDataArr.push({ id: textareaEle["data-id"], remark: textareaEle.innerHTML }) } let json = JSON.stringify(textareaDataArr);//這個是獲取的JSON
}
上面這個是仍然使用jQuery的編程模式, 1、先把獲取到的數據,動態生成給元素並讓它添加 data-id 屬性,然后再一個一個循環獲取!最后我再提交數據,十分低效
而使用react這類框架,思路其實更加簡單, 1、先把獲取到的數據,然后把textArea的value綁定為state.data;當textArea觸發onChange的時候,直接改變state.data的值,textArea就會實時改變,而且最后要提交給后台的數據,也仍然是data。
整個過程就是通過state.data來實現數據的雙向綁定!!!十分簡單