iOS webView 簡單的解耦方案

在使用原生與h5頁面進(jìn)行交互的時(shí)候业稼,會建立通道雙方互傳消息,但除了消息通道外蚂蕴,有時(shí)候還會在url后面拼接參數(shù)區(qū)分不同的業(yè)務(wù)場景低散,交互的方式不是那么單一俯邓,具體可能會有:

  1. 通過消息通道 h5 to app 或 app to h5 ,這時(shí)一般會傳一個(gè)消息熔号,包含有業(yè)務(wù)意義的事件名稱eventName和相關(guān)的數(shù)data稽鞭。
  2. h5要求app open 一個(gè)新頁面并通過url 后面拼接相關(guān)參數(shù),來傳遞信息引镊。
  3. h5要求app在本頁面加載到一個(gè)新頁面朦蕴,并通過url后面拼接參數(shù),來傳遞信息弟头。

同時(shí)由于業(yè)務(wù)需要吩抓,存在多個(gè)h5頁面,并且每個(gè)頁面都有不同的事件event亮瓷。

比較簡單的處理方式:

  1. 搭建h5 - native消息通道
  2. 處理好本頁面跳轉(zhuǎn)琴拧,還是打開一個(gè)新頁面的邏輯。
  3. 把全部的event寫到一起嘱支,通過if-else 進(jìn)行判斷處理,如果存在同名event挣饥,那么與url + event一起判斷確定唯一性除师。

這樣無疑是比較簡單和便捷的處理方式,但這其實(shí)并不是真正便捷的方式扔枫。隨著業(yè)務(wù)的迭代汛聚,每個(gè)頁面會增加新的業(yè)務(wù),同時(shí)頁面也會增加短荐,此時(shí)把event都堆積在一起倚舀,導(dǎo)致代碼臃腫、閱讀性降低忍宋,并且會加大了出錯(cuò)的概率痕貌,降低了可維護(hù)性。

為了解決這個(gè)問題糠排,必須要構(gòu)建一個(gè)與h5 - native交互模式匹配的交互方案舵稠,對代碼進(jìn)行解耦,并要求在迭代的過程中入宦,不提高其維護(hù)成本哺徊。

這個(gè)方案的大概思路如下:

  1. 有多一個(gè)頁面,對應(yīng)應(yīng)該有多個(gè)實(shí)體乾闰,每個(gè)實(shí)體對應(yīng)這個(gè)頁面的業(yè)務(wù)落追。
  2. 每個(gè)實(shí)體在前臺的時(shí)候能接受和響應(yīng)event。
  3. 當(dāng)頁面切換的時(shí)候切換對應(yīng)的實(shí)體涯肩。
  4. 增加一個(gè)新的頁面轿钠,那么就通過增加一個(gè)新的實(shí)體來匹配巢钓。這個(gè)過程中,不需要修改任何邏輯谣膳。實(shí)現(xiàn)OCP竿报。

交互圖:

  • 事件交互流程


    a.png
  • 變更頁面,切換


    b.png
  • 擴(kuò)展多個(gè)頁面的邏輯


    c.png

通過webViewProcess 完成事件的轉(zhuǎn)發(fā)继谚,完成eventDelegate的切換烈菌。

使用原型模式思想,創(chuàng)建一個(gè)新的delegate類是花履,要實(shí)現(xiàn)相關(guān)協(xié)議芽世,并把元類對象注冊到builder單例中,用于后面根據(jù)url匹配創(chuàng)建诡壁。

APIWebEventDelegateProtocol

@protocol APIWebEventDelegateProtocol <NSObject>

@optional
/*native to h5 event; can be register notifiction*/
- (void)webEventSetupAction;
/*do somthing like  native to h5 when webView perload*/
- (void)webPerLoadAction;
/*revice from h5 ,native respod*/
- (void)receiveWebMsg:(NSDictionary *)msg;
/*if respond wiht url*/
- (APIWebEventDelegateRespondType)respodWithUrl:(NSString*)url;
/*handle with url*/
- (void)handleWithUrl:(NSString*)url;
@end

@implementation APICameraWebEventDelegate
#pragma mark -
+ (void)load
{
//注冊
    [[APIWebDelegateBuilder shareInstance]registerWithClass:self.class];
}
...
@end

APIWebDelegateBuilder

@interface APIWebDelegateBuilder : NSObject
+ (instancetype)shareInstance;

- (void)registerWithClass:(Class)class;
///生成合適的webDelegate
- (nullable id)webDelegateWithUrl:(NSString *)url param:(NSDictionary *)param;
@end

demo :
https://github.com/zmubai/WebViewUrlProcessDemo

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末济瓢,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子妹卿,更是在濱河造成了極大的恐慌旺矾,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,122評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件夺克,死亡現(xiàn)場離奇詭異箕宙,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)铺纽,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,070評論 3 395
  • 文/潘曉璐 我一進(jìn)店門柬帕,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人狡门,你說我怎么就攤上這事陷寝。” “怎么了其馏?”我有些...
    開封第一講書人閱讀 164,491評論 0 354
  • 文/不壞的土叔 我叫張陵凤跑,是天一觀的道長。 經(jīng)常有香客問我尝偎,道長饶火,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,636評論 1 293
  • 正文 為了忘掉前任致扯,我火速辦了婚禮肤寝,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘抖僵。我一直安慰自己鲤看,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,676評論 6 392
  • 文/花漫 我一把揭開白布耍群。 她就那樣靜靜地躺著义桂,像睡著了一般找筝。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上慷吊,一...
    開封第一講書人閱讀 51,541評論 1 305
  • 那天袖裕,我揣著相機(jī)與錄音,去河邊找鬼溉瓶。 笑死急鳄,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 40,292評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼黍特,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了坎藐?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,211評論 0 276
  • 序言:老撾萬榮一對情侶失蹤哼绑,失蹤者是張志新(化名)和其女友劉穎岩馍,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體抖韩,經(jīng)...
    沈念sama閱讀 45,655評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡兼雄,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,846評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了帽蝶。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,965評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡块攒,死狀恐怖励稳,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情囱井,我是刑警寧澤驹尼,帶...
    沈念sama閱讀 35,684評論 5 347
  • 正文 年R本政府宣布,位于F島的核電站庞呕,受9級特大地震影響新翎,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜住练,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,295評論 3 329
  • 文/蒙蒙 一地啰、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧讲逛,春花似錦亏吝、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,894評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽惜论。三九已至,卻和暖如春止喷,著一層夾襖步出監(jiān)牢的瞬間馆类,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,012評論 1 269
  • 我被黑心中介騙來泰國打工弹谁, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留乾巧,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,126評論 3 370
  • 正文 我出身青樓僵闯,卻偏偏與公主長得像卧抗,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子鳖粟,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,914評論 2 355

推薦閱讀更多精彩內(nèi)容

  • iOS網(wǎng)絡(luò)架構(gòu)討論梳理整理中社裆。。向图。 其實(shí)如果沒有APIManager這一層是沒法使用delegate的泳秀,畢竟多個(gè)單...
    yhtang閱讀 5,192評論 1 23
  • 序言 目前形勢,參加到iOS隊(duì)伍的人是越來越多榄攀,甚至已經(jīng)到供過于求了嗜傅。今年,找過工作人可能會更深刻地體會到今年的就...
    獨(dú)酌丿紅顏閱讀 2,369評論 18 60
  • 新的一年,我又立下了“今年不熬夜”的Flag贞瞒。 晚上10點(diǎn)睡偶房,早上7點(diǎn)起是我給自己定的目標(biāo)。 就像減肥一樣军浆,已經(jīng)記...
    流觴陣地閱讀 345評論 1 4
  • 聞聲不見影棕洋,夜半夢魂驚,富貴貧窮一視同乒融,個(gè)個(gè)也掰盘,任他叮,古人云赞季,一個(gè)蚊子哼哼哼愧捕。
    furx閱讀 182評論 1 2
  • 1 如果你擁有了一個(gè)小寶寶晃财,恭喜你,你馬上就要“脫胎換骨”了!断盛! 2 都說結(jié)婚之后一個(gè)人會很快成熟罗洗,我覺得多半是因...
    牛爸愛學(xué)習(xí)閱讀 185評論 0 0