当前位置:首页 > 高尔夫球资讯 > 正文内容

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

杏彩体育2年前 (2023-02-28)高尔夫球资讯125

个人博客已上线,欢迎前去访问评论!

无媛无故 - 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)。
<script> // 该示例来源于脚本之家 var bbb = { i: 10, toString: function() { console.log(toString); return this.i; }, valueOf: function() { console.log(valueOf); return this.i; } } alert(bbb); // 10 toString alert(+bbb); // 10 valueOf alert( + bbb); // 10 valueOf alert(String(bbb)); // 10 toString alert(Number(bbb)); // 10 valueOf alert(bbb == 10); // true valueOf alert(bbb === 10); // false </script>
<script> console.log({ valueOf: function() { return 20; } } * { valueOf: function() { return 30; } }); // 600 </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"} ->

{ age: "22", name: "wangchloe", _proto: Object }
<a href="https://www.baidu.com/" attr1=13>baidu.com</a>
<script> var oA = document.querySelector(a); console.log(oA.getAttribute(attr1)); // 13 oA.setAttribute(attr1, 14); var num = oA.getAttribute(attr1); console.log(oA.getAttribute(attr1)); // 14 console.log(typeof number); // string 直接设置自定义属性只能得到string类型 oA.setAttribute(attr1, JSON.stringify({name: 14})); var num2 = oA.getAttribute(attr1); console.log(num2); // {"name": "14"} console.log(JSON.parse(num2)); // Object {name: "14"} // name: "14" // -> _proto_: Object console.log(JSON.parse(num2).name); // 14 console.log(typeof JSON.parse(num2).name); // number JSON转化得到了真正类型 </script>

3. +new Date()

<script> s = new Date().toString(); // "Wed May 17 2017 11:00:16 GMT+0800 (中国标准时间)" t = (+new Date()).toString(); // "1494990039861" // +new Date(); 等同于 new Date().getTime(); 简略写法,得到毫秒 </script>

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

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

<script> // array.js slice的内部实现 function slice(start, end) { var len = ToUint32(this.length), result = []; for (var i = start; i < end; i++) { result.push(this[i]); } return result; } </script>
<script> // 传入arguments类数组,调用Array.prototype.slice原型方法 // 并用call()方法,将作用域限定在arguments中 // 这里Array.prototype就可以理解为arguments // 参数0为slice()方法的第一个参数,即开始位置索引,返回整个数组。 Array.prototype.slice.call(arguments, 0); </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页面回调。

JSBridge的核心原理

原理:

(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并获取返回的内容
<script> function bridgeApp(protocol) { var iframe = document.createElement("iframe"); var iframeStyle = document.createAttribute("style"); var iframeSrc = document.createAttribute("src"); iframeStyle.nodeValue = "display:none;width:0;height:0;"; iframeSrc.nodeValue = protocol; iframe.setAttributeNode(iframeStyle); iframe.setAttributeNode(iframeSrc); document.body.appendChild(iframe); setTimeout(function() { document.body.removeChild(iframe); }, 250); } </script>
连续五篇讲述Hybrid以及JSBridge解决方案

更多内容可以订阅本人微信公众号,一起开启前端小白进阶的世界!

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

微信公众号:无媛无故

扫描二维码推送至手机访问。

版权声明:本文由杏彩体育-专注全球体育资讯发布,如需转载请注明出处。

本文链接:http://www.redirected.net/?id=12484

分享给朋友:

“每天10个前端知识点:杂技” 的相关文章

直播+打高尔夫球!库里回归生活,无缘季后赛他比球迷看得开

直播+打高尔夫球!库里回归生活,无缘季后赛他比球迷看得开

众所周知,勇士不仅输给了湖人,而且还是输给了灰熊,彻底的无缘了季后赛,很多球迷看到库里呆呆的坐在场边失落的样子非常心疼。都为他感到惋惜。认为他在这个夏天都不会有好心情,至少最近会很沮丧。但事实上,他比球迷看得开。...

用高尔夫球精神做慈善事业

用高尔夫球精神做慈善事业

曹德旺是福耀玻璃集团董事长,福建高尔夫球协会会长,被称为玻璃大王。 打高尔夫球是曹德旺一生持之以恒的事业,他的晨练就是清晨5:30一个人在球场打球...

1993年关之琳自愿被塞高尔夫球真相网友豪放起来不要命

1993年关之琳自愿被塞高尔夫球真相网友豪放起来不要命

娱乐圈可以说是比较乱的一个圈子了,里面发生的事情有些真的是颠覆了人的三观啊,明星之间的各种绯闻也是让很多的网友感到不可思议,明星走红是需要依赖一些的外在因素的,所以在走红上面很多的明星也是花费了心思,有的明星是为了走红做出一些的事情,那么还有些明星为了金钱也是做出了不可...

高尔夫尊练习场北京北投店盛大启航

2022年9月30日,北京首家高尔夫尊室内高尔夫练习场重磅亮相冬奥村—北投购物公园,GOLFZON RANGE高尔夫尊练习场北京北投店盛大开业。高尔夫尊(中国)会长朴英祚、高尔夫尊(中国)董事长、朴星峰、北京源晨传媒有限公司董事长孙镇锡、北京诺思兰德生物技术股份有限公司董事许成日、北京田世...

高尔夫球车多少钱一台-约朋友全程步行就不了[五菱]

高尔夫球车多少钱一台-约朋友全程步行就不了[五菱]

绿茵绵延,一眼望不尽的高尔夫球场,来一场酣畅淋漓的球赛。享受当下,一台高尔夫球车可以增添不少乐趣。五菱高尔夫球车,层层把关,专业设计。高尔夫球车多少钱一台?更长寿命,超强续航,更容易成为见证快乐的老朋友。 高尔夫球车可以做哪些造型:https://www.wulinggw.com/...

女王的新坐骑——豪华高尔夫球车,完美的配置可满足各种出行需求

女王的新坐骑——豪华高尔夫球车,完美的配置可满足各种出行需求

《太阳报》于当地时间26号报道,英国女王收到一辆价值6.2万英镑(约51.8万人民币)的高尔夫球车礼物,这辆车将用于帮助女王日常出行。车有四轮,配备顶棚、冰箱和电视屏幕。 女王今年95岁了,两个星期前她就收到了这份礼物,她已经坐着这辆小车在温莎堡的花园里兜过风了。...