以下内容若有问题烦请即时告知我予以修改,以免误导更多人。
- toString() && valueOf()
- JSON stringify & parse
- +new Date()
- Array.prototype.slice.call(arguments, 0) 剖析
- JS Bridge建立Native与H5间通信
- Hybrid通信原理
- JS Bridge
有些平时碰到的很零碎的东西我就随便插入到这个章节里了。
1. toString() && valueOf()
toString() 把一个逻辑值转换为字符串,并返回结果。
valueOf() 返回Boolean对象的原始值
源自知乎
这两个方法一般是交由JS去隐式调用,以满足不同的运算情况。
在数值运算里,会优先调用valueOf(),如a+b;
在字符串运算里,会优先调用toString(),如alert(c)。
1 | <script> |
1 | <script> |
2. JSON stringify & parse
json2.js - 引入解决IE7及以下版本JSON未定义问题。
- JSON.stringify(object); 对象 -> 字符串 将对象字符串序列化成标准JSON字符串
eg: {a:1,b:2}
-> "{"a":1,"b":2}"
- JSON.parse(str); 字符串 -> json对象 将字符串序列化成对象
{"name":"wangchloe","age":"22"}
->1
2
3
4
5{
age: "22",
name: "wangchloe",
_proto: Object
}
1 | <a href="https://www.baidu.com/" attr1='13'>baidu.com</a> |
1 | <script> |
3. +new Date()
1 | <script> |
4. Array.prototype.slice.call(arguments, 0) 剖析
将具有length属性的对象转成数组
1 | <script> |
1 | <script> |
5. JS Bridge建立Native与H5间通信
Hybrid通信原理
背景:原生APP开发中有一个webview的组件(Android中是webview,iOS7以下有UIWebview,7以上有WKWebview),这个组件可以加载Html文件。
IOS
- Object-C可直接调用js,只需调用stringByEvaluatingJavaScriptFromString即可,可直接获取js返回值。
- js不可直接调用Object-C,利用 shouldStartLoadWithRequest,需拦截每个url,对指定的schema进行拦截做相应的本地方法。
Android
- Java可直接调用js,但不可直接获取js返回值。
- Java注册addJavascriptInterface 后,js可直接调用Native的接口,并获取Native的返回值。让Java跟Javascript更加亲密
- 通过 shouldOverrideUrlLoading,也还是拦截Web的所有URL请求来达到通信的目的。
基础通信存在以下问题
Android4.2以下,addJavascriptInterface方式有安全漏洞
iOS7以下,js无法调用Native
JS Bridge
- url scheme交互方式是一套现有的成熟方案,可以完美兼容各种版本,不存在上述问题。
通过JSBridge(JS和Native通信机制),H5页面可以调用Native的api,Native也可调用H5页面的方法或者通知H5页面回调。
原理:
(1)初始化创建的一个style.display=none 的iframe,并将iframe.src设置为自有协议,每次js需要与Native通信时,js端主动调用iframe.src即可,Native收到请求通知后,反向调用fetchQueue(可见源码)获取消息内容;若Native需要与js通信,直接调用js,并获取返回值
(2)
IOS
js->Native:js将要发送的消息存放在js端->调用iframe.src,触发通知Native->Native拦截请求,调用js bridge里面的fetchQueue并获取返回的消息内容,处理消息->将需要返回的数据通过直接调用js的方式,让js处理Android
js->Native: 通过 shouldOverrideUrlLoading 携带Js的返回值
(3)Native->js: Native可直接调用Js并获取返回的内容
1 | <script> |
更多内容可以订阅本人微信公众号,一起开启前端小白进阶的世界!
公众号是坚持日更的,不发文的时候推送一些我觉得好用的前端网站或者看到的一些问题的解决方案,也更便于大家交流,就酱。