一、dhbridge.js设计

1. dhbridge原理
dhbridge设计的native和js之间的消息传递采用全异步的处理方式，内部主要两个核心的方法负责传递和接收消息。

js to native

native to js

dhbridge流程

2. dhbridge通信格式
不管是js to native还是native to js，我们都统一使用json作为消息的格式
js to native消息格式

{
  "callbackId":"bridge生成的唯一字符串",
  "plugin":"插件名称",
  "sdkVersion":"dhsdk.js的版本",
  "data":{内容由dhsdk传入}
}

native to js消息格式

{
  "callbackId":"bridge生成的唯一字符串",
  "status":0调用失败，1调用成功，
  "complete":默认为1 不需要连续回调，0代表需要连续回调，
  "errorMessage":"失败原因"，
  "data":{内容由native传入}
}

二、dhsdk.js设计

1.为何设计dhsdk.js

1. 抹平dhbridge的平台实现差异
2. 对齐端能力，内部消化版本差异
3. sdk封装后的代码更加符合前端习惯
4. 权限控制、鉴权、对外开放，实现生态建设

如果做过微信页面开发的，应该都知道wx.js，这就是微信的JSSDK，在微信内需要调用微信的端能力就需要引入这个js。dhsdk.js整体借鉴wx.js。

dhsdk的设计包括两部分：

1. 随着每个NA客户端版本内置的js，称为：dhbridge.js，他的主要作用是封装dhbridge逻辑，通过随版更新实现减少端能力的版本分裂，降低整个sdk的代码复杂性。dhbridge.js是一段js代码，当客户端加载一个页面的时候，由客户端在适当的时机注入到webview内执行，执行后的代码就会有给webview增加js方法，例如微信的_WeixinJSBridge，类比chrome开发插件当中的content_scripts，可以在document_start 、document_end等时机进行执行。

   
   
   android端注入

2. 云端JS，即实际暴漏给开发者使用的js，称为：dhsdk.js，这个是真正开发者使用的sdk文件，通过script外链引入，例如wx.js，这个js文件通过和dhbridge.js进行交换，完成端能力的调用、鉴权和客户端事件监听等操作。

<script src="./dhsdk.js"> </script>

dhbridge.js 和 dhsdk.js工作机制

3. api设计
   dhsdk.method(Object object)
   对象参数设计参考wx.js

   
   
   api调用

4.内部逻辑封装
h5页面只需要传需要的参数，dhsdk内部做回调函数的处理和方法名与指定native模块的匹配。
_dhbridge.invoke()的message要处理成dhbridge指定的json格式。

dhsdk内部部分逻辑

三、总结

到此为止，dhbird涉及前端部分dhsdk和jsbridge就完成了。