JSBridge

什麼是JSBridge

JSBridge：聽其取名就是js和Native之前的橋樑，而實際上JSBridge確實是JS和Native之前的一種通訊方式。簡單的說，JSBridge就是定義Native和JS的通訊,Native只通過一個固定的橋物件呼叫JS,JS也只通過固定的橋物件呼叫Native。JSBridge另一個叫法及大家熟知的Hybrid app技術。

流程：H5->通過某種方式觸發一個url->Native捕獲到url,進行分析->原生做處理->Native呼叫H5的JSBridge物件傳遞迴調。

我們前面講過了原生的WebView/UIWebView控制元件已經能夠和Js實現資料通訊了，那為什麼還要JSBridge呢？ 
其實使用JSBridge有很多方面的考慮：

• Android4.2以下,addJavascriptInterface方式有安全漏掉
• iOS7以下,JS無法呼叫Native
• url scheme互動方式是一套現有的成熟方案,可以完美相容各種版本，對以前老版本技術的相容。

url scheme

url scheme是一種類似於url的連結,是為了方便app直接互相呼叫設計的。具體來講如果是系統的url scheme,則開啟系統應用,否則找看是否有app註冊這種scheme,開啟對應app。 
注：這種scheme必須原生app註冊後才會生效。

而在我們實際的開發中，app不會註冊對應的scheme,而是由前端頁面通過某種方式觸發scheme(如用iframe.src),然後Native用某種方法捕獲對應的url觸發事件,然後拿到當前的觸發url,根據定義好的協議,分析當前觸發了那種方法。

JSBridge技術實現

要實現JSBridge,我們需要按以下步驟分析：

• 第一步:設計出一個Native與JS互動的全域性橋物件
• 第二步:JS如何呼叫Native
• 第三步:Native如何得知api被呼叫
• 第四步:分析url-引數和回撥的格式
• 第五步:Native如何呼叫JS
• 第六步:H5中api方法的註冊以及格式

JSBridge的完整流程可總結為： 

設計Native與JS互動的全域性橋物件

我們規定,JS和Native之間的通訊必須通過一個H5全域性物件JSbridge來實現。該物件有如下特點： 
該物件名為”JSBridge”，是H5頁面中全域性物件window的一個屬性，形如：

var
 
 JSBridge = window.JSBridge || (window.JSBridge = {});

• 1

• 1

該物件有如下方法：

• registerHandler( String,Function )H5呼叫註冊本地JS方法,註冊後Native可通過JSBridge呼叫。呼叫後會將方法註冊到本地變數messageHandlers 中。
• callHandler( String,JSON,Function )H5呼叫 呼叫原生開放的api,呼叫後實際上還是本地通過url scheme觸發。呼叫時會將回調id存放到本地變數responseCallbacks中
• _handleMessageFromNative( JSON )Native呼叫 原生呼叫H5頁面註冊的方法,或者通知H5頁面執行回撥方法