一篇文章瞭解Js Bridge

什麼是JS Bridge

在大多數APP開發過程當中，都會經過H5來實現部分功能，而Hybird APP基本90%以上都是H5。如今不多有純原生的APP。可是，因爲H5頁面是內嵌到原生應用的WebView組件（一個瀏覽器內核）中，而手機瀏覽器Javascript引擎是在一個沙箱環境中運行，所以JavaScript的權限受到嚴格限制，好比沒有本地文件讀寫權限、不能使用GPS、不能修改系統配置等。因此，若是JavaScript要用到這些受限的能力時，就須要委託原生去實現，原生完成後，再將結果通知JavaScript，所以，JavaScript和原生之間就須要一個通訊的橋樑，而這個橋樑本質上就是原生的瀏覽器組件（咱們統一稱之爲WebView）與Javascript 通訊的通道，通常稱爲 WebView JavaScript Bridge, 爲了簡單，通常簡稱爲 JS bridge。須要說明的是，原生不只僅指移動端（Android、IOS）上原生代碼開發的部分，它也能夠是Windows、MAC上的，因此原生一詞主要是爲了區分H5，而本文只討論移動端的Js Bridge 。

移動開發的大勢

今年來，動態化是移動開發的主流趨勢，所謂動態化是指能夠隨時更新APP的能力，這是爲了克服原生應用修改後必須從新發版的自然不足。目前動態化的技術主要有四種：熱補丁、混合開發框架（React-Native、Weex等）、純粹的Web APP、原生加H5（須要常常更新的部分用H5實現）。 其中熱補丁技術主要用於修復一些線上bug，不用於主流開發，固然也有一些基於熱補丁技術的分包動態化方案，本文暫不討論。而剩餘的三種方案，都是經過Javascript 和原生配合實現的，而它們都用到了 Js Bridge， 可見使用一個好的Js Bridge的重要性。而不一樣的混合開發框架、Web APP中Js Bridge的實現和通訊協議都不相同，固然，若是你使用的事這些開發框架，你只須要了解相應框架下的通訊協議就行，這沒有什麼問題。 可是，對於採用原生加H5的APP，就須要本身挑選一個合適的Js Bridge了，那麼對於開發者來講，什麼是好的JavaScript Bridge?

什麼是好的JS Bridge？

可用性

可以知足通訊需求、功能完善；固然，若是都不能用，仍是回家洗洗睡吧~。

健壯性

所謂健壯就是經得住考驗，bug少、兼容性好、在各類狀況下都能穩定運行。然而，可怕的事，現有的知名開源js bridge 質量都存在着嚴重問題，下面是我在兩個知名Android JS Bridge開源庫下提的問題:

1. https://github.com/lzyzsd/JsB...
2. https://github.com/jesse01/We...

可見，要想造一座好橋，仍是不容易的。

跨平臺

爲了保證同一份Javascript代碼既能同時在Android和IOS下正常運行，那麼好的JavaScript Bridge 應該要能跨平臺，這樣才能保證在Android和IOS和H5通訊協議一致。然而，目前Github上萬star的 marcuswestin/WebViewJavascriptBridge 官方也只提供了IOS版，儘管有一些第三方Android實現，但大都存在各類各樣的問題，有的存在嚴重bug，如 https://github.com/jesse01/We... , 有的和IOS版差異太大，如 https://github.com/fangj/WebV... 。

安全

安全是很重要的，如今有些Android實現中使用了 webview.addJavascriptInterface ，而在Android 4.2.2以前， webview.addJavascriptInterface 存在任意代碼執行漏洞，這就會致使嚴重的安全問題。

使用簡單

一個好東西應該是用起來簡單的。

對於JS Bridge來講，使用簡單應該包括三個端：Android、IOS、 JavaScript， 也就是說不管對於哪一個端，用起來要足夠的簡單，這很重要，這樣能夠避免大量的原生開發和前端開發的撕逼。

強大

在知足可用性和使用簡單的基礎上，功能要儘量強大。如今的不少實現，基本上只知足了可用性，而功能方面都比較弱，好比：

1. 不支持檢測是否存在某個API的方法；有時隨着版本迭代不肯定某個版本下是否存在某個Native或Javascript方法（在版本迭代過程當中一些是新添加的）。
2. 不支持進度回調；現有JS Bridge基本都只支持一次調用一次返回，可是有些時候，如js調用原生下載文件功能的方法時，原生須要在下載過程當中將下載進度不停返回給js。
3. 不支持API管理；現有JS Bridge註冊API時基本都是每一個API都須要單獨註冊，這樣在API多的狀況下，不只使用回很是麻煩，也不利於API分類管理。

福音

我給你們捅破了現實，也必須爲你們重塑但願！聽不懂？那簡單來講，就是前面都是鋪墊，下面纔是真正目的！

那麼到底有沒有一個可用、健壯、跨平臺、安全、使用簡單、強大的現成的JS Bridge?

哈哈，固然是有的， 通過我通宵達旦、四處瀏覽、嘔心瀝血、廢寢忘食，終於創造了這麼一個健壯、跨平臺、安全、使用簡單、強大的JS Bridge，那就是DSBridge，它有以下特色：

1. Android、IOS、Javascript 三端易用，輕量且強大、安全且健壯。
2. 同時支持同步調用和異步調用
3. 支持以類的方式集中統一管理API
4. 支持API命名空間
5. 支持調試模式
6. 支持API存在性檢測
7. 支持進度回調：一次調用，屢次返回
8. 支持Javascript關閉頁面事件回調
9. 支持Javascript 模態/非模態對話框
10. 支持騰訊X5內核

固然得給出源碼地址：

DSBridge for IOS：https://github.com/wendux/DSBridge-IOS

DSBridge for Android: https://github.com/wendux/DSBridge-Android

詳情請參考Github文檔，都有中文哦。

最後，若是你喜歡DSBridge， 歡迎star，不能多年辛苦無人知啊，哈哈。