微信小程式(一)資料流與資料繫結
阿新 • • 發佈:2019-02-02
一、單向資料流和雙向資料流
1、單項資料流:指的是我們先把模板寫好,然後把模板和資料(資料可能來自後臺)整合到一起形成HTML程式碼,然後把這段HTML程式碼插入到文件流裡面
優點:資料跟蹤方便,流向單一,追尋問題比較方便【主要體現:微信小程式】。
缺點:就是寫起來不太方便,如果修改UI介面資料需要維護對應的model物件
2、雙向資料流:值和UI是雙向繫結的,大家都知道,只要UI裡面的值發生變化model物件裡面對應的值也會發生變化,資料和UI是雙向繫結的。
優點;當修改UI頁面資料時候,對應的model物件值也會跟著改變。
缺點:雙向流動,追群問題相對負責【主要體現:Anguler.js和vue.js等】
》》》 開發前端的同學;尤其是WEB前端,每天都會和檢視打交道加入你用過原生的JS,還是JQUERY.JS等,都會感覺到程式碼的冗餘和負責,你需要手動去管理檢視和物件資料的一致性。
1、DOM物件是需要手動去維護,之所有比較麻煩。
》》》那麼問題來了,微信小程式是使用單向資料流還是雙向資料流呢?答案是為使用單向資料流【model模型------->檢視UI】,通過設定model物件的值進行渲染檢視UI微信小程式案例,雖然案例很簡單,但是用於證明微信小程式使用的是單向資料流足夠了。 JS檔案
//index.js //通過getApp獲取全域性應用程式物件 var app = getApp() Page({ data:{ text:"單向資料庫", showText:"資料渲染", }, })
WXML檔案
<text>{{text}}</text>
<view >{{ showText }}</view>
頁面顯示結果
雙向資料流案例