在实际项目之中，经常会遇到app之中嵌入网页的情况（Hybrid），就需要web网页与原生app之间交互，比如获取当前用户信息等。一种简单的方式就是通过url参数来搞定，但是这种方式异常死板，所以有了jsbridge。
本文章旨在记录WebViewJavascriptBridge的实现，如有错误，还请指正！如有需要了解jsbridge原理，请google。

需求：

/*** 函数描述：js调用webview事件** jsBridge.callHandler(method, data, callBack(response));* @param method {string} 方法名* @param data {Object} 参数* @return {Object} 回调*//*** 函数描述：webView调用JS事件** jsBridge.registerHandler(method, callBack(response));* @param method {string} 方法名* @return {Object} 回调*/

const JsBridge = {init: function (callback) {const u = navigator.userAgent;const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //判断手机系统if (!isiOS) {  //iosif (window.WebViewJavascriptBridge) {callback(WebViewJavascriptBridge)} else {//    注册事件，WebViewJavascriptBridge加载完成时调用document.addEventListener('WebViewJavascriptBridgeReady',function () {callback(WebViewJavascriptBridge)},false);}} else { //Android//    如果有WebViewJavascriptBridge，则直接返回callbackif (window.WebViewJavascriptBridge) {return callback(WebViewJavascriptBridge);}//    如果有WVJBCallbacks，则向WVJBCallbacks中注入事件if (window.WVJBCallbacks) {return window.WVJBCallbacks.push(callback);}//    否则创建WVJBCallbackswindow.WVJBCallbacks = [callback];const WVJBIframe = document.createElement('iframe');WVJBIframe.style.display = 'none';WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';document.documentElement.appendChild(WVJBIframe);setTimeout(function () {document.documentElement.removeChild(WVJBIframe)}, 0)}},first: function () {const u = navigator.userAgent;const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);if (!isiOS) {const _this = this;_this.init(function (bridge) {bridge.init(function (message, responseCallback) {responseCallback(data);})})}},registerHandler: function (name, fun) {const _this = this;_this.init(function (bridge) {bridge.registerHandler(name, fun);})},callHandler: function (name, data, fun) {const _this = this;_this.init(function (bridge) {bridge.callHandler(name, data, fun);})}
}// 初始化
JsBridge.first();