JS 代理模式实践

背景

最近在工作中遇到了需要对Module中导出的方法统一做预处理,在特殊场景下需要增加阻断执行并提示开发者不应该在该场景中使用该方法的提示。

思考

这里一开始的想法其实是在每个方法的入口分别增加一个阻断的判断逻辑:

如果只有一两个方法其实这么做倒还好,但现在的问题是,我手上有30多个方法都要加这个阻断逻辑,手搓阻断逻辑实在是太傻逼了,这么加不知道得加到猴年马月去。

后面我又看到Module的export default,想着能不能在这里做一下文章。

研究了一下之后,其实还是可以搞的,大致思路如下:

在ES6中,javascript引入了代理函数,从而实现对象基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)[1]。通过利用其拦截的特性,我们可以借此在module上实现代理模式。在外部函数获取method的时候做一些特殊逻辑。

实现

通过该方法,我们可以优雅的在module层面对method进行统一的前置操作(比如数据上报、逻辑阻断等操作),提升开发效率的同时还能使得代码更加简洁易维护。

兼容性

通过查阅caniuse,可以说这个接口已经100%兼容可用了。另外由于ES5的特殊性,Proxy是没有完整支持的polyfill的,因此如果碰到实在不兼容的用户,就积极引导用户去升级机器吧,没必要去钻这个牛角尖。

Android外网基本上只有电视盒子还是在4.4.4,手机几乎找不到4.0的机器,就算有看着0.08%的用户占比感觉可以直接忽略了。

[日常碎碎念] 周末打卡COA

缘起🏠

师弟这个月开始在深圳实习了,刚好他也可以喝酒,终于有酒搭子,能陪我去香港打卡心心念念的COA了。

特色🌺

COA是一家主打龙舌兰作为基酒的酒吧,正如其特点,COA的名字其实就是意指收割龙舌兰所用的类似于铲子的农具,店里各处都充斥着龙舌兰的装饰,加上墨西哥风格的BGM,特别有喝酒的氛围。

奖项🏆

#1 Asia’s 50 Best Bars 2022 by 50 best bars

#1 Asia’s 50 Best Bars 2021 by 50 best bars

#7 The World’s 50 Best Bars 2021 by 50 best bars

#8 The World’s 50 Best Bars (Highest Climber) 2020 by 50 best bars

酒水🍷

这次去主要喝了两杯酒:

1. Three Salt Magarita

来到主打龙舌兰作基酒的酒吧,怎么能够不喝Magarita呢?COA比较有趣的其实是盐的部分,这里使用了三种盐:海盐、虫盐和蚯蚓盐,海盐就是经典风味,虫盐和蚯蚓盐主要的区别是有一点点的烟熏味,还挺好喝的,主打的就是一个猎奇。

2. Smacked Cucumber Salad

顾名思义,就是通过酒水在口腔中复刻了一道拍黄瓜。入口先是酸,随后是黄瓜的清香,接着是点睛之笔的麻油味与香菜味,最后才是Tequila的酒味,酸咸辣香,四种味道融合的非常棒,特别惊喜的一款特调。

零食🥔

附赠的零食是一碗品客的洋葱奶酪薯片,特别酥脆,搭配Smacked Cucumber Salad回味无穷。

服务💁

无论是Bartender还是Waiter都支持普粤英三种语言的交流,扬手即响应,不会因为你只讲普通话就给臭脸你看,秒杀外面一众香港餐厅。酒水出品飞快,即使只有2个bartender,我们的酒水在10分钟内就能给到👍。

不过最好是懂英文去,不然连最基础的特调酒单可能都会看的一头雾水。(搞不懂为啥不整一个中文备注,全英文看着着实有点费力)我去的那天外场有个应该是土耳其裔的Waiter只会说英文,这种时候如果不会英文的话就只能找其他服务员了。

价格💵

120HKD/杯+10%服务费

说实话不便宜,但在香港港岛这边其实就还好,不算很离谱,算是物有所值。

总结

如果不用排队或者第二轮就能进去(排队1小时内),我还是很愿意经常去的,毕竟真的很好喝,但超过一个小时,感觉就完全没必要了,换别的喝喝其实也不错。

如何判断一个JS方法的兼容性?

背景

由于业务的原因,我们的H5页面必须兼容一些比较老的webview版本,因此在开发中难免会遇到不支持的JS语法,因此在这里总结了一个切实可行的方法来提高自己确认接口兼容性的效率。

方法

通过caniuse.com查询方法兼容性

例子

假如需要使用Proxy方法来统一代理所有的接口,但是我不确定系统兼容性,怎么办?

1.访问caniuse.com

2.查询对应的方法名

3.查询iOS的兼容性

4.查询Android的兼容性

5.如果查询到的最低支持版本在需要的版本内则可以使用,另外在使用前最好在方法外套一层try...catch避免出现不支持的意外情况

WebAudio使用小结🧭

背景

最近在负责游戏项目的开发,不免需要接触到音频相关能力的开发。在移动端实践后才了解到,iOS下的AudioDOM并没有被完全实现,比如iOS下就无法直接通过JS控制AudioDOM的音量大小,只能控制其是否被静音,另外静音拨杆的优先级比音量键的优先级要高。如果用户通过拨杆打开了静音模式,AudioDOM默认是没办法控制音量的。

尝试解决问题

由于需要实现通用能力中规划的音频的响度控制,搜索一圈后发现可以引入WebAudio来解决问题。(https://stackoverflow.com/questions/27296391/is-there-any-possibility-to-control-html5-audio-volume-on-ios

改造前音频架构

初始化阶段的时候,通用组件会检查DOM树是否存在AudioDOM,如果不存在就会尝试创建一个新的AudioDOM并挂载到DOM树上。状态操作也是直接对DOM树上的AudioDOM操作。

改造后音频架构

WebAudio支持多种方式创建音频输入,即可以直接通过AudioBuffer获得音频输入,也可以通过createMediaElementSource从已有的AudioDOM上创建音频输入。此处我使用的是后者,通过在AudioDOM与扬声器之间创建了一个“代理层”,将音频输出通过GainNode(增益器节点)处理了一下。通过GainNode我们可以设置音频的响度,间接的实现了iOS的音量控制。

错误上报

不幸的是,测试的Testcase还不够完善,业务被发布后,错误量激增,告警拉满😂。

经过梳理后主要是以下三种问题:

  1. Failed to construct ‘AudioContext’: The number of hardware contexts provided (6) is greater than or equal to the maximum bound (6).
  2. The provided value is non-finite
  3. undefined is not a constructor (evaluating ‘new(window.AudioContext||window.webkitAudioContext)’)

1.AudioContext只能创建6个实例

Webview版本小于66中只能创建小于等于6个的AudioContext,会导致页面无法继续播放音频。(https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)

解决办法:

1. 增加全局AudioContext池,通过一个实例来管理最大音频对象数量。

2. 不使用的AudioContext需要被及时释放,避免占用音频对象资源。

2.音频节点提供的不是有限值

在某些环境中,JS的除运算计算出来的值不是一个有限值,直接赋值给WebAudio的节点会报该错误。

解决办法:

赋值前通过isFinite函数检查是否是有限值,如果不是则使用一个固定的值作为兜底即可。

3.window.AudioContext不存在

按道理来说AudioContext在执行JS代码之前就应该被挂载到window上了。但遗憾的是,iOS15之后的WKWebview会经常出现,执行JS代码的时候AudioContext仍然未被挂载到window上,导致执行构造函数的时候报错。

解决办法:

捕获错误并且定时重试,一般第一次失败的2-3秒后就能创建成功了。

Model Y or 宝马Z4?

上周中午吃完饭在公司附近散步,偶然瞥见了一台敞篷的MX-5,感觉真的好Sexy好好看,搜索了一下价格貌似是40上下。主要戳中我的内心的是敞篷的概念,我也好想要敞篷汽车呀。但年初的时候其实我还许下愿望希望可以买一台Model Y的,算了一下年底拿下其实是最稳妥的时候了。我现在其实最纠结的点是,我是不是应该继续存钱买个小敞篷呢,又或是继续践行目标买个Model Y就算了呢?真的好纠结。

本来说是MX-5的,不过搜索了一圈,MX5的空间对于身高1米9的我来说貌似不太友好,回头如果路过宝马的4S店去看看Z4,如果合适就拿下。

周末去家附近的宝马4S店看了一下,没现车要预约试驾才有XD,只好下次再看了。毕竟现在我还做不到直接掏出这么多钱,估计只能作为25岁的生日礼物了(不过一想到自己能买到喜欢的东西就好期待啊)

这两天其实我再思考了一下买个25i就够了。另外买个车其实并不能让我工作日快乐起来,最多只能让我的周末更快乐。工作日真的好枯燥,每天就是上班+备战考研,啥时候会是个尽头呢?

上周末去家附近的4S店试乘了一下,对于190cm的我来说,空间绰绰有余,并不会感觉很拥挤,大约就是modelY小一点点,各个方面都很棒。(特别是敞篷的部分太太太帅了)另外也问了深圳的落地价,算了一下手上的存款+股票+现金刚好明年就可以下订了,最后就决定是Z4了。我这次看上的是新出的紫配白,真的是太Sexy了,不过就是要等大约5个月后才能到货。明年10月下单,刚好25年3月到,趁着春天开一下,爽啦。

一锤定音了,家人也同意了我的想法,只要是花自己钱的前提下就可以买了,明年年底拿下是肯定可以的了LOL。

最近上汽名爵准备发布cyberster电动Roaster感觉这个也可以考虑一下,挺帅的。(关键是不用燃油指标,就很爽)。

2024年1月15日,最近在B站上搜了一下,MX5坐不下190身高的我,太小了,果断放弃。目前就是在Model3、Cyberster和Z4之间抉择了。

[日常碎碎念] 香港一日游 🇭🇰

Intro

最近《疾速追杀4》上画了,我不仅是1-3的铁粉,由因为我在深圳上班。因此火速规划了一番下香港的行程。其实已经是上周六的事情了,但工作强度实在是太高了,每天都加班到23点才下班,一直没时间来写一下博文,这周才放松下来有空来写一下。这篇“游记”也会有点碎碎念的感觉,基本都是按照时间顺序来写的,但是会非常的散,没啥明确的前因后果,大多是突发奇想就去了。

通关

不同于以往是从广州前往香港,这次我是从深圳出发的,并且又是一个人,因此可以选择福田口岸过关,不用去罗湖过关。可能由于恢复通关的时间还不是特别久,所以福田口岸过关特别快,拿着电子证,从深圳口岸到香港口岸总耗时5分钟,除了过关前填写过关用的健康码花了一点时间其他都还好。

额外补充一点,这个是4月1日的时候我去续签通行证的时候才知道的。原来广东省内户籍的居民是不需要办理居住证就可以直接在深圳续签通行证的。我家附近最近的就是南山公安分局了(从南头古城地铁站出来,过天桥就是了),直接去公安局隔壁的自助办证机器,就能跟在广州一样,直接扫码续签通行证,贼方便。下周感觉可以再去一趟香港玩了,深圳真的太无趣了。

流量

其实现在去香港玩不用再单独上某宝买境外流量或者流量卡,中国联通等运营商一识别到你进香港后就会自动给你发短信,可以自动开通25元一天的流量套餐,前1G是4G高速流量之后就是384kb的低速无限流量。如果不看视频纯看微信、GoogleMaps、看新闻的话肯定是绰绰有余的,毕竟难得下香港是为了来玩的不是为了来看手机的,其实还是够用的。

Apple Wallet 八达通

如果恰好用的是iPhone的话可以考虑在Applewallet里面开一个八达通,特别方便。但充卡记得不要在旅客八达通里面冲,八达通是1:0.92,现金是1:0.87,在旅客八达通里开通到Wallet里面后,去7-11之类的便利店用现金充值就好了,在弱网条件下的体验比支付宝好。购物的时候虽然拍卡很方便,但其实有很多商家都已经支持支付宝的使用了,直接跟店家说用支付宝就好了,汇率跟刷银联一样,大额基本可以用支付宝代替银联。VISA由于要用美元结算会比较亏,建议不要用。

香港城市大学

由于订了11:55又一城的电影票,于是一过关就获取跑到了又一城中闲逛。香港城市大学居然是紧挨着又一城购物中心的,感觉来这里读书好爽啊,学校附近就有一个这么大的mall,可惜自己的学业不争气不然来这里读大学或许也挺好的。

敏华冰室

三年没来香港终于与时俱进也用上了扫码点单了,不过是基于AzureSite做的。感觉跟小程序的点单还是有点差距,用起来感觉特别割裂,比如点单扫码得先用手机拍照App扫码跳转到浏览器里点单,然后结账的时候又得用一个二维码让收银员扫码后再用八达通或者信用卡支付,感觉纯纯多此一举,要不就全电子化,要不就全人工嘛。现在效率没见提升,体验还变差了。

热奶茶+吐司鸡扒,那个茄汁黄豆居然是冷的,感觉好怪😂,吃起来特别不习惯,倒是那个厚吐司烤的刚刚好,涂上黄油特别香。热奶茶也是特别香特别好喝,完美的早餐。另外我去的那一天还以为敏华只有香港有,谁知道周日去万象天地吃饭,负一层就有敏华的甄选店,得想吃正宗冰室也不一定非得下香港了,深圳也有。

疾速追杀4

人生第一步在电影院看的三级片

位于又一城的MCL设施还是比较新的,影院大厅也足够宽敞,不会感觉很压抑。其中比较特别的两点是:卖零食的店家居然是在影厅门口,而不是影院门口,也就是检票后才卖小吃,有点特别。这里卖零食的有个不好的地方就是不让用支付宝,要不就是八达通要不就是现金或者信用卡,有点小麻烦。还有一个我觉得比较特别的地方是影院居然会卖酒,不过貌似新修订的法案又不能售卖让人会喝醉的酒水,不知道Bar上面的酒头打出来的是不是无酒精啤酒😂。

买了个小爆米花吃吃,因为电影太好看了,其实到最后也没吃完,还有这个40块港币还挺贵的
还我狗命4

作为一个系列爆米花大片来看,这绝对是最近5年内最值得进电影院看的欧美动作大片,不管是动作故事人物配乐各方面都是上乘的。虽然中间有些场景一波波刷小怪,防弹西装防弹性能太夸张,其他部分我觉得都是可以接受的。还有就是香港的字幕有些关键词翻译的怪怪的感觉有点拉。8/10分的佳作,如果追过前面三部的话,第四部是不会让你失望的。强烈安利下香港在电影院里面看,体验特别棒。

Blue Bottle 蓝瓶咖啡

简洁明了的LOGO

久仰蓝瓶咖啡的大名,但是由于大陆地区只在上海开设了分店,加之疫情的缘故,一直没机会来打卡。看完电影后其实也不是特别饿,就想着去附近找个下午茶喝一下。打开小红书,第一个安利文就是蓝瓶咖啡,我才第一次支持原来香港早就有蓝瓶咖啡的分店了,遂火速前往。

独栋三层都是咖啡店,在寸土寸金的香港来说,店主真有钱

由于周六一整天都在下雨,加上打卡的热潮已经过去了,等待的顾客并不多,只是介于满人与不满之间。可能是因为香港是国际大都市,外国友人较多,能来蓝瓶子喝咖啡的市民教育水平也比较高,整个饮料单都是英文的😂,对于中国区而言,补个中文备注在隔壁很困难么,感觉服务不够完善。

Cold brew 盛惠50港币

入口清爽柔顺,符合冷萃咖啡的特性,还带有一些水果的香气,对于一杯50多的咖啡还可以,但说实话并没有被惊艳到,至少没我想象的那么惊艳,只能说是设计比较好看了。如果单论咖啡,由于最近几年大陆咖啡市场的疯狂内卷,其实已经有很多连锁的咖啡店都已经可以做出这种风味的咖啡了,Manner、M Stand随便一家价格都能比BlueBottle便宜但又有近似的出品,更不用说那些独立的咖啡店了,成功拔草。

BakeHouse蛋挞

大排长龙

这家蛋挞也是在小红书上看到的,可能是由于多方面的原因,我去的时候居然没啥人排队,很轻松的就买到了,在我买完不久就开始大排长龙了,只能说当天实在是运气太好了😄。可惜店内的座位都被坐满了,只能站在门外讲究的吃完,解决战斗。

蛋液吃起来近似于肯德基的味道,酥皮比较脆,类似于牛角包🥐的感觉,而且比较薄,这个类似于蛋液包住蛋挞皮。配上冷萃体验真的挺棒的,好吃,如果顺路的话确实可以过来买一个,但是不顺路的话就算了吧,去KFC买个葡挞,味道是一样的,价格甚至比BakeHouse要便宜2块人民币。

剖面

叮叮车🚎

吃完蛋挞想着时间还早就想去海边走一下,于是一直向北走着,突然发现马路上驰骋的有轨电车好有趣,拿手机拍了几张照片,突然就萌生了搭有轨电车的想法💡。因此在此在小红书上搜索指南,没想到附近就有电车的站台,实在是太爽了。(PS:小红书太好用了,如果只是用来查询指南的话,小红书就是一个实用利器)

站台
路线图

叮叮车的路线其实就是沿着北面的港岛东西走向的游览线路,全程票价三元港币,无论在哪个站上车都是三元,如果不赶时间,说实话有轨电车比抢铁便宜多了去了,从九龙塘到金钟收了我12.5港币,这也太贵了吧!!

叮叮车一层其实超级矮,我身高一米九,得伏下身子才能上车,二层则稍微宽感一点。上车的时候有个阿叔准备下车,刚好蹭了一个前排的问题,真的爽啊,好久都没这么顺心过了。

前几班的叮叮车都是要走完全程的,因此超级多人,我只是想体验一下不用坐太远,就选了到跑马地的车,在艰尼道西就下车步行去铜锣湾买药+搭地铁了。

铁板烧

这一个小节不想多说啥,花了1000多港币吃了个贼拉的铁板烧,不会有下次了,除了拍照好看,味道实在是对不住1000这个价格,吃麦当劳都比这个好吃,我都不知道大众点评尖沙咀铁板烧第一名是怎么算出来的?怕不是尖沙咀就只有他一家铁板烧了吧。

料理台
餐厅环境还不错
胡麻豆腐、牛蒡丝、柴鱼高汤煮茄子
无花果沙拉,白色的是鸡蛋白碎碎
宫城生蚝。味道鲜美可口
刺身三点(分量少的可怜,生鱼片像是狗啃下来一样😂)
食材展示
南非黑金鲍+昆布高汤勾芡,全餐印象最深刻最好吃的一道菜,调味很不错
帝王虎虾,烤老了,明明上一道还很出色的,这一道就完全崩坏了,味道也很单一,不好吃
鹿儿岛黑毛猪配日本野菜和炸蒜片,烤老了,调味就是烧汁烤猪排,表现很一般

虾和猪肉的表现真的让我蚌埠住了,做的也太难吃了,差评!!

茶碗蒸,但是味道跟鲍鱼的勾芡味道冲突了,感觉不如不要这一层勾芡
梅子酱樱花虾炒饭配面豉汤,梅子酱的酸味很好的激发了樱花虾的鲜味很棒
最后的点睛之笔,灌上柴鱼高汤和一点山葵,早就一碗特别鲜美的茶泡饭
平平无奇的巧克力雪糕

说实话配角都做的很出色,就是主菜做的太拉,导致我根本没有想来下一次的欲望。因为我觉得再这么高级的餐厅这些错误就不应该犯,明明我是第一个到店的顾客了,都不存在厨师忙不过来的情景出现,为啥还能把主菜烤老,我感觉是不可原谅的。

尾声

吃完饭就坐地铁回深圳了,回到家里面才刚好22点,感觉挺震惊的,放到工作日,我怕是还没下班吧😭,上班好苦,我也好想一夜暴富不用上班啊。