简析js bridge原理

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

1.开发模式介绍

最初的开发模式是android,ios分别开发两套app，比如腾讯视频，Android手机使用android,ios使用object-c的语言。

原生开发优点：

1.可访问手机所有功能（如GPS、摄像头等）、可实现功能齐全；

2.运行速度快、性能高，绝佳的用户体验；

原生开发缺点：

1.开发时间长，快则3个月左右完成，慢则五个月左右；

2.制作费用高昂，成本较高；

3.获得新版本时需重新下载应用更新。

通过上面的介绍可以看出原生开发，虽然性能很好，但是有众多的缺点。灵活性很差，谈到灵活性H5开发优点有以下。

H5开发优点：

1.支持设备范围广，可以跨平台，编写的代码可以同时在Android、IOS、Windows上运行；

2.开发成本低、周期短；

3.无内容限制；

H5的缺点也很明显，性能很差，不能调用原生的摄像机，声音等等，通过两项开发模式的结合，对性能要求很高的使用原生模式，对于活动等灵活的页面，使用H5的模式。

混合开发优点：

1、开发效率高，节约时间。同一套代码Android和IOS基本上都可使用； 2、更新和部署比较方便，每次升级版本只需要在服务器端升级即可，不再需要上传到App Store进行审核； 3、代码维护方便、版本更新快，节省产品成本；

2. js bridge的出现

对于混合式开发中，js想要调用原生app的一些api，比如播放，gps,摄像头等，没法直接调用，因为H5页面是原生app使用webview作为一个浏览器容器来承载H5页面的活动，需要一些特定的方式来调用js bridge就是这种，比如微信jssdk,飞书sdk等等

3.js bridge的实现模式

• 1.全局API

  相当于js bridge在全局window上面挂载api，然后H5页面直接window调用功能

• 2.URL scheme

  对于全局api这种适用于可以提前设置的，同步的，比如获取客户端版本，获取客户端的各方面信息。倘若要异步加载的内容这个时候就无法使用全局api的模式了

  使用iframe来模拟js bridge

      const sdk = {
            invoke(url, data = {}, onSuccess, onError) {
                const iframe = document.createElement('iframe')
                iframe.style.visibility = 'hidden'
                document.body.appendChild(iframe)
                iframe.onload = () => {
                    const content = iframe1.contentWindow.document.body.innerHTML
                    onSuccess(JSON.parse(content))
                    iframe.remove()
                }
                iframe.onerror = () => {
                    onError()
                    iframe.remove()
                }
                iframe.src = `my-app-name://${url}?data=${JSON.stringify(data)}`
            },
            fn1(data, onSuccess, onError) {
                this.invoke('api/fn1', data, onSuccess, onError)
            },
            fn2(data, onSuccess, onError) {
                this.invoke('api/fn2', data, onSuccess, onError)
            },
            fn3(data, onSuccess, onError) {
                this.invoke('api/fn3', data, onSuccess, onError)
            },
        }