JsBridge的学习

最近做项目遇见了JsBridge，于是乎，去学习了下，发现了不少好东西，这里记录一下

JsBridge一般用于Hybrid模式，什么是Hybrid模式呢？

Hybrid是一种一半原生一半web的开发模式。

原生是指通过指定的开发语言和官方提供的API来对手机端进行开发，比如Android可以通过Java语言调用Google的提供的API进行开发，而iOS则可以通过OC语言调用Apple官方提供的API进行开发。

web是指用HTML5简称H5进行开发的页面。

如果只用原生开发页面，那么你得学习Android和iOS分别提供的两套指定语言，并且开发时你得用两套代码进行编码，学习和维护成本偏高。但由于是原生（语言和API对于Android和iOS是熟人，熟人见面一个眼神，什么都懂），因此原生开发的页面性能是很好的，你几乎不用等待便可以直接打开页面。

如果只用web开发页面，那么你的学习H5一门语言（一招鲜吃遍天），但是由于是web（web对于Android和iOS是陌生人，语言都不通，交流起来很困难），因此web开发的页面性能很差，你每个页面都要等一定时间。

为什么不把2种方式结合起来呢，于是，Hybrid孕育而生。

Hybrid中，原生容器通过某种方式提供底层API，然后H5实现业务逻辑，最终完成整个App。

这样一来，原生容器与H5之间便需要建立通信的方式，JsBridge由此而生。

什么是JsBridge？

JsBridge是原生与H5之间的一种通信方式，就像我们说中文外国人听不懂，外国人说洋文我们听不懂，但是如果我们画出来就都懂了一样。

JsBridge的原理

H5拼接数据成url，然后触发这个url，原生拦截到url后，进行分析，获取H5传达的数据，并完成H5的需求，最后将需要传递给H5的数据进行分装，并调用H5的JsBridge对象进行回调。

H5拼接的这个url，称为url scheme，JsBridge内部会通过创建iframe的方式来触发这个url scheme

JsBridge的H5用法如下：

初始化

function connectWebViewJavascriptBridge(callback){

     if (window.WebViewJavascriptBridge){

         callback(WebViewJavascriptBridge);

     } else {

         document.addEventListener('WebViewJavascriptBridgeReady', function(){

              callback(WebViewJavascriptBridge);

         }, false);

     }

};

H5调用原生的funciton

connectWebViewJavascriptBridge(function (JSBridge) {

      JSBridge.callHandler('functionName',{'param':str1},function(responseData)){

      }

      JSBridge.send('functionName', {'param': str1}, function(responseData) {

      });

});

callHandler和send的区别在于：callHandler定义的方法都有回调

                                                   send定义的方法没有回调

H5设置function供原生调用

connectWebViewJavascriptBridge(function (JSBridge) {

     JSBridge.registerHandler('functionName', function(response) {

     });

     JSBridge.setDefaultHandler(new DefaultHandler());

});

registerHandler和setDefaultHandler的区别在于：registerHandler需要写出Handler的名称，原生必须通过对应的Handler名称进行调用

                                                                               setDefaultHandler不需要写出Handler的名称，原生可以通过默认Handler进行调用