wex5 實戰 框架拓展2之事件派發與data重新整理

2021-07-25 19:33:08 字數 2033 閱讀 9315

一    前言

講完公共data,相信大家對框架級的data元件級繫結有了更新的認識,接下來我們繼續深入,以求研究明白wex5的框架能力。

在乙個web專案中,其實有乙個data, 是基礎框架必須的data,並且要實時監控資料變更。那就是使用者userdata.     

此文的目地和意義: 

1  在涉及到使用者登陸的專案中,框架級的userdata,可以讓所有web頁面提供資料**,用超現實的方法保證多頁面中的使用者唯一性,且一次載入即可。不必像之前的分頁data每次都要使用者id來過濾使用者資料。

2  拋棄之前的頁面接收事件modelparamsreceive機制,用派發事件,讓頁面中的***根據事件來執 行重新整理或其它事件,解決使用者userdata更新後專案中n個頁面的更新問題。之前用頁面跳轉傳參,觸發接收事件的方法重新整理data,當跳轉頁面**超過3個時,需要進行**判斷並準確傳參,相對於n個頁面甚至上百個頁面的大型工程,顯然,之前的頁面接參觸發方法已無法滿足設計需求。

所以,今天,我的設計方案是,將使用者userdata,像上期講解的商品goodsdata一樣,掛到框架上,讓所有頁面繫結使用者資料,當使用者重新登陸或資訊修改後派發事件,讓所有與使用者操作相關的頁面監聽並接收事件及引數,及時重新整理資料。

二  效果演示

為便於連貫理解,我仍然用上次的專案

1 登陸前

2  登陸後  頭像更換,首頁登陸按鈕隱藏

3 使用者更換帳號

三  頁面邏輯與**實現

1  派發事件

使用者登陸,修改登陸相關字段狀態到資料庫,儲存成功後,派發事件,並將當前使用者useruuid傳參

2  框架接收

框架接收的前提是,把userdata放到框架上,也就是index門戶頁面上,在index頁監聽事件並接參

index頁載入完成後,裝載事件

index頁退出時解除安裝事件,避免頁面退出,事件仍在監聽報錯

事件函式的方法

框架頁面接收事件並接收引數,這裡是useruuid,執行資料過濾,得到當前使用者資訊。

3  頁面資料繫結

登陸按鈕隱藏

頭像繫結:用三目表示式,空值顯示預設頭像,有值顯示真實使用者頭像

帳號更新

四  總結

派發事件,沒有頁面針對性,類似於廣播,觸發之後把事件派發出去,在需要接收事件的頁面建立事件***,負責接收事件,當有事件派發時接收事件,接參,並執行相應的data重新整理等動作。相比於modelparamsreceive的依賴於頁面的傳參接參,具有更廣闊的應用範圍和控制能力以及擴充套件方法。

將思路延伸一下,不同頁面中的訂單資料同步,購物車資料同步,支付頁面資料同步,等等,如果用派發事件的方法,頁面會更簡結,易於維護和修改。

WeX5跨端移動開發開源框架

2 高效精緻的ui元件體系,完全基於主流標準和技術 wex5的ui元件體系是完全基於html5 css3 js,非常乾淨標準。wex5的ui元件技術完全是開放主流,基於jquery和bootstrap技術,經wex5高度優化,在移動上的表現很好,接近原生.wex5 的ui基於模組化開發,採用增強的r...

WeX5 單頁應用

例子參考ui2 portal sample index.w 要點 關於url 從 來看,x5中有兩種url格式,一種是內部的相對url,一種是標準的絕對url,如果使用x5提供的方法,兩種url都可以,如果要使用標準的html語法,需要轉成絕對的。相對url是ui2目錄下的路徑,在 中有兩種寫法 相...

WEX5 學習筆記(六)

靜態資料格式的資料 一般用 data 資料元件。而且data資料元件裡設定的列要跟 json靜態資料裡的列相同。data元件在重新整理資料的時候 有個事件 oncustomrefresh 接管重新整理事件會被觸發 所以我們在這裡將載入 的json資料載入到data當中就行。只要data的屬性 aut...