JSBridge是什麼
顧名思義：就是JavaScript(H5)與Native通信的橋梁，在H5開發中經常有操作用戶端的需求，比如擷取App資訊，打開/關閉一個WebView，吊起支付面闆等等，但這些功能隻能在Native中實作，是以誕生JSBridge，通過JSBridge與Native通信，賦予了JavaScript操作Native的能力，同時也給了Native調用JavaScript的能力。
JSBridge與Native間通信原理
在H5中JavaScript調用Native的方式主要用兩種
1.注入API，注入Native對象或方法到JavaScript的window對象中(可以類比于RPC調用)。
2.攔截URL Schema，用戶端攔截WebView的請求并做相應的操作(可以類比于JSONP)。
下面将以Android端的JSBridge通信為例，講解這兩種方式的實作原理(本人比較菜，隻會Java不會Swift和OC)。
注入API
通過WebView提供的接口，向JavaScript的window中注入對象或方法(Android使用addJavascriptInterface()方法)，讓JavaScript調用時相當于執行相應的Native邏輯，達到JavaScript調用Native的效果。
對于Android實作方式如下，核心代碼在于
示例如下
在Android的main頁面放一個Webview
然後Android端對應的代碼如下
對于JavaScript側，則可以直接調用Native端注入的InjectNativeObjec對象的方法
實際效果如下，其中login按鈕點選調用Native端openNewPage方法并傳相應的參數給用戶端。
缺陷： Android4.2及以下的版本使用addJavascriptInterface方法有漏洞
該漏洞源于程式沒有正确限制使用WebView.addJavascriptInterface方法，遠端攻擊者可通過使用Java Reflection API利用該漏洞執行任意Java對象的方法，簡單的說就是通過addJavascriptInterface給WebView加入一個JavaScript橋接接口，JavaScript通過調用這個接口可以直接操作本地的Java接口。
在Android4.2以上提供@JavascriptInterface注解來規避該漏洞，但對于4.2以下版本則沒有任何方法。是以使用該方法有一定的風險和相容性問題。
攔截URL Schema
H5端通過iframe.src或localtion.href發送Url Schema請求，之後Native(Android端通過shouldOverrideUrlLoading()方法)攔截到請求的Url Schema(包括參數等)進行相應的操作。
通俗點講就是，H5發一個普通的https請求可能是: https://daydream.com/?a=1&b=1， 而與用戶端約定的JSBridge Url Schema可能是: Daydream://jsBridgeTest/?data={a:1,b:2}，用戶端可以通過schema來區分是JSBridge調用還是普通的https請求進而做不同的處理。
其實作過程原理類似于JSONP
1.首先在H5中注入一個callback方法，放在window對象中
然後把callback的名字通過Url Schema傳到Native
2.Native通過shouldOverrideUrlLoading()，攔截到WebView的請求，并通過與前端約定好的Url Schema判斷是否是JSBridge調用。
3.Native解析出前端帶上的callback，并使用下面方式調用callback
或者
通過上面幾步就可以實作JavaScript到Native的通信。下面可以看看處理Url Schema的攔截的shouldOverrideUrlLoading方法的相關例子
示例
Android頁面布局
Android端代碼如下
JavaScript側
window上挂載的方法在Native中可以使用webView.loadUrl() / webView.evaluateJavascript()調用
基于JSONP原理可以定義JSBridge類
JavaScript使用例子
效果如下
缺陷： 使用URL Schema有一定的長度問題，url過長可能會導緻丢失; 一次JSBridge調用耗時可能比較長，建立請求需要一定的時間。
總結
本文簡單介紹了JSBridge以及在Android端的通信，通過相應的分析與代碼實作可以發現JSBridge原理其實并沒有那麼難，是以希望本文能對讀者對JSBridge有一定的了解，最後生活不止有前端，還有用戶端在等着咱o(T^T)o