一篇文章瞭解JsBridge之IOS篇

以前發佈在掘金Android欄目下的文章「一篇文章瞭解Js Bridge」受到了較多的反饋，本文在該文章的基礎上，添加了一些針對IOS平臺下的一些問題的討論。

什麼是JSBridge

在大多數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 和原生配合實現的，而它們都用到了 JsBridge， 可見使用一個好的Js Bridge的重要性。而不一樣的混合開發框架、Web APP中Js Bridge的實現和通訊協議都不相同，固然，若是你使用的事這些開發框架，你只須要了解相應框架下的通訊協議就行，這沒有什麼問題。 可是，對於採用原生加H5的APP，就須要本身挑選一個合適的Js Bridge了，那麼對於開發者來講，什麼是好的JavaScript Bridge?

什麼是好的JSBridge？

可用性

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

健壯性

所謂健壯就是經得住考驗，bug少、兼容性好、在各類狀況下都能穩定運行。然而，可怕的事，現有的知名開源jsbridge 質量都存在着嚴重問題，如今Github上一個上萬star的IOS平臺下的開源JS Bridge項目 marcuswestin/WebViewJavascriptBridge ，縱觀其issue列表，也是各類各樣的問題反饋。

Android 方面問題更多，下面是我在兩個知名Android JS Bridge開源庫下提的問題:

1. https://github.com/lzyzsd/JsBridge/issues/119
2. https://github.com/jesse01/WebViewJavascriptBridge/issues/5

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

跨平臺

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

安全

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

在IOS下 UIWebView 存在跨域訪問漏洞，成功利用該漏洞的攻擊者能夠遠程獲取手機應用沙盒內全部本地文件系統內容，包括瀏覽器的Cookies、用戶的配置文件、文檔等敏感信息。而WKWebView可經過手動設置是否容許「file://」域發起跨域請求。

性能

對於IOS來講，WKWebView 在打開頁面速度和資源消耗方面比UIWebView 要好的多，蘋果對UIWebView內存泄露問題一直沒有很好的解決，如今蘋果官方已經廢棄UIWebView，開發者是時候使用WKWebView了。

使用簡單

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

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

考慮到安全和性能問題，DSBridge v3.0.0以後只支持WKWebView，而不會再支持UIWebView。若是您的項目還須要使用UIWebView，請使用DSBridge v2.0.0

固然得給出源碼地址：

DSBridge for IOS：github.com/wendux/DSBr…

DSBridge for Android: github.com/wendux/DSBr…

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

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