每天10个前端知识点：杂技

qieangel2013 发布于2019-08-01 16:53 / 2375人阅读

摘要：个人博客已上线，欢迎前去访问评论无媛无故的个人博客以下内容若有问题烦请即时告知我予以修改，以免误导更多人。把一个逻辑值转换为字符串，并返回结果。注册后，可直接调用的接口，并获取的返回值。

个人博客已上线，欢迎前去访问评论！
无媛无故 - wangchloe的个人博客

以下内容若有问题烦请即时告知我予以修改，以免误导更多人。

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)。

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"} ->

{
    age: "22",
    name: "wangchloe",
    _proto: Object
}

baidu.com

3. +new Date()

4. Array.prototype.slice.call(arguments, 0) 剖析

将具有length属性的对象转成数组

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并获取返回的内容

连续五篇讲述Hybrid以及JSBridge解决方案

更多内容可以订阅本人微信公众号(无媛无故)，一起开启前端小白进阶的世界！

公众号不发文的时候推送一些我觉得好用的前端网站或者看到的一些问题的解决方案，也更便于大家交流，就酱。

云服务器 GPU云服务器前端知识前端知识阿里云 html前端知识商标选10个

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50812.html

每天10个前端知识点：杂技

摘要：个人博客已上线，欢迎前去访问评论无媛无故的个人博客以下内容若有问题烦请即时告知我予以修改，以免误导更多人。把一个逻辑值转换为字符串，并返回结果。注册后，可直接调用的接口，并获取的返回值。个人博客已上线，欢迎前去访问评论！无媛无故 - wangchloe的个人博客以下内容若有问题烦请即时告知我予以修改，以免误导更多人。 toString() && valueOf() JSON ...

dongfangyiyu 2019-08-29 12:37 评论0 收藏0
每天10个前端知识点：杂技

摘要：个人博客已上线，欢迎前去访问评论无媛无故的个人博客以下内容若有问题烦请即时告知我予以修改，以免误导更多人。把一个逻辑值转换为字符串，并返回结果。注册后，可直接调用的接口，并获取的返回值。个人博客已上线，欢迎前去访问评论！无媛无故 - wangchloe的个人博客以下内容若有问题烦请即时告知我予以修改，以免误导更多人。 toString() && valueOf() JSON ...

marser 2019-08-20 16:45 评论0 收藏0
基于 Node.js 爬虫的数据 API，搭建一套属于自己的 API 数据

摘要：没想到老师下课点名了，老师李。一哥们答到老师咦，李，你站起来一下这哥们低着脑袋站起来了，老师表格上面写的李是个女的啊这是不知道从哪个角落传来一声讨厌啊，人家就是个女的了啦。 SpliderApi https://github.com/ecitlm/Spl... 基于nodejs 的爬虫 API接口项目,包括前端开发日报、知乎日报、前端top框架排行、妹纸福利、搞笑视频/ 热点新闻资讯 ...

chenjiang3 2019-08-20 17:45 评论0 收藏0
「前端早读君004」函数柯里化（Currying）小实践

摘要：更安全地藏私房钱实际上，每天记录下当前的数据是不灵活的，而函数柯里化则有效地解决了这个问题。而且不定时举办活动赠送书籍哦什么是函数柯里化在计算机科学中，柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。这个技术由 Christopher Strachey 以逻辑学家 Haskell ...

Barry_Ng 2019-08-23 10:53 评论0 收藏0