注册
环信即时通讯云

环信即时通讯云

单聊、群聊、聊天室...
环信开发文档

环信开发文档

Demo体验

Demo体验

场景Demo,开箱即用
RTE开发者社区

RTE开发者社区

汇聚音视频领域技术干货,分享行业资讯
技术讨论区

技术讨论区

技术交流、答疑
资源下载

资源下载

收集了海量宝藏开发资源
iOS Library

iOS Library

不需要辛辛苦苦的去找轮子, 这里都有
Android Library

Android Library

不需要辛辛苦苦的去找轮子, 这里都有

📷纯前端也可以实现「用户无感知录屏」?

web
前言 要在 JavaScript 中实现屏幕录制,可以使用 navigator.mediaDevices.getDisplayMedia() 方法来获取屏幕的媒体流。然后,可使用 MediaRecorder 对象将媒体流录制为视频文件。 但该方法会在浏览器弹出...
继续阅读 »

前言


要在 JavaScript 中实现屏幕录制,可以使用 navigator.mediaDevices.getDisplayMedia() 方法来获取屏幕的媒体流。然后,可使用 MediaRecorder 对象将媒体流录制为视频文件。


但该方法会在浏览器弹出一个授权窗口,让用户选择要分享的内容,这不可实现“无感知”。


image.png


如果真正做到无感知,那我们就不能借助浏览器或者系统系统的能力了。我们能做的就只能是通过js去操作了。


要在页面内直接录制视频似乎并不容易,没有现成的开源库可以使用,也没有很好的想法。


那我们换一个思路,视频是由帧组成的,我们是否可以不断的截图,然后组合成一段视频?好像是可以的。


下载.jpeg


效果


mp4.gif


页面


先写一个简单的页面:


<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Canvas视频录制</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>
<main>
<div class="buttons">
<button class="start-btn">开始录制</button>
<button class="pause-btn">暂停录制</button>
<button class="resume-btn">继续录制</button>
<button class="stop-btn">结束录制</button>
</div>
<div id="box">
<section class="content">
<h2>TODO LIST</h2>
<div class="background-div">
<button class="background-btn">切换背景颜色</button>
</div>
<div id="todo-form">
<input type="text" class="input-field" placeholder="输入待办事项">
<button type="submit" class="submit-btn">提交</button>
</div>
<div class="list"></div>
</section>
</div>
<img src="" alt="" class="hidden">
</main>

<script src="<https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js>" defer></script>
<script src="canvas.js" defer></script>
</body>

</html>

截图


实现网页的截图操作,最常用的库是 html2canvas用,它可以将网页中的 HTML 元素转换为 Canvas 元素,并将其导出为图像文件。在浏览器中捕获整个页面或特定区域的截图,包括 CSS 样式和渲染效果。


const canvasFunction = () => {
html2canvas(box).then(canvas => {
const imgStr = canvas.toDataURL("image/png");
img.src = imgStr;
img.onload = function () {
ctx.drawImage(img, 0, 0, w, h);
}
});
}

合成视频


这里我们要使用到一个 API MediaRecorder ,用于在浏览器中进行音频和视频的录制。它提供了一种简单的方式来捕获来自麦克风、摄像头或屏幕的媒体数据,并将其保存为文件或进行实时流传输。


它有以下几个常用的方法:



  • isTypeSupported() 返回一个 Boolean 值,来表示设置的 MIME type 是否被当前用户的设备支持。

  • start() 开始录制媒体,这个方法调用时可以通过给 timeslice 参数设置一个毫秒值,如果设置这个毫秒值,那么录制的媒体会按照你设置的值进行分割成一个个单独的区块,而不是以默认的方式录制一个非常大的整块内容。

  • pause() 暂停媒体录制。

  • resume() 继续录制之前被暂停的录制动作。

  • stop() 停止录制。同时触发 dataavailable 事件,返回一个存储 Blob 内容的录制数据。之后不再记录。


首先创建一个 canvas 元素,用来保存 html2canvas 的截图,然后通过 captureStream 方法实时截取媒体流。


const w = boxBoundingClientRect.width;
const h = boxBoundingClientRect.height;
const canvas = document.createElement('canvas');
canvas.setAttribute('id', 'canvas');
canvas.setAttribute('width', w);
canvas.setAttribute('height', h);
canvas.style.display = 'none';
box.appendChild(canvas);

const img = document.querySelector('img');
const ctx = canvas.getContext("2d");
const allChunks = [];
const stream = canvas.captureStream(60); // 60 FPS recording 1秒60帧

通过 canvas 的流来创建一个 MediaRecorder 实例,并在 ondataavailable 事件中保存视频信息:


const recorder = new MediaRecorder(stream, {
mimeType: 'video/webm;codecs=vp9'
});

recorder.ondataavailable = (e) => {
allChunks.push(e.data);
};

最后,在停止录制时将帧信息创建 blob 并插入到页面上:


recorder.stop();
const fullBlob = new Blob(allChunks);
const videoUrl = window.URL.createObjectURL(fullBlob);

const video = document.createElement('video');
video.controls = true;
video.src = videoUrl;
video.muted = true;
video.autoplay = true;
document.body.appendChild(video);

或者可以将视频下载


recorder.stop();
const fullBlob = new Blob(allChunks);
const videoUrl = window.URL.createObjectURL(fullBlob);

let link = document.createElement('a');
link.style.display = 'none';
let fullBlob = new Blob(allChunks);
let downloadUrl = window.URL.createObjectURL(fullBlob);
link.href = downloadUrl;
link.download = 'canvas-video.mp4';
document.body.appendChild(link);
link.click();
link.remove();

这里,为了节省资源,只在点击按钮、输入等事件发生时才调用 html2canvas 截图 DOM。


如果实时记录屏也可以使用 requestAnimationFrame


最后


虽然实现了无感知录制屏幕,但也仅限于网页内,没有办法录制网页以外的部分。


以上的 demo 中只实现了 DOM 的录制,如果想要录制鼠标轨迹,可以增加一个跟随鼠标的元素~


作者:Mengke
来源:juejin.cn/post/7293462197386592283
收起阅读 »

流金岁月

web
本人是95前端菜鸟一枚,目前在广州打工混口饭吃。刚好换了工作,感觉生活节奏变得慢了下来,打了这么多年工总觉得想纪录些什么,怕以后自己老了忘记自己还有这么一些风流往事。书接上回。 小聚 “这里!这里!”我朝着声音望去,便看到小白兴奋的向我招着手,我小步快跑的走...
继续阅读 »

本人是95前端菜鸟一枚,目前在广州打工混口饭吃。刚好换了工作,感觉生活节奏变得慢了下来,打了这么多年工总觉得想纪录些什么,怕以后自己老了忘记自己还有这么一些风流往事。书接上回。



小聚


“这里!这里!”我朝着声音望去,便看到小白兴奋的向我招着手,我小步快跑的走了过去,在小白对面落了座。“少爷阔气,今天怎么请我来这里吃饭?”我问出心中疑虑,璇玑地中海自助旋转餐厅,位于广州塔106层,从窗户放眼望去,晚霞与珠江美景浑天然一色,无数高楼一览无遗,万家灯火如星光皆纳入眼前,最要命的是,大众点评人均525/人,还好不是我掏钱。


小白不以为然的笑了笑,“等到核污水传遍全球,你想吃都不敢吃了,人生短短几十年,要懂得及时行乐。而且,咱两的关系也非同一般啊~”。打从有记忆起,我和小白就认识了,年龄跟我差不多,性格跟我差不多,爱好也跟我差不多,好巧不巧,如今他跟我一样也是在广州做IT,所以我们经常联系,关系特别好。“还是你会享受,走吧,拿吃的。”随即我和小白分头寻宝,不一会儿的功夫,桌子上便摆满了芝士波士顿、芝士生蚝、海螺、北极贝、不知名海虾各种海鲜。


我抓起一个芝士生蚝就往里炫,甜中带嫩,入口即化,香味从味蕾刺激我的脑海,当我准备再抓一个,小白轻飘飘的说了句:“我破产了。”我顿时一僵,尴尬地把手收了回去,突然想到了什么,小心翼翼地问,“你不会找我借钱吧?我可没钱哦,这顿AA也行”。


互诉


“你想的倒是挺多,只是这芝士生蚝我才拿了两个,你吃了一个还想再拿,我只能技术性打断你了”,我沉默良久,直至小白把另一只芝士生蚝炫完,露出了他满足的嘴脸


04.png


我才询问道“是你那家自助预约舞蹈室吗?”



破产



小白点了点头,“自从前年疫情过后,收入就一直不太乐观了,且竞争愈来愈激烈,到了暑假最旺期间扣完水电和物业租金,我竟还要倒贴两百元。这样亏本坚持了大概8个月后,合伙人L总她终于决定要解散了。之前成立公司和几位合伙人签订的股份分配书感觉自己犹如走上人生巅峰,随着几家分店加盟,畅想无限美好未来,好日子越来越有,越来越甜。未曾想两年不到,昨日便签了注销公司的文件,现在搞一份副业,付出了大量心血,最后也未必落得一个美好的结局。”


“唉~”我长叹了一声,刚刚吃完这个芝士生蚝,嘴巴有点渴,顺手拿起手边的茶杯抿了一口,这铁观音茶,清淡清香、浓郁扑鼻,喝了一口后自有淡淡回甘。“大局已定,失败乃成功之母,不过这次你收获也不少吧?”之前我也听过小白的舞蹈室副业,记得他刚成立之初前几个月每月都有几万流水,扣除杂七杂八到手还能有个两三千块钱,没想到还是经受不住岁月的考验。


“的确有所收获,L总把舞蹈室的哈曼卡顿音响送我了,这音响听着贼带劲~”。或许是我安慰,小白皱着的双眉似乎舒展几分,“那你呢,你最近在搞什么?”


“我上王者了。”我漫不经心的回了一句。


“王者是谁?”,我白了他一眼,他笑了笑,“没想到你还在玩啊?”。“嗯,现在机制60星就能王者了,有时间便利用下elo机制完成下十年前的梦想,最近练了一手刀妹,真的万军丛中过,片叶不沾身,得心应手。”说罢,我便给他看了看我上王者的截图。


06.jpg


“羡慕你,你还是一如既往的追寻你想要的东西。”小白一边说一边用筷子把半截波士顿龙虾连根拔起,张开血盆大口,吞入嘴中。


“切,就算舞蹈室倒闭也不影响你现在的生活吧,你看你现在一样过的挺滋润啊。”我不屑的说到。


“本来还挺滋润的,但最近压力有点大了,现在每个月发工资后都往家里打几千。”我不解,问道“怎么了,是家里出什么事了吗?”



暴雷



“我家资产暴雷了,你之前也应该知道我家里主要收入吧”。我点了点头,“现在存放到那里的资产因为公司负责人喝酒脑溢血离世了,剩下一大堆债务没法处理,本来每月提供的利息也没有了,本金还被冻结住,现在暂时拿不回来,这些都是我妈跟我说的。”我听完,大吃一惊,不过这种依靠大资金存放赚取高额利息的盈利,本来就是极高风险的,正所谓高风险高回报。但我看着小白失落的神情,也只能安慰说,“有什么要帮忙的跟我说,还有这顿哥请你”。


就等你这句话”。小白乐呵呵的看着我,看着他这副表情,我硬了,拳头硬了。


“现在主要靠负责人的弟弟处理家中事务,他也承诺两年后慢慢还回本金,但是家里主要的收入来源没有了,我也不想家里人看不开,毕竟健康最重要。之前本来就有向家里人打钱,只不过现在翻了一倍,自己花钱也不能像之前大手大脚了,不过请你这顿饭倒是不成问题”。小白见我长舒一口气,好奇问我,“怎么请我吃顿饭好像要你命似的,最近手头很紧吗?”


“你小子,我听你这件事也不是死局,才放心下来,如果承诺两年之内将本金还清并落实到位,也已经算是万幸了。不过我最近手头的确不充裕”。“怎么?之前大礼包十几万全买皮肤去了?”。我摇了摇头,给他打开了我的小鹏APP,“我买了小鹏G9”。


05.jpg

小白看了看我的订单,便看向我,满是不解,“咦,之前你的梦中情车不是宝马5系,连在掘金写小说用的头图都是盗的百度,怎么买了小鹏G9啊,你不是看不上这种牌子的车吗?”


我笑了笑,说“所以这篇小说用的头图是小鹏G9”。“啊?”


“以前我总天真的以为,只要自己不断的存钱,总有一天能够实现自己买下宝马5系的梦想,但梦想终归是梦想,现实毕竟是现实,钱真的很难赚,我不想贷款,不靠父母支持,要自己一边打工一边存钱,凑够这五十万谈何容易。当然,毕竟我也是能力不行,能力配不上自己的野心,转眼之间便差不多到了而立之年,往后的日子还要准备结婚,生娃等等世俗制定好的人生阶梯,之前我老是看懂车帝推文,什么5系,E级,是普通人的天花板,那时候觉得天花板离我触手可及,而现在,我每天睁开眼都觉得天花板离我越来越远。慢慢的我也认清了自己,知道自己是个什么水平,也学会放下,但是,梦想永远会存在我的心中,不会灭去”。


“你爸妈不反对你?”。


“嗐,他们吵上天了,什么电车不安全呀,电车只能买特斯拉啊,小鹏都要倒闭之类的。但是又如何呢,毕竟钱是我的,他们做不了主。我也有试驾过宝马iX3,只是觉得当下,这台车更适合我”。小白听完我的赘述,点了点头,“嗯,我了解你这个人,一旦认定了某些事,别人很难去改变你的想法。”我嘿嘿一笑,“你不也是吗?”


边聊边吃时间总是过得特别快,不一会儿我们两人的桌碟上放满了残骸,堆积如山,刚好服务员经过帮我们更换了新碟子,我们异口同声的说了声谢谢。


进入了短暂的沉默,我率先问小白,“最近工作情况如何?”。


小白听完,擦了擦嘴,表情也正经了起来,“其实今天我主要目的就是来跟你分享一下我最近的经历的,看看你有啥想法。”。


“哦?细说。”



曙光



“前两周我之前的leader让我去他公司面试。”


“你去了?”


“别打岔”。小白没好气的看我一眼,继续说道“一开始我是拒绝的,你也知道,我最近都比较躺平了,拿着一份在广州过的不差的薪资,浑浑噩噩的过着日子。谁知道,那位大佬开口便以35 * 14邀约,我本是性情中人,路见不平便拔刀相助,朋友有困难,我都会鼎力相助,何况这是贵人”。随即,他给我看了看聊天内容。


02.jpg


01.jpg


03.jpg

“听到这个数,我真的是垂死病中惊坐起,手上的switch瞬间丢到一边,立刻屁颠屁颠准备简历了。他说我是人才,其实我知道,贵人的实力,才称得上真正的人才”


“因为base要去深圳,如果薪资涨幅不是太高的话,其实我心里还是不太乐意的,因为现在在公司其实也得到leader青睐了,而且临近年终了,说实话,工作了6年多,之前跳来跳去,为了眼前那点利益,年终奖都没拿过几次,实属心累。但是这次如果薪资到胃,能给到这么高,虽然脉脉都劝别人不要去,但是我还是想尝试一下,毕竟这是更大的平台,为自己以后职业规划着想,现在累点真不算啥。”


我表示理解,“毕竟脉脉都是问就是别去,劝就是不走”。


小白笑着点了点头,“所以我去了,一面二面都过了。”


“牛逼啊,面了什么,分享一下啊~”


“牛逼个啥啊,问的都比较浅,一面印象比较深主要下面几点”。



  • typescript中 interface 和 type 的区别


1. type类型使用范围更广, 接口类型只能用来声明对象
2. 在声明对象时, interface可以多次声明
3. 区别三 interface支持继承的,type不支持
4. interface可以被类实现


  • typescript中 字面量类型


这个我真忘了,回头你自己整理一下


  • redis中如何处理大key


这个我不会,面试官也很nice的讲解了一波


  • 服务器容灾方案


这个我不会,面试官也很nice的讲解了一波


  • service worker作用


这个我不会,面试官也很nice的讲解了一波

“不是,你咋啥都不会啊?”。我超大声的问。


“那你会吗?”小白反问我。


“我也不会”。


“那我就放心了,然后就是问项目细节,我稀里糊涂的答,他稀里糊涂的听,二面的话就是更深入的项目细节了。”


“然后呢然后呢?”


“然后便是昨天的HR终面,HR让我从春秋时期讲起,阐述我的工作经历,我也是乖巧的从百草园讲到三味书屋,其中声情并茂,对细节说到尽情之处,心中也不免感慨之前的辉煌。不过,往事已成云烟。待烟消云散,HR便说重点,问我期望薪资。因为期间我也听HR说现在节奏很紧,加班已是常态,10-10-6稀松平常,我见HR诚心待我,我便以真心待她”。


“你说了多少?”


“98K”


“她同意了?”


“她说你现在的薪资过低,申请不到这个数,如果降低你是否会考虑?”


“那你怎么回?”


“我怎么回,难道你不知道吗?”


“我怎么会知道?”


past lives couldn't ever hold me down, lost love is sweeter when it's finally


"i've got the strangest feelin, this isn't out first time around"


“怎么我的闹钟响了?”突然,周遭的一切突然模糊了起来,旋即进入黑暗。


梦醒


我肌肉记忆般的按停了手机的闹铃,这首歌是我最喜欢的歌,但是自从做了起床闹钟铃声后,我便没有再听过。


我机械般地刷牙洗脸漱口,坐在有点老旧的餐桌椅上,打开昨天晚上下班临时买的方块原味面包,吃了两片,肚子好受一些,看来平日加班还是要按时吃晚饭。


我出门走去,阳光落在我的脸上,小白是我,我亦是我。


作者:很饿的男朋友
来源:juejin.cn/post/7293786784127090715
收起阅读 »

曹贼,莫要动‘我’网站 —— MutationObserver

web
前言 本篇主要讲述了如何禁止阻止控制台调试以及使用了MutationObserver构造方法禁止修改DOM样式。 正文 话说在三国时期,大都督周瑜为了向世人宣布自己盛世容颜的妻子小乔,并专门创建了一个网站来展示自己的妻子 这么好看的看的小乔,谁看谁不糊,更何...
继续阅读 »

前言


本篇主要讲述了如何禁止阻止控制台调试以及使用了MutationObserver构造方法禁止修改DOM样式。


正文


话说在三国时期,大都督周瑜为了向世人宣布自己盛世容颜的妻子小乔,并专门创建了一个网站来展示自己的妻子


image.png
这么好看的看的小乔,谁看谁不糊,更何况曹老板。这天,曹操在浏览网页的时候,无意间发现了周瑜的这个网站,看着美若天仙的小乔,曹操的眼泪止不住的从嘴角流了下来。赶紧将网站上的照片保存了下来。

这个消息最后传到了周瑜的耳朵里,他只是想展示小乔,可不是为了让别人下载的。于是在自己的网站上做了一些预防措施。

为了防止他人直接在网站上直接下载图片,周瑜将右键的默认事件给关闭了,并且为了防止有人打开控制台,并对图片保存,采取了以下方法:


禁用右键和F12键


//给整个document添加右击事件,并阻止默认行为
document.addEventListener("contextmenu", function (e) {
e.preventDefault();
return false;
});

//给整个页面禁用f12按键 keyCode即将被禁用 不再推荐使用 但仍可以使用
document.addEventListener("keydown", function (e) {
//当点了f3\f6\f10之后,即使禁用了f12键依旧可以打开控制台,所以一并禁用
if (
[115, 118, 121, 123].includes(e.keyCode) ||
["F3", "F6", "F10", "F12"].includes(e.key) ||
["F3", "F6", "F10", "F12"].includes(e.code) ||
//ctrl+f 效果和f3效果一样 点开搜索之后依旧可以点击f12 打开控制台 所以一并禁用
//缺点是此网站不再能够 **全局搜索**
(e.ctrlKey && (e.key == "f" || e.code == "KeyF" || e.keyCode == 70))||
//禁用专门用于打开控制台的组合键
(e.ctrlKey && e.shiftKey && (e.key == "i" || e.code == "KeyI" || e.keyCode == 73))
) {
e.preventDefault();
return false;
}
});

当曹操再次想保存小乔照片的时候,发现使用网页的另存了已经没用了。这能难倒曹老板吗,破解方法,在浏览器的右上角进行操作就可打开控制台,这个地方是浏览器自带的,没办法禁用


image.png
这番操作之后,曹操可以选择元素保存那个图片了。周瑜的得知了自己的禁用措施被破解后,赶忙连夜加班打补丁,于是又加了一些操作,禁止打开控制台后进行操作


禁用控制台


如何判定控制台被打开了,可以使用窗口大小来判定


function resize() {
var threshold = 100;
//窗口的外部减窗口内超过100就判定窗口被打开了
var widthThreshold = window.outerWidth - window.innerWidth > threshold;
var heightThreshold = window.outerHeight - window.innerHeight > threshold;
if (widthThreshold || heightThreshold) {
console.log("控制台打开了");
}
}
window.addEventListener("resize", resize);

但是也容易被破解,只要让控制台变成弹窗窗口就可以了


也可以使用定时器进行无限debugger,因为只有在控制台打开的时候debugger才会生效。关闭控制台的时候,并不会影响功能。当前网页内存占用比较大的时候,定时器的占用并不明显。在当前网页占用比较小的时候,一直开着定时器才会有较为明显的提升


  setInterval(() => {
(function () {})["constructor"]("debugger")();
}, 500);

破解方法一样有,在debugger的位置右键禁用调试就可以了。这样控制台就可以正常操作了


image.png
既然有方法破解,就还要做一层措施,既然是要保存图片,那就把img转成canvas,这样即使打开控制台也没办法进行对图片的保存


//获取dom
const img = document.querySelector(".img");
const canvas = document.querySelector("#canvas");
//img转成canvas
canvas.width = img.width;
canvas.height = img.height;
ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
document.body.removeChild(img);

经过一夜的努力,该加的措施都加上了。周瑜心想这下就没办法保存我的小乔了吧。

来到曹操这边,再次打开周瑜的小破站,还想故技重施时,发现已经有了各种显示,最后也没难倒曹操,那些阻碍也都被破解了。但是到保存图片的时候傻眼了,竟然已经不是图片格式了,那就没办法下载了呀。但是小乔真的很养神,曹操心有不甘,于是使用了最后一招,既然没办法下载那就截图,虽然有损画质,但是依旧能看。


得知如此情况的大都督周瑜不淡定了,从未见过如此厚颜无耻之人,竟然使用截图。


006APoFYly1g2qcclw1frg308w06ox2t.gif
话说魔高一尺,道高一丈,周瑜再次熬夜加班进行对网站的优化。于是使用了全屏水印+MutationObserver监听水印dom的方法。即使截图也让他看着不舒服。


MutationObserver


MutationObserver是一个构造函数,接口提供了监视对 DOM 树所做更改的能力。它被设计为旧的 Mutation Events 功能的替代品,该功能是 DOM3 Events 规范的一部分。

它接收一个回调函数,每当监听的dom发生改变时,就会调用这个函数,函数传入一个参数,数组包对象的格式,里面记录着dom的变化以及dom的信息。


image.png
返回的实例是一个新的、包含监听 DOM 变化回调函数的 MutationObserver 对象。有三个方法observedisconnecttakeRecords



  • observe接收两个参数,第一个为要监听的dom元素,第二个则是一些配置对象,当调用 observe() 时,childListattributes 和 characterData 中,必须有一个参数为 true。否则会抛出 TypeError 异常。配置对象如下:

    • subtree:当为 true 时,将会监听以 target 为根节点的整个子树。包括子树中所有节点的属性,而不仅仅是针对 target。默认值为 false

    • childList:当为 true 时,监听 target 节点中发生的节点的新增与删除(同时,如果 subtree 为 true,会针对整个子树生效)。默认值为 false

    • attributes:当为 true 时观察所有监听的节点属性值的变化。默认值为 true,当声明了 attributeFilter 或 attributeOldValue,默认值则为 false

    • attributeFilter:一个用于声明哪些属性名会被监听的数组。如果不声明该属性,所有属性的变化都将触发通知。

    • attributeOldValue:当为 true 时,记录上一次被监听的节点的属性变化;可查阅监听属性值了解关于观察属性变化和属性值记录的详情。默认值为 false

    • characterDate:当为 true 时,监听声明的 target 节点上所有字符的变化。默认值为 true,如果声明了 characterDataOldValue,默认值则为 false

    • characterDateOldValue:当为 true 时,记录前一个被监听的节点中发生的文本变化。默认值为 false



  • disconnect方法用来停止观察(当被观察dom节点被删除后,会自动停止对该dom的观察),不接受任何参数

  • takeRecords:方法返回已检测到但尚未由观察者的回调函数处理的所有匹配 DOM 更改的列表,使变更队列保持为空。此方法最常见的使用场景是在断开观察者之前立即获取所有未处理的更改记录,以便在停止观察者时可以处理任何未处理的更改。


该构造函数监听的dom即使在控制台中被更改属性或值,也会被监听到。


使用MutationObserver对水印dom进行监听,并限制更改。


<style>
//定义水印的样式
#watermark {
width: 100vw;
height: 100vh;
position: absolute;
left: 0;
top: 0;
font-size: 34px;
color: #32323238;
font-weight: 700;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-content: space-evenly;
z-index: 9999999;
}
#watermark span {
transform: rotate(45deg);
}
</style>

<script>
//获取水印dom
const watermark = document.querySelector("#watermark");
//克隆水印dom ,用作后备,永远不要改变
const _watermark = watermark.cloneNode(true);
//获取水印dom的父节点
const d = watermark.parentNode;
//获取水印dom的后一个节点
let referenceNode;
[...d.children].forEach((item, index) => {
if (item == watermark) referenceNode = d.children[index + 1];
});
//定义MutationObserver实例observe方法的配置对象
const prop = {
childList: true,//针对整个子树
attributes: true,//属性变化
characterData: true,//监听节点上字符变化
subtree: true,//监听以target为根节点的整个dom树
};
//定义MutationObserver
const observer = new MutationObserver(function (mutations) {
//在这里每次坚挺的dom发生改变时 都会运行,传入的参数为数组对象格式
mutations.forEach((item) => {
//这里可以只针对监听dom的样式来判断
if (item.attributeName === "style") {
//获取父节点的所有子节点,因为时伪数组,使用扩展运算符转以下
[...d.children].forEach((v) => {
//判断一下,是父节点里的那个节点被改变了,并且删除那个被改变的节点(也就是删除水印节点)
if (item.target.id && v == document.querySelector(`#${item.target.id}`)) {
v.remove();
}
});
//原水印节点被删除了,这里使用克隆的水印节点,再次克隆
const __watermark = _watermark.cloneNode(true);
//这里的this指向是MutationObserver的实例对象,所以同样可以使用observe监听dom
//监听第二次克隆的dom
this.observe(__watermark, prop);
//因为水印dom被删除了,再将克隆的水印dom添加到原来的位置 就是referenceNode节点的前面
d.insertBefore(__watermark, referenceNode);
}
});
});
在初始化的时候监听初始化的水印dom
observer.observe(watermark, prop);
</script>



这样,每当对水印dom进行更改样式的时候,就会删除该节点,并重新添加一个初始的水印dom,即使突破重重困难打开开控制台,用户也是无法对dom 进行操作。


视频转Gif_爱给网_aigei_com.gif


隔天曹操再次打开网页,发现网页上的水印,心里不足为惧,心想区区水印能难倒自己?操作到最后却发现,不论如何对水印dom进行操作,都无法改变样式。虽说只是为了保存图片,但是截图有着这样水印,任谁也不舒服呀。曹操大怒,刚吃了两口的饭啪的一下就盖在了桌子上......


20230508094549_33500.gif
然而曹操不知道的是,在控制台中,获取dom节点右键是可以只下载获取的那个节点的......


image.png


结尾


文章主要是以鬼畜恶搞的方式讲述了,如何禁止用户打开控制台(还有重写toSring,consloe.log等一些方法,但我并没有没有实现,所以这里并没有写上),并且如何使用MutationObserver构造函数来监听页面中的dom元素。其实大多情况下并没有这方面的项目需求,完全可以当扩展知识看了。


写的不好的地方可以提出意见,虚心请教!


作者:iceCode
来源:juejin.cn/post/7290862554657423396
收起阅读 »

在高德地图实现后期效果

web
介绍 最近在做可视化图层开发的时候,发现我们自己开发的图层一些优秀的案例比起来,总是有一定的差距。差了后期效果合成环节,就比如个人晒图前忘了用美图秀秀修图。于是花了些时间研究了高德地图JSAPI2.0和GLCustomLayer,探索如何将后期特效接入到3D图...
继续阅读 »

介绍


最近在做可视化图层开发的时候,发现我们自己开发的图层一些优秀的案例比起来,总是有一定的差距。差了后期效果合成环节,就比如个人晒图前忘了用美图秀秀修图。于是花了些时间研究了高德地图JSAPI2.0和GLCustomLayer,探索如何将后期特效接入到3D图层中。
Effect-PointsLayer2.gif


后期特效其实有点类似照片的后期滤镜处理,是对渲染结果的二次处理,可以实现发光、模糊、色调调整、镜头暗角、模拟环境光遮蔽等各种效果,为了方便理解,下面的讲解我将以辉光效果为例,学会了一种其他效果思路类似。


方案调研


Three官方提供了非常简单的方法实现后期特效,貌似仅需要完成以下两个步骤就可以完成我们想要的需求,代码也非常清晰简单:


import * as THREE from 'three'
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing//UnrealBloomPass.js'
import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass.js'

...

// 1.在图层初始化完成后,创建效果合成器
onLayerInit(){
const { scene, camera, renderer } = this

const renderScene = new RenderPass(scene, camera)

// 后期泛光特效
bloomPass = new UnrealBloomPass(new THREE.Vector2(this.container.clientWidth, this.container.clientHeight), 1, 0, 0)
bloomPass.threshold = params.threshold
bloomPass.strength = params.strength
bloomPass.radius = params.radius

composer = new EffectComposer(renderer)
// 以下代码会遮盖地图
composer.addPass(renderScene)
composer.addPass(bloomPass)
}

// 2.更新合成器
onRender () {
if (composer) {
composer.render()
}
}

本以为这样做就可以开心收工了,燃鹅事情并没有那么简单,把这套方案移入高德的GLCustomLayer中,出现了这样的情况,后期效果直接把地图底图盖住了。
Untitled.png


出现这种情况的原因是实现辉光效果而编写的着色器,它会直接修改整个画面的alpha通道而导致透明效果丢失,因此需要单独修改UnrealBloomPass.js。


然而光是这样还不够,经过各种尝试,仍无法直接在GLCustomLayer上解决地图被遮盖的问题,后来咨询了高德地图开发团队的技术大佬,他给我的建议是后期效果层独立展示,于是就沿着这个思路进行了第二轮尝试。
Untitled 1.png


这里面有几个关键步骤是必须的:



  1. 修改UnrealBloomPass着色器代码

  2. 使用输出通道new OutputPass()置于特效通道的后面

  3. 在customLayer图层中,每次渲染就更新特效合成器EffectComposer


由于我这边是不希望之前开发的可视化图层做太多的修改去迁就这个后期效果的,也有对性能较差的终端机器优雅降级的考虑,索性把后期效果独立为EffectLayer层,以方便灵活地装载或剥离,最终实现了这个效果。


Effect-POI3dLayer1.gif


实现步骤




  1. 修改 UnrealBloomPass.js,由于这个文件在npm包中不能随意修改,我另外写了一个UnrealBloomPass1 继承并覆盖了UnrealBloomPass的方法


    import * as THREE from 'three'
    import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js'

    class UnrealBloomPass1 extends UnrealBloomPass {
    constructor (resolution, strength, radius, threshold) {
    super(resolution, strength, radius, threshold)
    }

    getSeperableBlurMaterial (kernelRadius) {
    ...
    fragmentShader:
    `#include <common>
    varying vec2 vUv;
    uniform sampler2D colorTexture;
    uniform vec2 invSize;
    uniform vec2 direction;
    uniform float gaussianCoefficients[KERNEL_RADIUS];

    void main() {
    float weightSum = gaussianCoefficients[0];
    vec3 diffuseSum = texture2D( colorTexture, vUv ).rgb * weightSum;
    float alphaSum;
    for( int i = 1; i < KERNEL_RADIUS; i ++ ) {
    float x = float(i);
    float w = gaussianCoefficients[i];
    vec2 uvOffset = direction * invSize * x;
    vec4 sample1 = texture2D( colorTexture, vUv + uvOffset );
    vec4 sample2 = texture2D( colorTexture, vUv - uvOffset );
    diffuseSum += (sample1.rgb + sample2.rgb) * w;
    alphaSum += (sample1.a + sample2.a) * w; //
    weightSum += 2.0 * w;
    }
    // gyrate: overwrite this line for alpha pass
    // gl_FragColor = vec4(diffuseSum/weightSum, 1.0);
    gl_FragColor = vec4(diffuseSum/weightSum, alphaSum/weightSum);
    }`

    })
    }
    }

    export { UnrealBloomPass1 }



  2. 编写EffectLayer


    import * as THREE from 'three'
    import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'
    import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'
    import { UnrealBloomPass1 } from '../plugins/three/examples/jsm/postprocessing/UnrealBloomPass.js'
    import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass.js'
    import _ from 'lodash'

    class EffectLayer {

    // 此处省去一些内部变量

    _style = {
    // 光照强度阈值
    threshold: 0.0,
    // 泛光强度
    strength: 1.0,
    // 泛光半径
    radius: 1.5
    }

    /**
    * 创建一个实例
    * @param {Object} config
    * @param {Layer} config.layer 目标图层,要求是Layer的相关子类
    * @param {Number} [config.zIndex=120] 图层的层级
    * @param {EffectStyle} [config.style] 后期特效的配置项
    */

    constructor (config) {
    const conf = _.merge(this._conf, config)
    this._style = _.merge(this._style, conf.style)

    if (!conf.layer.scene || !conf.layer.camera) {
    console.error('缺少场景和相机')
    return
    }
    this.init()
    }

    init () {
    this.createLayer()
    this.addEffect()
    }
    }



  3. 创建自定义图层customLayer


    createLayer () {
    const canvas = document.createElement('canvas')
    this._customLayer = new AMap.CustomLayer(canvas, {
    zooms: [3, 22],
    zIndex: this._conf.zIndex,
    alwaysRender: true
    })

    this._canvas = canvas
    }



  4. 创建特效合成器


    addEffect () {
    const { scene, camera, container, renderer, map } = this._conf.layer
    const { clientWidth, clientHeight } = container

    // 创建渲染器
    const effectRender = new THREE.WebGLRenderer({
    canvas: this._canvas,
    alpha: true,
    antialias: false,
    stencil: false,
    depth: false
    })
    // renderer.setClearColor(0xff0000);
    effectRender.autoClear = false
    effectRender.setSize(clientWidth, clientHeight)

    // 后期效果
    const renderScene = new RenderPass(scene, camera)

    // 后期辉光特效
    const bloomPass = new UnrealBloomPass1(new THREE.Vector2(clientWidth, clientHeight), 1, 0, 0)
    bloomPass.clear = false

    // 输出通道
    const outputPass = new OutputPass()
    outputPass.clear = false

    this.updatePass()

    const composer = new EffectComposer(effectRender)
    composer.addPass(renderScene)
    composer.addPass(bloomPass)
    composer.addPass(outputPass)

    this._composer = composer
    this._bloomPass = bloomPass

    this._customLayer.render = function () {
    if (composer) {
    // 每次渲染就更新特效合成器
    composer.render()
    }
    }

    map.add(this._customLayer)
    }

    updatePass() {
    const {_bloomPass} = this
    if (_bloomPass) {
    _bloomPass.threshold = this._style.threshold
    _bloomPass.strength = this._style.strength
    _bloomPass.radius = this._style.radius
    }
    // 添加其他特效通道...
    }



  5. 使用EffectLayer


    //之前编写的可视化图层
    const layer = new GLlayers.POI3dLayer({
    map: getMap(),
    zooms: [10, 22]
    })

    layer.on('complete', (layer) => {
    let effectLayer = new GLlayers.EffectLayer({
    layer: layer, //把图层传入effectLayer
    style:{
    threshold: 0.0,
    strength: 1.0,
    radius: 0.5,
    }
    })
    })




注意:以上方案three.js版本为0.157, 该版本对three/example/jsm/postprocessing目录中的后期效果通道相关文件做了较多调整,如果是用之前的three.js版本,修改内容可能有所不同。



至此我们就可以在之前的可视化图层基础上,加入几行代码实现辉光效果,以下是挑选一部分图层加上EffectLayer之后的效果,肉眼可见还是有很明显区别的。当然在使用过程中也发现了个别图层原有的问题需要做进一步优化。


Effect-BorderLayer1.gif


Effect-PointsLayer1.gif


Effect-SpriteLayer1.gif


Effect-cakeLayer1.gif


待解决问题


使用独立图层展示后期特效层有个明显缺点,无法关联默认基本图层的场景要素深度信息,最主要的影响是高德的建筑白模图层和自定义可视化图层的远近遮挡关系会丢失,导致可视化图层永远在最前面。比如下面这个城市主要道路的辉光效果,这个是需要后面花时间去解决的,写这篇文章的时候又找到几个方案,有时间再试一把,毕竟上面留给我的时间不多了。


Effect-FlowlineLayer2.gif


相关链接


three.js后期处理


three.js效果合成器文档和示例


实现模型材质局部辉光效果和解决辉光影响场景背景图显示的问题


Three.js带Depth实现分区辉光


作者:gyratesky
来源:juejin.cn/post/7293788726235365426
收起阅读 »

自研框架跻身全球 JS 框架榜单,排名紧随 React、Angular 之后!

web
前言 终于实现了一个重要目标!我独立研发的 JavaScript 框架 Strve,最近发布了重大版本 6.0.2。距离上次大版本发布已经接近两个月,期间进行了大量的优化,使得框架性能和稳定性都得到了大幅度的提升。在上次的大版本更新中,成功实现了对 JSX 语...
继续阅读 »

前言


终于实现了一个重要目标!我独立研发的 JavaScript 框架 Strve,最近发布了重大版本 6.0.2。距离上次大版本发布已经接近两个月,期间进行了大量的优化,使得框架性能和稳定性都得到了大幅度的提升。在上次的大版本更新中,成功实现了对 JSX 语法的全面支持,使得 Strve 在代码智能提示和代码格式化方面更加友好,进一步提高了开发效率。


介绍


相信有些小伙伴没有听说过 Strve 到底是什么,那我这里就大体介绍一下。


Strve 是一个可以将字符串转换为视图(用户界面)的 JavaScript 库。Strve 不仅易于使用,而且可以灵活地拆解不同的代码块。使用模板字符串开发用户界面,主要是利用 JavaScript 的能力,只关注 JavaScript 文件。Strve 又是一个易用性的 JavaScript 框架,它提供了很多实用的功能与生态工具。


我们可以通过一些简单的示例来了解 Strve 的使用方法。


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Strve.js</title>
</head>

<body>
<script src="https://cdn.jsdelivr.net/npm/strve-js@6.0.2/dist/strve.full.prod.js"></script>
<script>
const { html, setData, createApp } = Strve;
const state = {
count: 0,
};

function add() {
setData(() => {
state.count++;
});
}

function App() {
return html`<h1 onClick=${add}>${state.count}</h1>`;
}

const app = createApp(App);
app.mount('#app');
</script>
</body>
</html>

在上述代码中,我们通过引入 Strve 库,并使用 createApp 方法创建了一个 App 组件,然后通过 mount 方法挂载到页面上,这里的 App 组件就是通过模板字符串来定义的。这样就可以在 JS 代码中编写用户界面,是不是很方便呢?我们发现,在模板字符串中,我们使用 ${} 来引用数据,并且使用 onClick 方法来绑定事件。这样就可以实现一个计数器的功能。


除了这种简单的示例,Strve 还支持很多复杂的功能,我们可以使用 JSX 语法来编写组件,也可以使用函数式组件来编写组件,还可以使用组件来编写组件,甚至可以编写一些自定义的组件。


如果想了解更多关于 Strve 的信息,稍后可以到文章末尾处查阅官方文档。


性能评估


我们既然发布了 Strve,那么肯定需要对其性能进行评估,我们评估的工具就用js-framework-benchmarkjs-framework-benchmark 是什么?我们这里就简单介绍下 js-framework-benchmark,它是一个用于比较 JavaScript 框架性能的项目。它旨在通过执行一系列基准测试来评估不同框架在各种场景下的性能表现。这些基准测试包括渲染大量数据、更新数据、处理复杂的 UI 组件等。通过运行这些基准测试,可以比较不同框架在各种方面的性能优劣,并帮助开发人员选择最适合其需求的框架。js-framework-benchmark 项目提供了一个包含多个流行 JavaScript 框架的基准测试套件。这些框架包括 Angular、React、Vue 等。每个框架都会在相同的测试场景下运行,然后记录下执行时间和内存使用情况等性能指标。通过比较这些指标,可以得出不同框架的性能差异。这个项目的目标是帮助开发人员了解不同 JavaScript 框架的性能特点,以便在选择框架时能够做出更加明智的决策。同时,它也可以促进框架开发者之间的竞争,推动框架的不断改进和优化


在评估之前,我们必须要了解 js-framework-benchmark 中有两种模式。一种是 keyed,另一种是 non-keyed。在 js-framework-benchmark 中,"keyed" 模式是指通过给数据项分配一个唯一标识符作为 "key" 属性,从而实现数据项与 DOM 节点之间的一对一关系。当数据发生变化时,与之相关联的 DOM 节点也会相应更新。而 non-keyed 模式是指当数据项发生变化时,可能会修改之前与其他数据项关联的 DOM 节点。


因为 Strve 支持keyed模式,所以我们将使用此模式来评估 Strve 的性能。


对以下操作进行了基准测试:



  • 创建行:页面加载后创建 1,000 行的持续时间(无预热)。

  • 替换所有行:替换表中所有 1,000 行的持续时间(5 次预热迭代)。

  • 部分更新:对于具有 10,000 行的表,每 10 行更新一次文本(进行 5 次预热迭代)。

  • 选择行:响应单击该行而突出显示该行的持续时间。 (5 次预热迭代)。

  • 交换行:在包含 1,000 行的表中交换 2 行的时间。 (5 次预热迭代)。

  • 删除行:删除具有 1,000 行的表的行的持续时间。 (5 次预热迭代)。

  • 创建多行:创建 10,000 行的持续时间(无预热)

  • 将行追加到大型表:在包含 10,000 行的表中添加 1,000 行的持续时间(无预热)。

  • 清除行:清除填充有 10,000 行的表的持续时间。 (无热身)

  • 就绪内存:页面加载后的内存使用情况。

  • 运行内存:添加 1,000 行后的内存使用情况。

  • 更新内存:1000 行的表点击 5 次更新后的内存使用情况。

  • 替换内存:点击 5 次创建 1000 行后的内存使用情况。

  • 重复清除内存:创建并清除 1,000 行 5 次后的内存使用情况。

  • 更新内存:1000 行的表点击 5 次更新后的内存使用情况。

  • 启动时间:加载和解析 javascript 代码以及渲染页面的持续时间。

  • 持续交互:灯塔指标 TimeToConstantlyInteractive:悲观 TTI - 当 CPU 和网络都非常空闲时。 (不再有超过 50 毫秒的 CPU 任务)

  • 脚本启动时间:灯塔指标 ScriptBootUpTtime:解析/编译/评估所有页面脚本所需的总毫秒数

  • 主线程工作成本:灯塔指标 MainThreadWorkCost:在主线程上工作所花费的总时间包括样式/布局等。

  • 总字节权重:灯塔指标 TotalByteWeight:加载到页面中的所有资源的网络传输成本(压缩后)。


对于所有基准测试,都会测量持续时间,包括渲染时间。


因为js-framework-benchmark是一个自动化测试的工具,只需要符合标准的代码就可以进行测试。Strve 支持 JSX 语法,所以我们将使用 JSX 语法来编写测试代码。


import { setData, createApp } from 'strve-js';
import { buildData } from './data.js';

let selected;
let rows = [];

function setRows(update = rows.slice()) {
setData(
() => {
rows = update;
},
{
name: TbodyComponent,
}
);
}

function add() {
const data = rows.concat(buildData(1000));
setData(
() => {
rows = data;
},
{
name: TbodyComponent,
}
);
}

function remove(id) {
rows.splice(
rows.findIndex((d) => d.id === id),
1
);
setRows();
}

function select(id) {
setData(
() => {
selected = id;
},
{
name: TbodyComponent,
}
);
}

function run() {
setRows(buildData());
selected = undefined;
}

function update() {
for (let i = 0; i < rows.length; i += 10) {
rows[i].label += ' !!!';
}
setRows();
}

function runLots() {
setRows(buildData(10000));
selected = undefined;
}

function clear() {
setRows([]);
selected = undefined;
}

function swapRows() {
if (rows.length > 998) {
const d1 = rows[1];
const d998 = rows[998];
rows[1] = d998;
rows[998] = d1;
setRows();
}
}

function TbodyComponent() {
return (
<tbody>
{rows.map((item) => (
<tr class={item.id === selected ? 'danger' : ''} data-label={item.label} key={item.id}>
<td class='col-md-1'>{item.id}</td>
<td class='col-md-4'>
<a onClick={() => select(item.id)}>{item.label}</a>
</td>
<td class='col-md-1'>
<a onClick={() => remove(item.id)}>
<span class='glyphicon glyphicon-remove' aria-hidden='true'></span>
</a>
</td>
<td class='col-md-6'></td>
</tr>
))}
</tbody>

);
}

function MainBody() {
return (
<fragment>
<div class='jumbotron'>
<div class='row'>
<div class='col-md-6'>
<h1>Strve-keyed</h1>
</div>
<div class='col-md-6'>
<div class='row'>
<div class='col-sm-6 smallpad'>
<button type='button' class='btn btn-primary btn-block' id='run' onClick={run}>
Create 1,000 rows
</button>
</div>
<div class='col-sm-6 smallpad'>
<button
type='button'
class='btn btn-primary btn-block'
id='runlots'
onClick={runLots}
>

Create 10,000 rows
</button>
</div>
<div class='col-sm-6 smallpad'>
<button type='button' class='btn btn-primary btn-block' id='add' onClick={add}>
Append 1,000 rows
</button>
</div>
<div class='col-sm-6 smallpad'>
<button
type='button'
class='btn btn-primary btn-block'
id='update'
onClick={update}
>

Update every 10th row
</button>
</div>
<div class='col-sm-6 smallpad'>
<button type='button' class='btn btn-primary btn-block' id='clear' onClick={clear}>
Clear
</button>
</div>
<div class='col-sm-6 smallpad'>
<button
type='button'
class='btn btn-primary btn-block'
id='swaprows'
onClick={swapRows}
>

Swap Rows
</button>
</div>
</div>
</div>
</div>
</div>
<table class='table table-hover table-striped test-data'>
<component $name={TbodyComponent.name}>{TbodyComponent()}</component>
</table>
<span class='preloadicon glyphicon glyphicon-remove' aria-hidden='true'></span>
</fragment>

);
}

createApp(() => MainBody()).mount('#main');

以下页面就是将进行基准测试的页面:


01.png


我们大体看下测试过程,我们将使用动图来展示页面效果,这样会觉得更加直观。


02.gif


最终,Strve 通过了压力测试!


08.png


基准测试结果


既然我们通过测试,我们就需要提交到js-framework-benchmark官方项目中,进行综合评估,与全球其他框架进行比较。


我们提交的 PR 在 2023 年 9 月 18 号被作者合并了。


03.png


在接下来的时间里,作者进行了一系列的测试。最终,Chrome 118 版本于上周发布,并在 GitHub 上公布了官方的测试结果。


04.png


我们打开下面的网址,看下 Strve 的官方测试结果:


krausest.github.io/js-framewor…


经过查询,全球 JavaScript 框架榜单中共有 142 个框架。


性能测试基准分为三类:



  • 持续时间

  • 启动指标

  • 内存分配


【持续时间】


在此测试基准中,Strve 平均值 1.42,排名第 90 位。


React、Angular 和 Vue,平均值分别为1.401.381.20,分别排名第 85 位、第 83 位和第 51 位。



平均值越小,排名则越靠前。颜色越绿代表越优。



05.png


【启动指标】


在此测试基准中,Strve 平均值 1.07


React、Angular 和 Vue,平均值分别为 1.681.801.30



平均值越小,排名则越靠前。颜色越绿代表越优。



06.png


【内存分配】


在此测试基准中,Strve 平均值 1.33


React、Angular 和 Vue,平均值分别为 2.462.821.86



平均值越小,排名则越靠前。颜色越绿代表越优。



07.png


新特性


我们在上面的测试中,可以看到 Strve 性能表现非常不错。


这次我们发布的大版本号为 6.0.2,我们将这个具有里程碑意义的大版本命名为 Strve6,而 “Strve6,从芯出发!” 这个口号正是 Strve6 的核心理念。这一版本象征着我们从底层技术出发,致力于为用户提供更优质、更高效的开发体验。


此次版本我们在性能与体验之间做了权衡。在源码层面,我们将普通 Diff 算法升级为 双端 Diff 算法,大大提升了性能。另外,我们在用户体验层面也做了很大的改进。


这里,我们提到了双端 Diff 算法,我们在面试中经常提到这个概念,但是很少用到实际项目中去。那么,为了更好地理解双端 Diff 算法如何提高性能,我们来看一个关于 Strve 简单的示例。


我们来遍历一个数组,并且每次点击按钮,往数组头部中添加一个元素。


【普通 Diff 算法】


<script type="module">
import {
html,
setData,
createApp,
} from 'https://cdn.jsdelivr.net/npm/strve-js@6.0.2/dist/strve.full-esm.js';

const state = {
arr: [1, 2],
count: 3,
};

function useUnshift() {
setData(() => {
state.count++;
state.arr.unshift(state.count);
});
}

function App() {
return html`
<fragment>
<button onClick=
${useUnshift}>Unshift</button>
<ul>
${state.arr.map((todo) => html`<li>${todo}</li>`)}
</ul>
</fragment>
`
;
}

const app = createApp(App);
app.mount('#app');
</script>

我们可以看到右侧 DOM 树,每次点击按钮,都会重新渲染整个列表。这样是肯定耗损浏览器性能的。


09.gif


【双端 Diff 算法】


<script type="module">
import {
html,
setData,
createApp,
} from 'https://cdn.jsdelivr.net/npm/strve-js@6.0.2/dist/strve.full-esm.js';

const state = {
arr: [1, 2],
count: 3,
};

function useUnshift() {
setData(() => {
state.count++;
state.arr.unshift(state.count);
});
}

function App() {
return html`
<fragment>
<button onClick=
${useUnshift}>Unshift</button>
<ul>
${state.arr.map((todo) => html`<li key=${todo}>${todo}</li>`)}
</ul>
</fragment>
`
;
}

const app = createApp(App);
app.mount('#app');
</script>

我们可以看到右侧 DOM 树,每次点击按钮,仅添加必要的元素,而不是重新渲染整个列表。这是因为我们在每个列表项中添加了 key 属性,并且这个 key 是唯一的。key 这个特殊的 attribute 主要作为 Strve 的虚拟 DOM 算法提示,在比较新旧节点列表时用于识别 vnode。只要标签类型与 key 值都相等,就说明当前元素可以被复用。


10.gif


热门话题


文章接近尾声,让我们来回顾一下最近社区的几个热门话题。



  1. 为什么要开发这个框架?初衷是什么?


答:其实,我的动机特别简单,完全受 JSX 语法的影响。刚接触 JSX 语法的时候,就被它那种魔法深深地吸引住了,可以在 JS 中写 HTML。所以,我就想我自己可不可以也搞一个类似 JSX 语法的库或者框架呢!一方面可以锻炼自己的代码能力,另一方面体验开发框架的整个流程,也方便我以后更全面的学习其他框架(Vue.js、React.js 等)。


做自己喜欢的事情是特别有意义的!



  1. 为什么选择 Strve 作为框架的名字?


答:Strve 最初定位是可以将字符串转换为视图(用户界面)的 JavaScript 库,所以是由 StringView 两个单词缩减组成的新单词。



  1. 跟前端热门框架比较,是想超过它们吗?


答:不是,我主要是想学习一下前端热门框架的实现原理,然后自己实现一个框架。有一句话说得好:“只有站在巨人的肩膀上才能望得更远!”。



  1. 记得之前也写过登上框架榜单的文章,这次为什么还要写?


答:之前,Strve 测评的模式是使用"non-keyed"。现在,Strve 新的版本支持"keyed"模式,所以,我重新写了一篇文章,来介绍 Strve 的新特性。



  1. Strve 6.0.2 版本发布,普通 Diff 算法升级为双端 Diff 算法,可以简单讲下双端 Diff 算法的概念吗?


答:双端 diff 算法就是头尾指针向中间移动,分别判断头尾节点是否可以复用,如果没有找到可复用的节点再去遍历查找对应节点的下标,然后移动。全部处理完之后要对剩下的节点进行批量的新增和删除。



  1. Strve 是个 JavaScript 库还是 JavaScript 框架?


答:首先,我们来看下框架与库有什么区别?库更多是一个封装好的特定的集合,提供给开发者使用,而且是特定于某一方面的集合(方法和函数),库没有控制权,控制权在使用者手中,在库中查询需要的功能在自己的应用中使用,我们可以从封装的角度理解库;框架顾名思义就是一套架构,会基于自身的特点向用户提供一套相当于叫完整的解决方案,而且控制权的在框架本身,使用者要找框架所规定的某种规范进行开发。Strve 可以是框架,因为 Strve 提供了路由、插件等生态工具;Strve 也可以是库, 因为 Strve 可以单独作为一个渲染库。



  1. Strve 你还要继续维护下去吗?


答:是的,我还会继续维护下去,因为我也想学习下去,也希望能帮助到更多前端开发者。


关于


Strve 我是从 2021 年下半年开始开发,到现在也快两年了。在这两年中,从一个之前只会 调用 API 的码农,到现在可以独立开发一个框架,让我收获了很多。学习了如何去分析一个框架的实现原理,也学习了如何去设计一个框架。



Strve 源码仓库:github.com/maomincodin…


Strve 中文文档:maomincoding.gitee.io/strve-doc-z…



如果大家觉得 Strve 还不错,麻烦帮我点下 Star 吧,谢谢!


结语


感谢各位读者的阅读,希望本文能对你有所帮助,如果喜欢本文,欢迎点赞,欢迎关注!


最后,分享一段话给大家:



很多时候


不是有希望才去坚持


而是在坚持的过程中慢慢看到希望


我们都是在暗夜里赶路的人


纵使满身疲惫也不肯轻言放弃


愿你所坚持的东西


终有一天反过来拥抱你



作者:前端历劫之路
来源:juejin.cn/post/7293786784127025179
收起阅读 »

【JavaScript】【表达式和运算符】instanceof

web
前言 在JavaScript中,判断变量的类型,常常使用的是typeof运算符 typeof的痛点: 所有的引用类型结果都是 Object; 空值null的结果也是Object; 为此,引入 instanceof 一、instanceof 1.1 作用 ...
继续阅读 »

前言


在JavaScript中,判断变量的类型,常常使用的是typeof运算符


typeof的痛点



  • 所有的引用类型结果都是 Object

  • 空值null的结果也是Object


image.png


为此,引入 instanceof


一、instanceof


1.1 作用



  • 用于判断某个实例是否属于某构造函数

  • 在继承关系中,用来判断一个实例是否属于它的父类型或祖先类型的实例


1.2 使用




  • 语法object instanceof constructor




  • 参数



    • object:某个实例对象

    • constructor:某个构造函数




  • 示例:




// 类
class Maomi {} // 定义类
let fuLai = new Maomi() // fuLai是Maomi类的实例对象
fuLai instanceof Maomi // true

// 时间
new Date() instanceof Date // true

// 构造函数
function SetMaomi() {}
let fulai = new SetMaomi();
fulai instanceof SetMaomi // true

// 函数
function getMaomi() {}
getMaomi instanceof Function // true

1.3 涉及的构造函数



  • 基础类型:String、Number、 Boolean、 Undefind、Null、Symbol

  • 引用类型:Object(Array、RegExp、Date、Function...)


1.3 实现原理


instanceof 的内部实现机制是:通过判断对象的原型链上是否能找到对象的 prototype,来确定 instanceof 返回值。


function instance_of(L, R) {
var O = R.prototype;
L = L.__proto__;
while (true) {
if (L === null)
return false;
if (O === L)
return true;
L = L.__proto__;
}
}

代码释义

① L表示对象实例,R表示构造函数或者父类型实例

② 取R的显式原型,取L的隐式原型

③ 循环遍历,进行判断②中的两个值是否相等,相等返回true,不相等继续查找L的原型链


instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。



  • 示例:


function SetMaomi() {}
let fulai = new SetMaomi();
fulai instanceof SetMaomi

观察fulai.__proto__SetMaomi.prototype的结构:

image.png


image.png



注意点fulai instanceof SetMaomi 返回 true,则并不意味着该表达式会永远返回 trueSetMaomi.prototype 属性的值有可能会改变,改变之后的值很有可能不存在于 fulai 的原型链上,这时原表达式的值就会成为 false



二、instanceof产生继承关系


function Cat(name,age,type){
this.name = name;
this.age = age;
this.type = type;
}
function YingDuan(name,age,type,sex){
Cat.call(this,name,age,type);
this.sex = sex;
}
YingDuan.prototype = new Cat(); // 这里改变了原型指向,实现继承
var yd = new YingDuan("有鱼",2,"金渐层","男"); //创建了英短对象yd
console.log(yd instanceof YingDuan); // true
console.log(yd instanceof Cat); // true
console.log(yd instanceof Object); // true

下面为了直观的观察,我就不采用循环的方式,直接一个一个的打印出来:



  • yd instanceof YingDuan:

    image.png

  • yd instanceof Cat:

    image.png

  • yd instanceof Object:

    image.png


三、注意问题



  1. fulai instanceof SetMaomi 返回 true,则并不意味着该表达式会永远返回 true
    SetMaomi.prototype 属性的值有可能会改变,改变之后的值很有可能不存在于 fulai 的原型链上,这时原表达式的值就会成为 false

  2. instanceof 用于判断对象类型,但以下情况的结果都为false,请注意。


console.log(Number instanceof Number)  // false
console.log(String instanceof String) // false
console.log(null instanceof Object) // false,null不具有任何对象的特性,也没有__proto__属性

参考



作者:旺仔小猪
来源:juejin.cn/post/7293348107517001739
收起阅读 »

抓包调试工具的终极答案-whistle

web
前言 抓包工具是一种在计算机网络中进行调试和分析的强大工具,它能够拦截、查看和分析在网络中传输的数据包内容。通过捕获这些数据包,我们可以深入挖掘其中包含的大量有用信息。抓包工具不仅提供了直观和可视化的界面,而且具有强大的过滤和分析功能,使用户能够轻松地掌握网络...
继续阅读 »

前言


抓包工具是一种在计算机网络中进行调试和分析的强大工具,它能够拦截、查看和分析在网络中传输的数据包内容。通过捕获这些数据包,我们可以深入挖掘其中包含的大量有用信息。抓包工具不仅提供了直观和可视化的界面,而且具有强大的过滤和分析功能,使用户能够轻松地掌握网络数据流量的细节。


在计算机通信中,数据包是由发送端(如浏览器或应用程序)构建的,并通过互联网传输到接收端(如服务器或另一台计算机)。通常情况下,这些数据包由发送和接收的应用程序自行处理,用户往往无法直接观察这些数据包的内容。然而,抓包工具可以截取这些数据包,并将其内容以明文或加密的形式展示给用户。如果数据包是以明文形式发送的,或者我们可以推断出其加密方法,那么我们就可以对这些数据包进行深入的分析和解密。这样,我们便可以了解这些数据包的内容、用途和意义。


通过使用抓包工具,开发人员和系统管理员可以调试和分析网络应用程序和通信协议,以便更好地了解它们的性能、安全性和可靠性。此外,普通用户也可以利用抓包工具来了解他们正在使用的应用程序和网络服务的内部工作原理,并保障他们的网络安全和隐私。总之,抓包工具是计算机网络中不可或缺的一部分,它为我们提供了深入洞察和分析网络数据流量的能力。


抓包工具更多的分析网络流量以及数据包内容、检测网络问题、获取数据传输的详细信息、功能调试等。市面上常见的抓包工具有很多,比如说我们网页上常用到的浏览器开发者工具、移动端常用的vConsole以及市面上大家都在用的Charleswhistle,今天就简单给大家分享一下whistle的基本使用。


1. 简介


whistle主要是基于node来实现的一个跨平台web调试代理工具,whistle采用的是类似配置系统hosts的方式,一切操作都可以通过配置实现,支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式,且可以通过Node模块扩展功能


2. 安装启动


wproxy.org/whistle/ins…


1. 环境


首先要使用whistle的话,必须要具备node环境(下载地址),下载成功后可以通过命令行来查看是否已安装


node -v // 查询当前node版本信息

2.安装whistle


后面也会提到桌面端应用LightProxy,也是基于Electron和whistle的桌面端代理软件。


npm install -g whistle // Windows
sudo npm install -g whistle // Mac(非root权限)

安装成功可以使用命令whistle help 或者w2 help查看whistle的相关帮助信息


3.启动whistle


最新版本的whistle支持三种等价的命令whistlew2wproxy


w2 start // 启动whistle
w2 restart // 重启whistle
w2 stop // 停止whistle
w2 run // 调试模式启动whistle

4.配置代理


这里就以Mac配置举例,可以在设置->Wi-Fi->详细信息->代理中选择网页代理(HTTP)填入对应的ip以及端口号;


移动端这里同样以IOS为例,在Wi-Fi->HTTP代理中打开配置代理为手动,同时填入对应ip以及端口号.


我们也可以通过chrome浏览器插件SwitchyOmega来进行网页代理



  1. 点击新建情景模式

  2. 选择选项代理服务器

  3. 配置代理协议、代理ip、代理端口

  4. 点击应用选项保存并切换到代理模式


switchyOmega


5.证书安装


最后我们只需要安装根证书即可。我们打开whistle生成的浏览器生成页,点开HTTPS选项,点击二维码下载证书,这里同样以MAC和IOS为例。



1.Mac我们打开钥匙串访问,这里要注意,当我们添加完成后依旧属于不被信任状态,我们需要双击证书,在信任的里面找到使用此证书时选中始终信任,配置证书完成后我们选中Capture TUNNEL CONNECTS即可代理成功,捕捉传输内容。


证书
2.IOS同样我们通过扫码打开证书,允许描述配置文件下载,在设置已下载描述文件中安装描述文件,安装完成后我们打开通用->关于本机->证书信任设置中选择对下载的whistle证书启用完全信任即可。



如果是windows系统出现证书无法下载的情况,进入系统设置 - 网络 - Windows防火墙 - 高级设置,设置入站规则Node.js开头的都允许连接,保存确定下载;


手机端偶尔可能会遇到无法找到证书的情况,可以连接同一个局域网,访问电脑ip代理对应ip地址,扫码HTTPS进行证书下载




3.使用


whistle官网这里详细介绍了whistle相关的命令行参数,这里我们就不过多赘述。我们只介绍几个常用的功能。


1.HTTPS请求抓取:


所有配置完成后,我们打开whistle页面,浏览器或手机发起HTTPS请求后即可看到.


image.png
那么问题来了,这么多请求同时包含了预检等众多请求,我们怎么快速找到我们需要看到的接口呢?
我们可以在下方的Type filter text来进行简单的搜索功能,默认是按照url来进行搜索的,我们也可以按照固定的分类规则来进行快速查询



  1. 默认搜索url

  2. h: {word}搜索头部

  3. c: {word}搜索内容

  4. p: {word}搜索请求协议

  5. o: {word}搜索ip

  6. m: {word}搜索方法

  7. s: {word}搜索状态码


如果我们依旧觉得不够清晰该怎么办呢,我们就可以用到whistle的Rules功能,Rules支持我们通过扩展系统host配置来进行所有操作。


// whistle将通过pattern匹配来完成对应uri的操作
pattern operatorURI

pattern的匹配规则支持域名、路径、正则、精准匹配和通配符匹配


api.juejin.cn style://color=@fff&fontStyle=italic&bgColor=red

这样我们就可以更清晰的来找到我们想捕捉的内容。


image.png


2.请求响应修改


我们可以通过固定的Rules配置来对请求或者返回来进行修改测试


{pattern} method://get 请求方式修改为get
{pattern} statusCode://500 请求状态码返回500
{pattern} log:// 日志打印
{pattern} resCors:// 跨域

以上提到的是我们部分的简单修改,如果我们需要修改请求的请求体以及相应内容,我们就需要用到whistle提供的Values板块来进行配置


{pattern} reqHeaders://filepath 修改请求头 //filepath: Values里面的key或者本地文件
// reqHeaders example
{pattern} reqHeaders://{testReqHeadersJSON}
// resBody example
{pattern} resBody://{testResBodyJSON}

Values模版中配置testReqHeadersJSON和testResBodyJSON


image.png


image.png


这样就可以添加或者修改请求头内容,修改或添加响应内容同理。


image.png


3.移动端调试


whistle不仅提供强大的web调试功能,对于移动端的调试也是十分友好的。


由于移动端需要适配众多不同的浏览器和设备,包括各种尺寸的屏幕、各种操作系统和不同的设备载体,因此相对于PC端的页面调试,移动端的调试难度更加复杂。在出现问题时,排查的过程也涉及更多因素,需要我们及时发现并修复问题。对于一个合格的开发人员来说,强大的开发能力是基础,同时还需要拥有快速解决问题的能力和精准定位问题的技能,这样才能够在面对不同的问题时应对自如、犹游刃有余。


像我们在测试环境常用到的vConsole一般是不会在生产环境以一般方式展现给用户的,但是whistle提供注入js的方法能够让我们通过js代码以及vConsole等工具来进行页面调试以及问题的快速排查。


1.接口调试

这里我们就简单的以掘金首页为例



  1. 我们在Values中配置好vConsole以及对应生成实例代码;

  2. 在Rules中通过jsPrepend进行js注入
    这样我们就可以成功生成vConsole来进行调试了



vConsole.min.js的源码我们可以去github上自行下载,或者也可以通过插件来解决。


// 集成 vConsole、eruda、mdebug 等调试H5页面工具的插件
sudo npm install -g whistle.inspect

{pattern} whistle.inspect://vConsole
{pattern} whistle.inspect://eruda
{pattern} whistle.inspect://mdebug

2. 元素样式调试

whistle同时内置了Weinre和Chii来帮助我们进行调试


{pattern} weinre://{yourName}

配置Rules后我们在Whistle下拉选项下选中对应name,重新打开页面后即可进行elment调试


image.png{pattern} 同样配置Rules后我们在Whistle选项下的Plugins选中对应Chii,点击打开后选择inspect来进行element调试


{pattern} whistle.chii://

image-20230921140713086.png


4.LightProxy


下载地址


LightProxy是基于whistle使用electron开发的一个桌面端代理软件,从操作以及证书代理配置上更加简单灵活,更好的满足开发者的需求,基本使用规则同whistle一致;同时也帮我们继承了常用的像inspectvase等插件,更加方便快捷。


5.总结


Whistle作为常用的的网络调试工具之一,它不仅具备常规的抓包功能,还在跨域代理等方面展现了多样化的应用。通过巧妙的配置和强大的功能,我们可以进行深度定制和扩展,以满足各种复杂的调试需求。


这个工具的应用场景非常广泛,从简单的HTTP/HTTPS请求拦截,到复杂的爬虫和自动化测试,都可以借助Whistle实现。同时,它还支持JavaScript、TypeScript等多种编程语言,以及各种浏览器和Node.js环境。


使用Whistle进行调试非常简单,只需要简单地设置和配置,就可以轻松地实现对网络请求的拦截和修改。无论是排查问题、测试接口还是调试前端代码,Whistle都能够帮助我们快速定位问题并解决问题。它的易用性和灵活性也使得它成为了前端开发人员的得力助手。


通过使用Whistle,我们可以更好地了解网络请求的细节,掌握API接口的调用和数据传输的规律。这有助于我们优化代码、提高程序的稳定性和性能。因此,无论是初学者还是经验丰富的开发者,都应该尝试使用Whistle来提升自己的调试技能和开发效率。


参考


1.whistle官网: wproxy.org/whistle/


作者:洞窝技术
来源:juejin.cn/post/7293180747400134706
收起阅读 »

手把手教你打造一个“蚊香”式加载

web
前言 这次给大家带来的是一个类似蚊香加载一样的效果,这个效果还是非常具有视觉欣赏性的,相比前几篇文章的CSS特效,这一次的会比较震撼一点。 效果预览 从效果上看感觉像是一层层蚊香摞在一起,通过动画来使得它们达到3D金钟罩的效果。 HTML布局 首先我们通过1...
继续阅读 »

前言


这次给大家带来的是一个类似蚊香加载一样的效果,这个效果还是非常具有视觉欣赏性的,相比前几篇文章的CSS特效,这一次的会比较震撼一点。


效果预览



从效果上看感觉像是一层层蚊香摞在一起,通过动画来使得它们达到3D金钟罩的效果。


HTML布局


首先我们通过15span子元素来实现金钟罩的每一层,用于创建基本结构。从专业术语上讲,每个span元素都代表加载动画中的一个旋转的小点。通过添加多个span元素,可以创建出一串连续旋转的小点,形成一个加载动画的效果。


<div class="loader">
<span></span>
// 以下省略15span元素
</div>

CSS设计


完成了基本的结构布局,接下来就是为它设计CSS样式了。我们一步一步来分析:


首先是类名为loaderCSS类,相关代码如下。


.loader{
position: relative;
width: 300px;
height: 300px;
transform-style: preserve-3d;
transform: perspective(500px) rotateX(60deg);
}

我们将元素的定位方式设置为相对定位,使其相对于其正常位置进行定位。然后定义好宽度和高度之后,设置元素的变换样式为preserve-3d,这样可以元素的子元素也会受到3D变换的影响。除此之外,还需要transform属性来设置元素的变换效果。这里的perspective(500px)表示以500像素的视角来观察元素,rotateX(60deg)则表示绕X轴顺时针旋转60度。


这样就将一个宽高都定义好的元素进行了透视效果的3D旋转,使其以60度角度绕X轴旋转。


loader类可以理解为父容器,接下来就是loader类中的子元素span


.loader span{
position: absolute;
display: block;
border: 5px solid #fff;
box-shadow: 0 5px 0 #ccc,
inset 0 5px 0 #ccc;
box-sizing: border-box;
border-radius: 50%;
animation: animate 3s ease-in-out infinite;
}

通过以上样式,我们可以创建一个圆形的动画效果,边框有阴影效果,并且以动画的方式不断旋转。关于CSS部分大部分都是一样的,这里主要介绍一下这里定义的动画效果。名称为animate,持续时间为3秒,缓动函数为ease-in-out,并且动画无限循环播放。


@keyframes animate {
0%,100%{
transform: translateZ(-100px);
}
50%{
transform: translateZ(100px);
}
}

这是一个关键帧动画。关键帧是指动画在不同时间点上的状态或样式。首先该动画名为animate,它包含了三个时间点的样式变化:


0%100% 的时间点,元素通过transform: translateZ(-100px)样式将在Z轴上向后移动100像素,这将使元素远离视图。


50% 的时间点,元素通过transform: translateZ(100px)样式将在Z轴上向前移动100像素。这将使元素靠近视图。


通过应用这个动画,span元素将在动画的持续时间内以一定的速率来回移动,从而产生一个视觉上的动态效果。


最后就是单独为每个子元素span赋予样式了。


.loader span:nth-child(1){
top: 0;
left: 0;
bottom: 0;
right: 0;
animation-delay: 1.4s;
}
.loader span:nth-child(2){
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
animation-delay: 1.3s;
}
......
以下省略到第15span元素

第一个span元素的样式设置了top、left、bottom和right属性为0,这意味着它会填充父元素的整个空间。它还设置了animation-delay属性为1.4秒,表示在加载动画开始之后1.4秒才开始播放动画。


后面14span元素都是按照这个道理,以此类推即可。通过给span元素的动画延迟属性的不同设置,可以实现加载动画的错落感和流畅的过渡效果。


总结


以上就是整个效果的实现过程了,通过设计的动画来实现这个蚊香式加载,整体还是比较简单的。大家可以去码上掘金看看完整代码,然后自己去尝试一下,如果有什么创新的地方或者遇到了什么问题欢迎在评论区告诉我~


作者:一条会coding的Shark
来源:juejin.cn/post/7291951762948259851
收起阅读 »

【Java集合】来了两个“插班生”如何打印花名册,以数组案例带你搞懂Collection集合概念

嗨~ 今天的你过得还好吗?到那时风变得软绵绵的🌞1.1 数组的特点步骤:有三个学生,放在一个长度为3的数组花名册打印学生突然来了两个插班生,请放在数组花名册中无法插入,通过重新定义一个新的数组,组成新的花名册下面我们来实现这个案例:2.输入...
继续阅读 »


嗨~ 今天的你过得还好吗?

每件事情都会好起来的

到那时风变得软绵绵的

阳光也会为你而温暖

🌞


这个系列是我在学习Java集合这部分时候,结合书籍和Java提供的api整理的部分知识,也参考了一些网络上的文章,如果错误,望大家指出。希望本系列文章对大家学习Java有所帮助,也可以回顾下这部分的基础知识,温故而知新。


集合概述

1.1 数组的特点

Java是一种面向对象语言,对一个事物的描述都是以对象的形式存在,为了方便操作这些对象,就需要把这些对象存储起来。为容纳一组对象,我们最适宜的选择就是Array数组;而且容纳一系列的基础数据类型的话,更是必须采用数组。


我们通过一个小案例来回顾一下之前的数组知识。数组不仅可以存放基本数据类型也可以容纳属于同一种类型的对象。


数组案例:一个小班有三个学生,请打印学生的姓名和年龄?

步骤:

  • 有三个学生,放在一个长度为3的数组花名册

  • 打印学生

  • 突然来了两个插班生,请放在数组花名册中

  • 无法插入,通过重新定义一个新的数组,组成新的花名册


下面我们来实现这个案例:

1.首页创建一个 javaee 的项目

Description


2.输入名称 collectPractice,选择对应的 JDK 版本 1.8

Description


3.新增 Class  student

Description

4.文件内容如下:

public class Student {
private String name;
private int age;

public Student(String name, int age) {
this.name = name;
this.age = age;
}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public int getAge() {
return age;
}

public void setAge(int age) {
this.age = age;
}

@Override
public String toString() {
return "Student{" +
"name='" + name + '\'' +
", age=" + age +
'}';
}
}

编程学习,从云端源想开始,课程视频、在线书籍、在线编程、一对一咨询……你想要的全部学习资源这里都有,重点是统统免费!点这里可以查看

5.在 Main.java 中,我们将要完成的需求写到注释中,逐行去打印结果

public class Main {
public static void main(String[] args) {

/*
我们的业务需求是这样的:
1. 有三个学生,放在一个长度为3的数组花名册
2. 打印学生
3. 突然来了两个插班生,请放在数组花名册中
4. 请获取第三个学生的姓名
* */

//定义一个数组,存储我们的数据
Student[] students = new Student[3];
Student student1 = new Student("麦迪", 29);
Student student2 = new Student("库里", 29);
Student student3 = new Student("杜兰特", 29);


//记录设置到数组中
students[0] = student1;
students[1] = student2;
students[2] = student3;

//打印 花名册 通过数组工具
System.out.println("学生花名册---"+ Arrays.toString(students));
}
}

结果:

Description

6.来了两个新学生,也要加入到花名册中,直接使用数组添加,打印花名册,发现报错

import java.util.Arrays;

public class Main {
public static void main(String[] args) {

/*
我们的业务需求是这样的:
1. 有三个学生,放在一个长度为3的数组花名册
2. 打印学生
3. 突然来了两个插班生,请放在数组花名册中
4. 请获取第三个学生的姓名
* */

//定义一个数组,存储我们的数据
Student[] students = new Student[3];
Student student1 = new Student("麦迪", 29);
Student student2 = new Student("库里", 29);
Student student3 = new Student("杜兰特", 29);


//记录设置到数组中
students[0] = student1;
students[1] = student2;
students[2] = student3;

//打印 花名册 通过数组工具
System.out.println("学生花名册---"+ Arrays.toString(students));

//两个插班生
Student student4 = new Student("科比", 40);
Student student5 = new Student("欧文", 25);

students[3] = student4;
students[4] = student5;

System.out.println("学生花名册---"+ Arrays.toString(students));
}
}

打印结果

Description


7.所以在此时,我们需要重新 new 一个 长度为 5 的数组,重新设置新的花名册

public class Main {
public static void main(String[] args) {

/*
我们的业务需求是这样的:
1. 有三个学生,放在一个长度为3的数组花名册
2. 打印学生
3. 突然来了两个插班生,请放在数组花名册中
4. 请获取第三个学生的姓名
* */

//定义一个数组,存储我们的数据
Student[] students = new Student[3];
Student student1 = new Student("麦迪", 29);
Student student2 = new Student("库里", 29);
Student student3 = new Student("杜兰特", 29);


//记录设置到数组中
students[0] = student1;
students[1] = student2;
students[2] = student3;

//打印 花名册 通过数组工具
System.out.println("学生花名册---"+ Arrays.toString(students));

//两个插班生
Student student4 = new Student("科比", 40);
Student student5 = new Student("欧文", 25);

// students[3] = student4;
// students[4] = student5;
//
// System.out.println("学生花名册---"+ Arrays.toString(students));

Student[] studentsNew = new Student[5];
for (int i = 0; i < students.length; i++) {
studentsNew[i] = students[i];
}
studentsNew[3] = student4;
studentsNew[4] = student5;


System.out.println("学生花名册---"+Arrays.toString(students));
System.out.println("学生新的花名册---"+Arrays.toString(studentsNew));
}
}

打印结果:

Description


分析结论

  • 数组长度在初始化后,就确定了,不能更改,不便于存储数量的扩展。比如我们再来了两个插班生,直接往元素组添加元素,会报错误信息。

  • 数组提供的属性和方法少,不便于操作。比如我们在打印花名册时,需要借助工具类的toString方法。

  • 存储的类型可以是基本类型,也可以是对象,但是必须是同一类型。


因为数组存在的这些缺点,Java语言又为我们提供了一种新的存储数据并且存储空间可变的容器,这就是我们Java集合的概念。它和数组一样,都是可以存储数据的容器,一种存储空间可变的存储模型,并且存储的数据容量可以随时发生改变。


1.2 集合的特点

最后我们来总结一下集合的特点:

  • 可以动态保存任意多的对象,使用方便;

  • 集合提供了一系列操作元素的方法,使集合元素的添加和修改等操作变得简单;

  • 集合还可以保存具有映射关系的关联数据;

  • 集合只能保存对象,实际上保存的是对象的引用地址。


文章就写到这里了,觉得不错的话点个赞支持一下吧!


收起阅读 »

为了方便写文章,我开发了一个目录树🌲生成器

web
这个工具主要是为了方便在写文章的时候,展示自己的项目的目录结构,或者在README文件中介绍项目使用的,上传文件夹后可以生成目录结构,支持一键复制。 您可以通过以下链接访问:目录树生成器 - 在线使用 Next.js 是一个React全栈框架,它不仅可以用于...
继续阅读 »

这个工具主要是为了方便在写文章的时候,展示自己的项目的目录结构,或者在README文件中介绍项目使用的,上传文件夹后可以生成目录结构,支持一键复制。


image.png


您可以通过以下链接访问:目录树生成器 - 在线使用


Next.js


是一个React全栈框架,它不仅可以用于构建服务器端渲染(SSR),也支持支持静态渲染。


webkitdirectory



HTMLInputElement.webkitdirectory 是一个反应了 HTML 属性 webkitdirectory 的属性,其指示 <input> 元素应该让用户选择文件目录而非文件。在选择文件目录后,该目录及其整个内容层次结构将包含在所选项目集内。可以使用 webkitEntries (en-US) 属性获取选定的文件系统条目。

———————MDN



简而言之 利用这属性,我们可以在浏览器中上传文件夹,并获取到文件的目录结构。


可以看一个简单的栗子🌰


这个功能,也有一个兼容问题,具体参考这个:


image.png


有一些老版本的浏览器和安卓端火狐浏览器不支持的无法使用该功能。


数据转换


我们要将原数据转换一下


-   Java/main/main.java
- Java/main/main.class
- Java/hello/HelloWorld.class
- Java/hello/HelloWorld.java
- Java/OOP/xx.js
- Java/OOP/Person.class
- Java/OOP/oop.class
- Java/OOP/oop.java

转换为:


{
"name": "Java",
"type": "folder",
"contents": [
{
"name": "main",
"type": "folder",
"contents": [
{
"name": "main.java",
"type": "file"
},
{
"name": "main.class",
"type": "file"
}
]
},
{
"name": "hello",
"type": "folder",
"contents": [
{
"name": "HelloWorld.class",
"type": "file"
},
{
"name": "HelloWorld.java",
"type": "file"
}
]
},
{
"name": "OOP",
"type": "folder",
"contents": [
{
"name": "xx.js",
"type": "file"
},
{
"name": "Person.class",
"type": "file"
},
{
"name": "oop.class",
"type": "file"
},
{
"name": "oop.java",
"type": "file"
}
]
}
]
}

将路径结构转化为对象结构,方便我们的后续逻辑处理,转化方法是:



function convertToDirectoryStructure(fileList) {
const directory = {
name: "App",
type: "folder",
contents: [],
};

for (let i = 0; i < fileList.length; i++) {
const pathSegments = fileList[i].webkitRelativePath.split("/");
let currentDirectory = directory;

for (let j = 0; j < pathSegments.length; j++) {
const segment = pathSegments[j];
const isDirectory = j < pathSegments.length - 1;

let existingEntry = currentDirectory.contents.find((entry) => entry.name === segment);
if (!existingEntry) {
existingEntry = { name: segment };
if (isDirectory) {
existingEntry.type = "folder";
existingEntry.contents = [];
} else {
existingEntry.type = "file";
}
currentDirectory.contents.push(existingEntry);
}

currentDirectory = existingEntry;
}
}

return directory.contents[0];
}

最终效果


最后我们再加上一个一键复制的功能,就完成了。



最后我是将功能优化后部署到了GitHub Pagas上,如何将Next.js部署到GitHub Pages,可以看看我的这篇 如何将Next.js部署到Github Pages


最后希望大家多多使用,给个star,GitHub地址:dir-tree


作者:九旬
来源:juejin.cn/post/7292955000454692875
收起阅读 »

ElectronEgg 快速开发一个桌面应用

web
大家好,我是哆啦好梦。electron-egg 3.8.0 终于发布了。 近3个月的累积更新,让 electron-egg 框架的开发体验更加丝滑。框架也终于到了一个功能完善且非常稳定的版本。 目前,框架已经广泛应用于记账、政务、企业、医疗、学校、股票交易、E...
继续阅读 »

大家好,我是哆啦好梦。electron-egg 3.8.0 终于发布了。


近3个月的累积更新,让 electron-egg 框架的开发体验更加丝滑。框架也终于到了一个功能完善且非常稳定的版本。


目前,框架已经广泛应用于记账、政务、企业、医疗、学校、股票交易、ERP、娱乐、视频等领域客户端,请放心使用!


home.png


为什么使用


桌面软件(办公方向、 个人工具),仍然是未来十几年 PC 端需求之一,提高工作效率


electron 技术是流行趋势,QQ、百度翻译、阿里网盘、迅雷、有道云笔记 ......


开源


gitee:gitee.com/dromara/ele… 3900+


github:github.com/dromara/ele… 1200+


本次更新


3.8.0



  1. 【增加】新增 ee-bin exec 命令,支持自定义命令。

  2. 【增加】新增 ee-core jobs 配置,打开/关闭 messageLog。

  3. 【优化】优化 ee-core jsondb 异常处理。

  4. 【优化】优化 ee-core controller/services 异常捕获并写log。

  5. 【优化】优化 ee-bin loading 动画居中。

  6. 【优化】优化 electron-egg logo,优化mac图标,优化Linux系统图标。

  7. 【优化】优化 electron-egg loading 动画居中。

  8. 【升级】升级ee-core v2.6.0,升级ee-bin v1.3.0


下载


# gitee
git clone https://gitee.com/dromara/electron-egg.git

# github
git clone https://github.com/dromara/electron-egg.git

安装


# 设置国内镜像源(加速)
npm config set registry=https://registry.npmmirror.com

#如果下载electron慢,配置如下
npm config set electron_mirror=https://registry.npmmirror.com/-/binary/electron/

# 根目录,安装 electron 依赖
npm i

# 进入【前端目录】安装 frontend 依赖
cd frontend
npm i

运行项目


npm run start

example.png


用户案例


aw-3.png


p1.png


p3.png


更多


访问官网:electron-egg: 一个入门简单、跨平台、企业级桌面软件开发框架


作者:哆啦好梦
来源:juejin.cn/post/7292961931509186595
收起阅读 »

菜鸟前端故事之翅膀硬了

web
2019的故事 最近太忙再加上掘金对此类文章并不推荐,所以写作热情有所消退,停了一段时间没更新,现趁着有点空再继续写一下2019的故事。 话接前文,在之前度过了还算完美的2018,收获了比较满意的工作,也找到了对象,可谓是事业爱情小丰收。 在过年的时候,我人生...
继续阅读 »

2019的故事


最近太忙再加上掘金对此类文章并不推荐,所以写作热情有所消退,停了一段时间没更新,现趁着有点空再继续写一下2019的故事。


话接前文,在之前度过了还算完美的2018,收获了比较满意的工作,也找到了对象,可谓是事业爱情小丰收。


在过年的时候,我人生第一次有了上万存款,发了不少红包给家里老人和晚辈,那种回报家人的感觉真的很好。
现在看来9k的薪资不算什么,但算是很快达到了老爸的预期。若不是计算机专业和互联网的崛起,我这破学校不可能刚毕业就有这种薪资,我庆幸生对了时代,做了对的选择。


加薪


小美妆没有年终奖,年末聚餐的时候发了800块红包,我收到很开心只觉得这是一笔意外的收入。当时也不懂什么13薪之类的,更不知道、也不敢想象在互联网还有四五个月的年终奖,觉得没有很正常。即使有听说腾讯给全体发iphone、游戏工作室数十个月年终,也觉得很遥远,那远不是我能触及的层次,又何苦去比较。


包括小美妆的976作息,因为自己的菜,便也觉得不合理的事也是合理。


可喜的是刚过完年不久,小张总就给我们加了工资,1000块,我开心了很久,不是仅仅是因为多了1000块,另一层含义是我的月薪上万了,传说中的月薪过万我终于达到了,我还记得我当时激动的跟我爸妈还有女友分享,爸妈直呼老板良心让我跟着好好干,在他们眼里能主动加薪还加这么多的太难得了,回想起来还是觉得那一刻很幸福。


躺不平


今年我们有个任务就是要把小美妆的网站做成一个小程序,一度令当时的我头疼,因为我只会jquery连vue都不会更别说小程序了。一开始甚至想直接用小程序包裹webview直接套壳做好的网站了,但是理智和直觉告诉我不能那样,可能会挖大坑。


没办法只有埋头苦学,没想到仅仅两天我就可以上手了,并且把网站最难的特效部分转为用小程序实现了,原来小程序也没那么难嘛,心想我还是有点天赋的。


到后来的其他网站我开始尝试用vue去做,发现跟小程序几乎都是一样,也就顺风顺水了。估计这个顺序跟大多数前端都是反着来的,但也总算是会了一些主流现代的技术。
可惜那时候我还是用的引入CDN的方式引入vue,没有尝试构建工具,这也让我在后面的职业经历中吃了瘪。


在那一年我们做了很多小程序,移动端H5,后台管理系统,内部外部用的都有,对移动端开发、兼容有了一定的技术积累,后面也做了支付宝的小程序。


其实大多都是重复的技术,除了熟练度没有什么提高,到年中的时候已经算是进入平稳开发期,没有什么水花,也没有了深入学习的心思,因为大部分需求已经不需要动脑子
就能实现。用现在流行的一个词来说就是:躺平了。


小张总讲情义,只要我认真完成任务他应该不会赶我走,小作坊朋友式的公司氛围舒服,薪水也不错,不禁开始妄想熬成老员工躺平一辈子多好。


我突然意识到,自己好像成了守哥,可这似乎也没错。


幸运的是接下来发现的一件事让我意识到技术必须不断进步,而不幸的是明白这个道理让我们付出了惨重的代价。


昂贵的教训


在我们来之前公司是有一台旧的云服务器,是某财务软件公司给我们部署财务系统用,使用windowsServer系统,里面存放了相当多的财务信息,以及我们的公众号服务端项目、数据库。


在一天早上我们突然接到用户反馈公众号报错服务故障了,起初我们还以为又是夜间突发流量导致宕机了,心想着重启一下就好。可进入服务器一看却傻了眼,各种文件都被清空,变成了加密文件,连数据库也被删得一干二净只留下大约这么一段话:


recovery data connect email xxx


我们才意识到服务器被攻击入侵了,黑客将我们的数据全都加密,并勒索要求支付比特币才能解锁。


我们的财务数据、公众号用户的充值信息全没了。我清晰的记得,那一刻我的心凉到了冰点,因为我们的数据库已近半年没有备份。即使宽宏大量的小张总知道后也有些生气了,是啊,这件事带来的后果太麻烦了,毫无疑问技术部门负全责。


面对小张总的追问,我异常艰难的开口告诉了实情,在写这段的时候我仍然感觉令人窒息。
报警?支付赎金?找专业人士解密?那段时间我忙得团团转,急得像热锅上的蚂蚁,只想能够挽回损失。比特币赎金的价格高达十几万,而且也非常冒险很可能被再次勒索或者解不开,咨询专业人士都说解不了,甚至还有人冒出来说知道谁干的,可以作为中间人担保帮我们付费解锁。


我才明白原来这种事早已经形成了一条完整的黑色产业链,同时也对黑客这个词不再敬畏,而是深恶痛绝。随意的一次攻击可能毁掉一家公司,让上百无辜的人失业。


还记得有个坊间传闻说阿里面试某低学历高手,高手当面破解阿里系统,被破格录取并重用。有人如法炮制面试鹅厂,刚破解完腾讯系统当场报警被抓。以此来传言阿里格局大,腾讯格局小。虽然这个流言多半是假的,但我的态度在经历被勒索之后也变成了支持腾讯的一方,违法的事就是违法,不因场合而改变性质,永远也不应鼓励这种行为。不然谁都去破解一下,总有出大事的一天。


后来经过深思熟虑小张总还是决定不屈服,而是在现在基础上补救、向用户致歉补偿等措施。而我也开始拼命恶补网络安全方面的知识,这种情况要是再出现一次,即使老板不开除我,我自己也没脸待下去了。后来我们将系统换成了linux,把不该打开的端口也都关闭了,设置了强密码,安排了各种云服务商的安全服务,最重要的是做了db的定时备份。从那以后我们没再出过安全上的问题。


这件事给我好好的上了一课,在解决问题的过程中,面对很多技术一抹黑的境况也让我觉得心里没底,同时给了我要不断学习深入研究的决心。


技术态度的转变


自那以后,我意识到了技术是片汪洋大海,而之前的我不过是在小水坑里扑腾。我开始学习很多工作中暂时用不到的技术,或者在工作中尽量使用新的技术,这也是小团队的好处,没有历史包袱想怎么搞就怎么搞。


我开始学了react,学了php做自己厌恶的服务端,学了linux买了自己的服务器做了自己的网站,也用RN开始写App,第一次了解到了算法题的存在并开始练习,我疯狂的想要提升自己,不允许存在任何技术上的短板。我给自己列了长长的一串学习清单,还因为有其他公司看中我们的小程序想嵌入,去跟上市公司谈合作,签合同。那是除了在小外包入职时期以外的另一段高速汲取知识并成长的时光。



如果有前端初学的朋友在看,我想顺便提一下,个人认为想成为一名优秀的软件工程师,服务端是你无法避开的一环,虽然不需要精通,但是也不要一味的躲避。



2019在经历波折后归于平淡,在平淡的年末却又爆发了疫情,平时总是和女友两个城市来回跑,因为疫情居家被关到了一起,她还担心总被封闭在一起两个人会矛盾显现,结果没想到住一起那么快乐,感情越来越好,給枯燥的广漂生活增加了很甜蜜的一段时光。哈哈抱歉秀了一段,那时候真是觉得糟了,我陷入爱河啦。


离开小美妆


没有不散的宴席。


偶尔会听到小张总吐槽我们部门一年成本几十万好肉疼,不管是不是玩笑话,我也理解这种体量的公司养几个全职的程序员是极为奢侈的。


后来的近一年内我的工资逐渐涨到了12k左右,那时候的我对市面上的行情开始有了些了解,我同时兼任产品、ui、前端、项目管理的工作量,这个水平还是偏低的。


再加上当时的我也开始为未来做打算,我想要的东西很多,我也想给我爱的人更多,因为后来我接过了武汉房子的房贷,当时一个月扣除花费后只能存下三千块,照这个水平我猴年马月能过上我想要的生活啊。而小张总的话也侧面反应了我的薪水已经不会再有什么增长空间。说得更严重一点,技术部门甚至已经成为了公司的负担,后面小张总已经打算接外面的项目来做了。


有了爱人,有了技术,随之而来的便是动力与野心。


虽然我理解守哥,但我却不再想成为守哥。


总结下离开的3大原因:



  • 翅膀硬了觉得没有成长空间了

  • 真心希望给公司减负

  • 不想接外包项目
    基于以上的因素,我决定去到深圳,开始面试,我想要进入更强大的公司。


面试吃瘪之旅


第一次打开了招聘软件参与社招(找实习只用了下实习僧),被hr打招呼的热情搞得受宠若惊,后来才知道全是外包.....


很快就又遇到了某软,没错就是那个实习要录用又不留用我的某软,上来就要我学位证,没有社招经验的我还以为都是这样,啥也没干就老老实实的交了资料。


那时候不觉得外包经历是扣分项,得意洋洋的把小外包的实习经历写在了简历上,充了充工作年限,还写了自己兼任各种岗位(现在看来无疑是扣分项),估计hr心想这人真是个二笔。


hr先问了我现在的薪资,听完说他们这边最多给我13k,他们是按经验算薪资,你再牛不好意思你练习时长都还不够两年半,13k封顶了。我还是试着面了一下非常容易就过了,但是没选择去,只是试了试面试的感觉,我还是不傻的,这个涨幅和公司不值得。后来又面了一些公司比如万科、宝能之类的大型企业,基本有一半的通过率,那个阶段真是处于互联网的黄金年代,岗位多经济好。


当时很喜欢万科,可惜面试官问我微服务我根本答不上来,遗憾挂掉。至于bat之流的公司,还是不敢想。后来还是忍不住试着投了下腾讯,居然拿到了面试机会,我望着印着腾讯logo的面试邀请邮件,充满了渴望。至于面试结果当然不必期待,被一番吊打后挂掉,因为差距太大我也就对互联网大厂死了心。不过当时面试的小鹅拼拼部门据说非常累,而且后面整体被裁撤了。


之后通过了宝能的面试,在当时的我眼里可是大公司,公积金顶格交满,还有双休和食堂,虽然把我薪资压到了13k但我还是兴致勃勃准备去,可是offer一直没审批下来,当时搞得我一度很失落。


后来才知道宝能当时处于内部动荡期,已经锁了hc。


涨幅70%


宝能一直没消息我只能继续面,后来有一家大小周跨境电商公司给我了16x13,还有一家双休金融公司给了18x14,果断选择了后者,这个涨幅令当时的我激动不已,在接到oc后差点没跳起来,也算是正式年薪突破二十万了。


而且还给我了高级前端工程师的title,虽然也是在后来的经历中才知道非名企的职级就是个鸡肋,但当时可以说满足至极。意外的是宝能offer卡了其实是一件大好事,也或许是命运的眷顾。


因为过后不久宝能hr说愿意立即给我发offer,但是当时我已经入职金融公司就拒绝了。再后来就是宝能公积金断缴的消息,hr自己也离职了,再到前两天还看到宝能的姚总拖欠薪资被打的新闻,没进去走了狗屎运。


在拿到offer当天我跟小张总提了离职,他很惊讶,挽留了我并且说愿意加薪,但是我知道不可能在小美妆发展了,离开公司对双方都是好事,小张总的挽留可能只是出于客套或者情义。


其他几个小伙伴也很震惊,不理解这么舒服的地方为什么要离开,去外面肯定受拘束还要加班。可我已执意离开。


因为不好说那些肉麻的话,我在微信给小张总发了长长的感谢的文字。离开那月的工资多了几千奖金,我明白那是小张总对我的肯定,离职后的一天我仍然去了公司,把一个新项目的需求框架谈好才走,免得小伙伴们一时没法适应要自己去处理需求的情况。


至此,我正式离开了小美妆,而跟我一起来广州的小伙伴现在2023年仍然在那里就职。
非常感谢小张总的信任和包容,愿意给一个不认识的菜鸟机会,让他去组建团队,管理项目,而我也回报了一个两年流水过亿的项目。


这个项目也成为了我简历上闪耀的一段背书,或许也是之前大厂愿意给我面试机会的原因。


巅峰跃升


写得有点多了,下次再继续写在金融公司呆了不久又离开的故事,以及我职业经历的的再一次巅峰跃升,欢迎各位小伙伴留言交流~


作者:鹅猴
来源:juejin.cn/post/7264383071318671421
收起阅读 »

如何制作 GitHub 个人主页

web
原文链接:http://www.bengreenberg.dev/posts/2023-… 人们在网上首先发现你的地方是哪里?也许你的社交媒体是人们搜索你时首先发现的东西,亦也许是你为自己创建的投资组合网站。然而,如果你使用GitHub来分享你的代码并参与开源...
继续阅读 »

原文链接:http://www.bengreenberg.dev/posts/2023-…


人们在网上首先发现你的地方是哪里?也许你的社交媒体是人们搜索你时首先发现的东西,亦也许是你为自己创建的投资组合网站。然而,如果你使用GitHub来分享你的代码并参与开源项目,那么你的GitHub个人主页可能是人们为了了解你而去的第一个地方。


你希望你的GitHub个人主页说些什么?你希望如何以简明易读的方式向访客表达对你的重要性以及你是谁?无论他们是未来的雇主还是开源项目的潜在合作伙伴,你都必须拥有一个引人注目的个人主页。


使用GitHub Actions,你可以把一个静态的markdown文档变成一个动态的、保持对你最新信息更新的良好体验。那么如何做到这一点呢?


我将向你展示一个例子,告诉你如何在不费吹灰之力的情况下迅速做到这一点。在这个例子中,你将学习如何抓取一个网站并使用这些数据来动态更新你的GitHub个人主页。我们将在Ruby中展示这个例子,但你也可以用JavaScript、TypeScript、Python或其他语言来做。


GitHub个人主页如何运作


你的GitHub个人主页可以通过在网页浏览器中访问github.com/[你的用户名]找到。那么该页面的内容来自哪里?


它存在于你账户中一个特殊的仓库中,名称为你的账户用户名。如果你还没有这个仓库,当你访问github.com/[你的用户名]时,你不会看到任何特殊的内容,所以第一步是确保你已经创建了这个仓库,如果你还没有,就去创建它。


探索仓库中的文件


仓库中唯一需要的文件是README.md文件,它是你的个人主页页面的来源。


./
├── README.md

继续在这个文件中添加一些内容并保存,刷新你的用户名主页,你会看到这些内容反映在那里。


为动态内容添加正确的文件夹


在我们创建代码以使我们的个人主页动态化之前,让我们先添加文件夹结构。


在顶层添加一个名为.github的新文件夹,在.github内部添加两个新的子文件夹:scripts/workflows/


你的文件结构现在应该是这样的:


./
├── .github/
│ ├── scripts/
│ └── workflows/
└── README.md

制作一个动态个人主页


对于这个例子,我们需要做三件事:



  • README中定义一个放置动态内容的地方

  • scripts/中添加一个脚本,用来完成爬取工作

  • workflows/中为GitHub Actions添加一个工作流,按计划运行该脚本


现在让我们逐步实现。


更新README


我们需要在README中增加一个部分,可以用正则来抓取脚本进行修改。它可以是你的具体使用情况所需要的任何内容。在这个例子中,我们将在README中添加一个最近博客文章的部分。


在代码编辑器中打开README.md文件,添加以下内容:


### Recent blog posts

现在我们有了一个供脚本查找的区域。


创建脚本


我们正在构建的示例脚本是用Ruby编写的,使用GitHub gem octokit与你的仓库进行交互,使用nokogiri gem爬取网站,并使用httparty gem进行HTTP请求。


在下面这个例子中,要爬取的元素已经被确定了。在你自己的用例中,你需要明确你想爬取的网站上的元素的路径,毫无疑问它将不同于下面显示的在 posts 变量中定义的,以及每个post的每个titlelink


下面是示例代码,将其放在scripts/文件夹中:


require 'httparty'
require 'nokogiri'
require 'octokit'

# Scrape blog posts from the website
url = "<https://www.bengreenberg.dev/blog/>"
response = HTTParty.get(url)
parsed_page = Nokogiri::HTML(response.body)
posts = parsed_page.css('.flex.flex-col.rounded-lg.shadow-lg.overflow-hidden')

# Generate the updated blog posts list (top 5)
posts_list = ["\n### Recent Blog Posts\n\n"]
posts.first(5).each do |post|
title = post.css('p.text-xl.font-semibold.text-gray-900').text.strip
link = "<https://www.bengreenberg.dev#{post.at_css('a')[:href]}>"
posts_list << "* [#{title}](#{link})"
end

# Update the README.md file
client = Octokit::Client.new(access_token: ENV['GITHUB_TOKEN'])
repo = ENV['GITHUB_REPOSITORY']
readme = client.readme(repo)
readme_content = Base64.decode64(readme[:content]).force_encoding('UTF-8')

# Replace the existing blog posts section
posts_regex = /### Recent Blog Posts\n\n[\s\S]*?(?=<\/td>)/m
updated_content = readme_content.sub(posts_regex, "#{posts_list.join("\n")}\n")

client.update_contents(repo, 'README.md', 'Update recent blog posts', readme[:sha], updated_content)

正如你所看到的,首先向网站发出一个HTTP请求,然后收集有博客文章的部分,并将数据分配给一个posts变量。然后,脚本在posts变量中遍历博客文章,并收集其中的前5个。你可能想根据自己的需要改变这个数字。每循环一次博文,就有一篇博文被添加到post_list的数组中,其中有该博文的标题和URL。


最后,README文件被更新,首先使用octokit gem找到它,然后在README中找到要更新的地方,并使用一些正则: posts_regex = /### Recent Blog Posts\n\n[\s\S]*?(?=<\/td>)/m


这个脚本将完成工作,但实际上没有任何东西在调用这个脚本。它是如何被运行的呢?这就轮到GitHub Actions出场了!


创建Action工作流


现在我们已经有了脚本,我们需要一种方法来按计划自动运行它。GitHub Actions 提供了一种强大的方式来自动化各种任务,包括运行脚本。在这种情况下,我们将创建一个GitHub Actions工作流,每周在周日午夜运行一次该脚本。


工作流文件应该放在.github/workflows/目录下,可以命名为update_blog_posts.yml之类的。以下是工作流文件的内容:


name: Update Recent Blog Posts

on:
schedule:
- cron: '0 0 * * 0' # Run once a week at 00:00 (midnight) on Sunday
workflow_dispatch:

jobs:
update_posts:
runs-on: ubuntu-latest

steps:
- name: Check out repository
uses: actions/checkout@v2

- name: Set up Ruby
uses: ruby/setup-ruby@v1
with:
ruby-version: 3.1

- name: Install dependencies
run: gem install httparty nokogiri octokit

- name: Scrape posts and update README
run: ruby ./.github/scripts/update_posts.rb
env:
GITHUB_TOKEN: $
GITHUB_REPOSITORY: $

这个工作流是根据cron语法定义的时间表触发的,该时间表指定它应该在每个星期天的00:00(午夜)运行。此外,还可以使用workflow_dispatch事件来手动触发该工作流。


update_posts工作由几个步骤组成:



  • 使用 actions/checkout@v2操作来签出仓库。

  • 使用 ruby/setup-ruby@v1 操作来设置 Ruby,指定的 Ruby 版本为 3.1。

  • 使用 gem install 命令安装所需的 Ruby 依赖(httpartynokogirioctokit)。

  • 运行位于.github/scripts/目录下的脚本 update_posts.rbGITHUB_TOKENGITHUB_REPOSITORY环境变量被提供给脚本,使其能够与仓库进行交互。


有了这个工作流程,你的脚本就会每周自动运行,抓取博客文章并更新README文件。GitHub Actions负责所有的调度和执行工作,使整个过程无缝且高效。


将所有的东西放在一起


如今,你的网络形象往往是人们与你联系的第一个接触点--无论他们是潜在的雇主、合作者,还是开源项目的贡献者。尤其是你的GitHub个人主页,是一个展示你的技能、项目和兴趣的宝贵平台。那么,如何确保你的GitHub个人主页是最新的、相关的,并能真正反映出你是谁?


通过利用 GitHub Actions 的力量,我们展示了如何将你的 GitHub 配置文件从一个静态的 Markdown 文档转变为一个动态的、不断变化关于你是谁的例子。通过本指南提供的例子,你已经学会了如何从网站上抓取数据,并利用它来动态更新你的 GitHub个人主页。虽然我们的例子是用Ruby实现的,但同样的原则也可以用JavaScript、TypeScript、Python或你选择的任何其他语言来应用。


回顾一下,我们完成了创建一个Ruby脚本的过程,该脚本可以从网站上抓取博客文章,提取相关信息,并更新你的README.md文件中的"最近博客文章"部分。然后,我们使用GitHub Actions设置了一个工作流,定期运行该脚本,确保你的个人主页中保持最新的内容。


但我们的旅程并没有就此结束。本指南中分享的技术和方法可以作为进一步探索和创造的基础。无论是从其他来源拉取数据,与API集成,还是尝试不同的内容格式,都有无限的可能性。


因此,行动起来让你的 GitHub 个人主页成为你自己的一个充满活力的扩展。让它讲述你的故事,突出你的成就,并邀请你与他人合作。


以上就是本文的全部内容,如果对你有所启发,欢迎点赞、收藏、转发~


作者:chuck
来源:juejin.cn/post/7251884086537650232
收起阅读 »

什么!一个项目给了8个字体包???

web
🙋 遇到的问题 在一个新项目中,设计统一了项目中所有的字体,并提供了字体包。在项目中需要按需引入这些字体包。 首先,字体包的使用分为了以下几种情况: 无特殊要求的语言使用字体A,阿拉伯语言使用字体B; 加粗、中等、常规、偏细四种样式,AB两种字体分别对应使用...
继续阅读 »

🙋 遇到的问题


在一个新项目中,设计统一了项目中所有的字体,并提供了字体包。在项目中需要按需引入这些字体包。


首先,字体包的使用分为了以下几种情况:



  1. 无特殊要求的语言使用字体A,阿拉伯语言使用字体B;

  2. 加粗、中等、常规、偏细四种样式,AB两种字体分别对应使用 BoldMediumRegularThin 四种字体包;


所以,我现在桌面上摆着 8 个字体包:



  • A-Bold.tff

  • A-Medium.tff

  • A-Regular.tff

  • A-Thin.tff

  • B-Bold.tff

  • B-Medium.tff

  • B-Regular.tff

  • B-Thin.tff


image.png
不同语言要使用不同的字体包,不同粗细也要使用不同的字体包!


还有一个前提是,设计给的设计图都是以字体A为准,所以在 Figma 中复制出来的 CSS 代码中字体名称都是A。


刚接到这个需求时还是比较懵的,一时想不出来怎么样才能以最少的逻辑判断最少的文件下载最少的代码改动去实现在不同情况下自动的去选择对应的字体包。


因为要涉及到语言的判断,最先想到的还是通过 JS,然后去添加相应的类名。但这样也只能判断语言使用A或B,粗细还是解决不了。


image.png


看来还是要用 CSS 解决。


首先我将所有的8个字体先定义好:


@font-face {
font-family: A-Bold;
src: url('./fonts/A-Bold.ttf');
}

/* ... */

@font-face {
font-family: B-Thin;
src: url('./fonts/B-Thin.ttf');
}

image.png


🤲🏼 如何根据粗细程度自动选择对应字体包


有同学可能会问,为什么不直接使用 font-weight 来控制粗细而是用不同的字体包呢?


我们来看下面这个例子,我们使用同一个字体, font-weight 分别设置为900、500、100,结果我们看到的字体粗细是一样的。


对的,很多字体不支持 font-weight 所以我们需要用不同粗细的字体包。


image.png


所以,我们可以通过 @font-face 中的 font-weight 属性来设置字体的宽度:


@font-face {
font-family: A;
src: url('./fonts/A-Bold.ttf');
font-weight: 600;
}
@font-face {
font-family: A;
src: url('./fonts/A-Medium.ttf');
font-weight: 500;
}
@font-face {
font-family: A;
src: url('./fonts/A-Regular.ttf');
font-weight: 400;
}
@font-face {
font-family: A;
src: url('./fonts/A-Thin.ttf');
font-weight: 300;
}

注意,这里我们把字体名字都设为相同的,如下图所示,这样我们就成功的解决了第一个问题:不同粗细也要使用不同的字体包;


image.png


并且,如果我们只是定义而未真正使用时,不会去下载未使用的字体包,再加上字体包的缓存策略,就可以最大程度节省带宽:


image.png


🔤 如何根据不同语言自动选择字体包?


通过张鑫旭的博客找到了解决办法,使用 unicode-range 设置字符 unicode 范围,从而自定义字体包。


unicode-range 是一个 CSS 属性,用于指定字体文件所支持的 Unicode 字符范围,以便在显示文本时选择适合的字体。


它的语法如下:


@font-face {
font-family: "Font Name";
src: url("font.woff2") format("woff2");
unicode-range: U+0020-007E, U+4E00-9FFF;
}

在上述例子中,unicode-range 属性指定了字体文件支持的字符范围。使用逗号分隔不同的范围,并使用 U+XXXX-XXXX 的形式表示 Unicode 字符代码的范围。


通过设置 unicode-range 属性,可以优化字体加载和页面渲染性能,只加载所需的字符范围,减少不必要的网络请求和资源占用。


通过查表得知阿拉伯语的 unicode 的范围为:U+06??, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+10A60-10A7F, U+10A80-10A9F 这么几个区间。所以我们设置字体如下,因为设计以 A 字体为准,所以在 Figma 中给出的样式代码字体名均为 A,所以我们把 B 字体的字体名也设置为 A:


image.png


当使用字体的字符中命中 unicode-rang 的范围时,自动下载相应的字体包。


@font-face {
font-family: A;
src: url('./fonts/A-Bold.ttf');
font-weight: 600;
}

@font-face {
font-family: A;
src: url('./fonts/A-Medium.ttf');
font-weight: 500;
}

@font-face {
font-family: A;
src: url('./fonts/A-Regular.ttf');
font-weight: 400;
}

@font-face {
font-family: A;
src: url('./fonts/A-Thin.ttf');
font-weight: 300;
}

:root {
--ARABIC_UNICODE_RANGE: U+06??, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+10A60-10A7F, U+10A80-10A9F;
}
@font-face {
font-family: A;
src: url('./fonts/B-Bold.ttf');
font-weight: 600;
unicode-range: var(--ARABIC_UNICODE_RANGE);
}
@font-face {
font-family: A;
src: url('./fonts/B-Medium.ttf');
font-weight: 500;
unicode-range: var(--ARABIC_UNICODE_RANGE);
}
@font-face {
font-family: A;
src: url('./fonts/B-Regular.ttf');
font-weight: 400;
unicode-range: var(--ARABIC_UNICODE_RANGE);
}
@font-face {
font-family: A;
src: url('./fonts/B-Thin.ttf');
font-weight: 300;
unicode-range: var(--ARABIC_UNICODE_RANGE);
}
p {
font-family: A;
}

总结


遇到的问题:



  1. 两种字体,B 字体为阿拉伯语使用,A 字体其他语言使用。根据语言自动选择。

  2. 根据字宽自动选择相应的字体包。

  3. 可以直接使用 Figma 中生成的样式而不必每次手动改动。

  4. 尽可能节省带宽。


我们通过 font-weight 解决了问题2,并通过 unicode-range 解决了问题1。


并且实现了按需下载相应字体包,不使用时不下载。


Figma 中的代码可以直接复制粘贴,无需任何修改即可根据语言和自宽自动使用相应字体包。




参考资料:http://www.zhangxinxu.com/wordpress/2…


作者:Mengke
来源:juejin.cn/post/7251884086536781880
收起阅读 »

前端地位Up!

web
背景 大家好,我是一名前端,我有一天做了一个梦,梦见前端供不应求、梦见大家看到前端就想说:卧槽这个人是前端真牛逼、梦见Javascript突破瓶颈吊打Rust、C... 然后梦醒了,是沉溺于框架、是中台的表格的增删改查、是层出不穷的无效轮子和集成、是无趣的各种...
继续阅读 »

背景


大家好,我是一名前端,我有一天做了一个梦,梦见前端供不应求、梦见大家看到前端就想说:卧槽这个人是前端真牛逼、梦见Javascript突破瓶颈吊打Rust、C...


然后梦醒了,是沉溺于框架、是中台的表格的增删改查、是层出不穷的无效轮子和集成、是无趣的各种小白进阶培训班、是业务形态的致命一击。最终是前端在技术圈子里不如狗的地位。


何至于此?


框架-砒霜or蜜糖?


说说框架


前段跟一个google的算法大佬聊天,他说你们前端很奇怪,现在浏览器已经非常快了,但你们非要搞这样那样的框架,然后去算这个算那个,搞些hooks虚拟dom,完全看不懂在干嘛。


也许我想他说的是对于web的性能层面是对的。


首先虚拟dom也就是中间层如果纯论性能在我看来其实是并不适合现在的时代的,它在这个时代的作用就是作为多端统一以及在真实dom操作前的数据缓冲/计算层...这可能也是这个时代出现了SvelteSolid为代表的此类框架的原因。我倒是希望现在web前端的方向能走向SolidSvelte这种框架的周边社区完善开发。


可是时代的潮流不会随着个人的意志改变,果然时代是分分合合吗,现在ssr为代表的next越来越火(可能有一部分vecel的商业原因),但更重要的一个原因是去改善开发人员的体验(在多端和最佳实践方面),也就是卷颗粒度


以next举例子:我对于next其实是这么理解的,粗颗粒度reactcsr已经进无可进了,改也不好改,那么转化一下方向把,在ssr的领域去降低粒度,就像流式渲染等。


说说人


啊真糟糕,怎么情不自禁就在说框架了,是不是发现我们前端情不自禁在开发or说某个技术的时候就会与框架挂钩。就像是面试我懂某个框架的原理、我学了几个框架诸如此类的,于是我们就从一个框架到另外个框架反反复复的在路上走、打包工具也是一样的(我真的需要这么快的打包工具吗?)。


于是我们就在框架中沉溺了,也许后面会出现一些5年vue工程师10年react工程师,我们整日沉浸在框架之中,日复一日,用着固定的写法(其实我在说Vue,React在这方面会好一些),做着相似的事情,技术的成长变为了我某个框架用得怎么样。


前端工程师or框架工程师


我想啊,前端的潮流很快(娱乐圈),但其实我们要明白一个道理,我用这个东西学这个东西对我有没有收益,对用户体验是不是有很大的提升,对团队开发有没有效率的进步。如果没有的话,不如搞浏览器,当然也可以学学当个PPT天才(纯褒义)或者业务、算法、其他语言等(好堕落啊现在不是PPT就是搞业务),着实没必要把绝大多数时间留着框架上,看多了就会觉得自己很牛逼,然后开摆。


毕竟我们不是框架开发工程师(也就是资源型工具人)、我们是前端开发工程师,我们是面向屏幕开发,我们是人机交互工程师,也就是现在的一个词终端工程师,如果你不能把你的应用在所有屏幕(安卓、Ios、桌面、PC、平板)跑那应该是不合格的。


业务形态


害,说这个之前闲聊一下,我们可以看到一些产品诸如语雀云凤蝶Antd等。蚂蚁体验技术部真的把前端的地位上拉了一截,他们真的很好,可能是未来5年在国内都不会再有这么好的标志性的前端产品,可惜没有一个闭环的商业业务形态,就类似next这种,我在这里不讨论具体的一些原因和后面发生的一些事情。


进入正文,产品和业务形态决定了前端的地位,后端开发通常被认为是应用程序的基础和核心。但其实怎么说那,有的时候其实是因为国内产品思维的局限于和上文提到的沉溺于框架和搜索工具


因为我做过不少国外的产品,有一些很有创造力和创新思维的产品会提出很多天马行空,极具艺术的产品交互效果和体验,在这类产品中其实前端的地位并不算低。


但是在国内就会有这种情况:



  1. 产品不会有这种想法,他的脑子里也是一些国内的那些很普通的竞品,和数据流转逻辑

  2. 前端自己拒绝,一般来说心路历程是这样的,我先看看能不能做 => 去百度掘金搜索 => 搜不到或者框架里没有,好感觉不好做,太复杂了 => 我们换一个普通一点的效果(理由五花八门)。

  3. 大家都是这么做的,那我们这个也这么做吧。


但其实我们自己作为科技触达用户的桥梁,是有能力去推动这个事情的,一个炫酷的配色、合理的交互效果、好看的页面,是可以去给产品去给设计说的,比如我自己有时候会figma或者lottie去自己画一些图和动画效果,去主动纠正设计的颜色和间距。难道产品会拒绝让产品变得更好?设计会拒绝更好看?


说白了,自己不想去做不想去推不会也不想学,觉得很复杂,当然如果实在没有这个土壤果断跑路。


Javascript本身的问题


Javascript吊打RustC估计我是这辈子都看不到了。


Javascript是解释性语言肯定没法跟一些编译语言竞天生就不行,再加上单线程即使有解决方案也就那样。这意味着前端掌握更多语言几乎是一个必要的事情,JavaSwift,Oc这些本来就会用到的不必多说,RustPython选一门掌握也很好。


会得越多你越强,当然我还是建议大家去当PPT天才


前端自信


以后,大伙自信一点,别觉得前端就不如其他技术岗位,地位都是自己争取的,前端优势很大,语言统一、前端立马可见的效果、前端基建相对较小、前端宿主环境统一Docker和容器配置相对统一等。主要是时间,有更多的时间意味着可以做更多的事学更多的东西更多的钱~。


总结


So,改变前端环境从你我做起,你卷一波我卷一波,前端的门槛就提起来了,以后面试的基本要求就是:前端要会Js、Ts、Java、Swift、混合框架、PWA,然后薪资30k起步。


作者:溪饱鱼
来源:juejin.cn/post/7283642910301192244
收起阅读 »

一次性弄清前端上线和生产环境地址

web
💡Tips:不知道小伙伴在前端开发的时候有没有这样的困惑 前端项目打包后,我打包过的静态资源是如何访问后端服务的? 访问后端服务的时候难道不存在跨域的问题吗?如何解决的? 假如我想自己简单修改下部署后的目录该如何去做? 🥲其实不仅仅是你会有这样的疑惑,包...
继续阅读 »

💡Tips:不知道小伙伴在前端开发的时候有没有这样的困惑




  1. 前端项目打包后,我打包过的静态资源是如何访问后端服务的?

  2. 访问后端服务的时候难道不存在跨域的问题吗?如何解决的?

  3. 假如我想自己简单修改下部署后的目录该如何去做?


🥲其实不仅仅是你会有这样的疑惑,包括我在内刚接触前端的时候,由于没有后端的开发经验也会被这些问题所困扰,但是今天我们将一次性弄清楚这个问题,让我们前端的知识体系由点成线,由线成面~


一.明确问题




我们知道,我们平时在开发的时候一般都是使用proxy进行代理的,它的原理是:浏览器会先去访问本地的node服务器,然后node服务器再去代理到你要访问的后端api接口,但是我们可能平时没有node服务器的概念,因为node服务器在webpack中,我们一般是通过下面这种方式来设置



但是我们的项目上线后这种方式就不能用了,(因为Node是我们本地开发的环境,并没有办法在线上使用。)其实,我们一般会通过后端的Nginx代理来解决跨域的问题,但是你知道前端的生产地址配置是什么吗?如何通过Nginx访问后端接口呢?是直接配置的类似于http://www.xxxx.com/api/aaa这样的路径呢?还是直接是一个相对路径/prod?要想搞清楚这些,首先就要了解什么是Nginx


二.什么是Nginx




🐻是一个开源的高性能、轻量级的Web服务器和反向代理服务器,它具有事件驱动,异步非阻塞的架构,被广泛应用于构建高性能的网站,应用程序和服务。


🤡在平时开发中我们经常听到正向代理反向代理这两个名词,那么什么是反向代理,什么是正向代理哪?



  1. 反向代理:服务器的IP是被屏蔽的,也就是说客户端不知道服务器真实的地址是哪个,客户端访问的地址或者域名是访问的Nginx服务器的地址。




  1. 正向代理:和反向代理刚好相反,这个时候服务器不知道真正的客户端是哪个,也就是相当于直接访问服务器的是nginx代理服务器。



三.前端使用Nginx解决跨域




🤗什么是跨域,跨域是指在浏览器的环境下,当一个网页的JavaScript代码通过Ajax Websocket或其他技术发送HTTP请求的目标资源位于不同的域名,端口或者协议下,就会发生跨域。


🐻Nginx如何解决跨域,因为服务器和服务器之间互相请求不发生跨域,所以解决跨域的方法之一就是使用这种方案



  1. 浏览器或者客户端发送请求:http:www.xxx.com:80Nginx服务器对80端口进行监听,Nginx服务器将请求转发到后端真实的服务器地址,这样就实现了代理。




  1. Nginx基本配置项解析


server {
listen 80;
server_name yourdomain.com;

location / { // 无论访问所有路径都返回前端静态资源dist内容
root /path/to/your/frontend;
index index.html;
try_files $uri $uri/ /index.html;
}

location /api/ {
proxy_pass http://backend-server-address/api/; // 真实后端api地址
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}

当在前端代码中使用相对路径/api/users发起请求时候Nginx会将这个请求转发到真实的后端地址,不过你发现了没很多前端项目种生产环境地址都仅仅是一个/api类似这样的相对路径,很少直接是一个绝对路径。


当你请求 yourdomain.com 时,Nginx 会将前端静态资源返回给前端。前端代码中使用的相对路径 /api会基于当前域名 yourdomain.com构建完整的请求 URL。因此,前端代码请求后端地址的完整 URL 将是 yourdomain.com/api/xxx,其中 /xxx表示具体的后端接口路径。


Nginx 的反向代理配置中的 location /api/ 指令将匹配以 /api/ 开头的请求,并将这些请求代理到后端服务器上。因此,当前端代码发起相对路径请求 /api/xxx 时,Nginx 会将请求转发到 yourdomain.com/api/xxx,实现与后端接口的通信。


总结来说,前端代码中的相对路径 /api会根据当前域名构建完整的请求 URL,而 Nginx 的反向代理配置将这些请求转发到后端服务器上的相应路径。这样,前端代码就能够与后端接口进行通信。


四.前端生产环境配置




🥲既然Nginx如何代理的,以及前端打包的路径一般是什么样的我们知道了,那么我们就来唠唠作为一个前端小白该如何快速的完整的构建一个基础项目吧,其实如果基础开发的话,我们往往会使用脚手架,就以Vue开发的话,我们可以使用vuecli来快速构建项目,其实构建完之后你就可以直接npm run build打出的包就可以部署在后端服务器的,这个打出的包的根路径是默认的/,通过上面的Nginx的知识我们应该不难理解。


🤡如果我们要自己想去修改一个路径哪?我们可以在vue.config.js中进行配置,配置如下


module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/prod' : '/'
};

👹这样打出的包的静态资源的路径就是下边这样的



🥰如果是直接使用的默认的打包路径就是如下这种



五.总结




🤡最后总结一下,前端上线打包完就是一个静态文件,是一个相对路径,后端会通过Nginx来监听这个资源的请求,当匹配到/就返回静态资源,当匹配到某个/prod就将请求反向代理到后端真实服务器的地址,前端打包的是一个相对路径,Nginx会在前面拼上去具体的域名或者ip,这样就打通了线上前端访问的基本内容。


作者:一溪风月
来源:juejin.cn/post/7291952951048060940
收起阅读 »

同事看到我填写bug原因的表单, 惊呆了, 那么多字段怎么自动填充了?

web
在敏捷开发协作工具中, 公司会要求在关闭bug的时候必须填写一些字段. 其实每次填写的内容都一样的, 要选择bug原因, 是否选择, 填写根因等. 同事在旁边看我关闭了个bug, 看到我的表单是自动填充的, 就问我咋那么方便呢? 实现难度非常简单, 而在日常工...
继续阅读 »

在敏捷开发协作工具中, 公司会要求在关闭bug的时候必须填写一些字段.
其实每次填写的内容都一样的, 要选择bug原因, 是否选择, 填写根因等.


同事在旁边看我关闭了个bug, 看到我的表单是自动填充的, 就问我咋那么方便呢?


实现难度非常简单, 而在日常工作中非常有用, 并且有点小帅. 所以分享给大家.


用什么工具来修改你的网页


我选择的是arc浏览器的boost功能. 在网页上新建一个boost, 点击code, 选到js的tab就可以把编写的js插入到当前host的网页里运行了. 还有辅助功能zag可以帮你抓dom.


对于没有用arc浏览器的大家, 可以写一个chrome extension, 只需要使用content_scripts功能, 可以实现和arc的boost类似的功能: match网址url并且加载一段js. (其实功能是比arc多且灵活的)


修改jira页面


jira是个必须用, 且很多重复操作的网站. 我做了这些修改:


站会看板过滤器顺序调整


每天站会轮到的人的顺序和jira看板上不一致, 导致站会轮下一个人的时候得去找下一个人的位置. 只要获取一下看板过滤器, 调整一下子元素就行了.


const container = document.getElementsByClassName('aui-expander-content ghx-quick-content')[0]
container.children[6].remove()
container.children[10].remove()
container.children[6].after(container.children[2])
container.children[9].after(container.children[1])

看板过滤器多选改单选


jira看板的过滤器是多选的, 所以切换下一个人的时候必须把前一个人取消了, 这样每次都多一次操作.


我们只要给每个过滤器加一个点击事件, 把其他active的过滤器都点击一下就行了.


let child = null
container.onclick = function (e) {
if (child) return
child = e.target
for (let i = 0;i < container.children.length; i++) {
if (container.children[i].children[0] && container.children[i].children[0].classList.contains('ghx-active') && container.children[i].children[0].innerHTML !== child.innerHTML) {
container.children[i].children[0].click()
}
}
child = null
}

关闭bug的时候必须填写原因


公司有个规定, 关闭jira必须填写一些字段. 其实每次填写的内容都一样的, 自动填写可以节省非常多时间.


实现也非常简单, 定时器来寻找指定dom, 然后为这些dom附上指定的值.


const setInputValue = (id, value) => {
if (document.getElementById(id)) {
document.getElementById(id).value = value
}
}

setInterval(() => {
setInputValue('resolution', 10000)
setInputValue('customfield_10903', 12502)
setInputValue('customfield_12301', `故障原因:代码错误
解决方式:修复
影响范围:界面
故障处理人:yo-cwj.com`
)
}, 1000)

获取vue应用的实例来修改界面


老婆画了几套微信表情, 于是我经常登录上去看数据.


但dashboard上信息很少, 需要点到每个表情的详情中才能查看.


通过网络请求, 我看到其实在dashboard的界面, 数据已经请求到了, 于是开始我们的修改.


从dom中寻找vue实例


通过基础的vue知识, 我们知道vue实例是会挂在dom上的.


(vue作者说可以认为他是可用的, 因为vue的devtool也是依赖这个特性的, 那我们一个小脚本是更可用了)


那么哪些dom上有vue实例, 有点像个面试题, 写个简单的脚本就可以找到:


let traverse = (dom) => {
if (dom.__vue__) {
console.log(dom.__vue__._data)
}
for (let i = 0; i < dom.children.length; i++) {
traverse(dom.children[i])
}
}
traverse()

找到目标数据所在的dom, 正式的脚本就这样获取vue实例就可以了.


编写脚本


首先通过vue实例的_data属性获取到数据:


const list = document.querySelector('.page_mod_page_simple.page_home').__vue__.$parent.currentList;

然后把数据贴到对应的dom上:


const emotion_dom = document.querySelector('.table_wrp_emotion_list').querySelector('.table_body');
for (let i = 0; i < emotion_dom.children.length; i++) {
emotion_dom.children[i].children[2].innerHTML += `(${list[i].SendNum} - ${list[i].DataTime})`
}

到这里脚本就写完了, 其他的vue应用其实还可以调用vue实例中的方法获取数据, 或自己获取数据放进vue实例.


解决执行环境的问题


但把这段代码放到boost中会出现拿不到dom的\_\_vue\_\_实例的问题, 因为boost和chrome extension的执行环境并不是浏览器执行环境. 可以通过创建script并执行的方式.


let script = document.createElement('script');
script.textContent = "const list = document.querySelector('.page_mod_page_simple.page_home').__vue__.$parent.currentList;" +
"const emotion_dom = document.querySelector('.table_wrp_emotion_list').querySelector('.table_body');" +
"for (let i = 0; i < emotion_dom.children.length; i++) {" +
" emotion_dom.children[i].children[2].innerHTML += `(${list[i].SendNum} - ${list[i].DataTime})`" +
"}";
setTimeout(() => {
document.documentElement.appendChild(script);
}, 1000)

作者:nujnewnehc
来源:juejin.cn/post/7288628985322307599
收起阅读 »

关于我调部门感觉又重新面试一次这件事,做出知识总结

web
前言 这篇文章的起因是,当时上周部门调整,要调动到其他部门,最开始我以为就走个流程意思意思,一点准备都没有。没想到,去其他部门还经过了3面,感觉挺正式的,在这期间问的问题有些令我印象深刻,发现了许多不足吧,我是去年毕业的,工作了1年多了,本来以为一些基础知识...
继续阅读 »

前言



这篇文章的起因是,当时上周部门调整,要调动到其他部门,最开始我以为就走个流程意思意思,一点准备都没有。没想到,去其他部门还经过了3面,感觉挺正式的,在这期间问的问题有些令我印象深刻,发现了许多不足吧,我是去年毕业的,工作了1年多了,本来以为一些基础知识掌握的差不多了,路还远着,还得学啊!本来那天我还准备一下班就回去玩战地2042,免费周啊!啪的一下兴趣全无,总结一下知识吧,指不定什么时候用上(手动狗头)



节流


节流是指一定时间内只触发一次函数调用,如果在指定时间内多次触发,执行第一次,其他的触发将会被忽略,直到过了设定的时间间隔才触发。


function throttle (fn,delay) {
let timer;
retrun function (...args) {
if(!timer) {
fn(this,args)
timer = settimeout(()=>{
timer=null
},delay)
}
}
}

防抖


防抖是在函数调用后,在指定时间间隔后才触发一次。如果在这个时间间隔内再次触发函数,将重新计时,直到过了设定的时间间隔才会触发最后一次函数调用。


function debounce (fn,delay) {
let timer;
retrun function (...args) {
if(timer) {
clearTimetout(timer)
}
timer = settimeout(()=>{
fn(this,args)
timer=null
},delay)
}
}

数据扁平化


数组


function flatter(arr) {
let result = []
for(let i =0;i<arr.length;i++) {
if(Array.isArray(arr[i]) {
result = result.concat(flatter(arr[i]))
} esle {
result.push(arr[i])
}
}
return result
}

去重


const arr1 = [...new Set(arr)]

const arr1 = arr.map((item,index)=>{
return arr.indexof(item)==index
})

查找字符串中出现最多的字符


当时手写了一半,str.split(item).length应该还要-1才是当前字符出现的次数


  const str = ref<string>('sdfgsgdd');
const fn = (str: string) => {
const arr = Array.from(str);
let maxCount = 0;
let mostFrequentChar = '';
const Nsome = [...new Set(arr)];
Nsome.forEach((item) => {
const count = str.split(item).length - 1;
if (count > maxCount) {
maxCount = count;
mostFrequentChar = item;
}
});
console.log('出现最多的次数,字符', maxCount, mostFrequentChar);
};

闭包及其应用场景


我的回答是:
函数里面嵌套函数,并且内部函数引用了外部函数的变量,就是函数能访问其作用域外的变量


应用场景:
我的回答其中之一是:vueX中状态共享是使用了闭包,节流,防抖
但在 Vuex 中,闭包主要用于封装和共享状态,而不是用于访问和操作外部函数的变量。它使用了闭包的概念,但不是严格意义上的闭包。


1.模块化开发 2.回调函数 3.延迟执行(节流,防抖)


原型&原型链及其应用场景



  1. 原型(Prototype):



  • 每个 JavaScript 对象都有一个原型(prototype),它是一个对象。

  • 对象的原型用于共享属性和方法,当我们访问一个对象的属性或方法时,如果对象本身没有该属性或方法,JavaScript 会沿着原型链向上查找,直到找到该属性或方法或者到达原型链的顶端。

  • 原型可以通过 proto 属性访问,也可以通过 Object.getPrototypeOf() 方法获取。



  1. 原型链(Prototype Chain):



  • 原型链是由对象的原型组成的链式结构,它用于实现对象之间的继承。

  • 当我们访问一个对象的属性或方法时,如果对象本身没有该属性或方法,JavaScript 会沿着原型链向上查找,直到找到该属性或方法或者到达原型链的顶端。

  • 原型链的顶端是 Object.prototype,它是所有对象的原型。


应用场景:



  • 继承:通过原型链,我们可以实现对象之间的继承,一个对象可以继承另一个对象的属性和方法。这样可以避免重复定义和维护相似的代码,提高代码的重用性和可维护性。

  • 共享属性和方法:通过原型链,我们可以将属性和方法定义在原型上,从而实现对象之间的共享。这样可以节省内存空间,避免重复创建相同的属性和方法。

  • 扩展原生对象:通过修改原型链,我们可以扩展 JavaScript 的原生对象,为其添加新的方法和属性。这样可以为原生对象添加自定义的功能,满足特定的需求。


在没有class之前,js是怎么做面向对象的


没答出来,只知道js可以通过class实现面向对象,然后又被问在没有class之前,js是怎么做面向对象的。这也是原型链的应用场景之一,可能是前面原型链的应用场景没说这个,想给我一个提示。


在没有class关键字之前,JavaScript使用原型继承来实现面向对象编程。
javaScript 中的每个对象都有一个原型(prototype),原型是一个对象,它包含了共享的属性和方法。当我们访问一个对象的属性或方法时,如果对象本身没有该属性或方法,JavaScript 会沿着原型链向上查找,直到找到该属性或方法或者到达原型链的顶端。


通过原型链,我们可以实现对象之间的继承和共享属性和方法。下面是一个使用原型继承的示例:


// 创建一个构造函数
function Person(name, age) {
this.name = name;
this.age = age;
}
// 在构造函数的原型上定义方法
Person.prototype.sayHello = function() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};
// 创建一个 Person 对象
const person1 = new Person('Alice', 25);
// 调用对象的方法
person1.sayHello(); // 输出 "Hello, my name is Alice and I am 25 years old."

node是什么,express是什么,node服务中的中间件是用来干什么的


Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境,可以用于构建高性能的网络应用程序。它允许使用 JavaScript 在服务器端运行代码,而不仅仅局限于在浏览器中运行。


Express 是一个基于 Node.js 的 Web 应用程序框架,它提供了一组简洁而灵活的功能,用于构建 Web 应用程序和 API。Express 提供了路由、中间件、模板引擎等功能,使得构建 Web 应用程序变得更加简单和高效。


中间件的作用是增强和扩展 Node.js 服务的功能,使得处理请求和响应的过程更加灵活和可定制。通过使用中间件,可以将常见的功能模块化,提高代码的可维护性和可重用性。


Express 提供了一些内置的中间件,同时也支持自定义中间件。您可以使用内置的中间件,如 express.json()、express.urlencoded() 来处理请求体的解析,或者编写自己的中间件来满足特定的需求。


你h5怎么处理兼容性


因为是vite+v3项目,vite官方有推荐的插件库,在插件库中有一个关于浏览器兼容支持的插件:@vitejs/plugin-legacy


插件@vitejs/plugin-legacy的作用是为打包后的文件提供传统浏览器兼容性支持



  1. 首先安装插件:npm i @vitejs/plugin-legacy -D

  2. 然后在vite.config.js中配置


import legacyPlugin from '@vitejs/plugin-legacy'
export default defineConfig( {
plugins: [
legacyPlugin({
targets:['chrome 52'], // 需要兼容的目标列表,可以设置多个
additionalLegacyPolyfills:['regenerator-runtime/runtime'] // 面向IE11时需要此插件
})
]
})

rem,px,em这些有什么区别




  1. px(像素):px 是绝对单位,表示屏幕上的一个物理像素点。它是最常用的单位,具有固定的大小,不会根据其他因素而改变。例如,font-size: 16px; 表示字体大小为 16 像素。




  2. rem(根元素字体大小的倍数):rem 是相对单位,相对于根元素(即 元素)的字体大小。如果根元素的字体大小为 16 像素,那么 1rem 就等于 16 像素。如果根元素的字体大小为 20 像素,那么 1rem 就等于 20 像素。通过设置根元素的字体大小,可以方便地调整整个页面的大小。例如,font-size: 1.5rem; 表示字体大小为根元素字体大小的 1.5 倍。




  3. em(相对于父元素字体大小的倍数):em 也是相对单位,相对于父元素的字体大小。如果父元素的字体大小为 16 像素,那么 1em 就等于 16 像素。如果父元素的字体大小为 20 像素,那么 1em 就等于 20 像素。通过设置父元素的字体大小,可以影响其子元素的大小。例如,font-size: 1.2em; 表示字体大小为父元素字体大小的 1.2 倍。




总结来说,px 是绝对单位,不会随其他因素改变;rem 是相对于根元素字体大小的倍数,可以方便地调整整个页面的大小;em 是相对于父元素字体大小的倍数,可以影响子元素的大小。


在实际使用中,可以根据需求选择合适的单位。对于响应式设计,使用 rem 可以方便地调整整个页面的大小;对于局部样式,可以使用 px 或 em 来控制具体的大小。


你工作中遇到了什么坑或者解决什么让自己印象深刻的问题



  • element-plus的el-table表格的二次封装(可以使用tsx)

  • el-table表格的动态合并

  • h5 ios时调起键盘会把整个布局往上推

  • h5调用封装的app JSbrige完成返回

  • 登录的拼图验证

  • h5嵌套在微信小程序中时,由我们h5跳到三方提供的安全验证h5页面,返回时,本地存储的东西没了

  • 利用git hooks+husky+eslint完成前端代码规范和提交规范

  • 银行卡拖拽排序,把排完的顺序返回服务端


上面这些都是我解决了,也不仅仅只有这些,回头想了了下明明自己有很多可以说的,在当时就说了2,3个,然后负责人问我还有吗时,我卡壳了,居然不知道还要说什么。后面我感觉也是根据这个展开来问的


V2混入和V3的hooks,为什么V3要改成hooks的方式


感觉应该是问hooks的好处吧?反正我是答的不太对的,以下是总结:


Vue 3 引入了 Composition API(包括 setup 函数和 hooks),这是一个新的方式来组织和复用代码,与 Vue 2 的混入(mixins)有所不同。

混入在 Vue 2 中被广泛使用,它们允许你在多个组件之间共享行为。然而,混入有一些问题:



  1. 命名冲突:如果混入和组件有相同的方法或数据属性,可能会导致冲突。

  2. 来源不明:当一个组件使用了多个混入时,可能很难确定一个特定的方法或数据属性来自哪个混入。

  3. 复杂性:混入可以包含生命周期钩子、方法、数据等,这可能会增加理解和维护组件的复杂性。

    相比之下,Vue 3 的 Composition API(包括 hooks)提供了一种更灵活、更可控的方式来组织和复用代码:

  4. 更好的逻辑复用和代码组织:你可以将相关的代码(如数据、方法和生命周期钩子)组织在一起,而不是强制按照 Vue 的选项(data、methods、created 等)来组织代码。

  5. 更好的类型推断:对于使用 TypeScript 的项目,Composition API 提供了更好的类型推断。

  6. 更清晰的来源:每个函数和响应式数据的来源都非常明确,因为它们都是从特定的 hook 或 setup 函数返回的。
    因此,虽然 Vue 3 仍然支持混入,但推荐使用 Composition API 来组织和复用代码。


vue3中怎么封装一个自定义指令



  • 通过app.directive()方法注册指令,该方法接受两个参数,第一个参数是指令的名称,第二个参数是一个对象,包含指令的各个生命周期的钩子函数

  • 然后我们就可以在生命周期的钩子函数中定义指令的行为,根据指令的需求,在相应的生命周期钩子函数中编写逻辑代码


什么情况下会使用自定义指令


我的回答是:想要操作dom元素时并且这种类似情况经常出现,如节流和防抖指令,就是给dom加上disabled。按钮权限指令,给当前按钮dom一个显示和隐藏


拖拽排序


拖拽排序的实现原理主要涉及一下几个步骤:



  • 1.监听拖拽事件: 浏览器提供了一系列的拖拽事件,设置draggable="true"



    1. 开始拖拽:当用户开始拖拽一个元素时,会触发 dragstart 事件。在这个事件的处理函数中,我们可以通过 传入的dragstart(e,index) ,中的index来设置当前被拖拽元素的下标。





    1. 拖拽过程:当用户拖拽元素时,会不断触发 dragover 事件。在这个事件的处理函数中,我们需要调用 event.preventDefault 方法来阻止浏览器的默认行为,否则无法触发 拖拽 事件。





    1. 拖拽到另一个元素区域时:当用户拖拽到另一个元素时,会触发 dragenter 事件。在这个事件的处理函数中,我们可以通过 dragente(e,index)方法来获取拖拽到的元素的下标,然后根据获取的两下标来更新列表的排序。




表格动态合并


element-plus表格合并(例如前两列合并) | 耀耀切克闹 (yaoyaoqiekenao.com)


模拟new实例创建的过程



  • 1.创建了新对象并将._proto_指向构造函数.prototype

  • 2.将this指向新创建的对象

  • 3.返回新对象


function newSimulator() {
//1.创建新对象
const obj = new Object()
//2.设置_proto_为构造函数prototype
const constructor = [].shift.call(arguments)
obj._proto_ = constructor.prototype
//3.this指向新对象,也就是改变this的指向
const ret = constructor.apply(obj,arguments)
//4.返回对象或this
return typeof ret = 'object' ? ret : obj
}

冒泡排序


const arr = [1,7,9,2,3,5]
for(let i=0;i<arr.length;i++){
for(let j=0;j<arr.length-i-1;j++){
let a = []
if(arr[j]<arr[j+1]){
a =arr[j]
arr[j]=arr[j+1]
arr[j+1]=a
}
}
}


深拷贝


1.使用 JSON 序列化和反序列化


const obj={
arr:[1,2]
}
const clone = JSON.parse(JSON.stringify(obj))

2.使用递归完成深拷贝


这种方式通过递归地遍历原始对象,并对该对象的的属性进行逐一的深拷贝,以创建一个原对象的独立副本。


function deepCloneObject(obj) {
if(obj ===null||typeof object !='object') {
return obj
}
const clone = Array.isArray(obj)?[]:{}
for(let key in obj) {
if(object.prototype.hasOwnProperty.call(obj,key))
clone[key] = deepClone(obj[key])
}
retrun clone
}

函数柯里化


函数柯里化是一种将具有多个参数的函数转换为逐个应用参数的函数序列的技术。通过柯里化,我们可以将一个函数的多个参数转化为一系列嵌套的函数调用。


柯里化的优点是可以创建可复用的函数模板。通过部分应用来生成新的函数。这样可以更灵活地使用函数,并且可以方便的创建更专注于特定功能的函数。
简单的函数柯里化例子:


function add(x) {
return function(y) {
return x + y;
}
}

// 使用柯里化的add函数
var add5 = add(5);
console.log(add5(3)); // 输出 8
console.log(add5(7)); // 输出 12

封装一下


function curry(fn) {
return function curried(...args) {
if(args.length>=fn.length) {
return fn.apply(this,args)
} else {
return function(...moreArgs) {
return curried.apply(this,args.concat(moreArgs))
}
}
}
}

数组API的实现


forEach


Array.portotype.my_forEach = function(callback) {
for(let i=0;i<this.length;i++) {
callback(this[i],i,this)
}
}

map


Array.portotype.my_map = function(callback) {
let res= []
for(let i=0;i<this.length;i++) {
callback(this[i],i,this)&&res.push( callback(this[i],i,this))
}
return res
}

filter


Array.portotype.my_filter = function(callback) {
let res= []
for(let i=0;i<this.length;i++) {
callback(this[i], i, this) && res.push(this[i])
}
return res
}

前端模块化


问:你讲讲前端模块化吧
答:模块化的开发方式可以提高代码复用率,方便进行代码的管理,通常一个文件就是一个模块,有自己的作用域,只向外暴露特定的变量和函数。


问:模块化有哪几种标准?
答:目前流行的js模块化规范有CommonJS、AMD、CMD以及Es6的模块系统


问:ES Modules 和CommonJS的一些区别
答:
1.使用语法层面,CommonJs是通过modules.exports,exports导出,require导入;ES Modules则是export导出,import导入
2.CommonJs是运行时加载模块,EsModules是在静态编译期间就确定模块的依赖
3.EsModulse在编译期间会将所有import提升到顶部,CommonJs不会提升require
4.CommonJs导出是一个值拷贝,会对加载结果进行缓存,一但内部再修改这个值,则不会同步到外部。ESModule是导出的一个引用,内部修改可以同步到外部
5. CommonJs中顶层的this指向这个模块本身,而ESModule中顶层this指向undefined
6. CommonJS加载的是整个模块,将所有的接口全部加载进来,ESModule可以单独加载其中的某个接口


vue的数据双向绑定的原理


vue的响应式原理是采用‘发布-订阅’的设计模式结合object.defineProperty()劫持各个属性的getter和setter,在数据发生变动时通过调用Deo.notity函数发布订阅给观察者watcher,让其更新响应的视图。


虚拟dom


虚拟dom是用来表现真实dom结果的javaScript对象树,是构建在浏览器真实dom上的抽象层,虚拟dom是可以直接在内存中操作的,可以通过diff算法来新旧dom的差异,将最终变化应用到真实dom上


diff算法


diff算法又称虚拟Dom的周界算法,vue的diff算法是通过深度优先、先序遍历的方式进行的,它将前后两个虚拟Dom树进行逐层比较,当找到某一层不一样的节点时,停止下降,然后比较这些节点的子节点,当所有的子节点都完成比较之后,算法会由下至上进行回溯,此过程被称为执行patch操作。在执行patch操作时,Vue对于不同类型的节点的更新方式也不同,对于元素节点可以更新他的属性和子节点;对于文本节点,只能更新它的文本内容;对于每个子节点,如果key值相同,可以进行复用或者重新排序,或者将其他的节点移动到这个位置。


vue中nextTick的理解及作用


使用场景描述:更改一个数据,导致dom元素的width发生了更改,但又要获取这个更新后的dom元素的width,可以用nextTick
vue2 中的nextTick是在下次Dom更新循环之后执行回调函数,并且是作为vue实例的方法调用的


this.$nextTick(() => { // 组件的DOM已经更新完毕,可以进行相应操作 // ... });

Vue 3的nextTick作为一个独立的函数导入,返回一个Promise,并且可以直接传递回调函数作为参数。这些变化使得Vue 3中的nextTick更加灵活和易于使用。


// Vue 3 
import { nextTick } from 'vue';
nextTick(() => { // 在下次DOM更新循环之后执行 });

vue在实例挂载的过程中发生了什么?




  1. 实例化:首先,Vue.js会创建一个新的Vue实例。在这个过程中,Vue.js会设置实例的各种属性和方法,包括数据对象、计算属性、方法、指令等。




  2. 编译模板:Vue.js会将模板编译成渲染函数。模板就是包含Vue特定语法的HTML代码。编译过程中,Vue.js会解析模板中的指令(如v-if、v-for等)和插值表达式(如{{ message }}),并将它们转换为JavaScript代码。




  3. 创建虚拟DOM:渲染函数会被调用,生成一个虚拟DOM树。虚拟DOM是对真实DOM的轻量级表示,它可以更高效地处理DOM的更新。




  4. 挂载:最后,Vue.js会将虚拟DOM渲染为真实DOM,并将其挂载到指定的元素上。这个过程通常在调用vm.$mount()方法或者在实例化Vue时传入el选项后发生。




  5. 更新:当数据变化时,Vue.js会重新执行渲染函数,生成新的虚拟DOM,并与旧的虚拟DOM进行对比(这个过程称为diff)。然后,Vue.js会根据diff结果,以最小的代价更新真实DOM。




这个过程中还会触发一系列的生命周期钩子,如created、mounted等,开发者可以在这些钩子中执行自己的代码。


vue2中data是一个函数而不是对象的原因


data之所以是一个函数,是因为一个组件可能会多处调用,而每一次调用就会执行data函数并返回新的数据对象,这样,可以避免多处调用之间的数据污染


vue2中给对象添加新属性界面页面不刷新


vue2是用Object.defineProperty实现数据响应式,而后面新增的属性,并没有通过Object.defineProperty设置成响应式数据,所以页面没变化,常用解决方式:



  • Vue.set()

  • Object.assign()

  • $forcecUpdated()


Vue SSR的实现原理


vue.js的ssR是一种在服务器上预渲染Vue.js应用程序的技术。



  1. 服务器接收请求:当服务器接收一个请求时,它会创建一个新的Vue实例。

  2. 创建渲染器:使用vue-server-renderer包创建一个渲染器。

  3. 渲染页面:服务器使用渲染器将Vue实例渲染为Html字符串。

  4. 发送响应:服务器将渲染后的Html字符串作为响应发送给客户端。

  5. 客户端接收响应:客户端接收到服务器的响应后,将HTML字符串解析为DOM并显示给用户。

  6. 激活(Hydration): Vue在客户端创建一个新的Vue实例,将其挂载到服务器收到的Dom上


keep-alive的使用


keep-alive的主要作用是缓存路由组件,以提高性能


<router-view v-slot="{ Component }">  
<keep-alive :include="permissionStore.keepAliveName">
<component :is="Component" :key="$route.path" />
</keep-alive>

</router-view>



  1. router-view是 Vue Router 的一个组件,用于渲染当前路由对应的组件。




  2. v-slot="{ Component }" 是一个插槽,用于获取当前路由对应的组件。




  3. keep-alive 是 Vue 的一个内置组件,用于缓存组件,避免重复渲染。




  4. :include="permissionStore.keepAliveName" 是 的一个属性,表示只有名称在 permissionStore.keepAliveName 中的组件会被缓存。




  5. 是一个动态组件,:is="Component" 表示组件的类型由 Component 决定,:key="$route.path" 表示每个路由路径对应一个唯一的组件实例。




Vue项目中有封装axios吗?主要是封装哪方面的?



  • 1.封装前需要和后端协商好一些约定,请求头,状态码,请求时间....

  • 2.设置接口请求前缀:根据开发、测试、生产环境的不同,前缀需要加以区分

  • 3.移除重复的请求,如果请求在pending中,提示'操作太频繁,请稍后再试'

  • 4.用map结构根据相应状态码处理错误信息

  • 5.请求拦截,若headers中没有token的,移除请求

  • 6.响应拦截器,例如服务端返回的message中有'message',提示'请求超时,请刷新网页重试'

  • 7.请求方法的封装,封装get、post请求方法,使用起来更为方便


css预处理器


css预处理器扩充了css语言,增加了诸如变量、混合(mixin)、函数等功能,让css更易维护、方便。本质上。预处理是css的超集。包含一套自定义的语法及一个解析器,根据这些语法定义自己的样式规则,这些规则最终会通过解析器编译生成对应的css文件。


如何实现上拉加载


image.png
触底公式:


scrollTop + clientHeight >= scrollHeight

简单实现:


    let clientHeight = document.documentElement.clientHeight;//浏览器高度
let scrollHigiht = documnet.body.scrollHeight;//元素内容高度的度量,包括由于溢出导致的视图中不可见内容
let scrollTop = documnet.body.scrollTop; //滚动视窗的高度距离`window`顶部的距离
let distance = 50; //距离视窗还用50的时候,开始触发;

if ((scrollTop + clientHeight) >= (scrollHeight - distance)) {
console.log("开始加载数据");
}

如何实现下拉刷新


关于下拉刷新的原生实现,主要分成三步:



  1. 监听原生touchstart事件,记录其初始位置的值,e.touches[0].pageY;

  2. 监听原生touchmove事件,记录并计算当前滑动的位置值与初始位置值的差值,大于0表示向下拉动,并借助CSS3的3. translateY属性使元素跟随手势向下滑动对应的差值,同时也应设置一个允许滑动的最大值

  3. 监听原生touchend事件,若此时元素滑动达到最大值,则触发callback,同时将translateY重设为0,元素回到初始位置。


封装和使用JSBrige




  1. 定义协议:首先,需要定义一种协议,用于约定H5页面与App之间的通信规则。这可以是一组自定义的URL Scheme或JavaScript函数。




  2. 注册事件监听:在H5页面中,通过JavaScript代码注册事件监听器,用于接收来自App的消息或回调。可以使用window.addEventListener或其他类似的方法来监听特定的事件。




  3. 发送消息给App:在H5页面中,通过调用JSBridge提供的方法,将消息发送给App。这可以是通过修改URL Scheme的方式,或者调用App提供的JavaScript接口。




  4. 处理App的消息或回调:在App原生代码中,通过监听URL Scheme或执行JavaScript代码的方式,接收来自H5页面的消息或回调。根据协议约定,处理相应的逻辑或调用相应的功能。




  5. 回调结果给H5页面:在App原生代码中,根据协议约定,将处理结果或回调信息发送回H5页面。可以通过修改URL Scheme的方式,或者调用H5页面中注册的JavaScript回调函数。




个人博客


耀耀切克闹 (yaoyaoqiekenao.com)


gitHub


DarknessZY (zhangyao) (github.com)


作者:耀耀切克闹灬
来源:juejin.cn/post/7291834381315719220
收起阅读 »

分享一个Java小项目:Java实现超级马里奥的冒险之旅

引言超级马里奥,这个名字对于游戏迷来说一定不陌生。它是一款经典的游戏系列,以一个勇敢的水管工人——马里奥为主角,讲述了他在蘑菇王国中的冒险故事。在这个充满挑战和刺激的游戏中,玩家需要控制马里奥跳跃、躲避障碍物,并与邪恶的蘑菇和食人花敌人战斗,最终抵达城堡的胜利...
继续阅读 »

引言

超级马里奥,这个名字对于游戏迷来说一定不陌生。它是一款经典的游戏系列,以一个勇敢的水管工人——马里奥为主角,讲述了他在蘑菇王国中的冒险故事。在这个充满挑战和刺激的游戏中,玩家需要控制马里奥跳跃、躲避障碍物,并与邪恶的蘑菇和食人花敌人战斗,最终抵达城堡的胜利之地。

游戏目标

在这款游戏中,我们的目标是通过控制马里奥完成三个关卡的挑战。每个关卡都有不同的难度和障碍物,玩家需要灵活运用跳跃技巧和反应能力,才能成功通关。同时,消灭普通砖块还可以赚取积分,增加游戏的趣味性和挑战性。

Java实现

为了实现这个经典的游戏,我们将使用Java编程语言进行开发。Java是一种功能强大且广泛使用的编程语言,它具有丰富的图形界面库和游戏开发工具,非常适合用于制作平台跳跃类游戏。

在实现过程中,我们可以使用Java的Swing库来创建游戏的图形界面,包括游戏窗口、角色、背景等元素。同时,我们还需要处理用户的输入操作,例如键盘按键的监听和处理,以便玩家能够控制马里奥的移动和跳跃。

此外,我们还需要考虑游戏的物理引擎和碰撞检测机制,以确保马里奥能够与障碍物和敌人进行正确的交互。这可以通过使用Java的物理引擎库或自己编写相应的算法来实现。

总结

通过使用Java编程语言和相关库,我们可以成功地实现一个经典的超级马里奥小游戏。这将是一个非常有趣和有挑战性的项目,不仅可以锻炼我们的编程技能,还能够让我们体验到游戏开发的乐趣。让我们一起踏上这段冒险之旅吧!

收起阅读 »

Vue 实现 PDF 导出功能

web
笨文旨在通过 html2canvas 和 jspdf,先将页面的 html 转成 canvas,再将 canvas 转成 pdf,同时解决了分页截断的问题。 安装依赖 yarn add html2canvas yarn add jspdf 思路 通过网上的一...
继续阅读 »

笨文旨在通过 html2canvas 和 jspdf,先将页面的 html 转成 canvas,再将 canvas 转成 pdf,同时解决了分页截断的问题。


安装依赖


yarn add html2canvas
yarn add jspdf

思路


通过网上的一些教程,初步实现了 html 转 pdf 的功能,将一整个 DOM 元素放进去,虽然可以粗糙实现,但是出现了很多地方被分页截断的情况,这个时候就需要在某一张图片被截断时,将其自动切换到下一页中。


1.拆解父节点


所以第一步:拆解父节点,一行一行细分为很多子节点,循环遍历这些子节点,累加这些子节点的高度,如果超出了 a4 纸(210*297)的高度,则分页。


import html2Canvas from "html2canvas";
import JsPDF from "jspdf";

export function oneNodeMultipleChildren(title, node) {
html2Canvas(node, {
scale: 2, // 清晰度
}).then(function (canvas) {
let PDF = new JsPDF("", "mm", "a4"); // 以mm为单位
let position = 0; // 页面偏移
let contentWidth = canvas.width; // 转换成canvas后的宽度
let contentHeight = canvas.height; // 转换成canvas后的高度
let proportion = 210 / node.offsetWidth; // html缩小至a4纸大小时的比例
let currentHeight = 0; // 当前高度
let imgWidth = 210; // canvas缩小至a4纸大小时的宽度
let imgHeight = (210 / contentWidth) * contentHeight; // canvas缩小至a4纸大小时的高度
let pageData = canvas.toDataURL("image/jpeg", 1.0); // 将canvas转成图片

for (let j = 0; j < node.children.length; j++) {
let childHeight = (node.children[j].offsetHeight + 8) * proportion; // 页面中每行的间距 margin-bottom: 8px

if (currentHeight + childHeight > 297) {
// 如果加上这个子节点后内容超出a4纸高度,就从当前位置开始分页
addImage(PDF, pageData, position, imgWidth, imgHeight, currentHeight);
position -= currentHeight; // 这一页放了多少高度的内容,下一页就从这个高度开始偏移
if (position >= -contentHeight) {
PDF.addPage(); // 添加新pdf页
}
currentHeight = childHeight; // 下一页第一个元素的高度
} else {
currentHeight += childHeight;
}
}
addImage(PDF, pageData, position, imgWidth, imgHeight, currentHeight); // 最后一页
PDF.save(title + ".pdf");
});
}

function addImage(PDF, pageData, position, imgWidth, imgHeight, currentHeight) {
PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight); // 在当前pdf页添加图片
PDF.setFillColor(255, 255, 255); // 遮挡的颜色
PDF.rect(0, currentHeight, 210, Math.ceil(297 - currentHeight), "F"); // 添加空白遮挡
// PDF.rect参数分别为:起始横坐标、起始纵坐标、绘制宽度、绘制高度、填充色
}

2.合并父节点


经过上述步骤,一个父节点多个子节点,并且每个子节点独占一行的布局可以实现分页,那要是有很多父节点呢?就需要遍历每个父节点,合并所有子节点,进行分页截断。


import html2Canvas from "html2canvas";
import JsPDF from "jspdf";

export function exportPdf(title, id) {
let content = document.querySelector(`#${id}`);
let first = content.firstElementChild.firstElementChild;
let second = content.lastElementChild;
oneNodeMultipleChildren(title, content, [first, second]);
}

export function oneNodeMultipleChildren(title, content, nodes) {
html2Canvas(content, {
scale: 2,
}).then(function (canvas) {
let PDF = new JsPDF("", "mm", "a4");
let position = 0;
let contentWidth = canvas.width;
let contentHeight = canvas.height;
let proportion = 200 / content.offsetWidth;
let currentHeight = 0;
let imgWidth = 200;
let imgHeight = (200 / contentWidth) * contentHeight;
let pageData = canvas.toDataURL("image/jpeg", 1.0);

for (let i = 0; i < nodes.length; i++) {
// 根据传入的父节点数量进行循环,遍历父节点,合并所有子节点
for (let j = 0; j < nodes[i].children.length; j++) {
let childHeight = (nodes[i].children[j].offsetHeight + 8) * proportion;

if (currentHeight + childHeight > 287) {
addImage(PDF, pageData, position, imgWidth, imgHeight, currentHeight);
position -= currentHeight;
if (position >= -contentHeight) {
PDF.addPage();
}
currentHeight = childHeight;
} else {
currentHeight += childHeight;
}
}
}
addImage(PDF, pageData, position, imgWidth, imgHeight, currentHeight);
PDF.save(title + ".pdf");
});
}

function addImage(PDF, pageData, position, imgWidth, imgHeight, currentHeight) {
PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight); // 在当前pdf页添加图片
PDF.setFillColor(255, 255, 255); // 遮挡的颜色
PDF.rect(0, currentHeight, 210, Math.ceil(297 - currentHeight), "F"); // 添加空白遮挡
}

3.每行多个元素


这个时候新的问题出现了,由于页面布局为 flex 布局,不同缩放下,每行的元素数量会出现变化。所以我们获取第一个子元素与 a4 纸宽度关系,如果为 n 倍,那后面 n-1 个子元素的高度不进行累加。


warning 注意
这里只解决了一行 n 个子元素宽度相等,且近似等于 a4 纸宽度的 1/n 的情况。


import html2Canvas from "html2canvas";
import JsPDF from "jspdf";

export function exportAssetPdf(title, id) {
let content = document.querySelector(`#${id}`);
let first = content.firstElementChild.firstElementChild;
let second = content.lastElementChild;
oneNodeMultipleChildren(title, content, [first, second]);
}

export function oneNodeMultipleChildren(title, content, nodes) {
html2Canvas(content, {
scale: 2,
}).then(function (canvas) {
let PDF = new JsPDF("", "mm", "a4");
let position = 0;
let contentWidth = canvas.width;
let contentHeight = canvas.height;
let proportion = 200 / content.offsetWidth;
let currentHeight = 0;
let imgWidth = 200;
let imgHeight = (200 / contentWidth) * contentHeight;
let pageData = canvas.toDataURL("image/jpeg", 1.0);
let sameIndex = 1;
let widthX = 1;

for (let i = 0; i < nodes.length; i++) {
for (let j = 0; j < nodes[i].children.length; j++) {
let childHeight = (nodes[i].children[j].offsetHeight + 8) * proportion;
let childWidth = nodes[i].children[j].offsetWidth * proportion;
if (sameIndex === 1) {
widthX = Math.round(200 / childWidth);
}
if (sameIndex < widthX) {
childHeight = 0;
sameIndex++;
} else {
sameIndex = 1;
}

if (currentHeight + childHeight > 287) {
addImage(PDF, pageData, position, imgWidth, imgHeight, currentHeight);
position -= currentHeight;
if (position >= -contentHeight) {
PDF.addPage();
}
currentHeight = childHeight;
} else {
currentHeight += childHeight;
}
}
}
addImage(PDF, pageData, position, imgWidth, imgHeight, currentHeight);
PDF.save(title + ".pdf");
});
}

function addImage(PDF, pageData, position, imgWidth, imgHeight, currentHeight) {
PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight); // 在当前pdf页添加图片
PDF.setFillColor(255, 255, 255); // 遮挡的颜色
PDF.rect(0, currentHeight, 210, Math.ceil(297 - currentHeight), "F"); // 添加空白遮挡
}

4.添加左右间距和页眉页脚


为了美化 pdf 布局,上下左右留白,就需要添加左右间距和页眉页脚:减少 html 缩小至 a4 纸大小时的比例和 canvas 缩小至 a4 纸大小时宽高,增加偏移量,并对页眉页脚进行空白遮挡。


import html2Canvas from "html2canvas";
import JsPDF from "jspdf";

export function exportAssetPdf(title, id) {
let content = document.querySelector(`#${id}`);
let first = content.firstElementChild.firstElementChild;
let second = content.lastElementChild;
oneNodeMultipleChildren(title, content, [first, second]);
}

export function oneNodeMultipleChildren(title, fNode, sNode) {
html2Canvas(fNode, {
scale: 2,
}).then(function (canvas) {
let PDF = new JsPDF("", "mm", "a4");
let position = 0;
let contentWidth = canvas.width;
let contentHeight = canvas.height;
let proportion = 200 / fNode.offsetWidth; // 减少10mm
let currentHeight = 0;
let imgWidth = 200; // 减少10mm
let imgHeight = (200 / contentWidth) * contentHeight; // 减少10mm
let pageData = canvas.toDataURL("image/jpeg", 1.0);
let sameIndex = 1;
let widthX = 1;

for (let i = 0; i < sNode.length; i++) {
for (let j = 0; j < sNode[i].children.length; j++) {
let childHeight = (sNode[i].children[j].offsetHeight + 8) * proportion;
let childWidth = sNode[i].children[j].offsetWidth * proportion;
if (sameIndex === 1) {
widthX = Math.round(200 / childWidth); // 减少10mm
}
if (sameIndex < widthX) {
childHeight = 0;
sameIndex++;
} else {
sameIndex = 1;
}

if (currentHeight + childHeight > 287) {
// 减小10mm
addImage(PDF, pageData, position, imgWidth, imgHeight, currentHeight);
position -= currentHeight;
if (position >= -contentHeight) {
PDF.addPage();
}
currentHeight = childHeight;
} else {
currentHeight += childHeight;
}
}
}
addImage(PDF, pageData, position, imgWidth, imgHeight, currentHeight);
PDF.save(title + ".pdf");
});
}

function addImage(PDF, pageData, position, imgWidth, imgHeight, currentHeight) {
PDF.addImage(pageData, "JPEG", 5, position + 5, imgWidth, imgHeight); // 增加偏移量
PDF.setFillColor(255, 255, 255);
PDF.rect(0, 0, 210, 4, "F"); // 添加页眉遮挡
PDF.rect(0, currentHeight + 5, 210, Math.ceil(292 - currentHeight), "F"); // 添加页脚遮挡
}

成果展示


不同缩放下导出 PDF 对比:


每行一个子元素


每行多个子元素


作者:虚惊一场
来源:juejin.cn/post/7291142504123875364
收起阅读 »

如何创建五彩纸屑效果

web
前言 很多网站会在一些按钮上面加上不同的动画效果,这些动感的效果能够更加容易的创建具有视觉吸引力的用户界面。 本文将介绍一个小巧的 JavaScript 库,它能够用非常短的时间以及简短的代码量创建我们想要的五彩纸屑效果 简单使用 我们可以通过 npm 安装或...
继续阅读 »

前言


很多网站会在一些按钮上面加上不同的动画效果,这些动感的效果能够更加容易的创建具有视觉吸引力的用户界面。


本文将介绍一个小巧的 JavaScript 库,它能够用非常短的时间以及简短的代码量创建我们想要的五彩纸屑效果


简单使用


我们可以通过 npm 安装或从 cdn 导入两种方式来使用这个库。


这里我采用的是导入的方式。


在你导入完成这个库之后,我们需要一个按钮


<button onclick="myClick()">button</button>

最简单的特效只需要在点击函数当中调用 confetti 函数即可


function myClick () {
confetti()
}

动画4.gif


细节配置参数


通过传入 options 属性,我们可以在特效上自定义很多我们需要的部分,下面是部分配置属性的作用,后面我们会挑出部分属性来展示一下效果:


属性名作用
particleCount飞出的纸屑的数量,默认 50
angle飞出的纸屑的角度 90 是向上,默认 90
spread飞出的纸屑偏离中心的角度,默认 45
startVelocity飞出的纸屑的初始速度,默认 45
decay飞出的纸屑的减速度,范围 0-1 之间,默认 0.9
gravity重力,默认 1
decay飞出的纸屑的减速度,范围 0-1 之间,默认 0.9
flat是否关闭纸屑的翻转,默认 false
ticks纸屑消失速度,默认 200
origin对象,设置发射纸屑的原点,有 x y 两个参数,取值都是 0 - 1 对应上下边缘,默认 0.5 0.5
colors数组:十六进制格式的颜色字符串数组
shapes数组:纸屑的形状
scalar每个五彩纸屑粒子的比例,默认 1
zIndex纸屑的z-index,默认 100
disableForReducedMotion禁用五彩纸屑,默认 false

根据上面的参数,你可以很容易的定义自己想要的效果,下面我们随意定义部分例子:


<body>
  <button onclick="myClick1()">左倾斜</button>
  <button onclick="myClick2()">全是黑色</button>
  <button onclick="myClick3()">数量很多多多</button>
 <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.0/dist/confetti.browser.min.js"></script>
  <script>
    function myClick1 () {
      confetti({
        angle: 135,
      });
    }
    function myClick2 () {
      confetti({
        colors: ['#000000']
      });
    }
    function myClick3 () {
      confetti({
        particleCount: 500,
      });
    }
 
</script>

</body>

动画4 1.gif


详细定义纸屑形状


在上面的配置当中我们已经可以定义纸屑的大部分配置,其中 shapes 可以用于定义纸屑的形状,官方为我们预留了三个形状 'square', 'circle', 'star' 分别对应 方形,圆形,星星,这个字段传入的是一个数组,这个数组中元素的数量,决定了这个形状在所有纸屑中的比例,比如说你要是传入了 ['square', 'circle', 'star'] 那么三种形状就都是占比三分之一。


除了通过官方预留的形状,我们还可以通过两个函数来进行形状自定义,分别是 confetti.shapeFromPathconfetti.shapeFromText


confetti.shapeFromPath


这个函数可以传入一个对象,对象中存在一个 pathkey,这个就决定了创建出来的形状长什么样子


下面的代码可以创建一个三角形的纸屑


var triangle = confetti.shapeFromPath({ path: 'M0 10 L5 0 L10 10z' });

confetti({
shapes: [triangle],
});

confetti.shapeFromText


这个函数同样传入一个对象,对象存在 textscalartext 可以传入任何文字,甚至是一些文字表情也可以使用, scalar 配合 optionsscalar 使用,两个相差过大会导致字体变得很模糊。


下面的代码你就可以创建一个字符串纸屑


var scalar = 2;
var pineapple = confetti.shapeFromText({ text: '🍍🍍🍍', scalar });
confetti({
shapes : [pineapple],
scalar,
});

逻辑事件


纸屑在生成的时候,我们可以会需要一些事件,比如说在我们想要的时候清除掉屏幕上还未消失的纸屑,又或者在一次纸屑彻底消失的时候执行某些逻辑。


消除纸屑


我们可以通过调用 confetti.reset(); 来消除屏幕上的纸屑


监听纸屑消失事件


在我们调用 confetti() 的时候会返回一个 promise 对象,这个对象将会在纸屑完全消失的时候回调。


自定义纸屑产生的位置


在上面的例子当中,我们可能会发现,纸屑都只能在屏幕的正中心产生,这是因为 options 里的 origin 属性的默认值,我们可以通过一些方式来自定义这个产生的位置


动态设置 origin


我们可以通过动态的来设置这个值来做到自定义产生的位置。


在点击事件当中,我们能够拿到当前的点击对象,通过这个 event 对象以及 window 上获取到可视区域的宽高,我们不难算出当前按钮相对于左右的位置。


const windowHeight =
  window.innerHeight ||
  document.documentElement.clientHeight ||
  document.body.clientHeight;
// 获取浏览器高度
const windowWidth =
  window.innerWidth ||
  document.documentElement.clientWidth ||
  document.body.clientWidth;
// 获取浏览器宽度
const origin = {
x: event.pageX/windowWidth,
y: event.pageY/windowHeight,
}
// 获取比例

自定义 canvas


官方支持我们创建自定义画布的  confetti 实例,这样创建的  confetti 不会超出定义的这个画布的范围,这在某些时候可能会起到很重要的作用。


并且官方强调了,一个画布最好只和一个  confetti 实例做关联,所以说当我们创建多个  confetti 实例的时候,就也需要创建多个画布。


因为是自定义添加的画布,所以我们需要在不需要的时候手动去删除这个画布,避免产生多余的元素。


var myCanvas = document.createElement('canvas');
var container = document.querySelector('.container')
container.appendChild(myCanvas)
var myConfetti = confetti.create(myCanvas).then(()=>{
container.removeChild(myCanvas)
});

然后设定位置的操作我这里就不多做了,只需要定义这个 canvas 的生成位置就好了。


示例代码



作者:14332223
来源:juejin.cn/post/7290769553572397056
收起阅读 »

使用a标签下载文件

web
引言 HTML中  <a>  元素(或称锚元素)可以通过它的 href 属性创建通向其他网页、文件、电子邮件地址、同一页面内的位置或任何其他 URL 的超链接。 <a> 中的内容应该指明链接的目标。如果存在 href 属性,当 <...
继续阅读 »

引言


HTML中  <a>  元素(或称元素)可以通过它的 href 属性创建通向其他网页、文件、电子邮件地址、同一页面内的位置或任何其他 URL 的超链接。


<a> 中的内容应该指明链接的目标。如果存在 href 属性,当 <a> 元素聚焦时按下回车键就会激活它。


本文主要讲解如何通过a标签来下载文件。


download属性


浏览器将链接的 URL 视为下载资源。可以使用或不使用 filename 值:




  • 如果没有指定值,浏览器会从多个来源决定文件名和扩展名:



    • Content-DispositionHTTP 标头。

    • URL的最后一段。

    • 媒体类型。来自 Content-Type 标头,data: URL的开头,或 blob: URL 的 Blob.type




  • filename:决定文件名的值。/ 和 \ 被转化为下划线(_)。文件系统可能会阻止文件名中其他的字符,因此浏览器会在必要时适当调整文件名。





备注:



  • download 只在同源 URL或 blob:data: 协议起作用。

  • 浏览器对待下载的方式因浏览器、用户设置和其他因素而异。在下载开始之前,可能会提示用户,或者自动保存文件,或者自动打开。自动打开要么在外部应用程序中,要么在浏览器本身中。

  • 如果 Content-Disposition 标头的信息与 download 属性不同,产生的行为可能不同:

  • 如果文件头指定了一个 filename,它将优先于 download 属性中指定的文件名。

  • 如果标头指定了 inline 的处置方式,Chrome 和 Firefox 会优先考虑该属性并将其视为下载资源。旧的 Firefox 浏览器(版本 82 之前)优先考虑该标头,并将内联显示内容。



下载方式


1. 直接使用a标签的href属性指定文件的URL


可以在a标签中使用href属性指定文件的URL,点击链接时会直接下载文件。


<a href="file_url">Download</a>

优点:简单易用,只需在a标签中指定文件的URL即可。


缺点:无法控制下载文件的名称和保存位置。


2. 使用download属性指定下载文件的名称


可以在a标签中使用download属性指定下载文件的名称,点击链接时会将文件以该名称保存到本地。


<a href="file_url" download="file_name">Download</a>

优点:可以控制下载文件的名称。


缺点:无法控制下载文件的保存位置。


3. 将文件数据转为Blob进行下载


当需要将文件数据转为Blob或Base64进行下载时,可以使用以下方法:


1. 将文件数据转为Blob进行下载


function downloadFile(data, filename, type) {
const blob = new Blob([data], { type: type });
const url = URL.createObjectURL(blob);

const link = document.createElement('a');
link.href = url;
link.download = filename;

document.body.appendChild(link);
link.click();

document.body.removeChild(link);
URL.revokeObjectURL(url);
}

function fileToBlob(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();

reader.onloadend = () => {
resolve(new Blob([reader.result], { type: file.type }));
};

reader.onerror = reject;

reader.readAsArrayBuffer(file);
});
}

// 使用示例
const fileData = ...; // 文件数据
const fileName = 'example.txt';
const fileType = 'text/plain';

fileToBlob(fileData).then(blob => {
downloadFile(blob, fileName, fileType);
});

首先,我们定义了一个名为downloadFile的函数,它接受三个参数:文件数据(data),文件名(filename)和文件类型(type)。 在函数内部,我们使用Blob构造函数将文件数据和类型传递给它,从而创建一个Blob对象。然后,我们使用URL.createObjectURL()方法创建一个URL,该URL指向Blob对象。 接下来,我们创建一个<a>元素,并设置其href属性为之前创建的URL,并将下载属性设置为指定的文件名。然后将该元素添加到文档的body中。 最后,我们模拟用户点击该链接进行下载,并在完成后清理相关资源。


在使用时,我们首先调用fileToBlob函数将文件数据转换为Blob对象。该函数返回一个Promise对象,在Promise的resolve回调中返回了转换后的Blob对象。 然后,在Promise的回调中调用了downloadFile函数来进行下载。


2. 将文件数据转为Base64进行下载


function downloadBase64File(base64Data, filename, type) {
const byteCharacters = atob(base64Data);
const byteArrays = [];

for (let i = 0; i < byteCharacters.length; i++) {
byteArrays.push(byteCharacters.charCodeAt(i));
}

const blob = new Blob([new Uint8Array(byteArrays)], { type: type });
const url = URL.createObjectURL(blob);

const link = document.createElement('a');
link.href = url;
link.download = filename;

document.body.appendChild(link);
link.click();

document.body.removeChild(link);
}

function fileToBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();

reader.onloadend = () => {
resolve(reader.result.split(',')[1]);
};

reader.onerror = reject;

reader.readAsDataURL(file);
});
}

// 使用示例
const fileData = ...; // 文件数据
const fileName = 'example.txt';
const fileType = 'text/plain';

fileToBase64(fileData).then(base64Data => {
downloadBase64File(base64Data, fileName, fileType);
});

首先,我们定义了一个名为downloadBase64File的函数,它接受三个参数:Base64字符串(base64Data),文件名(filename)和文件类型(type)。 在函数内部,我们首先将Base64字符串解码为字节数组,并将其存储在byteArrays数组中。然后,我们使用这些字节数组创建一个Blob对象,并使用URL.createObjectURL()方法创建一个URL。 接下来,我们创建一个<a>元素,并设置其href属性为之前创建的URL,并将下载属性设置为指定的文件名。然后将该元素添加到文档的body中。 最后,我们模拟用户点击该链接进行下载,并在完成后清理相关资源。


在使用时,我们首先调用fileToBase64函数将文件数据转换为Base64字符串。该函数返回一个Promise对象,在Promise的resolve回调中返回了转换后的Base64字符串。 然后,在Promise的回调中调用了downloadBase64File函数来进行下载。


总结


您可以根据需要选择将文件数据转为Blob或Base64进行下载。如果您已经有文件数据,可以使用fileToBlob函数将其转为Blob对象并进行下载。如果您希望将文件数据转为Base64进行下载,可以使用fileToBase64函数将其转为Base64字符串,并使用downloadBase64File函数进行下载。


作者:前端俊刚
来源:juejin.cn/post/7291200719683502120
收起阅读 »

前端实现蜂巢布局思路

web
效果图如下 上图的组成可以分为两部分,一个为底图六边形的形成,一个为内容六边形的形成。 要生成对应的六边形,首先要获得需要绘制的六边形的中心坐标。 观察不难得出结论,以中心的六边形为基点,第二圈很明显能排6个,第三圈能排12个,以此进行类推。 这里可以以中...
继续阅读 »

效果图如下


image.png
上图的组成可以分为两部分,一个为底图六边形的形成,一个为内容六边形的形成。


要生成对应的六边形,首先要获得需要绘制的六边形的中心坐标。


观察不难得出结论,以中心的六边形为基点,第二圈很明显能排6个,第三圈能排12个,以此进行类推。


image.png


这里可以以中心点为坐标原点[0,0],以[1,0], [1,1],[-1,1],[-1,0],[-1,-1],[1,-1]这种形式来表示第二圈在轴线上的六个六边形的中心点关系(这是一种形式,并非真实的坐标系坐标)。


// 第二圈时的对应圆上的坐标值
const pixiArr = [
[1, 0],
[1, 1],
[-1, 1],
[-1, 0],
[-1, -1],
[1, -1]
]

// 根据圈数生成对应轴线上的坐标
function generatePixiArrByWeight(weight) {
if (weight === 2) {
return pixiArr
}
const multiple = weight - 1
const tempPixiArr = pixiArr.map((x) => {
return [x[0] * multiple, x[1] * multiple]
})
return tempPixiArr
}

进一步观察,可知,第三圈时两条发散的轴中间夹了一个六边形,第四圈时两条发散的轴中间夹了两个六边形,依次类推。


六条发散轴上的六边形中心点坐标是最容易计算的,不过要计算三圈及其开外的,就得有那么一点点的数学基础,知道sin60度cos60度的意思。


const sin60 = Math.sin(Math.PI / 3)
const cos60 = Math.cos(Math.PI / 3)

有了上面的铺垫后就可以开始了,定义一个函数,传入的参数为六边形总个数和六边形的边长


// 生成六边形中心坐标
function getHexagonCoordinateArrayByTotal(total = 0, radius = 0){
// 1、获取圈数weight
if (total === 0) return []
let tierList = [] // 用于存放每圈的个数
let tierIndex = 0
while (total > 0) {
if (tierIndex === 0) {
tierList.push(1)
total = total - 1
} else {
let n = 6 * tierIndex
total = total - n
if (total < 0) {
tierList.push(total + n)
} else {
tierList.push(n)
}
}
tierIndex++
}
const weight = tierList.length
// 2、根据圈数去获取coordinateArray坐标列表
// getHexagonCoordinateArrayByWeight:根据圈数和边长返回对应的坐标点
const weight = tierList.length
let coordinateArray = []
for (let i = 0; i < weight; i++) {
if (i + 1 === weight) {
coordinateArray = [
...coordinateArray,
...getHexagonCoordinateArrayByWeight(i + 1, radius).slice(
0,
tierList[weight - 1]
)
]
} else {
coordinateArray = [
...coordinateArray,
...getHexagonCoordinateArrayByWeight(i + 1, radius)
]
}
}

return coordinateArray
}

有个getHexagonCoordinateArrayByWeight需要实现其,方式为


function _abs(val = 0) {
return Math.abs(val)
}

function getHexagonCoordinateArrayByWeight(weight = 1, radius = 0) {
if (weight === 0) return []
if (weight === 1) return [[0, 0]]
const addNum = weight - 2
const addArr = generatePixiArrByWeight(weight)
const hypotenuse = radius * sin60 * 2 // 两倍的边心距长度
let offsetArr = []
let offsetX
let offsetY
for (let i = 0; i < addArr.length; i++) {
const t = addArr[i]
if (t[1] !== 0) {
offsetX = t[0] * hypotenuse * cos60
offsetY = t[1] * hypotenuse * sin60
} else {
offsetX = t[0] * hypotenuse
offsetY = 0
}
offsetArr.push([offsetX, offsetY])
}
const tempOffsetArr = JSON.parse(JSON.stringify(offsetArr))
let resArr = new Array(6 * (weight - 1))
let lineArr = []
for (let i = 0; i < 6; i++) {
let lindex = i * (weight - 1)
resArr[lindex] = tempOffsetArr[i]
lineArr.push(lindex)
}
// 利用已知的六个发散轴上的中心坐标点推出剩余的中心坐标点
if (addNum > 0) {
for (let i = 0; i < 6; i++) {
let s = tempOffsetArr[i]
let e = i + 1 === 6 ? tempOffsetArr[0] : tempOffsetArr[i + 1]
let si = lineArr[i]
let sp = addNum + 1
let fx
let fy
if (i === 0) {
fx = (s[0] - e[0]) / sp
fy = (e[1] - s[1]) / sp
}
if (i === 1) {
fx = (_abs(s[0]) + _abs(e[0])) / sp
fy = 0

}
if (i === 2) {
fx = (_abs(e[0]) - _abs(s[0])) / sp
fy = (_abs(s[1]) - _abs(e[1])) / sp
}
if (i === 3) {
fx = (_abs(s[0]) - _abs(e[0])) / sp
fy = (_abs(e[1]) - _abs(s[1])) / sp
}
if (i === 4) {
fx = (_abs(s[0]) + _abs(e[0])) / sp
fy = 0
}
if (i === 5) {
fx = _abs(s[0]) / sp
fy = (_abs(e[1]) - _abs(s[1])) / sp
}
let mr = []
for (let j = 0; j < addNum; j++) {
if (i === 0 || i === 1) {
mr.push([s[0] - fx * (j + 1), s[1] + fy * (j + 1)])
}
if (i === 2) {
mr.push([s[0] - fx * (j + 1), s[1] - fy * (j + 1)])
}
if (i === 3) {
mr.push([s[0] + fx * (j + 1), s[1] - fy * (j + 1)])
}
if (i === 4) {
mr.push([s[0] + fx * (j + 1), s[1] - fy * (j + 1)])
}
if (i === 5) {
mr.push([s[0] + fx * (j + 1), s[1] - fy * (j + 1)])
}
}
mr.forEach((x, index) => {
resArr[si + index + 1] = x
})
}
}
return resArr
}

至此,生成六边形中心坐标点的方法完成。
有了中心坐标生成方式之后,就可以使用Konva这种辅助绘图的库来进行效果绘制了。


作者:前端_六一
来源:juejin.cn/post/7291125785796018236
收起阅读 »

前端调取摄像头并实现拍照功能

web
前言: 最近接到的一个需求十分有意思,设计整体实现了前端仿微信扫一扫的功能。整理了一下思路,做一个分享。 tips: 如果想要实现完整扫一扫的功能,你需要掌握一些前置知识,这次我们先讲如何实现拍照并且保存的功能。 一. window.navigator 你...
继续阅读 »

前言: 最近接到的一个需求十分有意思,设计整体实现了前端仿微信扫一扫的功能。整理了一下思路,做一个分享。


tips: 如果想要实现完整扫一扫的功能,你需要掌握一些前置知识,这次我们先讲如何实现拍照并且保存的功能。


一. window.navigator




  1. 你想调取手机的摄像头,首先你得先检验当前设备是否有摄像设备,window 身上自带了一个 navigator 属性,这个对象有一个叫做 mediaDevices 的属性是我们即将用到的。




  2. 于是我们就可以先设计一个叫做 checkCamera 的函数,用来在页面刚开始加载的时候执行。。

    image.png




  3. 我们先看一下这个对象有哪些方法,你也许会看到下面的场景,会发现这个属性身上只有一个值为 nullondevicechange 属性,不要怕,真正要用的方法其实在它的原型身上。
    image.png




  4. 让我们点开它的原型属性,注意下面这两个方法,这是我们本章节的主角。

    image.png




  5. 我们到这一步只是需要判断当前设备是否有摄像头,我们先调取 enumerateDevices 函数来查看当前媒体设备是否存在。它的返回值是一个 promise 类型,我们直接用 asyncawait 来简化一下代码。
    image.png
    image.png
    从上图可以看出,我的电脑有两个音频设备和一个视频设备,那么我们就可以放下进行下一步了。




二. 获取摄像头




  1. 接下来就需要用到上面提到的第二个函数,navigator.getUserMedia。这个函数接收一个对象作为参数,这个对象可以预设一些值,来作为我们请求摄像头的一些参数。




  2. 这里我们的重点是 facingMode 这个属性,因为我们扫一扫一般都是后置摄像头
    image.png
    当你执行了这个函数以后,你会看到浏览器有如下提示:

    image.png




  3. 于是你高兴的点击了允许,却发现页面没有任何变化。

    image.png




  4. 这里你需要知道,这个函数只是返回了一个媒体流信息给你,你可以这样简单理解刚刚我们干了什么,首先浏览器向手机申请我想用一下摄像头可以吗?在得到了你本人的确认以后,手机将摄像头的数据线递给了浏览器,:“诺,给你。”




  5. 浏览器现在仅仅拿到了一根数据线,然而浏览器不知道需要将这个摄像头渲染到哪里,它不可能自动帮你接上这根线,你需要自己找地方接上这根数据线。




  6. 这里不卖关子,我们需要请到我们的 Video 标签。我没听错吧?那个播放视频的 video 标签?没错,就是原生的 video 标签。




  7. 这里创建一个 video 标签,然后打上 ref 来获取这个元素。

    image.png




  8. 这里的关键点在于将流数据赋值给 video 标签的 srcObject 属性。就好像你拿到了数据线,插到了显示器上。

    (tips: 这里需要特别注意,不是 video.src 而是 video.srcObject 请务必注意)

    image.png




  9. 现在你应该会看到摄像头已经在屏幕上展示了,这里是我用电脑前置摄像头录制的一段视频做成了gif。(脉动请给我打钱,哼)
    camera.gif




三. 截取当前画面




  1. 这里我随手写了一个按钮当作拍摄键,接下来我们将实现点击这个按钮截取当前画面。

    image.png




  2. 这里你需要知道一个前提,虽然我们现在看到的视频是连贯的,但其实在浏览器渲染的时候,它其实是一帧一帧渲染的。就像宫崎骏有些动漫一样,是一张一张手写画。




  3. 让我们打开 Performance 标签卡,记录一下打开掘金首页的过程,可以看到浏览器的整个渲染过程其实也是一帧一帧拼接到一起,才完成了整个页面的渲染。

    11.gif




  4. 知道了这个前提,那么举一反三,我们就可以明白,虽然我们现在已经打开了摄像头,看到的视频好像是在连贯展示,但其实它也是一帧一帧拼到一起的。那现在我们要做的事情就非常明了,当我按下按钮的时候,想办法将 video 标签当前的画面保存下来。




  5. 这里不是特别容易想到,我就直接说答案了,在这个场景,我们需要用到 canvas 的一些能力。不要害怕,我目前对 canvas 的使用也不是特别熟练,今天也不会用到特别复杂的功能。




  6. 首先创建一个空白的 canvas 元素,元素的宽高设置为和 video 标签一致。

    image.png




  7. 接下来是重点: 我们需要用到 canvasgetContext 方法,先别着急头晕,这里你只需要知道,它接受一个字符串 "2d" 作为参数就行了,它会把这个画布的上下文返回给你。
    tips 如果这里还不清楚上下文的概念,也不用担心,这里你就简单理解为把这个 canvas 这个元素加工了一下,帮你在它身上添加了一些新的方法而已。)
    image.png




  8. 在这个 ctx 对象身上,我们只需要用到一个 drawImage 方法即可,不需要关心其它属性。

    image.png




  9. 感觉参数有点多?没关系,我们再精简一下,我们只需要考虑第二个用法,也就是5参数的写法。(sx,sy 是做裁切用到的,本文用不到,感兴趣可以自行了解。)

    image.png




  10. 这里先简单解释一下 dxdy 是什么意思。在 canvas 里也存在一个看不见的坐标系,起点也是左上角。设想你想在一个 HTMLbody 元素里写一个距离左边距离 100px 距离顶部 100px的画面,是不是得写 margin-left:100px margin-top:100px 这样的代码?没错,这里的 dydx 也是同样的道理。

    image.png




  11. 我们再看 dwidth,和 dheight,从这个名字你就能才出来,肯定和我们将要在画笔里画画的元素的宽度和高度有关,是的,你猜的没错,它就好像你设置一个 div 元素的高度和宽度一样,代表着你将在画布上画的截图的宽高属性。




  12. 现在只剩下第一个参数还没解释,这里直接说答案,我们可以直接将 video 标签填进去,ctx 会自动将当前 video 标签的这一帧画面填写进去。现在按钮的代码应该是这个样子。


    function shoot() {
    if (!videoEl.value || !wrapper.value) return;
    const canvas = document.createElement("canvas");
    canvas.width = videoEl.value.videoWidth;
    canvas.height = videoEl.value.videoHeight;
    //拿到 canvas 上下文对象
    const ctx = canvas.getContext("2d");
    ctx?.drawImage(videoEl.value, 0, 0, canvas.width, canvas.height);
    wrapper.value.appendChild(canvas);//将 canvas 投到页面上
    }



  13. 测试一下效果。

    112.gif




四. 源码


<script lang="ts" setup>
import { ref, onMounted } from "vue";

const wrapper = ref<HTMLDivElement>();
const videoEl = ref<HTMLVideoElement>();

async function checkCamera() {
const navigator = window.navigator.mediaDevices;
const devices = await navigator.enumerateDevices();
if (devices) {
const stream = await navigator.getUserMedia({
audio: false,
video: {
width: 300,
height: 300,
// facingMode: { exact: "environment" }, //强制后置摄像头
facingMode: "user", //前置摄像头
},
});
if (!videoEl.value) return;

videoEl.value.srcObject = stream;
videoEl.value.play();
}
}

function shoot() {
if (!videoEl.value || !wrapper.value) return;
const canvas = document.createElement("canvas");
canvas.width = videoEl.value.videoWidth;
canvas.height = videoEl.value.videoHeight;
//拿到 canvas 上下文对象
const ctx = canvas.getContext("2d");
ctx?.drawImage(videoEl.value, 0, 0, canvas.width, canvas.height);
wrapper.value.appendChild(canvas);
}

onMounted(() => {
checkCamera();
});
</script>
<template>
<div ref="wrapper" class="w-full h-full bg-red flex flex-col items-center">
<video ref="videoEl" />
<div
@click="shoot"
class="w-100px leading-100px text-center bg-black text-30px"
>
拍摄
</div>
</div>
</template>



五. 总结


实现拍照的整体思路其实很简单,仅仅需要了解到视频其实也是一帧一帧画面构成的,而 canvas 恰好有捕捉当前帧的能力。


预告:在下一篇会讲解如何实现扫一扫的功能,需要用到插件,感兴趣的同学可以先预习一下功课。🎁二维码扫码插件


趁热打铁🧭:前端实现微信扫一扫的思路


作者:韩振方
来源:juejin.cn/post/7289662055183597603
收起阅读 »

前端实现微信扫一扫的思路

web
前言: 在有了获取手机摄像头权限并且记录当前画面的前置知识以后,我们现在已经可以进行下一步实现一个仿微信扫一扫的功能了。 tips: 如果你是直接看的本文,对如何打开摄像头拍照这个功能还不太熟悉,请移步 🎁前端如何打开摄像头拍照。这是你阅读本篇的必需...
继续阅读 »

前言: 在有了获取手机摄像头权限并且记录当前画面的前置知识以后,我们现在已经可以进行下一步实现一个仿微信扫一扫的功能了。


tips: 如果你是直接看的本文,对如何打开摄像头拍照这个功能还不太熟悉,请移步 🎁前端如何打开摄像头拍照。这是你阅读本篇的必需前置知识。


一. 效果预览


这里先简单放一下整体界面效果,接下来带大家一步一步分析其中的功能如何实现。


2.gif


本篇将重点讲解多张二维码识别的处理场景。


二. 简单了解二维码




  1. 现在流行使用的二维码是 qrcode,其中 qr 两个字母其实就是 quick response 的缩写,简单来说就是快速响应的意思。三个角用来定位,黑点表示二进制的1,白色点代表0。(这里感兴趣可以自行了解) 它的本质其实就是将一个地址链接利用某种约定好的规则隐藏到一个图片当中,

    image.png




  2. 我们可以利用 chrome 自带的创建当前网站二维码的功能快速体验一下。
    qr.gif




  3. 你可以用手机自带的二维码扫码软件扫一下这个二维码,它将会将你引导到我掘金的个人主页。

    qrcode_juejin.cn.png




  4. 细心的你可能会发现二维码下面已经给你提示了你准备保存的链接地址,现在你观察一下浏览器地址栏是否正对应下面这个地址呢?
    image.png




三. 实现扫码本地图片功能




  1. 我们不需要深入了解这个二维码的转换规则,我们可以直接选用现有的插件即可完成识别功能。 这里我们选用 antfu 大佬的轮子。这里我们不过多介绍,你只需要它可以识别出图片中的二维码即可。如果感兴趣,这是具体仓库地址 qr-sanner-wechat




  2. 首先安装 npm i qr-scanner-wechat




  3. 它的使用方法也十分简单,这个依赖导出了一个方法,我们直接引入这个方法即 import { scan } from 'qr-scanner-wechat




  4. 这个函数可以接收一个 image 元素或者 canvas 元素作为参数,并且返回一个 promise 类型的值。




  5. 我们先来测试最简单的,传入一个 image 元素,利用 input 标签的 type=file 属性,就可以从本地选择图片,比较基础的知识,不过多赘述,代码如下。


    function getImageFromLocal(e: Event) {
    const inputEl = e.target as HTMLInputElement;
    if (!inputEl) return;
    console.log("inputEl.files", inputEl.files);
    }



    然后我们可以通过 input 元素绑定的 onChange 回调中拿到 input 元素身上的 files 属性,就可以获取到刚刚我们选择的文件信息。

    ee.gif




  6. 但是目前这个数据对象我们还无法使用,需要借助 URL.createObjectUrl 方法来创建一个普通的 url 地址。

    image.png




  7. 当拿到这个 url 地址以后该如何使用呢?🤔
    image.png




  8. 一个熟悉的老朋友,有请 img 标签出场,👏,我们只需要将 img 标签的 src 替换成刚刚保存的 url 地址即可。

    image.png

    现在整体效果应该是这样的:

    code.gif




  9. 有了 img 元素,我们直接将这个元素赋值给 qr-scanner-wechat 插件提供的 scan 函数即可。

    image.png




  10. 我们来测试一下整体流程。

    qw.gif




  11. 可以看到,scan 函数返回了一个对象,这个对象身上有两个十分重要的属性。一个叫做 rect (rectangle 长方形的单词缩写),这个属性描述了这个插件在什么位置扫描到了二维码,另外一个属性就是 text,也就是这个图片上隐藏的字符串地址

    image.png




  12. 这里我们再讲解一下 rect 属性,因为后面的功能需要你对这个属性有比较清晰的理解。我们对比一个现实世界的例子。当你掏出手机扫描二维码的时候,往往并不会正好对准一个二维码的图片,或者会遇到一个图片中存在两个二维码的情况,如下图:

    image.png




  13. 这个 qr-scanner 插件会帮你把二维码所在整张图片的相对位置告诉你,因为这个插件每次调用 scan 函数只会返回一次结果。并不是说图片上有两个二维码,它的识别结果就会有两个,所以说这个 qr-scanner 插件的识别效果也并不是百分之一百准确的。




四. 理清思路




  1. 说了这么多,那么这个 rect 我们该如何利用起来呢?别着急,我们先理清思路再动手写代码,到了目前这一步会出现两种情况。

    image.png




  2. 第一种是图片压根就没有二维码,这个简单,提示用户重新放置图片即可。




  3. 关键点就在于第二张情况,当图片上扫码到存在一个二维码后,我们该如何判断是否存在第二个或多个维码呢?

    image.png




  4. 我们看一下微信的实现效果,当只有一张二维码的时候,它会直接跳转,当有多个二维码的时候,它会将整个页面暂停,并且提示用户有两张二维码,请点击选择一个进行跳转。

    image.png




  5. 但是我们上面提到了,scan 函数每次只会扫描一次图片,返回一个识别结果,它并不能准确知道图片上到底有几个二维码。那放到现实生活我们会怎么做呢?




  6. 举个例子,假如我们现在掏出手机扫一扫的功能,现在给你的图片上有两个二维码,但是我明确的知道我就想扫第二个,你会怎么做?

    image.png




  7. 这不是很简单的道理吗?我拿手挡住第一个二维码不就可以了吗?

    image.png




  8. 那么利用同样的思路,我们可以再扫描到一张二维码的时候,想办法把当前识别到的这个二维码位置给遮挡住,然后将被遮挡后的照片传递给 scan 函数再次扫描。




  9. 那么整个过程就是,我们首先将完整的照片传给 scan,然后 scan 觉得第一张二维码比较帅,就先识别了它。(tips: 这里需要提醒一下,scan 有时候会觉得第二张二维码比较帅,那我就识别第二张二维码,要注意的它的顺序性是随机的)

    image.png




  10. 然后我们想办法盖上遮挡物,然后将这个图片传给 scan,让它再次确认是否有第二个二维码。

    image.png




  11. 在哪覆盖?还记不记 rect 属性保留有这个二维码的位置信息?现在的问题就转变为如何覆盖了?




  12. 这里需要用到 canvas 元素的一丢丢基础知识,这是 mdn canvas 基础知识的介绍,十分简单的就画出了一个绿色长方体。

    image.png

    ctx.filleRect可以接收四个参数,分别是相对于画布起始轴的 xy 的距离。

    简单来讲就可以理解为每一个 canvas 就相当于一个独立的 HTML 文件,也有自己的独立坐标系系统,x,y 就相当于 margin,至于后面两个参数,其实就代表着你要画的长方形宽度高度
    image.png




13.那这不巧了吗,scan 的返回值 rect 恰好就有这几个值。

image.png



  1. 话不多说,马上开始实践。⛽️


五. 处理存在多张二维码的图片




  1. 注意: 以下内容我统一选用从本地照片上传作为演示,从摄像头获取图片是同样的道理,详细介绍请移步 🎁前端如何打开摄像头拍照。在下面的讲解过程,我会默认你已经阅读了前置知识。




  2. 这里我就继续沿用之前提到的图片,我将他们拼接到了一张图片上。

    二.png




  3. 下面应该是你目前从本地选择二维码图片识别的代码。


    async function getImageFromLocal(e: Event) {
    const inputEl = e.target as HTMLInputElement;
    if (!inputEl) return;
    if (!inputEl.files?.length) return;
    const image = inputEl.files[0];
    const url = URL.createObjectURL(image);
    src.value = url;
    const result = await scan(imgEl.value!);
    console.log("result", result);
    }



  4. 接下来我们需要先创建一个 canvas 来将当前的照片拷贝到画布上,然后准备利用得到的 rect 信息在这个 canvas 元素上绘画。

    image.png




  5. 为了方便展示,我调用 appendChildren 方法将这个 canvas 元素打印到了界面上。

    1.gif




  6. 然后用 resultrect坐标宽度信息,去调用我们提到的 canvasfillStyle fillRect 方法。

    image.png

    下面是目前实现的效果:

    1.gif




  7. 注意scan 函数不仅仅可以接受 imgElment 作为扫描的参数,它还可以接受 canvas 元素作为扫描的参数。聪明的你看到这里,或许已经猜到我们下一步准备做什么了。




  8. 那么此时我们就可以将这个已经被黑色涂鸦覆盖过的 canvas 进行二次扫描。(暂时不要考虑代码的优雅性,这里只是更清晰的说明我们在干什么,之后我们会封装几个方法,然后整理一下代码)

    image.png

    让我们再看一下效果:

    2.gif




  9. 通过多次重复上面的操作,就可以将图片上所有的二维码都尽量识别出来。

    image.png

    现在实现的效果:

    11.gif

    同时图片上相对应的识别内容也全都被正确的被获取到了。

    image.png




  10. 此时我们创建一个 Map 来保存这些数据。Mapkey 就是 text ,对应的 value 就是 rect 坐标信息。

    image.png

    image.png




六. 弹出可以点击的小蓝块




  1. 有了坐标信息和位置信息,并且我们的 canvasimg 元素的坐标轴系统是一一对应的,那么我们就可以写一个函数来遍历这个 resultMap,然后根据位置信息在 img 元素所在的 div 上打印出我们想要的样式。




  2. 首先在 img 元素外面包一层 div,打上 ref 叫做 imgWrapper 。因为之后我们要用它当作小蓝块的定位元素,所以先设置 position:relative

    image.png




  3. 绘画代码如下,都是基础的方法,不再过多赘述。


    //多个二维码时添加动态小蓝点
    function draw() {
    resultMap.forEach((rect, link) => {
    if (!imgWrapper.value) return;
    const dom = document.createElement("div");
    const { x, y, width, height } = rect;
    const _x = (x || 0) + width / 2 - 20;
    const _y = (y || 0) + height / 2 - 20;
    dom.className = "blue-chunk";
    dom.style.width = "40px";
    dom.style.height = "40px";
    dom.style.background = "#2ec1cc";
    dom.style.position = "absolute";
    dom.style.zIndex = "9999999";
    dom.style.top = _y + "px";
    dom.style.left = _x + "px";
    dom.style.color = "#fff";
    dom.style.textAlign = "center";
    dom.style.borderRadius = "100px";
    dom.style.borderBlockColor = "#fff";
    dom.style.borderColor = "unset";
    dom.style.borderRightStyle = "solid";
    dom.style.borderWidth = "3px";
    dom.style.animation = "scale-animation 2s infinite";
    dom.addEventListener("click", () => {
    console.log(link);
    });
    imgWrapper.value.appendChild(dom);
    });
    }



  4. 然后再 for 循环以后开始绘画小蓝块。

    image.png




  5. 让我们预览一下现在的效果:

    112.gif




  6. 让我们测试一下相对应的点击事件

    3.gif




七. 源码





八.总结


本篇文章的关键点就是讲解了我在实现处理多张二维码的场景时的思路,利用 canvas 遮挡识别过的二维码这个思路是pbk-bin大佬最先想到的,在实现这个需求以后还是很感叹这个思路的巧妙。👏


再次特别感谢pbk-bin🎁~


如果文章对你有帮助,不妨赠人玫瑰,手有余香,预计将会在下篇更新较为完整的微信扫一扫界面和功能。


作者:韩振方
来源:juejin.cn/post/7290813210276724771
收起阅读 »

🤔公司实习生居然还在手动切换node版本?

web
前段时间看了实习生的新项目,发现他启动不了项目,因为node版本太低,我让他去用nvm来管理node的版本,然后看到他切换版本的时候是这样的,先用nvm下载安装目标的node版本,然后在把安装好的node版本替换掉原先的node路径下的node_modules...
继续阅读 »

前段时间看了实习生的新项目,发现他启动不了项目,因为node版本太低,我让他去用nvm来管理node的版本,然后看到他切换版本的时候是这样的,先用nvm下载安装目标的node版本,然后在把安装好的node版本替换掉原先的node路径下的node_modules,而不是用命令行进行版本切换,才发现原来他使用nvm来切换node版本虽然显示切换成功,但全局的node版本一直是不变的,所以才用文件覆盖的方式强制进行解决,对于这个问题进行解决并且梳理



可以直接跳到第四步查看解决方案


1️⃣ 安装nvm


where nvm

找不到nvm路径的朋友可以用这个命令来找到nvm的安装路径,默认的安装路径都是差不多的


image.png


2️⃣ 查看目前node版本


可以看到目前的版本是node V16.14.2


image.png


3️⃣ nvm安装目标node版本



nvm的主要作用就是用来切换node的版本,为什么要切换node的版本,就是因为你的当前node版本和你要启动的项目不兼容,有两种可能,要么是你的项目太旧,你的node版本相对来说比较高,需要用到向下兼容;另外一种可能就是你项目用到的node比较新,你需要进行升级



先安装需要安装的目标版本,用isntall来安装你需要的对应node版本


image.png


回到你的nvm安装路径,就可以看到你已经安装的各种版本的node文件夹
image.png


当然也可以用命令行


nvm list

image.png


4️⃣ nvm切换到目标node版本


切换到目标node版本使用nvm use


nvm use

查看目前nvm安装了哪些版本 然后use来进行切换


image.png


到切换的时候发现了问题,这里无论怎么切换,node的版本依然不会变


image.png


可以看到我用的use来切换到15的版本,但是再次查看nvm的node历史版本,可以看到还是位于16.14.2的node版本,明明就是这么顺利的问题,出了一个让人摸不到头脑的事情


5️⃣寻找问题


既然nvm切换版本已经成功,那么为什么node版本不会变,有没有可能根本改的不是同一个node,或者是存在两个node,直到我打开环境变量一看,为啥会存在两个node的路径,可能的原因就是之前的node版本没有删除,node -v一直输出的是安装前的node


image.png


原来已经安装了一个node的,全局的node指向的node路径和nvm切换node的路径是不一样的


nvm切换的node是基于他文件夹中的nodejs


image.png


image.png



点进去看你会发现他也是有一个node.exe的程序的,所以问题是已经找到的了,目前系统上出现了两个node,并且nvm切换的node版本并不是全局的node,因为环境变量已经指向了旧的node,他的版本不会改变,那么nvm去怎么切换都是没有用的



6️⃣解决方案


image.png


看了网上的一些解决方案都是要在nvm中新建两个文件夹的方式来解决,但是其实直接把nodejs删除也是一个很直接的办法,先通过where node找到当前的node的安装目录,直接进行删除


image.png


最后是通过把另外一个目录的node进行删除,重新看一下node的安装路径,也就是重新执行一下 where node


image.png


可以看到在nvm配置正确的情况下是能直接指向nvm下的node的


最后重新切换一下node的版本,也就是上文的操作


image.png


PS


我指的手动切换是nvm下载node版本之后手动去替换node_modules,原来大家觉得用nvm use也是手动替换(确实是我的问题),经过评论区广大jym指正,可以尝试一下volta这个工具来进行切换版本,真正做到不用手动替换,后续我会亲自去体验一下并且发文,感谢评论区小伙伴


🙏 感谢您花时间阅读这篇文章!如果觉得有趣或有收获,请关注我的更新,给个喜欢和分享。您的支持是我写作的最大动力!


作者:一只大加号
来源:juejin.cn/post/7291096702021304354
收起阅读 »

推荐一款“自学编程”的宝藏网站!详解版~(在线编程练习,项目实战,免费Gpt等)

🌟云端源想学习平台,一站式编程服务网站🌟 云端源想官网传送门 ⭐ 📚精品课程:由项目实战为导向的视频课程,知识点讲解配套编程练习,让初学者有方向有目标。🎯 📈课程阶段:每门课程都分多个阶段进行,由浅入深,很适合零基础和有基础的金友们自由选择阶段进行练习学...
继续阅读 »

🌟云端源想学习平台,一站式编程服务网站🌟


云端源想官网传送门


📚精品课程:由项目实战为导向的视频课程,知识点讲解配套编程练习,让初学者有方向有目标。🎯


📈课程阶段:每门课程都分多个阶段进行,由浅入深,很适合零基础和有基础的金友们自由选择阶段进行练习学习。🌈


🎯章节实战:每一章课程都配有完整的项目实战,帮助初学者巩固所学的理论知识,在实战中运用知识点,不断积累项目经验。🔥


💼项目实战:企业级项目实战和小型项目实战结合,帮助初学者积累实战经验,为就业打下坚实的基础,成为实战型人才。🏆




🧩配套练习:根据课程小节设置配套选择练习或编程练习,帮助学习者边学边练,让学习事半功倍。💪


💻在线编程:支持多种编程语言,创建Web前端、Java后端、PHP等多种项目,开发项目、编程练习、数据存储、虚拟机等都可在线使用,并可免费扩展内存,为你创造更加简洁的编程环境。🖥


🤝协作编程:可邀请站内的好友、大佬快速进入你的项目,协助完成当前项目。与他人一起讨论交流,快速解决问题。👥


📂项目导入导出:可导入自己在在线编辑过的项目再次编辑,完成项目后也可以一键导出项目,降低试错成本。🔗


🤖AI协助编程:AI智能代码协助完成编程项目,随时提问,一键复制代码即可使用。💡



🔧插件工具:在使用在线编程时,可在插件工具广场使用常用的插件,安装后即可使用,帮助你提高编程效率,带来更多便捷。🛠


📞一对一咨询:编程过程中,遇到问题随时提问,网站1V1服务(在职程序员接线,不是客服),实时解决你在项目中遇到的问题。📬


🛠工具广场:提供一些好用的在线智能工具,让你能够快速找到各种实用工具和应用。覆盖了多个领域,包括智能AI问答等。🔍



收起阅读 »

面试官:如何判断两个数组的内容是否相等

web
题目 给定两个数组,判断两数组内容是否相等。 不使用排序 不考虑元素位置 例: [1, 2, 3] 和 [1, 3, 2] // true [1, 2, 3] 和 [1, 2, 4] // false 思考几秒:有了😀😀 1. 直接遍历✍ 直接遍历第...
继续阅读 »

题目


给定两个数组,判断两数组内容是否相等。



  • 不使用排序

  • 不考虑元素位置


例:


[1, 2, 3] 和 [1, 3, 2] // true
[1, 2, 3] 和 [1, 2, 4] // false


思考几秒:有了😀😀


1. 直接遍历✍



  • 直接遍历第一个数组,并判断是否存在于在第二个数组中

  • 求差集, 如果差集数组有长度,也说明两数组不等(个人感觉比上面的麻烦就不举例了)


const arr1 =  ["apple", "banana", 1]
const arr2 = ["apple", 1, "banana"]

function fn(arr1, arr2) {
// Arrary.some: 有一项不满足 返回false
// Arrary.indexOf: 查到返回下标,查不到返回 -1
if (arr1.length !== arr2.length) {
return false;
}
return !arr1.some(item => arr2.indexOf(item)===-1)
}

fn(arr1,arr2) // true


  • 细心的小伙伴就会发现:NaN 会有问题


const arr1 =  ["apple", "banana", NaN]
const arr2 = ["apple", NaN, "banana"]

function fn(arr1, arr2) {
if (arr1.length !== arr2.length) {
return false;
}
return !arr1.some(item => arr2.indexOf(item)===-1)
}

fn(arr1,arr2) // false


Arrary.prototype.indexOf() 是使用的严格相等算法 => NaN值永远不相等


Array.prototype.includes() 是使用的零值相等算法 => NaN值视作相等




  • 严格相等算法: 与 === 运算符使用的算法相同

  • 零值相等不作为 JavaScript API 公开, -0和0 视作相等,NaN值视作相等,具体参考mdn文档:


image.png



  • 使用includes


const arr1 =  ["apple", "banana", NaN]
const arr2 = ["apple", NaN, "banana"]

function fn(arr1, arr2) {
if (arr1.length !== arr2.length) {
return false;
}
return !arr1.some(item => !arr2.includes(item))
}

fn(arr1,arr2) // true

使用includes 确实可以判断NaN了,如果数组元素有重复呢?


// 重复的元素都是banana
const array1 = ["apple", "banana", "cherry", "banana"];
const array2 = ["banana", "apple", "banana", "cherry"];
// 或者
// 一个重复的元素是banana, 一个是apple
const array1 = ["apple", "banana", "cherry", "banana"];
const array2 = ["banana", "apple", "apple", "cherry"];


由上可知:这种行不通,接下来看看是否能从给数组元素添加标识入手


2. 把重复元素标识编号✍


这个简单:数组 元素重复 转换成val1, val2


function areArraysContentEqual(arr1, arr2) {
if (arr1.length !== arr2.length) {
return false;
}

// 重复数组元素 加1、2、3
const countArr1 = updateArray(arr1)
const countArr2 = updateArray(arr2)

/**
*
* @param {*} arr 数组 元素重复 转换成val1, val2
* @returns
*/

function updateArray(arr) {
const countMap = new Map();
const updatedArr = [];

for (const item of arr) {
if (!countMap.has(item)) {
// 如果元素是第一次出现,直接添加到结果数组
countMap.set(item, 0);
updatedArr.push(item);
} else {
// 如果元素已经出现过,添加带有编号的新元素到结果数组
const count = countMap.get(item) + 1;
countMap.set(item, count);
updatedArr.push(`${item}${count}`);
}
}
return updatedArr;
}
const flag = countArr1.some(item => !countArr2.includes(item))
return !flag
}

const array1 = ["apple", "banana", "cherry", "banana"];
const array2 = ["banana", "apple", "banana", "cherry"];

areArraysContentEqual(array1, array2) // true

// 其实这种存在漏洞的
const array3 = ["apple", "banana", "cherry", "banana", 1, '1', '1' ];
const array4 = ["banana", "apple", "banana", "cherry", '1', 1, 1];
// 应该是false
areArraysContentEqual(array3, array4) // true

因为把判断的 转为了字符串 updatedArr.push(${item}${count}) 所以出问题了


3. 统计元素次数(最终方案)✍


function areArraysContentEqual(arr1, arr2) {
if (arr1.length !== arr2.length) {
return false;
}

// 创建计数对象,用于记录每个元素在数组中的出现次数
const countMap1 = count(arr1)
const countMap2 = count(arr2)

// 统计数组中的元素出现次数
function count(arr = []) {
const resMap = new Map();
for (const item of arr) {
resMap.set(item, (resMap.get(item) || 0) + 1);
}
return resMap
}
// 检查计数对象是否相等
for (const [key, count] of countMap1) {
if (countMap2.get(key) !== count) {
return false;
}
}

return true;
}

const array1 = ["apple", "banana", "cherry", "banana", 1, '1', '11', 11];
const array2 = ["banana", "apple", "banana", "cherry", '1', 1, '11', 11];

areArraysContentEqual(array1, array2) // true


注意事项


这个题需要注意:



  • 先判断长度,长度不等 必然不等

  • 元素可重复

  • 边界情况考虑

    • '1' 和 1 (Object的key是字符串, Map的key没有限制)

    • NaN

    • null undefined




结语:


如果本文对你有收获,麻烦动动发财的小手,点点关注、点点赞!!!👻👻👻


因为收藏===会了


如果有不对、更好的方式实现、可以优化的地方欢迎在评论区指出,谢谢👾👾👾


作者:程序员小易
来源:juejin.cn/post/7290786959441117243
收起阅读 »

JavaScript 基础(一)

web
变量 变量概述 数据类型 运算符 算数运算符 递增递减运算符 比较运算符 逻辑运算符 赋值运算符 运算符优先级 选择结构 流程控制(顺序,分支,循环) 小结 数组 函数 函数基本概念 arguments 函数声明方式 Java...
继续阅读 »

变量


变量概述


image.png


数据类型


image.png
image.png


运算符


算数运算符


image.png


递增递减运算符


image.png


比较运算符


image.png


逻辑运算符


image.png


赋值运算符


image.png


运算符优先级


image.png


选择结构


流程控制(顺序,分支,循环)


image.png


小结


image.png


数组


image.png


函数


函数基本概念


image.png
image.png
image.png


arguments


image.png


函数声明方式


image.png


JavaScript作用域


image.png


预解析


image.png
image.png


sum(1)(2,3)(4,5,6) js的链式调用


function sum(){
let arr = Array.prototype.slice.call(arguments);
fn = function(){
let arr1 = Array.prototype.slice.call(arguements)
return sum.apply(null,arr.concat(arr1))
}
//`reduce()` 方法将数组缩减为单个值。
//`reduce()` 方法为数组的每个值(从左到右)执行提供的函数。
//函数的返回值存储在累加器中(结果/总计)。
//注释:对没有值的数组元素,不执行 `reduce()` 方法。
//注释:`reduce()` 方法不会改变原始数组。
fn.toString = function(){
return arr.reduce((value,n)=>{
return value+n
})
}
return fn
}

//柯里化的高级实现
function curry(func){
return curried(...args){
if(args.length >= func.length){
return func.apply(this,args);
}else{
return function(...args2){
return curried.apply(this,args.concat(args2))
}
}
}
}

面试点


image.png


sum(1)(2)(3)怎么实现


面试的时候,面试官让我讲一个这个怎么实现
当时想到的是嵌套闭包,调用返回值,进行累加


//这个是我在其他文章上看到的代码
function sum(a){
function add(b){
a =a+b
return add;
}
add.toString = function(){
return a;
}
return sum;


查询了一下,涉及到了一个知识点,函数柯里化


//正常的函数
function sum(a,b){
var sum = 0;
sum = a+ b;
console.log(sum);
}

//柯里化函数
function curry(a){
return function(b){
console.log(a+b)
}
}
const sum = curry(1);
// 这个过程分为三步
// step1:
// addCurry(1)
// 返回下面的函数
// ƒ (arg) {
// return judge(1, arg);
// }
// step2:
// addCurry(1)(2)
// 返回下面的函数
// ƒ (arg) {
// return judge(1,2, arg);
// }
// step3:
// addCurry(1)(2)(3)
// 返回并执行下面的函数
// return fn(1,2,3);
// 最终得到结果6

函数柯里化


把接收多个参数的函数变换成接受一个单一参数的函数,并且但会接收余下的采纳数并且返回结果的新函数的技术。eg:它是指将一个函数从可调用的 f(a, b, c) 转换为可调用的 f(a)(b)(c)


参数复用


用于正则表达式的检验


//记录思路
柯里化检验函数curry
const check = curry();
生成工具化函数,进行验证
const checkphone = check(/'正则表达式'/)
检验电话号码
checkphone('122333232');

延迟计算


返回的函数都不会立即执行,而是等待调用(开发者调用)

动态生成函数


比如说,在dom结点中每每绑定一次事件,都需要对环境进行判断,再去绑定这个事件;将这个过程进行柯里化,在使用前进行一次判断

const addEvent = (function() {
if (window.addEventListener) {
return function(ele) {
return function(type) {
return function(fn) {
return function(capture) {
ele.addEventListener(type, (e) => fn.call(ele, e), capture);
}
}
}
}
} else if (window.attachEvent) {
return function(ele) {
return function(type) {
return function(fn) {
return function(capture) {
ele.addEventListener(type, (e) => fn.call(ele, e), capture);
}
}
}
}
}
})();

// 调用
addEvent(document.getElementById('app'))('click')((e) => {console.log('click function has been call:', e);})(false);

// 分步骤调用会更加清晰
const ele = document.getElementById('app');
// get environment
const environment = addEvent(ele)
// bind event
environment('click')((e) => {console.log(e)})(false);
//来自于[一文搞懂Javascript中的函数柯里化(currying) - 知乎 (zhihu.com)](https://zhuanlan.zhihu.com/p/120735088)

柯里化函数后虽然代码比较冗长,但是它的适用性增加了

柯里化封装


eg : sum(1,2,3...)


    //函数柯里化封装(这个封装可以直接复制走使用)
function curry(fn, args) {
var length = fn.length;
var args = args || [];
return function () {
newArgs = args.concat(Array.prototype.slice.call(arguments));
if (newArgs.length < length) {
return curry.call(this, fn, newArgs);
} else {
return fn.apply(this, newArgs);
}
}
}

//需要被柯里化的函数
function multiFn(a, b, c) {
return a * b * c;
}

//multi是柯里化之后的函数
var multi = curry(multiFn);
console.log(multi(2)(3)(4));
console.log(multi(2, 3, 4));
console.log(multi(2)(3, 4));
console.log(multi(2, 3)(4));
//转载自[Javascript高级篇之函数柯里化 - 掘金 (juejin.cn)](https://juejin.cn/post/7111902909796712455)


Function.prototype


四个方法:apply,bind,call,toString


Function.prototype.bind()


定义


bind() 方法创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。(MDN)


const module = {
x: 42,
getX: function () {
return this.x;
},
};

const unboundGetX = module.getX;
console.log(unboundGetX()); // The function gets invoked at the global scope
// Expected output: undefined

const boundGetX = unboundGetX.bind(module);
console.log(boundGetX());
// Expected output: 42


Function.prototype.apply()


function 的实例的apply()方法会以给定的this值和作为数组(或类数组对象)提供arguments调用该函数


const numbers = [5, 6, 2, 3, 7];
const max = Math.max.apply(null, numbers);
console.log(max);
// Expected output: 7
const min = Math.min.apply(null, numbers);
console.log(min);
// Expected output: 2

语法


apply(thisArg) apply(thisArg, argsArray)


参数


//argsArray --- 用于指定调用func时的参数,或者如果不需要向函数提供参数,则为null或undefined

//thisArg --- 调用func 时提供的this值,如果函数不处于严格对象,则null 和undefined 会被替换成全局对象,原始值会被转换成对象

返回值


使用指定的this值和参数调用函数的结果


Function.prototype.call()


Function 实例的 call() 方法会以给定的 this 值和逐个提供的参数调用该函数


//示例
function Product(name, price) {
this.name = name;
this.price = price;
}

function Food(name, price) {
Product.call(this, name, price);
this.category = 'food';
}

console.log(new Food('cheese', 5).name);
// Expected output: "cheese"

//语法
call(thisArg)
call(thisArg, arg1)
call(thisArg, arg1, arg2)
call(thisArg, arg1, arg2, /* …, */ argN)


Function.prototype.toString()


Function 实例的 toString() 方法返回一个表示该函数源码的字符串。


function sum(a, b) {
return a + b;
}

console.log(sum.toString());
// Expected output: "function sum(a, b) {
// return a + b;
// }"

console.log(Math.abs.toString());
// Expected output: "function abs() { [native code] }"

放一个JavaScript的链接


转载自:http://www.cnblogs.com/wangdan0915…


作者:有玺鹤呖
来源:juejin.cn/post/7288962917399035956
收起阅读 »

你写的 CSS 太过冗余,以至于我对它下手了!

web
:is() 你是否曾经写过下方这样冗余的CSS选择器: .active a, .active button, .active label { color: steelblue; } 其实上面这段代码可以这样写: .active :is(a, button...
继续阅读 »

:is()


你是否曾经写过下方这样冗余的CSS选择器:


.active a,
.active button,
.active label {
color: steelblue;
}

其实上面这段代码可以这样写:


.active :is(a, button, label) {
color: steelblue;
}

看~是不是简洁了很多!


是的,你可以使用 :is() 对选择器的任何部分进行分组,例如,你可以对如下代码:


.section h2,
.aside h2,
.nav h2 {
color: steelblue;
}

进行转换:


:is(.section, .aside, .nav) h2 {
color: steelblue;
}

但是 :is() 不仅对父选择器和子选择器有用,它也可以选择多个相邻的选择器,比如:


button:is(:focus, :hover, :active) {
color: steelblue;
}

button:is(.active, .pressed) {
color: lightsteelblue;
}

上述代码等价于:


button:focus, button:hover, button:active {
color: steelblue;
}

button.active, button.pressed {
color: lightsteelblue;
}

:where()


:where() 是一个与 :is() 非常相似的伪类,也值得注意。它们看起来非常相似:


:where(.section, .aside, .nav) h2 {
color: steelblue;
}

但区别在于 :where 的权重为 0,而:is() 总是会采用列表中最特高的选择器的权重。例如,你知道下面的 CSS 代码中的按钮是什么颜色吗?


:is(html) button {
color: red;
}

:where(html) button {
color: blue;
}

在上面的例子中,虽然以 :where() 开头的块在以 :is() 开头的块下面,但 :is() 块具有更高的权重


:has()


一个相关但非常不同的伪类是:has():has() 允许选择包含匹配选择器(或选择器集)的子元素的父元素


:has() 的一个示例是不显示下划线的情况下包含图像或视频的链接:


a { text-decoration: underline }

/* 链接有下划线,除非它们包含图像或视频 */
a:has(img, video) {
text-decoration: none;
}

现在,如果默认情况下我们的 a 标记有下划线文本,但其中有图像或视频,则任何匹配的锚元素的下划线将被删除。


你也可以结合 :is() 使用:



:is(a, button):has(img, video) {
text-decoration: none;
}

我们还需要预处理器吗?


现在你可能会说“SCSS可以做到这一点!,你甚至可能更喜欢它的语法:


.active {
button, label, a {
color: steelblue;
}
}

说的没错,这很优雅。但是,CSS 似乎现在已经都能获取到我们曾经需要SCSS(或其他预处理器)才能获得的特性。


CSS 变量也是 CSS 本身的另一个不可思议的补充,它回避了一个问题:就是什么时候或者多久你真的需要预处理程序:


.active :is(a, button, label) {
--color: steelblue;
color: var(--steelblue);
}

这并不是说预处理器没有它们的用例和优点。


但我认为在某个时间点上,它们确实是处理任何重要CSS的强制要求,而现在情况不再如此了。


惊喜


我想说的是,CSS的未来仍然是光明的。CSS 工作组正积极致力于直接向CSS中添加嵌套选择器。他们正在积极地在3种可能的语法之间进行选择:


/* 1 */
article {
font-family: avenir;
& aside {
font-size: 1rem;
}
}

/* 2 */
article {
font-family: avenir;
} {
aside {
font-size: 1rem;
}
}

/* 3 */
@nest article {
& {
font-family: avenir;
}
aside {
font-size: 1rem;
}
}

你最喜欢哪一个?


庆幸的是,第 1 种已经被官方采纳!所以我们可能很快就会看到一个非常像 scss 的嵌套语法。


浏览器支持


目前所有主流浏览器都支持 :is():where() 伪类:


image.png
但是,需要注意,我们在这里提到的 :has() 伪类没有相同级别的支持,所以使用 :has() 时要小心:


image.png


作者:编程轨迹
来源:juejin.cn/post/7212079828480016442
收起阅读 »

Token无感知刷新,说说我对解决方案的理解~

web
前言 大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心。 大家设想一下,如果有一个超级大的表单页面,用户好不容易填完了,然后点击提交,这个时候请求接口居然返回401,然后跳转到登录页。。。那用户心里肯定是一万个草泥马...
继续阅读 »

前言


大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心。



大家设想一下,如果有一个超级大的表单页面,用户好不容易填完了,然后点击提交,这个时候请求接口居然返回401,然后跳转到登录页。。。那用户心里肯定是一万个草泥马~~~


所以项目里实现token无感知刷新是很有必要的~



这几天在项目中实践了一套token无感知刷新的方案,其实也有看了一下网上那些解决方案,也知道这类的方案已经烂大街了,但是感觉不太符合我想要的效果,主要体现在以下几个方面:



  • 逻辑都写拦截器里,耦合性高,不太好

  • 接口重试的机制做的不太好

  • 接口并发时的逻辑处理做的不太好


我为什么不想要让这套逻辑耦合在拦截器里呢?一方面是因为,我想要写一套代码,在很多的项目里面可以用,把代码侵入性降到最低


另一方面,因为我觉得token无感知刷新涉及到了接口重发,我理解是接口维度的,不应该把这套逻辑放在响应拦截器里去做。。我理解重发之后就是一个独立的新接口请求了,不想让两个独立的接口请求相互有交集~


所以我还是决定自己写一套方案,并分享给大家,希望大家可以提提意见啥的,共同进步~



温馨提示:需要有一些Promise基础



思路


其实大体思路是一样的,只不过实现可能有差别~就是需要有两个 token



  • accessToken:普通 token,时效短

  • refreshToken:刷新 token,时效长


accessToken用来充当接口请求的令牌,当accessToken过期时效的时候,会使用refreshToken去请求后端,重新获取一个有效的accessToken,然后让接口重新发起请求,从而达到用户无感知 token 刷新的效果


具体分为几步:



  • 1、登录时,拿到accessTokenrefreshToken,并存起来

  • 2、请求接口时,带着accessToken去请求

  • 3、如果accessToken过期失效了,后端会返回401

  • 4、401时,前端会使用refreshToken去请求后端再给一个有效的accessToken

  • 5、重新拿到有效的accessToken后,将刚刚的请求重新发起

  • 6、重复1/2/3/4/5



有人会问:那如果refreshToken也过期了呢?


好问题,如果refreshToken也过期了,那就真的过期了,就只能乖乖跳转到登录页了~


Nodejs 模拟 token


为了方便给大家演示,我用 express 模拟了后端的 token 缓存与获取,代码如下图(文末有完整代码)由于这里只是演示作用,所以我设置了



  • accessToken:10秒失效

  • refreshToken:30秒失效



前端模拟请求


先创建一个constants.ts来储存一些常量(文末有完整源码)



接着我们需要对axios进行简单封装,并且模拟:



  • 模拟登录之后获取双 token 并存储

  • 模拟10s后accessToken失效了

  • 模拟30s后refreshToken失效了



理想状态下,用户无感知的话,那么控制台应该会打印


test-1
test-2
test-3
test-4

打印test-1、test-2比较好理解


打印test-3、test-4是因为虽然accessToken失效了,但我用refreshToken去重新获取有效的accessToken,然后重新发起3、4的请求,所以会照常打印test-3、test-4


不会打印test-5、test-6是因为此时refreshToken已经过期了,所以这个时候双token都过期了,任何请求都不会成功了~


但是我们看到现状是,只打印了test-1、test-2




不急,我们接下来就实现token无感知刷新这个功能~


实现


我的期望是封装一个class,这个类提供了以下几个功能:



  • 1、能带着refreshToken去获取新accessToken

  • 2、不跟axios拦截器耦合

  • 3、当获取到新accessToken时,可以重新发起刚刚失败了的请求,无缝衔接,达到无感知的效果

  • 4、当有多个请求并发时,要做好拦截,不要让多次去获取accessToken


针对这几点我做了以下这些事情:



  • 1、类提供一个方法,可以发起请求,带着refreshToken去获取新accessToken

  • 2、提供一个wrapper高阶函数,对每一个请求进行额外处理

  • 3/4、维护一个promise,这个promise只有在请求到新accessToken时才会fulfilled


并且这个类还需要支持配置化,能传入以下参数:



  • baseUrl:基础url

  • url:请求新accessToken的url

  • getRefreshToken:获取refreshToken的函数

  • unauthorizedCode:无权限的状态码,默认 401

  • onSuccess:获取新accessToken成功后的回调

  • onError:获取新accessToken失败后的回调


以下是代码(文末有完整源码)



使用示例如下



最后实现了最终效果,打印出了这四个文本




完整代码


constants.ts


// constants.ts

// localStorage 存储的 key
export const LOCAL_ACCESS_KEY = 'access_token';
export const LOCAL_REFRESH_KEY = 'refresh_token';

// 请求的baseUrl
export const BASE_URL = 'http://localhost:8888';
// 路径
export const LOGIN_URL = '/login';
export const TEST_URL = '/test';
export const FETCH_TOKEN_URL = '/token';


retry.ts


// retry.ts

import { Axios } from 'axios';

export class AxiosRetry {
// 维护一个promise
private fetchNewTokenPromise: Promise<any> | null = null;

// 一些必须的配置
private baseUrl: string;
private url: string;
private getRefreshToken: () => string | null;
private unauthorizedCode: string | number;
private onSuccess: (res: any) => any;
private onError: () => any;

constructor({
baseUrl,
url,
getRefreshToken,
unauthorizedCode = 401,
onSuccess,
onError,
}: {
baseUrl: string;
url: string;
getRefreshToken: () => string | null;
unauthorizedCode?: number | string;
onSuccess: (res: any) => any;
onError: () => any;
}
) {
this.baseUrl = baseUrl;
this.url = url;
this.getRefreshToken = getRefreshToken;
this.unauthorizedCode = unauthorizedCode;
this.onSuccess = onSuccess;
this.onError = onError;
}

requestWrapper<T>(request: () => Promise<T>): Promise<T> {
return new Promise((resolve, reject) => {
// 先把请求函数保存下来
const requestFn = request;
return request()
.then(resolve)
.catch(err => {
if (err?.status === this.unauthorizedCode && !(err?.config?.url === this.url)) {
if (!this.fetchNewTokenPromise) {
this.fetchNewTokenPromise = this.fetchNewToken();
}
this.fetchNewTokenPromise
.then(() => {
// 获取token成功后,重新执行请求
requestFn().then(resolve).catch(reject);
})
.finally(() => {
// 置空
this.fetchNewTokenPromise = null;
});
} else {
reject(err);
}
});
});
}

// 获取token的函数
fetchNewToken() {
return new Axios({
baseURL: this.baseUrl,
})
.get(this.url, {
headers: {
Authorization: this.getRefreshToken(),
},
})
.then(this.onSuccess)
.catch(() => {
this.onError();
return Promise.reject();
});
}
}


index.ts


import { Axios } from 'axios';
import {
LOCAL_ACCESS_KEY,
LOCAL_REFRESH_KEY,
BASE_URL,
LOGIN_URL,
TEST_URL,
FETCH_TOKEN_URL,
} from './constants';
import { AxiosRetry } from './retry';

const axios = new Axios({
baseURL: 'http://localhost:8888',
});

axios.interceptors.request.use(config => {
const url = config.url;
if (url !== 'login') {
config.headers.Authorization = localStorage.getItem(LOCAL_ACCESS_KEY);
}
return config;
});

axios.interceptors.response.use(res => {
if (res.status !== 200) {
return Promise.reject(res);
}
return JSON.parse(res.data);
});

const axiosRetry = new AxiosRetry({
baseUrl: BASE_URL,
url: FETCH_TOKEN_URL,
unauthorizedCode: 401,
getRefreshToken: () => localStorage.getItem(LOCAL_REFRESH_KEY),
onSuccess: res => {
const accessToken = JSON.parse(res.data).accessToken;
localStorage.setItem(LOCAL_ACCESS_KEY, accessToken);
},
onError: () => {
console.log('refreshToken 过期了,乖乖去登录页');
},
});

const get = (url, options?) => {
return axiosRetry.requestWrapper(() => axios.get(url, options));
};

const post = (url, options?) => {
return axiosRetry.requestWrapper(() => axios.post(url, options));
};

const login = (): any => {
return post(LOGIN_URL);
};
const test = (): any => {
return get(TEST_URL);
};

// 模拟页面函数
const doing = async () => {
// 模拟登录
const loginRes = await login();
localStorage.setItem(LOCAL_ACCESS_KEY, loginRes.accessToken);
localStorage.setItem(LOCAL_REFRESH_KEY, loginRes.refreshToken);

// 模拟10s内请求
test().then(res => console.log(`${res.name}-1`));
test().then(res => console.log(`${res.name}-2`));

// 模拟10s后请求,accessToken失效
setTimeout(() => {
test().then(res => console.log(`${res.name}-3`));
test().then(res => console.log(`${res.name}-4`));
}, 10000);

// 模拟30s后请求,refreshToken失效
setTimeout(() => {
test().then(res => console.log(`${res.name}-5`));
test().then(res => console.log(`${res.name}-6`));
}, 30000);
};

// 执行函数
doing();


结语 & 加学习群 & 摸鱼群


我是林三心



  • 一个待过小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司的作死型前端选手;

  • 一个偏前端的全干工程师;

  • 一个不正经的掘金作者;

  • 一个逗比的B站up主;

  • 一个不帅的小红书博主;

  • 一个喜欢打铁的篮球菜鸟;

  • 一个喜欢历史的乏味少年;

  • 一个喜欢rap的五音不全弱鸡


如果你想一起学习前端,一起摸鱼,一起研究简历优化,一起研究面试进步,一起交流历史音乐篮球rap,可以来俺的摸鱼学习群哈哈,点这个,有7000多名前端小伙伴在等着一起学习哦 --> 摸鱼沸点


image.png


作者:Sunshine_Lin

链接:juejin.cn/post/728169…

来源:稀土掘金

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


作者:Sunshine_Lin
来源:juejin.cn/post/7289741611809587263
收起阅读 »

5分钟回顾webpack的前世今生

web
引言 模块化编程是软件设计的一个重要思想。在JavaScript中,处理模块一直是个问题,由于浏览器只能执行JavaScrip、CSS、HTML 代码,所以模块化的前端代码必须进行转换后才能运行。例如 CommonJS 或 AMD,甚至是ECMA 提出的 Ja...
继续阅读 »

引言


模块化编程是软件设计的一个重要思想。在JavaScript中,处理模块一直是个问题,由于浏览器只能执行JavaScrip、CSS、HTML 代码,所以模块化的前端代码必须进行转换后才能运行。例如 CommonJS 或 AMD,甚至是ECMA 提出的 JavaScript 模块化规范——ES6 模块,这些模块系统要么是在浏览器无法运行,要么是无法被浏览器识别和加载,所以针对不同的模块系统,就需要使用专门的工具将源代码转换成浏览器能执行的代码。


整个转化过程被称为构建,构建过程就是“模块捆绑器”或“模块加载器”发挥作用的地方。


Webpack是JavaScript模块捆绑器。在Webpack之前,已经有针对各类型的代码进行编译和构建的流程,例如使用Browserify对CommonJS模块进行编译和打包,然后将打包的资源通过HTML去加载;或者通过gulp进行任务组排来完成整个前端自动化构建。


但是这些方式的缺点是构建环节脱离,编译、打包以及各类资源的任务都分离开。


Webpack模块系统的出现,能将应用程序的所有资源(例如JavaScript、CSS、HTML、图像等)作为模块进行管理,并将它们打包成一个或多个文件并进行优化。Webpack的强大和灵活性使得其能够处理复杂的依赖关系和资源管理,已经成为了构建工具中的首选。


本文主要来扒一扒Webpack的发展进阶史,一起来看看Webpack是如何逐渐从一个简单的模块打包工具,发展成一个全面的前端构建工具和生态系统。


webpack发展历程


webpack从2012年9月发布第一个大版本至2020年10月一共诞生了5个大的版本,我们从下面一张图可以清晰具体地看到每一个版本的主要变化

Webpack发展史.png

Webpack 版本变化方向



  1. Webpack 1:在此之前多是用gulp对各个类型的编译任务进行编排,最后在Html文件中将各种资源引用进来,而Webpack的初始版本横空出世,凭借如下其功能、理念、内核等优点成为众多前端构建工具的最新选择。



  • 理念:一切皆资源,在代码中就能能对Html、Js、Css、图片、文本、JSON等各类资源进行模块化处理。

  • 内核:实现了独有的模块加载机制,引入了模块化打包和代码分割的概念。

  • 功能:集合了编译、打包、代码优化、性能改进等以前各类单一工具的功能,成为前端构建工具标准选择。

  • 特点:通过配置即可完成前端构建任务,同时支持开发者自定义LoaderPlugin对Webpack的生态进行更多的扩展。



  1. Webpack 2: Webpack 2的在第一个版本后足足过了4年,其重点在于满足更多的打包需求以及少量对打包产物的优化



  • 引入对ES6模块的本地支持。

  • 引入import语法,支持按需加载模块。

  • 支持Tree Shaking(无用代码消除)。



  1. Webpack 3:Webpack 3提供了一些优化打包速度的配置,同时对打包体积的优化再次精益求精



  • 引入Scope Hoisting(作用域提升),用于减小打包文件体积。

  • 引入module.noParse选项,用于跳过不需要解析的模块。



  1. Webpack 4:Webpack 4带来了显著的性能提升,同时侧重于用户体验,倡导开箱即用



  • 引入了mode选项,用于配置开发模式或生成模式,减少用户的配置成本,开箱即用

  • 内置Web Workers支持,以提高性能



  1. Webpack 5:Webpack 5继续在构建性能和构建输出上进行了改进,且带来跨应用运行时模块共享的方案



  • 支持WebAssembly模块,使前端能够更高效地执行计算密集型任务。

  • 引入了文件系统持久缓存,提高构建速度

  • 引入Module Federation(模块联邦),允许多个Webpack应用共享模块


webpack打包后的代码分析


为了更方便理解后续章节,我们先看一下Webpack打包后的代码长什么样(为了方便理解,这里以低版本Webpack为例,且不做过多描述)


jsx
复制代码
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};

/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ /* 省略 */
/******/ }

/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;

/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;

/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";

/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {/*省略*/})
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {/*省略*/})
/* 2 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {/*省略*/})
/******/ ]);

可以看到其实入口文件就是一个IIFE(立即执行函数),在这个IIFE里核心包括两块:



  1. 模块系统:Webpack 在IIFE里实现了模块系统所需要的Module、Require、export等方法组织代码。每个模块都被包装在一个函数内,这个函数形成了一个闭包,模块的作用域在这个闭包内。

  2. 模块闭包IIFE的入参即是Modules,它是一个数组,数组的每一项则是一个模块,每个模块都有自己的作用域。模块和模块之间通过Webpack的模块系统可以进行引用。


webpack的发展长河中,笑到最后和沦为历史

笑到最后:OccurrenceOrderPlugin



有趣的是该插件在Webpack 1叫做OccurenceOrderPluginWebpack 2才更名为OccurrenceOrderPluginWebpack 3则不需要手动配置该插件了。


插件作用:用于优化模块的顺序,以减小输出文件的体积。其原理基于模块的使用频率,将最常用的模块排在前面,以便更好地利用浏览器的缓存机制。


有了前面对于Webpack打包后的代码分析,OcurrenceOrderPlugin的优化效果也就很好理解了。它的原理主要基于两个概念:模块的使用频率模块的ID



  1. 模块的使用频率:OccurrenceOrderPlugin 插件会分析在编译过程中每个模块的出现次数。这个出现次数是指模块在其他模块中被引用的次数。插件会统计模块的出现次数,通常情况下,被引用次数更多的模块将被认为更重要,因此会更早地被加载和执行。

  2. 模块的 ID:Webpack 使用数字作为模块的 ID,OccurrenceOrderPlugin 插件会根据模块的出现次数,为每个模块分配一个优化的 ID。这些 ID 的分配是按照出现次数从高到低的顺序进行的,以便出现次数较多的模块获得较短的 ID,这可以减小生成的 JavaScript 文件的大小。假设一共有100个模块,最高的频率为被引用100次,则减小文件体积200B。(确实好像作用很小,但是作为最贴近用户体验的前端er,不应该是追求精益求精嘛)


这个插件的主要目标是减小 JavaScript 文件的体积,并提高加载性能,因为浏览器通常更倾向于缓存较小的文件。通过将频繁使用的模块分配到较短的 ID,可以减小输出文件的体积,并提高缓存的效率。


笑到最后:Scope Hoisting


过去 Webpack 打包时的一个取舍是将 bundle 中各个模块单独打包成闭包。这些打包函数使你的 JavaScript 在浏览器中处理的更慢。相比之下,一些工具像 Closure Compiler 和 RollupJS 可以提升(hoist)或者预编译所有模块到一个闭包中,提升你的代码在浏览器中的执行速度。


而Scope Hoisting 就是实现以上的预编译功能,通过静态分析代码,确定哪些模块之间的依赖关系,然后将这些模块合并到一个函数作用域中。这样,多个模块之间的函数调用关系被转化为更紧凑的代码,减少了函数调用的开销。这样不仅减小了代码体积,同时也提升了运行时性能。


Scope Hoisting 的原理是在 Webpack 的编译过程中自动进行的,开发人员无需手动干预。要启用 Scope Hoisting,你可以使用 Webpack 4 版本中引入的 moduleConcatenation 插件。在 Webpack 5 及更高版本中,Scope Hoisting 是默认启用的,不需要额外的配置。


CommonsChunkPlugin的作用和不足,为何会被optimization.splitChunks所取代


CommonsChunkPlugin 插件,是一个可选的用于建立一个独立chunk的功能,这个文件包括多个入口 chunk 的公共模块。主要配置项包含


json
复制代码
{
name: string, // or
names: string[],
filename: string,
minChunks: number|Infinity|function(module, count) => boolean,
chunks: string[],
// 通过 chunk name 去选择 chunks 的来源。chunk 必须是 公共chunk 的子模块。
// 如果被忽略,所有的,所有的 入口chunk (entry chunk) 都会被选择。

children: boolean,
deepChildren: boolean,
}

通过上面的配置项可以看到虽然CommonsChunkPlugin将一些重复的模块传入到一个公共的chunk,以减少重复加载的情况,尤其是将第三方库提取到一个单独的文件中,但是其首要依赖是通过Entry Chunk进行的。在Webpack4以及更高的版本当中被optimization.splitChunks所替代,其提供了配置让webpack根据策略来自动进行拆分,被替代的原因主要有以下几点:



  1. 灵活度不足:在配置上相对固定,只能将指定 Entry Chunk的共享模块提取到一个单独的chunk中,可能无法满足复杂的代码拆分需求。

  2. 配置复杂:需要手动指定要提取的模块和插件的顺序,配置起来相对复杂,开发者需要约定好哪些chunk可以被传入,有较高的心智负担。而optimization.splitChunks只需要配置好策略就能够帮你自动拆分。


因此在Webpack 4这个配置和开箱即用的版本里,它自然也就“香消玉损”。只能遗憾地看到一句:


the CommonsChunkPlugin 已经从 Webpack v4 legato 中移除。想要了解在最新版本中如何处理 chunk,请查看 SplitChunksPlugin


被移除的DedupePlugin


这是 Webpack 1.x 版本中的插件,用于在打包过程中去除重复的模块(deduplication),其原理不知道是通过内容hash,还是依赖调用关系图。但是在Webpack 2中引入了Tree Shaking功能,则不再需要了。原因有以下几点:



  • Tree Shaking控制更精确:能通过静态分析来判断哪些代码是不需要的,实现了更细力度的优化。

  • Scope Hositing减少了重复模块:Webpack 3引入了Scope Hositing,将模块包裹在函数闭包中,进一步减少了重复模块的依赖


因此我们在Webpack的文档中看到:



DedupePlugin has been removed


不再需要 Webpack.optimize.DedupePlugin。请从配置中移除。



总结


或许有些插件你已经看不到它的身影,有些特性早已被webpack内置其中。webpack从第一个版本诞生后一直致力于以下几个方面的提升:



  1. 性能优化:通过去除重复代码、作用域提升、压缩等方式减少代码体积和提高运行时性能。

  2. 构建提效:通过增量编译、缓存机制、并行处理等提升打包速度。

  3. 配置简化:通过内置必要的特性和插件以及简化配置提升易用性。


作者:古茗前端团队
来源:juejin.cn/post/7289718324858355769
收起阅读 »

”调试小技巧,让未来更美好“

web
① 自动打断点(抛异常时自动断点) 偶然一次可能不小心打开某个设置选项,可能设置了英文又不知道是打开了什么,只知道当每次打开F11打开控制台调试看数据的时候,就是不会自动停在某个位置,又不知道怎么停掉,怀疑会不会是安装了什么谷歌插件或者是油猴哪个脚本代码写错写...
继续阅读 »

自动打断点(抛异常时自动断点)


偶然一次可能不小心打开某个设置选项,可能设置了英文又不知道是打开了什么,只知道当每次打开F11打开控制台调试看数据的时候,就是不会自动停在某个位置,又不知道怎么停掉,怀疑会不会是安装了什么谷歌插件或者是油猴哪个脚本代码写错写了什么。


不小心打钩了断点调试的遇到未捕获的异常时暂停,或者在遇到异常时暂停这两个选项其中一个。就有可能导致了谷歌的调试器暂停,取决于这个网站有没有一些异常触发到这一点,勾选上每次异常浏览器会帮我们打断点。


image.png


所以解决办法就是把谷歌浏览器中的这两个勾去掉,如果不是你本意打开想要调试网站中一些异常的报错。


image.png


一键重发请求(不用每次重新请求就刷新页面)


排查接口的时候,需要重新请求该接口,不必要每次重新刷新页面去请求试接口里面传参对不对返回来的数据对不对。重发请求很简单,右击该接口重发xhr即可。


image.png


image.png


③ 断点调试+debugger+console+try...catch


(1) console.log


找bug解决bug是很重要滴。console.log-输出某个变量值是非常非常常用的,只要做码农一定得会各种语言的输出消息和变量的语句,方便我们查看和调试。


(2) debugger(不用每次都console)


在代码某个语句后面或者前面输debugger


在我入行到在学校生涯那段时间都不知道debugger;这玩意,有一次项目有一个比较棘手不知道怎么解决的问题,甲方公司项目负责人开会重点讲了那个问题,就见他这里输一下dubugger,那里输一个debugger,当时就觉得那玩意很神(反正意识上只要我们不懂的东西刚开始接触都是这样,这里神那里神的,接触久了就觉的也就那样不过如此,很平常),最后也没看出什么来。


debugger就是在某个状态下,用这个debugger;语句在那里断一下点,然后当下,上下文的状态和值都可以在查看,哪个分支导致变量状态错误。


使用debugger可以查看:



  • 作用域变量

  • 函数参数

  • 函数调用堆栈

  • 代码整个执行过程(从哪一句到哪一句的)

  • 如果是异步promise async...await 等这种的话就需要在then和catch里面debugger去调试


(3) try...catch 捕获异常


try {
// 可能会抛出异常的代码
} catch {
// 处理所有异常的代码
}

try...catch捕获异常,包括运行时错误和自定义以及语法错误。


try...catch中还可以在某些情况下用throw在代码中主动抛出异常。


try {
// 可能会抛出异常的代码

if (某某情况下) throw '某某错误提示信息'

} catch {
// 处理所有异常的代码
} finally {
// 结束处理用于清理操作
}

image.png


④ 联调查看接口数据


image.png


如上图这个接口,如果想要复制接口preview里面的数据,


除了去Responese里面去找我们需要的某个值去选择复制之外(这个有个缺点就是要找值不直观),还可以右击某个值,然后通过点击store object as global variable(存储为全局变量) 获取。


image.png


当我们点击了之后,控制台就会出现tempXX这个变量。


image.png


我们就只需要在控制台输入copy(temp3)copy(要复制的json名),在粘贴板上就有这个json数据了。



💡
全局方法copy()在console里copy任何你能拿到的数据资源。



image.png


⑤ 后端接口数据返回json


这个有时候有的同学有可能碰到类似这种的JSON数据{\"name\":\"John\",\"address\":\"123 Main St, City\"}


解决方法


直接打开控制台console,输入 JSON.parse("{"name":"John","address":"123 Main St, City"}"),这样


image.png


如果你想复制下来用,直接跟上面我们用copy这好碰上,赋值加上一个copy就可以了。


image.png


这样这个值就在粘贴板上了。


总结


报错和bug,多多少少会贯穿我们的职业生涯中,如何定位问题、解决问题,加以调试,是我们必须也是不能不必备的技能。


当你捕获bug的时候.gif



☎️ 希望对大家有所帮助,如有错误,望不吝赐教,欢迎评论区留言互相学习。



作者:盏灯
来源:juejin.cn/post/7288963208396603450
收起阅读 »

谁还没个靠bug才能正常运行的程序😌

web
最近遇到一个问题,计算滚动距离,滚动比例达到某界定值时,显示mask,很常见吧^ _ ^ 这里讲的不是这个需求的实现,是其中遇到了一个比较有意思的bug,靠这个bug才达到了正确效果,以及这个bug是如何暴露的(很重要)。 下面是演示代码和动图 <!DO...
继续阅读 »

最近遇到一个问题,计算滚动距离,滚动比例达到某界定值时,显示mask,很常见吧^ _ ^


这里讲的不是这个需求的实现,是其中遇到了一个比较有意思的bug,靠这个bug才达到了正确效果,以及这个bug是如何暴露的(很重要)。


下面是演示代码和动图


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 300px;
max-height: 300px;
background-color: black;
position: absolute;
top: 60px;
left: 50%;
transform: translateX(-50%);
overflow-y: auto;
}
.child {
width: 260px;
height: 600px;
margin: 0px 20px;
background-color: pink;
position: relative;
}
.flag {
position: absolute;
width: 100%;
height: 25px;
background-color: blueviolet;
color: aliceblue;
text-align: center;
line-height: 25px;
font-size: 14px;
left: 0;
right: 0;
}
.top {
top: 0;
}
.bottom {
bottom: 0px;
}
</style>
</head>

<body>
<div class="container">
<div class="child">
<div class="flag top">top</div>
<div class="flag bottom">bottom</div>
</div>
</div>
</body>
</html>


20230927105849_rec_.gif




开始计算啦,公式:滚动比例 = 滚动距离 / 可滚动距离


滚动距离: $0.scrollTop


可滚动距离: $0.scrollHeight - $0.offsetHeight


即:scrollRatio = scrollTop / (scrollHeight - offsetHeight)


滚动到底部,计算结果是 300 / (600 - 300) = 1


image.png


我们需要拿scrollRatio某界定值(比如0.1)作大小的比较,计算是true还是false(用isShow = scrollRatio < 某界定值来保存)。


这里一切正常。




不正常的情况出现了


就是没有出现滚动条的情况,即.child的高度没有超过.container的高度时,把.child的高度设成.containermax-height,就没有滚动条了(下面讲的情景也都是没有滚动条的情况)。


image.png


这个时候再去计算,得到了NaN,以至于 NaN < 0.1 = false


image.png


因为isShow的预期就是false,所以一直都没有发现这个bug。




那么它是如何暴露的呢?


后来新的需求给.container加了border。演示一下加border,然后再去计算:


image.png


发现没,这时候$0.offsetHeight的高度把border的高度也算进去了,结果就成了true,这不是想要的结果 ❌。




然后就是一番查验


offsetHeight是一个元素的总高度,包括可见内容的高度、内边距(padding)、滚动条的高度(如果存在)以及边框(border)的高度。


而我们这里只需要可见的高度,就可以用到另一个属性了clientHeight


clientHeight是指元素的可见内容区域的高度,不包括滚动条的高度和边框的高度。它仅包括元素的内部空间,即内容加上内边距。


image.png


当然这也只是继续使除数为0,然后得到结果为NaN,不过bug已经暴露出来了,后面就是一些其他的优化啦~




总结 + 复习(盒模型 box-sizing)


发现没有,offsetHeightclientHeight的区别,就像盒模型中的标准盒模型怪异盒模型的区别:


box-sizing: content-box(默认,标准盒模型):宽度和高度的计算值都 不包含 内容的边框(border)和内边距(padding)。添加padding和border时, 使整个div的宽高变大。


box-sizing: border-box(怪异盒模型):宽度和高度的计算值都 包含 内容的边框(border)和内边距(padding)。添加padding和border时, 不会 使整个div的宽高变大。


这样讲是不是加深一下对这两种属性的印象


^ - ^


作者:aomyh
来源:juejin.cn/post/7283087306603823116
收起阅读 »

一年空窗期后我是如何准备面试的?

web
在此之前我是自由职业者,满打满算一年空窗期,在被动收入不稳定,心想还是需要一份收入来维持日常生活开销,再去考虑打造自己的额外收入。 前前后后从准备到上岸历时一个半月,今天从三个方面分享这个过程我做了什么? 心态 做事情之前,心态很重要,我遇事很少否定自己,在...
继续阅读 »

在此之前我是自由职业者,满打满算一年空窗期,在被动收入不稳定,心想还是需要一份收入来维持日常生活开销,再去考虑打造自己的额外收入。



前前后后从准备到上岸历时一个半月,今天从三个方面分享这个过程我做了什么?


心态


做事情之前,心态很重要,我遇事很少否定自己,在我看来,别人可以做到的,自己也可以,虽然一年空窗,基本上不接触技术,写代码量远不如以前,但又不是要上天或者造原子弹,取决于谁执行力强,谁付出的时间多,仅此而已。


换作以前,相信大部分的同学去找半个月都可以入职自己期望的岗位,看了一下网上的情绪,行情在这个环境下的确蛮消极的,很多人找了几个月都没有上岸的,当然我自己也有感受到,简历丢出去之后没有声音,并且在各大招聘网站上坑位也减少了,相比两三年前如日中天的行情,难免会有这类情绪。


但我没有那么焦虑,为什么呢?其一是我心态比较好,其二是跟我的定位有关。


定位


第一个是我要找的岗位定位为中高级开发,而这类人在市场上来看一直都是稀缺资源,其他行业也如此。


第二个是薪酬范围定位在20k-25k范围,给不到我会觉得工作没劲,累点没关系,主要还是相信自己可以胜任。


第三个是前期投几个低于期望值的试试水,了解一下目前行情顺便找找感觉。


所以,接下来我只需要把目标定位在寻找中高级开发岗位即可,完善自己达到这个能力要求,下面是行动计划,细看下来你会发现这又是个PDCA


计划


我把计划分为这几个模块:


1. 简历优化


我一开始是不会写简历的,因为中间没有跳过槽,也没定时更新,所以就随便拿了以前的模板改了改时间和项目就开始投了,简历回复少不说,即使有机会面试了也没有把简历提到的讲清楚,结果可想而知。


后面想想不行,虽然没写过,但是我会看简历啊,之前带团队有时候一天要看上百份简历,大概知道面试官青睐哪些人才,优化之后断断续续才有面试。


其次是我在面试过程结束时问面试官哪些地方还需要提升的,不少也会反馈简历问题,诸如:



  • 管理工作内容太笼统了,看不出具体做了什么

  • 没有说清楚空窗期做了什么

  • 没有体现出你在项目中做了什么

  • ......


知道自己问题之后,前后迭代了大概十几个版本,越到后面的质量越高,直至我入职之后,还有一个目标企业发来邀请。


2. 技能要求


前端领域涉及到这么多技能,需要有方向进行准备,分享一下我是如何分类:


基础:



  • 前端三大件:HTML、CSS、JS

  • 主流框架:Vue2/Vue3、React

  • 状态管理:Vuex、redux、mobox

  • 构建工具:webpack、Vue-cli、Vite、gulp

  • 前端安全:xss、csrf、cors 常见问题和防御措施


进阶:



  • JS运行机制、事件轮询机制、浏览器运行原理

  • 前端性能监控、前端异常监控如何做?

  • 前端工程化体系包含哪些

  • 前端性能优化手段:页面性能、构建性能、代码性能

  • Vue、React核心原理

  • 基础算法数据结构

  • Http协议


面对上面的技术基础类,主要是刷官方文档+常见面试题,这些更多是概念性的东西,在这里就不多说了,相信大家手上多少都有八股文资料,如果没有可以私信我。


而面对进阶类,首先总结自己项目中用到了哪些,吃透它。其次,面对不太熟悉的板块如HTTP网络,我会通过专栏学习或者一些讲得好的课程来弥补。


除了上面的方法,还有一种我常用的技巧来覆盖知识盲区,就是下面要说的模拟面试,几乎适用于任何技能面试。


3. 模拟面试


这里要说的模拟面试并不是找一些大佬一对一模拟训练,而是换位思考(当然能够模拟面试效果更好啦~)。


即把自己想象成面试官,在考察某一个知识点的时候,你会问自己什么问题呢?


举2个栗子🌰


对于用Vue的同学,我会问:



  • vue diffreact diff有什么区别?

  • 为什么v-for中建议带:key,有什么情况下是可以不带的?

  • 写过组件或者插件吗,有什么注意点?

  • vue-router原理是什么


结合一些热门的话题,我会问:



  • vue2vue3对比,你觉得主要区别是什么?

  • vue2vue3在性能优化做了什么?两者的构建产物有什么区别?

  • 如果你去学vue3,你会从哪里开始,怎么学?


除了以上我给自己虚构的问题之外,还有诸如vue生命周期啊、组件通信啊等等基础肯定是要会的,我会刷文档或虚构题目,这些比较简单,搞懂就行了。


对于设计模式,我也问了自己几个问题:



  • 你知道的设计模式有哪些,知道他们的应用场景吗(解决了什么问题)?

  • 在工作中用到的设计模式有哪些?说说它们的优劣势

  • Vue中用了哪些设计模式?

  • 观察者和发布订阅有什么不同?


基本上这个薪酬范围的设计模式,搞懂了以上问题大差不差。


再来说说这种方式有什么优势?


首先,问题是通过我们自身思考提出并主动寻求解决的,这本身已经存在闭环了,有利于我们理解一个知识点。其次,我们思考提出某个问题,意味着大脑🧠的神经元网络中有存在某些游离神经节点,它没有被连接到一起,随着提出并解决的问题越多,连接起来的网络就越大,这就形成了所谓的知识网络,相比没有目的刷题,它的持久性更强,更能抗遗忘。


总结


结束之前,再分享面试过程中的一个小插曲,当时面了一家小企业,终面的时候面试官问我期望薪酬,就报了18k,但是面试官说给不到,17k考不考虑?我当时没有回绝,就说回去考虑一下。


回去考虑一番之后,我根据当时岗位给到的薪资范围,加上当时家里事情比较多,想先稳定下来再考虑其他的,打算接了这个offer准备上班,突然闹了个乌龙,HR说老板那边重新定了价,只能给到16k,我说还能这么操作?这不明摆着欺负老实人嘛?


想了想如果接了这个offer,岂不是比之前离职时更低,更别说对比以前的同事了。心里忍不下这口气,以至于那两周,每天都撸到一点钟,功夫不负有心人,最后顺利上岸了!


分享几点个人觉得比较关键的:



  • 永远相信自己,心态很重要,不仅仅面试,它贯穿人的一生

  • 简历真实,不玩心思,例如空窗期这种,如实说明

  • 吃透简历内容,不留疑点

  • 面试过程中不着急回答问题,可以先澄清问题动机,不要为了回答而拼凑答案

  • 前面几次不通过没关系,但一次要比一次好


以至于如何备战高级开发,等我升级了再来分享~


最后,祝愿所有航海者都能够顺利靠岸!!!


注:由于最近比较多朋友私信我咨询简历优化建议或者八股文,可以加我的微信followJavaScript,丢简历过来即可,备注“掘金”。


作者:寻找奶酪的mouse
来源:juejin.cn/post/7285915718666944547
收起阅读 »

前端马农:抢不到消费券,我还不会自己做一张吗

web
前言 最近,政府为了刺激消费,发放了大量的消费券,大家应该参与了抢券大军吧。但是如果你是一个前端程序员,你有没有想过,这个消费券样式我能实现吗?今天给大家分享一下,常用的票券的样式实现。 抽象一下 对我们常用的票券进行抽象后,大概就是下面几种样式了,我们...
继续阅读 »

前言



最近,政府为了刺激消费,发放了大量的消费券,大家应该参与了抢券大军吧。但是如果你是一个前端程序员,你有没有想过,这个消费券样式我能实现吗?今天给大家分享一下,常用的票券的样式实现。



image.png


抽象一下


对我们常用的票券进行抽象后,大概就是下面几种样式了,我们来看看怎么实现吧


image.png


实现方案



对于内凹圆角或者镂空的这类样式,我们一般实现方案是使用mask(遮罩);mask语法很简单,我们就当成background来用就好了,可以是PNG图片、SVG图片、也可以是渐变绘制的图片,同时也支持多图片叠加。然后我们了解一下他的遮罩原理:最终效果只显示不透明的部分,透明部分将不可见,半透明类推。



<1>实现一个内凹圆角


image.png


class="content">

.content {    
width: 300px;    
height: 150px;    
margin: auto;    
-webkit-mask: radial-gradient(circle at left center, transparent 20px, red 0);    
background: red; }
ellipse


当前(2016.10.19)mask 处于 候选标准阶段(CR),还不是正式标准(REC),webkit/blink 内核加前缀 -webkit- 可使用



<2>实现两个内凹圆角之遮罩合成


image.png



  .content{           


    width:300px;           


    height:150px;           


    background:red ;           


   -webkit-mask:radial-gradient(circle at left center,transparent 20px,red 20px)  ,     radial-gradient(circle at right center,transparent 20px,red 20px) ;           


    }


上面的写法是没有效果的,此时使用为两个重合后,整个区域都是不透明的,导致没有效果,这个时候我们需要使用遮罩合成;我们通过ps了解一下遮罩合成




遮罩合成mask-composite


-webkit-mask-composite: destination-in; /只显示重合的地方/



image.png


<3>实现两个内凹圆角之平铺


image.png



 .content{           


         width:300px;           


         height:150px;           


         background:red ;           


          -webkit-mask:radial-gradient(circle at 20px center,transparent 20px,red 20px);           


         -webkit-mask-position: -20px;       


}



<4>实现四个内凹圆角


image.png



 .content{           


       width:300px;           


       height:150px;           


       background:red ;           


       -webkit-mask:radial-gradient(circle at 20px 20px,transparent 20px,red 20px);           


      -webkit-mask-position: -20px -20px;       


}



<5>实现六个内凹圆角


image.png



 .content{           


     width:300px;           


     height:150px;           


     background:red ;           


     -webkit-mask:radial-gradient(circle at 20px 20px,transparent 20px,red 20px);           


     -webkit-mask-position: -20px -20px;           


     -webkit-mask-size:50% 100%;       


}



<6>实现中间一排的镂空


image.png



.content{           


       width:300px;           


       height:150px;           


       background:red;           


        -webkit-mask:           


            radial-gradient(circle at 20px 20px,transparent 20px,red 20px) -20px -20px/50% 100% ,           


            radial-gradient(circle at center 5px,transparent 5px,red 5px) 0px -5px/100% 30px;           


      -webkit-mask-composite: destination-in;        }



<7>实现两边多个内凹圆角


image.png



其实很简单:只需把遮罩的高度,变小,让他们平铺就可以了




 .content{           


       width:300px;           


      height:150px;           


       background:red ;           


      -webkit-mask:radial-gradient(circle at 10px 10px,transparent 10px,red 10px);           


     -webkit-mask-position: -10px 5px;           


     -webkit-mask-size:100% 30px;       


}


作者:我们一起学前端
来源:juejin.cn/post/7155025450043965454
收起阅读 »

注意啦⚠️ 别让正则把你网站搞垮⚠️⚠️⚠️

web
引言 事情起源还得从一个需求讲起, 需求内容如下: 假设有串字符串如下: const str = `Pharmaceuticals progress events. JSON output: { "name": "moyuanjun", "a...
继续阅读 »

引言



事情起源还得从一个需求讲起, 需求内容如下:




  1. 假设有串字符串如下:


const str = `Pharmaceuticals progress events.

JSON output:
{
"name": "moyuanjun",
"age": 28
}`



  1. 现需要从字符串中, 提取到 JSON output: 后面的所有字符串, 后面还需要将其解析为对象(当然这不是本文的重点)



需求本身很简单, 实现起来也容易, 具体方案如下, 那么请问以下实现方法有啥问题呢?



const jsonStr = str.replace(/^(\s|\S|.)*?JSON output:/, '')


由于字符串是 gpt 返回的, 它是不可控的, 这里当字符串为 No, this text is not a transaction event. Therefore, the requested entities cannot be extracted. 时, 通过上文的正则进行匹配时就会导致页面卡住, 这里如果大家好奇的话, 可以尝试将下面代码复制到 浏览器控制台 并执行



'No, this text is not a transaction event. Therefore, the requested entities cannot be extracted.'.replace(/^(\s|\S|.)*?JSON output:/, '')

上面主要问题还是出在正则上, 执行上面正则匹配, 会陷入 回溯 陷阱, 我们可以看下上面正则在 regex101 的测试结果, 从测试结果来看正则的匹配次数是有点夸张的


image.png


下面我们来针对 回溯 问题进行展开....


一、正则引擎


传统正则引擎分为 NFA (非确定性有限状态自动机) 和 DFA(确定性有限状态自动机), 那么, 什么是确定型、非确定型、有限状态以及自动机呢?


确定型与非确定型: 假设有一个字符串 abc 需要匹配, 在没有编写正则表达式的前提下, 就能够确定 字符匹配顺序 的就是确定型, 不能确定字符匹配顺序的则为非确定型


有限状态: 所谓有限, 指的是在有限次数内能够得到结果


自动机: 自动机即自动完成, 在我们设置好匹配规则后由引擎自动完成, 不需要人为干预即为自动


根据上面的解释我们可得知 NFA 引擎和 DFA 引擎的主要区别就在于: 在没有编写正则表达式的前提下, 是否能确定字符执行顺序;, 下面我们来简单介绍下这两种引擎:


1.1 NFA 引擎


NFA(Nondeterministic finite automaton)又名 非确定性有限状态自动机, 主要特点如下:




  1. 表达式驱动: 由要执行的正则表达式进行驱动的算法, 正则引擎从正则表达式起始位置开始, 尝试与文本进行匹配, 如果匹配成功, 都前进一步, 否则文本一直前进到下一个字符, 直到匹配成功




  2. 会记录位置: 当正则表达式需要进行选择时, 它会 选择 一个 路径 进行匹配, 同时会 记录 当前的 位置, 如果选择的路径匹配不成功则需要回退回去, 重新选择一个路径进行尝试, 直到匹配完成, 如果所有可能情况全部匹配不成功, 则本次匹配失败




  3. 单个字符可能会检查多次: 从👆🏻可以看出, 字符串中一个字符可能会被多次匹配到, 因为当一条正则路径不通时, 会进行回退




  4. 支持零宽断言: 因为具有回退功能, 所以可以很容易实现零宽、断言、捕获、反向引用等功能





最后借用 猪哥 制作的一个小动画, 方便大家理解:



klx.pro.dbca29a199c308c6b588170ec4b2b475.gif


1.2 DFA


DFA(Deterministic finite automaton) 又名 确定性有限自动机, 主要特点如下:




  1. 文本驱动: 由要搜索的文本驱动的算法, 文本中的每个字符 DFA 引擎只会查看一次, 简单理解就是对字符串进行一次循环, 每次循环都和正则进行一次匹配, 匹配成功字符串和正则指针都相应的向下移动




  2. DFA 引擎会记得所有的匹配可能, 并且每次匹配都会返回其中 最长的匹配, 这么做的目的是为了让后面的匹配能够更加轻松, 正因为如此字符串 nfa not(nfa|nfa not) 中匹配结果为: nfa not




  3. 优点: 优点很明显, 由于只会会循环一直字符串、并且会提前记住所有可能情况, 所以相对来说匹配效率是很高的




  4. 缺点:





  • 它始终将返回最长匹配结果, 无法控制表达式来改变这个规则

  • 因为需要记住所以可能情况, 所以正则表达式预编译时间会更长, 占用更多内存

  • 没有回退, 所有重复的运算符 都是贪婪 的, 会尽可能匹配更多的内容

  • 因为不存在回退, 所以自然不支持零宽断言、捕获、反向引用等功能



最后借用 猪哥 制作的一个小动画, 方便大家理解:



klx.pro.e3c7e13fda2134e2024171f20eac6986.gif



补充说明: 上面只是对传统的两个正则引擎进行简单介绍, 在 JS 中正则引擎使用的则是 NFA 下面我们也只是对 JS 中的正则、以及 回溯 进行简单介绍, 同时在 regex101 中我们选用的语言则是 PHP, 主要是因为在 PHP 用的也是 NFA 引擎并且在 regex101 下会多一个 Regex Debugger 功能(不知道为什么 JS 没有 😭)



image.png


二、回溯


我们知道, NFA 引擎是用表达式去匹配文本, 而表达式又有若干 分支范围, 一个分支或者范围匹配失败并不意味着最终匹配失败, 正则引擎会进行回退去尝试 下一个 分支或者范围, 这种行为就被称之为 回溯


类比于迷宫, 想象一下, 面前有两条路, 我们选择了一条, 走到尽头发现是条死路, 只好原路返回尝试另一条路, 则这个原路返回的过程就被称之为 回溯, 它在正则中的含义是 吐出已经匹配过的文本, 同时 正则匹配位置也会进行回退


一般的, NFA,如果匹配失败, 会尝试进行 回溯, 因为它并不知道后面还有没有可能匹配成功, 他是蒙在鼓里的, 但是 DFA 从一开始就知道所有的可能匹配, 因为在预编译时就它就已经存储了所以可能情况, 所以正则编写的好坏对 NFA 来说是特别的重要的


引擎会真正按照正则表达式进行匹配, 让你选择达到完全匹配所需的每个步骤, 所以我们必须很谨慎地告诉它, 首先检查哪种选择才能达到您的期望, 你也有机会调整正则表达式, 以最大程度地减少回溯并尽早进行匹配


三、量词


3.1 在 JS 中量词表示要匹配的字符或表达式的数量, 常见的量词有:


字符含义
{n}n 是一个正整数, 匹配了前面一个字符刚好出现了 n
{n,}n 是一个正整数, 匹配前一个字符至少出现了 n
{n,m}n 和 m 都是整数。匹配前面的字符至少 n 次,最多 m 次, 如果 n 或者 m 的值是 0, 这个值被忽略
*匹配前一个表达式 0 次或 多次, 等价于 {0,}
+匹配前面一个表达式 1 次或者 多次, 等价于 {1,}
?匹配前面一个表达式 0 次或者 1 次, 等价于 {0,1}

3.2 贪婪 与 非贪婪


模式描述匹配规则
贪婪模式默认使用量词时就是贪婪模式尽可能多 的匹配内容
非贪婪模式量词后加 ?, 如: *?+???{n,m}?尽可能少 的匹配内容

3.3 贪婪模式下的回溯


现在我们看一个简单例子, 有如下正则 .*c 以及待匹配字符串 bbbcaaaaaaaaa, 下面我们使用 regex101 来进行测试


image.png


这里选择 Debugger 查看整个正则匹配流程(重点看 回溯)


klx.pro.91252cceab2190079775942648d23fb9.gif


从图中可以看出, .* 会优先匹配到所有内容, 然后在匹配字符串 c 时, 只要匹配失败, 字符串匹配位置就会进行回退(吐出一个字符), 然后再次进行匹配, 如此反复直到匹配到字符串 c


3.4 解决办法


针对上文回溯问题, 下面我们来简单优化下正则, 来避免 回溯



  1. 使用非贪婪模式: .*?c


klx.pro.399af59bb48824b11a2c939322d56d9f.gif



  1. 使用反向字符集: [^c]*c


klx.pro.1a8e7451e98a3b007f14ab21c8f29b66.gif


3.5 绝对不用「量词嵌套」


特别特别需要注意的是, 嵌套的量词 将会制造指数级的回溯, 下面我们就以 .*c 以及 (.+)*c 为例, 从 regex101 测试结果来看, 相同匹配字符串 .*c 需要 13 个步骤, (.+)*c 则直接飚到 61144 了, 但最终这两个表达式匹配到的结果却是一样的


image.png


image.png


四、多选分支


已知在 JS 中正则可使用 | 定义多个分支, 例如: x|y 可匹配 x 或者 y,


那么正则在匹配过程中如果遇到多选分支时, 引擎则会按照 从左到右 的顺序检查表达式中的多选分支, 如果某个分支匹配失败, 表达式和字符串都会进行回退(回溯), 然后选择另一个分支进行尝试... 这个过程会不断重复, 直到完成全局匹配,或所有的分支都尝试穷尽为止


4.1 回溯现象


假设有正则表达式 num(1234567890|1234567891) 待匹配字符串如下 num1234567891, 下面我们使用 regex101 来进行测试


image.png


这里选择 Debugger 查看整个正则匹配流程(重点看 回溯)


klx.pro.16e2d1cd7aa3d25ab46e801fb4713b05.gif


4.2 优化手段



  1. 提取多选分支中的必须元素: num123456789(0|1)


klx.pro.6ba0ee6c4bca48555392b6bbbfdf3f8e.gif



  1. 高优先级分支提前: num123456789(1|0)



由于正则引擎遇到分支是按照 从左到右 的顺序, 来选择分支进行匹配的, 所以我们可以通过调整分支的顺序来提高匹配效率



klx.pro.f6014ad5c88171023b1abe63284b4dbe.gif



  1. 使用字符组: num123456789[01]



这里我们还可以使用字符组 [], 和 | 不同的是它不存在分支选择问题, 本质上分支越多, 可能的回溯次数越多, 所以如果可以我们需要尽可能减少分支



klx.pro.825be0b2dc258ba51306126b7ec8df94.gif


五、其他正则优化手段



  • 使用非捕获型括号 (): 如果不需要引用括号内的文本, 请使用非捕获括号, 不但能节省捕获的时间, 而且会减少回溯使用的状态的数量, 从两方面提高速度

  • 不要滥用字符组 []: 不使用只包含一个字符的字符组, 需要付出处理字符组的代价

  • 分析待匹配字符串, 将最可能匹配的分支放在前面

  • 正则进行适当拆分: /最明确的规则/.test() && /更细的规则/.test(str)

  • 必要时可以考虑更换正则引擎, 比如使用 DFA

  • 使用检测工具进行测试, 比如: regex101

  • 使用有明显确定的特征的具体字符、字符组代替通配符, 说白了尽可能描述清楚你的正则


六、回到正文


回到我们最开始的那个正则, 可以优化如下


'No, this text is not a transaction event. Therefore, the requested entities cannot be extracted.'.replace(/^[\s\S]*?JSON output:/, '')

regex101 的测试结果如下, 从测试结果来看前后性能提升可不是一点两点


image.png


七、参考:



作者:墨渊君
来源:juejin.cn/post/7243413799347912760
收起阅读 »

一次移动端性能优化实践

web
背景 使用低代码接入了一个移动端老系统,新增页面(以及部分旧页面)使用低代码体系搭建。功能开发完成后才发现性能问题比较严重,所以进行了一次移动端的性能优化。本文就优化过程进行一个记录。 问题分析 为什么一接入低代码体系性能(主要是加载性能)就出现明显的下降,如...
继续阅读 »

背景


使用低代码接入了一个移动端老系统,新增页面(以及部分旧页面)使用低代码体系搭建。功能开发完成后才发现性能问题比较严重,所以进行了一次移动端的性能优化。本文就优化过程进行一个记录。


问题分析


为什么一接入低代码体系性能(主要是加载性能)就出现明显的下降,如果首屏访问的是低代码页面则更加明显



  • 最主要的原因是比之前额外加载了大量的 js 和 css,初步统计有 10 个 css 和 15 个 js

  • 老系统自身 js 资源过大,依赖包 vendor.js 有 8M 多

  • 低代码体系下,非静态资源的接口请求也成为影响页面渲染的因素。页面必须等待接口获取到 schema 后才由低代码渲染器进行渲染


低代码体系接入


有必要简单说明下低代码体系是如何接入的,这对后面的优化是有直接影响的



  • 低代码体系资源大概分为三方依赖、渲染引擎和组件库资源,都是独立的 npm 库,发布单独的 CDN

  • 三方依赖就是像 react、moment、lodash 等最基础的依赖资源

  • 渲染引擎要想渲染页面,又直接依赖于两个资源

    • 页面 schema:服务端接口返回,schema 本质上是一个 json,描述了一个组件树

    • 组件集合:由 CDN 引入的各个组件库集合,它需要先于页面 schema 加载




静态资源为何影响加载性能


静态资源加载如何影响性能,简单分析下,详细的原理可以参考 MDN



  • HTML 自上而下解析,遇到 script 标签(不带 defer 和 async 属性)就会暂停解析,等待 script 加载和执行完毕后才会继续

  • HTML 解析时如果遇到 css 资源,解析会继续进行。但是在 css 资源加载完成前,页面是不会渲染的,并且如果此时有 JavaScript 正在执行,也会被阻塞

  • 所以 js 或 css 体积越大,则在网络传输、下载、浏览器解析和执行上所花的时间就会相应的增加,而这些时间都是会阻塞页面渲染的

  • js 或者 css 的个数对于渲染的影响,很大程度上取决于项目和浏览器是否支持 http2

    • 如果使用了 http2,则静态资源个数对于加载性能影响不大,除非多到几百个资源

    • 如果还是 http1.1,静态资源个数对于加载有明显影响,因为此时浏览器存在并发限制,大概在 4-6 个左右,即一批次只能发送几个请求,等到请求完成后,再发下一批,是个同步的过程

    • 本项目已经支持 http2,所以优化加载性能的重点还是在减小总的资源体积上




优化指标


用户对于页面性能的感受是主观的,而优化工作则需要客观的数据。
更重要的是,有些优化措施是否有效果,有多少效果是需要数据说明的。举例来说,去除冗余资源几乎是可以预见性能提升。但是做 CDN 合并在移动端能够有多少优化效果,事前其实并不清楚
这里采用 2 种方式作为优化指标



  • 旧版本 chrome(69)的 perfomance

    • 使用这个版本是因为后台数据显示该引擎访问量较多

    • chrome 的 performance 不仅能获取性能数据,也有助于我们分析,找出具体问题



  • 使用 web-vitals 库获得具体的性能数据,主要关注

    • FCP,白屏时间

    • LCP,页面可视区域渲染完成时间




现状


image.png



  • 点击 performance 的刷新按钮,就会自动进行一次页面的加载

    • 建议使用无痕模式,排除其他干扰

    • network 中勾选 Disable cache,虽然最终用户会用到缓存,但在优化非缓存项时,建议先禁用缓存,获取最真实的数据



  • 静态资源的加载大概花了 3.5s

  • 而后续静态资源的解析则一直持续到页面加载完成,大概在 9 秒多

  • 使用 web-vitals 测量的平均数据

    • FCP: 5.5s

    • LCP: 9s




目标



  • performance 页面渲染完成:4s 以内

  • web-vitals 平均数据

    • FCP:3s 以内

    • LCP:4s 以内




如果从绝对性能看,这个目标只能是个中下水平。主要基于以下几点考虑



  • 策略上不会对原系统或者低代码体系进行大刀阔斧的改动

  • 老系统大概就是这么个性能情况,维持这个水平起码不会降低用户体验。作为内部系统,对性能没有极致的要求

  • 考虑到时间成本,性能优化是一项持续性的工作,而实际项目是有时间限制和上线压力的


优化措施


根据以上分析,最重要的就是要减小总的关键资源体积。
低代码体系所需要的直接资源都属于关键资源。因为用户是可能首次直接进入一个低代码页面的(也是本次主要的优化场景)


优化前包分析


CDN 三方库资源直接就能看出哪些是冗余的,或者是公共资源加载了多遍等问题,但是自己的仓库打包后就需要借助 webpack-bundle-analyzer 插件分析了
该项目中有多个 npm 仓库需要分析,这里就举老系统自己的例子,优化前的 bundle 分析图


image.png


三方依赖 vendor.min.js 8MB 左右,项目 JS 800 多 KB,下面分析下最严重的几点



  • 标 ① 部分, @ali_4ever 开头的是富文本依赖,有接近 2M 左右的大小,优化为懒加载

  • 标 ② 部分,echarts5 全量引入了,1M 左右大小,计划优化为按需加载

  • 标 ③ 部分,ali-oss,500 多 KB,ali-oss 不支持按需引入。这里因为多个低代码组件库中也用到了该依赖,所以计划提取为 CDN 作为公共依赖,但是大小还是 500 多 KB,只是去掉了重复加载部分

  • 标 ④ 部分,antd-mobile 加载了两个版本的全量仓库,按照官方推荐,考虑将 antd-mobile-v2 按需加载


一、移除冗余资源



  • 排查 CDN,是否引用了多余的 CDN,比如项目中移动端引用了 PC 端的组件库,引用了已经废弃(迁移)的工具库等等

  • 排查项目 bundle,正常情况下是不可能有冗余资源的,因为如果一点没用到这个库,webpack 也不会将其打包进去

    • 可能存在使用到了一小部分,却打包了整个库的情况,这个属于下一部分按需引入



  • 排查下线上 CDN 是否都使用生产版本或者压缩版本,这点事先没有想到,是在优化过程中意外发现存在非压缩版本


二、按需引入


按需引入即只引入三方库中项目用到的部分。现代的大部分三方库都已经支持 TreeShaking,正常打包即是按需引入。特殊情况在于 CDN、懒加载和一些老的库,这些刚好在项目中都有所实践


按需引入 和 CDN


项目中只用到了 ahooks 中的个别方法,却将整个包作为 CDN 引入,显然是不合理的



  • 需要按需引入的库,是不能使用 CDN 引入的,它们之间是互斥的

    • 因为 CDN 需要配置 external 才能在项目里使用,external 一般是将一个三方库作为整体配置的



  • CDN 自身作为一种优化手段,那是和将静态资源放置在业务服务器对比的。

    • 在该场景下,引入 ahooks CDN 导致 TreeShaking 失效,引入了全量包,同时增加了一次 http 请求,总的来看肯定是得不偿失的

    • 并且最终项目的 bundle 也会发布 CDN



  • 因此去掉了 ahooks 的 CDN,改为直接打进项目 bundle 就行了


按需引入 和 懒加载


在该项目中,echarts 也按需引入了,echarts 的按需引入总体效果就没有 ahooks 那么好了



  • echarts 无论绘制哪种类型图表,都需要引入核心库,就有 100 多 KB 的大小了

  • 所以 echarts 也可以选择懒加载,懒加载会让没有使用 echarts 的页面加载速度变快,但是最终浏览器解析的资源是全量的,可以根据实际情况选择

  • 懒加载 和 按需引入也无法并存。因为懒加载需要动态导入,动态导入 webpack 就没法做静态分析,这是 TreeShaking 的基础,所以就没法按需引入了


利用 babel-import-plugin


有一些老版本的库,可能还不支持按需引入,比方说 antd-mobile-v2,对于这种仓库,可以利用 babel-import-plugin 做按需引入
只需要做一下 babel 配置就行


{
"plugins": [
[
"import",
{
"libraryName": "antd-mobile-v2",
"style": "css"
},
"antd-mobile-v2"
]
]
}



  • 本项目最终没有那么做,因为体积几乎没有减小。对于一个完整的项目,需要使用到的组件是非常多的

  • 对于 antd-mobile 多个版本的问题,最终的优化方案还是合并为最新版,只是开发和测试的工作量大了点

  • 注意点:babel-import-plugin 插件并不能让所有仓库都支持按需。本质上还是三方库做了分包才行


三、懒加载


懒加载的资源不同,也可以分为多种类型



  • 三方库资源懒加载:比如之前说的,某个组件依赖于 echarts,那么就可以懒加载 echarts,只有页面中使用了该组件时才去请求和加载 echarts 依赖

  • 组件懒加载:将整个组件都懒加载,在本项目中没有做组件懒加载

    • 低代码体系下,组件本身不能懒加载,否则 schema 解析到这个组件时找不到会报错

    • 解决方案也可以给组件套一层,实际内容懒加载,导出的组件不懒加载

    • 更重要的原因是组件库本身不大,不是影响性能的关键因素

    • 另外低代码页面本身就是由各个组件拼凑而成,如果将组件都懒加载了,那么页面各个部分都会有 Loading 的中间态,效果不好把控



  • 路由懒加载:本质上它就是组件懒加载的一种,一个组件就是一个路由页面,项目中对于系统不太访问的页面做了路由懒加载


三方库资源懒加载


懒加载依赖也需要分析具体情况,比方说移动端使用了 antd-mobile 作为组件库,这个依赖就完全没必要等使用的时候再加载。因为几乎进入任意一个页面,都需要用到这个资源。什么情况下合适



  • 依赖资源比较大

  • 使用的频率较低,只在个别地方使用了


并且这个三方资源也是分两种情况引入,第一种是以 CDN 的形式外部引入,第二种是直接打包入库,这两种引入方式的懒加载处理是不同的,下面分别举例


CDN 引入的三方资源懒加载


比如低代码组件库中存在一个富文本组件,比较特殊,比较适合使用 CDN 的方式懒加载依赖资源



  • 富文本组件依赖于公司内部的一个富文本编辑器。鉴于富文本的复杂性,所以它的依赖很大,JS+css 将近有 3M 左右。

  • 但是其实只有极少的页面使用到了富文本,对于大多数用户来说,是不需要这个富文本的


下面介绍下具体实现,利用 ahooks 的 useExternal,动态注入 js 或 css 资源(也可以原生实现),封装一个高阶组件,方便调用


type LoadStatus = 'loading' | 'ready' | 'error';
interface LoadOptions {
url: string;
libraryName: string;
cssUrl?: string;
LoadingRender?: () => React.ReactNode;
errorRender?: () => React.ReactNode;
}
export const LazyLoad = (Component, { url, libraryName, cssUrl, LoadingRender, errorRender }: LoadOptions) => {
const LazyCom = (props) => {
const initStatus = typeof window[libraryName] === 'undefined' ? 'loading' : 'ready';
const [loadStatus, setStatus] = useState<LoadStatus>(initStatus);
const jsStatus = useExternal(url, {
keepWhenUnused: true,
});
const cssStatus = useExternal(cssUrl, {
keepWhenUnused: true,
});

useEffect(() => {
if (loadStatus === 'ready' || loadStatus === 'error') {
return;
}
if (jsStatus === 'error' || cssStatus === 'error') {
setStatus('error');
}
if (jsStatus === 'ready' && (cssStatus === 'ready' || cssStatus === 'unset')) {
setStatus('ready');
}
}, [jsStatus, cssStatus, loadStatus]);

const content = useMemo(() => {
switch (loadStatus) {
case 'loading':
return typeof LoadingRender === 'function' ? LoadingRender() : <div>加载中...</div>;
case 'ready':
return <Component {...props} />;
case 'error':
return typeof errorRender === 'function' ? errorRender() : <div>加载失败</div>;
default:
return null;
}
}, [loadStatus]);

return content;
};
return LazyCom;
};

// 使用示例,BaseEditor即需要懒加载的原组件,BaseEditor组件内部直接通过window取相应依赖
export const FormEditor = LazyLoad(BaseEditor, {
url: 'xxxx',
cssUrl: 'xxxxx',
libraryName: 'xxxxxx',
});

打包入 bundle 依赖懒加载


总体思路是一样的,只是这类资源利用 webpack 的 import 动态导入能力,import 动态导入的资源打包时会单独分包,只在使用到时才会加载
具体实现:


export const InnerLazyLoad = (Component, loadResource, LoadingRender?) => {
const LazyCom = (props) => {
const [loaded, setLoaded] = useState(false);
const [LazyResource, setResource] = useState({});

useEffect(() => {
if (loaded) {
return;
}
loadResource().then((resource) => {
setResource(resource);
setLoaded(true);
});
}, [loaded]);
const LoadingNode = typeof LoadingRender === 'function' ? LoadingRender() : <div>...加载中</div>;
return loaded ? <Component {...props} LazyResource={LazyResource} /> : LoadingNode;
};
return LazyCom;
};

// 具体使用
const loadResource = async () => {
// 动态导入的资源会单独分包,在使用到时才会加载
const echarts = await import('echarts/core');
const { PieChart } = await import('echarts/charts');
const { TitleComponent } = await import('echarts/components');
const { CanvasRenderer } = await import('echarts/renderers');
return {
echarts,
PieChart,
TitleComponent,
CanvasRenderer,
};
};

const AgentWork = InnerLazyLoad(BaseAgentWork, loadResource);

路由懒加载


路由懒加载原理和内部资源懒加载类似,分包然后首次进入该页面时才请求页面资源
本项目没有把所有页面都懒加载



  • 页面懒加载后,进入页面前会有一个短暂的加载过程,需要评估影响

  • 还是和通用懒加载一样,使用频率较低、页面 js 又比较大的比较适合懒加载


比如在该项目中



  • 应用上存在部分页面是给第三方使用的,不能通过导航点击到达,直接分享地址给第三方

  • 这些页面使用频率低,而且基本不影响本应用,因为无法通过导航点击切换到达,是通过 url 的形式直接访问,所以加载中的中间态和页面加载一起


路由懒加载的实现,不同框架都有些差异。本项目中只需在路由配置中增加配置项即可开启,就不再阐述具体代码实现


四、合并公共资源


合并公共资源,即不要重复加载相同资源
一般来说打包工具都会做依赖分析,只会打包一份相同路径的引用依赖。但是如果相同依赖分散在多个仓库中就有可能出现重复资源了
比如该项目中,老系统自身和多个组件库都使用了 ali-oss 库实现上传功能,并且还有一些条件使得将其提取为公共 CDN 是利益最大化的



  • ali-oss 打包后 500 多 KB 的大小,已经算是一个不小的包了

  • ali-oss 不支持按需引入,所以引用到它的多个仓库,无论引用了什么功能,都将全量打包入 ali-oss

  • 如果 ali-oss 支持按需引入,就需要计算是提取为公共 CDN 划算,还是将其按需打入各个仓库中划算


实现步骤比较简单



  • 在引用 ali-oss 的仓库配置 external,使仓库本身打包时不打入 ali-oss 依赖

  • 在项目 HTML 中提前引入 ali-oss CDN


五、缓存


静态资源缓存



  • 该项目静态资源使用 CDN+版本号,本身已经支持了缓存。CDN 的缓存时间是通过 Cache-Control 的 s-maxage 字段控制,这是 CDN 特有的字段

  • 如果静态资源是放置在自己的服务器上,需要考虑 http 缓存和缓存更新的事项,这个也是老生常谈的话题,这里不再赘述


如果想要详细了解 http 缓存,推荐看下这篇文章


options 请求缓存


在实际优化过程中发现,该项目的大部分 ajax 请求,都是跨域请求,所以伴随着大量的 options 请求
推动服务端做了这些预检请求的缓存,其原理就是通过 access-control-max-age 响应头设置预检请求的缓存时间


Service Worker


Service Worker 是一项很强大的技术,它能够对网络请求进行缓存和处理,它的最大应用场景是在弱网甚至离线环境下
一旦使用了 Service Worker 技术,用户在首次安装完成后,后续的访问相当于直接在本地读取静态资源,访问速度自然能够得到提升
虽然能够提升使用体验,但是使用 Service Worker 是存在一定限制和风险的



  • 必须运行在 https 协议下,调试时允许在 localhost、127.0.0.1

  • Service Worker 自身不能跨越,即主线程上注册的 Service Worker 必须在当前域名下

  • 一旦被安装成功就永远存在,除非线程被程序主动解除

  • Service Worker 的更新是比较复杂的,如果对其了解不深,建议还是只将不常更新的资源使用 Service Worker 缓存,降低风险


项目中直接使用 workbox(对 Service Worker 做了封装,并提供一些插件),以下为示例代码


主线程上注册 Service Worker


if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('./sw.js')
.then((reg) => {
navigator.serviceWorker.addEventListener('message', (event) => {
// 处理Worker传递的消息逻辑
});
console.log('注册成功:', reg);
})
.catch((err) => {
console.log('注册成功:', err);
});
}

Service Worker 线程处理缓存逻辑


//首先是异常处理
self.addEventListener('error', function (e) {
self.clients.matchAll().then(function (clients) {
if (clients && clients.length) {
clients[0].postMessage({
type: 'ERROR',
msg: e.message || null,
stack: e.error ? e.error.stack : null,
});
}
});
});

self.addEventListener('unhandledrejection', function (e) {
self.clients.matchAll().then(function (clients) {
if (clients && clients.length) {
clients[0].postMessage({
type: 'REJECTION',
msg: e.reason ? e.reason.message : null,
stack: e.reason ? e.reason.stack : null,
});
}
});
});

//然后引入workbox
importScripts('https://g.alicdn.com/kg/workbox/3.3.0/workbox-sw.js');

// 预缓存资源示例,不更新的资源使用预缓存
const resources = ['https://g.alicdn.com/dingding/dingtalk-jsapi/2.10.3/dingtalk.open.js'];

// 预缓存功能
workbox.precaching.precacheAndRoute(resources);

// 图片缓存 使用CacheFirst策略
workbox.routing.registerRoute(
/\.(jpe?g|png)/,
new workbox.strategies.CacheFirst({
cacheName: 'image-runtime-cache',
plugins: [
new workbox.expiration.Plugin({
// 对图片资源缓存 1 天
maxAgeSeconds: 24 * 60 * 60,
// 匹配该策略的图片最多缓存 20 张
maxEntries: 20,
}),
],
})
);

// 需要更新的js和css资源使用staleWhileRevalidate策略
workbox.routing.registerRoute(
new RegExp('https://g.alicdn.com/'),
workbox.strategies.staleWhileRevalidate({
cacheName: 'static-runtime-cache',
plugins: [
new workbox.expiration.Plugin({
maxEntries: 20,
}),
],
})
);


  • 预缓存功能:

    • 正常情况下,Service Worker 是在主程序首次请求时将资源拦截,在之后的请求中根据缓存策略处理

    • 预缓存功能是在 Service Worker 在安装阶段主动发起资源请求,并将其缓存下来

    • 当页面真正发起预缓存当中的资源请求时,资源已经被缓存了,就可以直接使用了

    • 预缓存是使用 Cache Only 策略,即在预缓存主动发起请求并获取缓存后,就只会在缓存中读取资源,不在进行缓存更新,所以适合项目中不更新的静态资源



  • 图片缓存:

    • 图片一般情况下是不更新的,所以采用 Cache First 缓存优先策略

    • 当有缓存时会优先读取缓存,读取成功直接使用本地缓存,不再发起请求

    • 读取失败时再发起网络请求,并将结果更新到缓存中



  • 对于需要更新的 JS 和 CSS

    • 使用 Stale While Revalidate 策略

    • 跟 Cache First 策略比较类似,都是优先返回本地缓存的资源

    • 区别在于 Stale While Revalidate 策略无论在缓存读取是否成功的时候都会发送网络请求更新本地缓存

    • 这是兼顾页面加载速度和缓存更新的策略,相对安全一些




六、其他


以下措施不具备通用性,但是在项目中用到了还是记录下来,仅供参考



  • 页面 schema 接口优化:低代码体系存在页面嵌套,每个页面单独请求自己的 schema,所以在嵌套层级较多的情况下,是以同步解析的顺序请求接口,页面渲染速度较慢,优化为服务端拼装完毕后直接返回

  • 部分接口的请求合并

  • 去除运行时 babel,低代码设计器中存在手写的代码,这部分代码最初在运行时由 babel 转化为 ES5(设计问题),优化为保存时转换


七、项目已经存在的措施



  • 静态资源放在 CDN

  • 启用 http2,并且浏览器支持,这一步很重要,是否使用 http2 对优化措施有直接的影响

  • js 和 css 的代码压缩,并且开启 gzip 压缩

  • 使用字体图标 iconfont 代替图片图标

  • CDN 合并:利用 CDN 的 combo 技术将多个 CDN 合并成一个发送(在 http2 中无明显效果)


最终优化效果



  • performance 表现:页面渲染完成在 3 秒以内


image.png



  • web-vitals 平均数据

    • FCP:2100

    • LCP:2400




参考文章



作者:萌鱼
来源:juejin.cn/post/7288981520946364475
收起阅读 »

我做梦都想不到😵,我被if(x)摆了一道!

web
读本文,可以收获什么? 字数:2494 花费时间:5min if(x)中的x为各种类型的数据或者值的时候会发生什么?x为各种数据类型、表达式、特殊值、位运算、函数等值的时,这些在if语句都充当了什么,实现了什么? 总结== === ≠三种情况特殊值的比较,如...
继续阅读 »


读本文,可以收获什么?


字数:2494 花费时间:5min


if(x)中的x为各种类型的数据或者值的时候会发生什么?x为各种数据类型、表达式、特殊值、位运算、函数等值的时,这些在if语句都充当了什么,实现了什么?


总结== === ≠三种情况特殊值的比较,如下图所示:



image.png


作为一个程序员的我们,相信我们写代码用的最多逻辑应该就是if语句了吧,其实我们真的了解if(x)究竟发生了什么?其实很简单,我们可能都知道中文有这样一个模板:"如果是什么,就会做什么",也就是说符合条件的某件事,才会去做某件事。同样的道理if(x)的意思就是如果符合x条件,我们就可以执行if语句块的代码了。而我们JavaScript中的哪个数据类型是涉及是否意思的?当然是Boolean类型啦,其实if内的x非布尔值都会做一次Boolean类型的转换的


1 x为一个值时


1.1 x为字符串:


x为一个空字符串时,这是一个假值,if语句会转换为false。


if ("") {
console.log("Hello World!");
}
console.log(Boolean(""));// false

x为一个非空字符串是,这是一个真值。if语句会转换为true。


if (!"") {
console.log("Hello World!");// Hello World!
}
console.log(Boolean(!""));// true

x为一个空格字符串,这是一个真值。if语句会转换为true。否则会转换为false


if (" ") {
console.log("Hello World!");// Hello World!
}
console.log(Boolean(" "));// true
if (!" ") {
console.log("Hello World!");
}
console.log(Boolean(!" "));// false

x为一个字符串,这是一个真值。if语句会转换为true。否则会转换为false


if ("JavaScript") {
console.log("Hello World!");// Hello World!
}
console.log(Boolean("JavaScript"));// true

if (!"JavaScript") {
console.log("Hello World!");
}
console.log(Boolean(!"JavaScript"));// false

1.2 x为数字


x为一个数字0时,这是一个假值,if语句会转换为false。x为一个数字!0时,这是一个真值,if语句会转换为true。


if (0) {
console.log("Hello World")
}
console.log(Boolean(0));// fasle

if (!0) {
console.log("Hello World");// Hello World
}
console.log(Boolean(!0));// true

if (1) {
console.log("Hello World") // Hello World
}
console.log(Boolean(1));// true

if (!1) {
console.log("Hello World")
}
console.log(Boolean(!1));// false

if (-0) {
console.log("Hello World")
}
console.log(Boolean(-0));// fasle
if (!-0) {
console.log("Hello World");// Hello World
}
console.log(Boolean(!-0));// true

1.3 x为数组


x为一个空数组,这是一个真值,if语句会转换为true。


if ([]) {
console.log("Hello World");// Hello World
}
console.log(Boolean([]));// true
if (![]) {
console.log("Hello World");
}
console.log(Boolean(![]));// false

x为一个嵌套空数组时,这是一个真值,if语句会转换为true。否则是假值。if语句会转换为false


if ([[]]) {
console.log("Hello World");// Hello World
}
console.log(Boolean([[]]));// true
if (![[]]) {
console.log("Hello World");
}
console.log(Boolean(![[]]));// false

x为一个有空字符串的数组时,这是一个真值,if语句会转换为true。否则是假值。if语句会转换为false。


if ([""]) {
console.log("Hello World");// Hello World
}
console.log(Boolean([""]));// true
if (![""]) {
console.log("Hello World");
}
console.log(Boolean(![""]));// false

x为一个有数字0的数组时,这是一个真值,if语句会转换为true。否则是假值。if语句会转换为false。


if ([0]) {
console.log("Hello World");// Hello World
}
console.log(Boolean([0]));// true
if (![0]) {
console.log("Hello World");
}
console.log(Boolean(![0]));// false

1.4 x为对象:


if ({}) {
console.log("Hello World") // Hello World
}
console.log(Boolean({}));// true

2 x为特殊值时


if (null) {
console.log("Hello World");
}
console.log(Boolean(null));// false

if (undefined) {
console.log("Hello World");
}
console.log(Boolean(undefined));// false

if (NaN) {
console.log("Hello World");
}
console.log(Boolean(NaN));// false

3 x为位运算时


if (true | false) {
// 按位或,只要有一个成立就为true
console.log("Hello World");
}
console.log(Boolean(true | false));// true

4 x为表达式时


比较的相方首先调用ToPrimitive(内部函数,不能自行调用)转换为原始值,如果出现非字符串,就根据ToNumber规则将双方强制转换为数字来进行比较。


const a = [42];
const b = ["43"];
console.log(a < b);// true

5 x为等式时


5.1 一个等号(=)


=: 一个等号代表的是赋值,即使x的值为a=2,也就是说变量的声明操作放在if判断位置上了,其实它还是一个变量并不是一个操作。


let a;
if (a = 2) {
console.log("条件成立!");// 条件成立!
}
console.log(a);// 2

let a;
if (a = 2) {
console.log("条件成立!");// 条件成立!
}
console.log(typeof (a = 2));// number
console.log(Boolean(a = 2));// true

let a;
if (a = 2 && (a = 3)) {
console.log("条件成立!");// 条件成立!
}

console.log(typeof (a = 2 && (a = 3)));// number;

5.2 两个等号(==)


==:宽松相等,我们可能都会这样想,==检查值是否相等,听起来蛮有道理,但不准确,真正的含义是==允许相等比较重进行强制类型转换



对于==符号尽量遵守两个原则:


如果两边的值中有true或者false,千万不要使用==


如果两边的值中有[]、""、0,尽量不要使用==





  • 两个值类型相同,则执行严格相等变量。


    🍟 都是字符串类型:


    const a = "";
    const b = "12";
    console.log(a == b);// false

    🍟 都是NaN类型:全称为not a number,理解为不是一个数值。JavaScript的规定, NaN表示的是非数字, 那么这个非数字可以是不同的数字,因此 NaN 不等于 NaN。


    const a = NaN;
    const b = NaN;
    console.log(a == b);// false

    🍟 都是Symbol类型:Symbol命名的属性都是独 一无二的,可以唯一标识变量值,不受是否相同变量值。


    const a = Symbol("1");
    const b = Symbol("1");
    console.log(a == b);// false

    🍟 都是对象类型。对象的比较是内存地址,因为对象是存储在堆中,当堆中有对象时,它会相对应内存中有一个存储的地址,在栈中其存储了其在堆中数据的地址,当调用数据时,去堆中调取对应堆中的数据的地址获取出来。也就是相同对象比较的是内存地址,变量不一样存储位置不一样。


    const a = { a: 1 };
    const b = {};
    console.log(a == b);// false

    const a = {};
    const b = {};
    console.log(a == b);// false
    console.log(Boolean(a));// true



  • 两个值类型不相同。


    🍟 一个值是null,一个是undefind。


    const a = undefined;
    const b = null;
    console.log(a == b);// true

    🍟 一个值是数字,一个值是字符串。字符串强制转换为数字在比较。


    const a = 12;
    const b = "12";
    console.log(a == b);// true

    🍟 一个值是布尔值,一个是其他类型的值。这种做法是不安全,不建议去使用,在开发中尽量不要这样使用。


    console.log("0" == false);// true
    console.log("" == false);// true
    console.log(0 == false);// true
    console.log([] == false);// true

    🍟 一个值是对象,一个值是字符串或数字。对象与非对象的比较,对象会被强制转换原始值(通过内部函数 ToPrimitive自动执行,这个是内部函数不能直接调用)再比较。


    const a = {};
    const b = "";
    console.log(a == b);// false



5.3 三个等号(===)


===: 严格相等,我们可能都会这样想,===检查值和类型是否相等,听起来蛮有道理,但不准确,真正的含义是===不允许相等比较重进行强制类型转换,也就是不做任何处理变量是什么就是什么。


const a = 0;
const b = "0";
console.log(a === b);// false

6 x为&&、||操作时


||和&&首先会对第一个操作数(a和c)执行条件判断,如果其不是布尔值(如上例)就先进行ToBoolean强制类型转换,然后再执行条件判断。


🍟 对于||来说,如果条件判断结果为true就返回第一个操作数(a和c)的值,如果为false就返回第二个操作数(b)的值。


const a = 12;
const b = "abc";
const c = null;
if (a || b) {
console.log("a||b");// a||b
}
console.log(typeof (a || b));// number
console.log(Boolean(a || b));// true
console.log(a || b);// 12

const b = "abc";
const c = null;
if (c || b) {
console.log("c||b");// c||b
}
console.log(typeof (c || b));// string
console.log(Boolean(c || b));// true
console.log(c || b);// abc

🍟 &&则相反,如果条件判断结果为true就返回第二个操作数(b)的值如果为false就返回第一个操作数(a和c)的值。


const a = 12;
const b = "abc";
if (a && b) {
console.log("a&&b");// a&&b
}
console.log(typeof (a && b));// string
console.log(Boolean(a && b));// true
console.log(a && b);// abc

const b = "abc";
const c = null;
if (c && b) {
console.log("c&&b");
}
console.log(typeof (c && b));// object
console.log(Boolean(c && b));// false
console.log(c && b);// null

7 x为函数判断时




  • typeof与instanceof的区别


    🍟 typeof:返回值是一个字符串,用来说明变量的数据类型。一般只能返回如下几个结果:number、string、function、object、undefined,对于Array、Null等特殊对象typeof一律返回object,这正是typeof的局限性。


    console.log(typeof undefined == 'undefined');// true
    console.log(typeof null);// object

    🍟instanceof:返回值为布尔值,用来测试一个对象在其原型链中是否存在一个构造函数的prototype属性。用于判断一个变量是否某个对象的实例。,注意地,instanceof只能用来判断对象和函数,不能用来判断字符串和数字等


    const arr = new Array()
    if (arr instanceof Array) {
    console.log("arr instanceof Array");// arr instanceof Array
    }
    if (arr instanceof Object) {
    // 因为Array是Object的子类
    console.log("arr instanceof Object");// arr instanceof Array
    }
    console.log(typeof (arr instanceof Array));// boolean

    🍟 typeofinstanceof都有一定的弊端,并不能满足所有场景的需求。如果需要通用检测数据类型,可以使用Object.prototype.toString.call()方法:


    Object.prototype.toString.call({});// "[object Object]"
    Object.prototype.toString.call([]); // "[object Array]"
    Object.prototype.toString.call(666); // "[object Number]"
    Object.prototype.toString.call("xxx"); // "[object String]"



注意,该方法返回的是一个格式为"[object Object]"的字符串。




  • indexof与includes区别


    🍟 indexof:返回的是所含元素的下标,注意地,此函数是无法判断是否有NaN元素


    const str = "130212";
    if (str.indexOf("0")) {
    console.log("str中存在0!")
    }
    console.log(str.indexOf("0"));// 2

    🍟 includes:返回的是布尔值,代表是否存在此元素。


    const str = "130212";
    if (str.includes("0")) {
    console.log("str中存在0!")
    }
    console.log(str.includes("0"));// true



作者:路灯下的光
来源:juejin.cn/post/7154647954840616996
收起阅读 »

蒙提霍尔问题

web
最近看韩国电视剧【D.P:逃兵追缉令】里面提到一个有趣的数学概率游戏 -> 蒙提霍尔问题 意思是:参赛者会看见三扇门,其中一扇门的里面有一辆汽车,选中里面是汽车的那扇门,就可以赢得该辆汽车,另外两扇门里面则都是一只山羊,让你任意选择其中一个,然后打开其余...
继续阅读 »

f1e232d158d085038667d793dad96dc5.jpeg


最近看韩国电视剧【D.P逃兵追缉令】里面提到一个有趣的数学概率游戏 -> 蒙提霍尔问题


意思是:参赛者会看见三扇门,其中一扇门的里面有一辆汽车,选中里面是汽车的那扇门,就可以赢得该辆汽车,另外两扇门里面则都是一只山羊,让你任意选择其中一个,然后打开其余两个门中的一个并且是山羊(去掉一个错误答案),这时,让你重新选择。那么你是会坚持原来的选择,还是换选另外一个未被打开过的门呢?


大家可以想一想如果是自己,我们是会换还是不会换?


好了,我当时看到后感觉很有意思,所以我简单写了一套代码,源码贴在下面,大家可以验证一下,先告诉大家,换赢得汽车的概率是2/3,不换赢得汽车的概率是1/3


<header>
<h1>请选择换不换?</h1><button class="refresh">刷新</button>
</header>
<section>
<div class="box">
<h2>1</h2>
<canvas width="300" height="100"></canvas>
<div class="prize">奖品</div>
</div>
<div class="box">
<h2>2</h2>
<canvas width="300" height="100"></canvas>
<div class="prize">奖品</div>
</div>
<div class="box">
<h2>3</h2>
<canvas width="300" height="100"></canvas>
<div class="prize">奖品</div>
</div>
</section>
<span>请选择号码牌</span>
<select name="" id="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button class="confirm">确认</button>
<span class="confirm-text"></span>
<span class="opater">
<button class="change"></button>
<button class="no-change">不换</button>
</span>
<p>
<strong>游戏规则:</strong>
<span>
上面有三个号码牌,其中一个号码牌的里面有汽车,选中里面是汽车的号码牌,
你就可以赢得该辆汽车,另外两个号码牌里面则都是一只山羊,
你任意选择其中一个,然后打开其余两个号码牌中的一个并且是山羊(去掉一个错误答案),
这时,你有一个重新选择的机会,你选择换还是不换?
</span>
</p>

.prize {
width: 300px;
height: 100px;
background-color: pink;
font-size: 36px;
line-height: 100px;
text-align: center;
position: absolute;
}

canvas {
position: absolute;
z-index: 2;
}

section {
display: flex;
}

.box {
width: 300px;
height: 200px;
cursor: pointer;
}

.box+.box {
margin-left: 8px;
}

header {
display: flex;
align-items: center;
}

header button {
margin-left: 8px;
height: 24px;
}
p {
width: 400px;
background-color: pink;
}

function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
function getRandomNumber() {
return Math.random() > 0.5 ? 1 : 2;
}
let a1 = [0, 1, 2]
let i1 = undefined
let i2 = undefined
let isChange = false
const opater = document.querySelector('.opater')
opater.style.display = 'none'
// 随机一个奖品
const prizes = document.querySelectorAll('.prize')
let a0 = [0, 1, 2]
a0 = shuffleArray(a0)
a0.forEach((v,i) => {
const innerText = !!v ? '山羊' : '汽车'
prizes[i].innerText = innerText
})

const canvas = document.querySelectorAll('canvas')
const confirmText = document.querySelector('.confirm-text')
canvas.forEach(c => {
// 使用canvas实现功能
// 1. 使用canvas绘制一个灰色的矩形
const ctx = c.getContext('2d')
ctx.fillStyle = '#ccc'
ctx.fillRect(0, 0, c.width, c.height)
// 2. 刮奖逻辑
// 鼠标按下且移动的时候,需要擦除canvas画布
let done = false
c.addEventListener('mousedown', function () {
if (i1 === undefined) return alert('请先选择号码牌,并确认!')
if (!isChange) return alert('请选择换不换!')
done = true
})
c.addEventListener('mousemove', function (e) {
if (done) {
// offsetX 和 offsetY 可以获取到鼠标在元素中的偏移位置
const x = e.offsetX - 5
const y = e.offsetY - 5
ctx.clearRect(x, y, 10, 10)
}
})
c.addEventListener('mouseup', function () {
done = false
})
})
const confirm = document.querySelector('.confirm')
const refresh = document.querySelector('.refresh')
confirm.onclick = function () {
let select = document.querySelector('select')
const options = Array.from(select.children)
confirmText.innerText = `您选择的号码牌是${select.value},请问现在换不换?`
// 选择后,去掉一个错误答案
// i1是下标
i1 = select.value - 1
// delValue是值
let delValue = undefined
// 通过下标找值
if (a0[i1] === 0) {
delValue = getRandomNumber()
} else {
delValue = a0[i1] === 1 ? 2 : 1
}
// 通过值找下标
i2 = a0.indexOf(delValue)
// 选择的是i1, 去掉的是
const ctx = canvas[i2].getContext('2d')
ctx.clearRect(0, 0, 300, 100)
options.map(v => v.disabled = true)
confirm.style.display = 'none'
opater.style.display = 'inline-block'
}
const change = document.querySelector('.change')
const noChange = document.querySelector('.no-change')
change.onclick = function () {
isChange = true
const x = a1.filter(v => v !== i1 && v !== i2)
confirmText.innerText = `您确认选择的号码牌是${x[0] + 1},请刮卡!`
opater.style.display = 'none'
}
noChange.onclick = function () {
isChange = true
confirmText.innerText = `您确认选择的号码牌是${i1 + 1},请刮卡!`
opater.style.display = 'none'
}
refresh.onclick = function () {
window.location.reload()
}

作者:JoyZ
来源:juejin.cn/post/7278684023757553727
收起阅读 »

js数组方法分类

web
js数组方法分类 0.前言 我们知道,js中数组方法非常多,MDN就列举了43个方法,就连常用方法都很多,比如forEach,filter,map,push等等等,可能我们见到方法认识这个方法,但要我们列举所知道的数组方法,我们可能会遗忘漏掉某些,为了帮助大家...
继续阅读 »

js数组方法分类


0.前言


我们知道,js中数组方法非常多,MDN就列举了43个方法,就连常用方法都很多,比如forEach,filter,map,push等等等,可能我们见到方法认识这个方法,但要我们列举所知道的数组方法,我们可能会遗忘漏掉某些,为了帮助大家更好更有规律地记住更多方法,在这里我特地将数组方法分俄为七大类,每一类都有其特定共同点和功能的标签,根据这些标签去记忆,相信大家读完可以感到醍醐灌顶的感觉。


一共2+4+9+7+6+3+2=33个,放心吧,足够啦!


1.创建数组方法



  • Array.from() :将可迭代对象或类数组对象转化为新的浅拷贝数组.

  • Array.of():将可变数量的参数转化为新的浅拷贝 数组.


//Array.from()
console.log(Array.from("foo")); // ['f', 'o', 'o']
function bar() {
 console.log(arguments); //Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ] 类数组
 console.log(Array.from(arguments)); // [1, 2, 3]
}
bar(1, 2, 3);
const set = new Set(["foo", "bar", "baz", "foo"]);
console.log(Array.from(set)); //从Set构建数组['foo', 'bar', 'baz'],Map也可以

//Array.of()
console.log(Array.of()); //[] 创建空数组
console.log(Array.of(1, 2, 3, 4)); //[1, 2, 3, 4]
//浅拷贝
const obj1 = { age: 18 };
const arr1 = [666, 777];
const arr = Array.of(obj1, arr1);
arr[0].age = 19;
arr[1][0] = 999;
console.log(arr); //[{age:19},[999,777]]


2.数组首端或尾端添加删除方法



  • Array.prototype.push():将指定的元素添加到数组的末尾,并返回新的数组长度.

  • Array.prototype.pop():从数组中删除最后一个元素,并返回该元素的值。此方法会更改数组的长度.

  • Array.prototype.shift():从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度.

  • Array.prototype.unshift():将指定的元素添加到数组的开头,并返回新的数组长度.


//Array.prototype.push()
const arr = [1, 2];
console.log(arr.push(3, 4, 5)); //5
console.log(arr); //[ 1, 2, 3, 4, 5 ]
//Array.prototype.pop()
console.log(arr.pop()); //数组最后一个元素:5
console.log(arr); //[ 1, 2, 3, 4 ]
//Array.prototype.shift()
console.log(arr.shift()); //1
console.log(arr); //[ 2, 3, 4 ]
//Array.prototype.unshift()
console.log(arr.unshift(66, 77, 88)); //6
console.log(arr); //[ 66, 77, 88, 2, 3, 4 ]

3.操作数组方法



  1. Array.prototype.concat():用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组.

  2. Array.prototype.copyWithin():浅复制数组的一部分到同一数组中的另一个位置,并返回该数组,不会改变原数组的长度.

  3. Array.prototype.fill():用一个固定值填充一个数组中从起始索引(默认为 0)到终止索引(默认为 array.length)内的全部元素。它返回修改后的数组。会改变原始数组.


// Array.prototype.concat()
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
const arr4 = arr1.concat(arr2, arr3); //[1, 2, 3, 4, 5, 6, 7, 8, 9]
// Array.prototype.copyWithin()
const arr = [1, 2, 3, 4, 5, 6];
console.log(arr.copyWithin(2, 3, 5)); //[ 1, 2, 4, 5, 5, 6 ] 将 4,5替换到2索引位置
// Array.prototype.fill()
const array1 = [1, 2, 3, 4];
console.log(array1.fill(0, 2, 4)); //[ 1, 2, 0, 0 ]
console.log(array1.fill(5, 1)); //[ 1, 5, 5, 5 ]
console.log(array1.fill(6)); //[ 6, 6, 6, 6 ]
console.log(array1); //[ 6, 6, 6, 6 ]


  1. Array.prototype.flat():展开嵌套数组,默认嵌套深度为1,不改变原数组,返回新数组.

  2. Array.prototype.join():用逗号或指定分隔符将数组连接成字符串.

  3. Array.prototype.reverse():就地反转字符串,返回同一数组的引用,原数组改变.


// Array.prototype.flat()
const arr1 = [1, 2, [3, 4]];
console.log(arr1.flat()); //[ 1, 2, 3, 4 ]
console.log(arr1); // 不改变原数组 [ 1, 2, [ 3, 4 ] ]
const arr2 = [1, 2, [3, 4, [5, 6]]];
console.log(arr2.flat()); //默认展开嵌套一层数组[ 1, 2, 3, 4, [ 5, 6 ] ]
console.log(arr2.flat(2)); //展开嵌套二层数组 [ 1, 2, 3, 4, 5, 6 ]
// Array.prototype.join()
const elements = ["Fire", "Air", "Water"];
console.log(elements.join()); //"Fire,Air,Water"
console.log(elements.join("+++++")); //Fire+++++Air+++++Water
console.log(elements.join("-")); //Fire-Air-Water
// Array.prototype.reverse()
const arr = [1, 2, 3];
console.log(arr.reverse()); //[3,2,1]
console.log(arr); //[3,2,1]


  1. Array.prototype.slice():截取数组,返回一个新数组,不改变原数组.

  2. Array.prototype.sort():排序数组,改变原数组,默认排序规则是将数组每一项转化为字符串,根据utf-16码升值排序.

  3. Array.prototype.splice():对数组进行增加、删除、替换元素,改变原数组.


// Array.prototype.slice();
const animals = ["ant", "bison", "camel", "duck", "elephant"];
console.log(animals.slice(2)); //["camel", "duck", "elephant"]
console.log(animals.slice(2, 4)); //["camel", "duck"]
console.log(animals.slice(-2)); //["duck", "elephant"]
console.log(animals.slice(2, -1)); //["camel", "duck"]
console.log(animals.slice()); //浅复制数组 ["ant", "bison", "camel", "duck", "elephant"]
// Array.prototype.sort();
const months = ["March", "Jan", "Feb", "Dec"];
months.sort();
console.log(months); // ["Dec", "Feb", "Jan", "March"];
const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1); //[1, 100000, 21, 30, 4]
array1.sort((a, b) => a - b); //升序
console.log(array1);
//Array.prototype.splice();
const arr = [1, 2, 3, 4, 5];
arr.splice(2, 2); //从index为2的位置开始删除两个元素[1, 2, 5];
arr.splice(2, 0, 3, 4); //从index为2的位置增加34两个元素 [1,2,3,4,5]
arr.splice(2, 2, 7, 8); //删除index为2位置的两个元素,并添加89两个元素 [ 1, 2, 7, 8, 5 ]

4.查找元素或索引方法



  1. Array.prototype.at():返回索引位置对应的元素,负索引从数组最后一个元素倒数开始.

  2. Array.prototype.find():查找符合条件的第一个元素,未找到则返回undefined,回调函数返回值为真则符合条件.

  3. Array.prototype.findIndex():查找符合条件第一个元素的索引,未找到则返回**-1**,回调函数返回值为真则符合条件.

  4. Array.prototype.findLast():从后往前查找符合条件的第一个元素,其余同理Array.prototype.find().

  5. Array.prototype.findLastIndex():从后往前查找符合条件第一个元素的索引,其余同理Array.prototype.findIndex().


// Array.prototype.at()
const arr = [1, 2, 3, 4, 5];
console.log(arr.at(0)); //1
console.log(arr.at(-1)); //5
const array = [
{ name: "jack", age: 15 },
{ name: "tom", age: 29 },
{ name: "bob", age: 23 },
];
// Array.prototype.find()
const obj = array.find((item) => {
 if (item.age > 18) {
   return true;
} else {
   return false;
}
}); //{ name: 'tom', age: 29 }
//Array.prototype.findIndex()
const objIndex = array.findIndex((item) => {
 if (item.age > 18) {
   return true;
} else {
   return false;
}
}); //1
// Array.prototype.findLast()
const lastObj = array.findLast((item) => {
 if (item.age > 18) {
   return true;
} else {
   return false;
}
}); //{name: 'bob', age: 23}
// Array.prototype.findLast()
const lastIndex = array.findLastIndex((item) => {
 if (item.age > 18) {
   return true;
} else {
   return false;
}
}); //2


  1. Array.prototype.indexOf():返回数组中给定元素第一次出现的下标,如果不存在则返回-1.

  2. Array.prototype.includes():在数组中查找指定元素,如果找到则返回true,如果找不到则返回false.


//Array.prototype.indexOf()
const arr = [1, 2, 6, 8, 9];
console.log(arr.indexOf(6)); //2
console.log(arr.indexOf(10)); //-1
//Array.prototype.includes()
console.log(arr.includes(6)); //true
console.log(arr.includes(10)); //-false

5.迭代方法


迭代方法非常常用,这里就不列举例子了.



  1. Array.prototype.forEach():对数组每一项元素执行给定的函数,没有返回值.

  2. Array.prototype.filter():过滤数组,创建符合条件的浅拷贝数组.

  3. Array.prototype.map():对数组每个元素执行给定函数映射一个新值,返回新数组.

  4. Array.prototype.every():检查数组所有元素是否符合条件,如果符合返回true,不符合返回false;

  5. Array.prototype.some():检查数组中是否有元素符合条件,如果有则返回true,不符合返回false

  6. Array.prototype.reduce():用指定函数迭代数组每一项,上一次函数返回值作为下一次函数初始值,返回最后一次函数的最终返回值.


6. 迭代器方法


这里就不赘述迭代器对象了.



  1. Array.prototype.keys():返回数组索引迭代器对象.

  2. Array.prototype.values():返回数组元素的迭代器对象.

  3. Array.prototype.entries():返回数组索引和元素构成的迭代器对象.


7.额外重要方法



  1. Array.isArray():判断是否是数组.


//都返回true 都是数组
console.log(Array.isArray([]));
console.log(Array.isArray(new Array()));
console.log(Array.isArray(Array.of(1, 2, 3)));
// 也可以用instanceof:true
console.log([] instanceof Array);
console.log(new Array() instanceof Array);
console.log(Array.of(1, 2, 3) instanceof Array);
console.log([].toString());
//惊喜:最后还可以使用Object.prototype.toString()
console.log(Object.prototype.toString.call([])); //[object Array]


  1. Array.prototype.toString():将数组去掉左右括号转化为字符串.


const array1 = [1, 2, "a", "1a"];
console.log(array1.toString()); // "1,2,a,1a"

作者:樊阳子
来源:juejin.cn/post/7288234800563961917
收起阅读 »

前端代码重复度检测

web
在前端开发中,代码的重复度是一个常见的问题。重复的代码不仅增加了代码的维护成本,还可能导致程序的低效运行。为了解决这个问题,有许多工具和技术被用来检测和消除代码重复。其中一个被广泛使用的工具就是jscpd。 jscpd简介 jscpd是一款开源的JavaScr...
继续阅读 »

在前端开发中,代码的重复度是一个常见的问题。重复的代码不仅增加了代码的维护成本,还可能导致程序的低效运行。为了解决这个问题,有许多工具和技术被用来检测和消除代码重复。其中一个被广泛使用的工具就是jscpd


jscpd简介


jscpd是一款开源的JavaScript的工具库,用于检测代码重复的情况,针对复制粘贴的代码检测很有效果。它可以通过扫描源代码文件,分析其中的代码片段,并比较它们之间的相似性来检测代码的重复度。jscpd支持各种前端框架和语言,包括HTML、CSS和JavaScript等150种的源码文件格式。无论是原生的JavaScript、CSS、HTML代码,还是使用typescriptscssvuereact等代码,都能很好的检测出项目中的重复代码。


开源仓库地址:github.com/kucherenko/jscpd/tree/master


如何使用


使用jscpd进行代码重复度检测非常简单。我们需要安装jscpd。可以通过npmyarn来安装jscpd


npm install -g jscpd

yarn global add jscpd

安装完成后,我们可以在终端运行jscpd命令,指定要检测的代码目录或文件。例如,我们可以输入以下命令来检测当前目录下的所有JavaScript文件:


jscpd .

指定目录检测:


jscpd /path/to/code

在命令行执行成功后的效果如下图所示:



简要说明一下对应图中的字段内容:




  • Clone found (javascript):
    显示找到的重复代码块,这里是javascript文件。并且会显示重复代码在文件中具体的行数,便于查找。




  • Format:文件格式,这里是 javascript,还可以是 scss、markup 等。




  • Files analyzed:已分析的文件数量,统计被检测中的文件数量。




  • Total lines:所有文件的总行数。




  • Total tokens:所有的token数量,一行代码一般包含几个到几十个不等的token数量。




  • Clones found:找到的重复块数量。




  • Duplicated lines:重复的代码行数和占比。




  • Duplicated tokens:重复的token数量和占比。




  • Detection time:检测耗时。




工程配置


以上示例是比较简单直接检测单个文件或文件夹。当下主流的前端项目大多都是基于脚手架生成或包含相关前端工程化的文件,由于很多文件是辅助工具如依赖包、构建脚本、文档、配置文件等,这类文件都不需要检测,需要排除。这种情况下的工程一般使用配置文件的方式,通过选项配置规范 jscpd 的使用。


jscpd 的配置选项可以通过以下两种方式创建,增加的内容都一致无需区分对应的前端框架。


在项目根目录下创建配置文件 .jscpd.json,然后在该文件中增加具体的配置选项:


    {
"threshold": 0,
"reporters": ["html", "console", "badge"],
"ignore": ["**/__snapshots__/**"],
"absolute": true
}

也可直接在 package.json 文件中添加jscpd


    {
...
"jscpd": {
"threshold": 0.1,
"reporters": ["html", "console", "badge"],
"ignore": ["**/__snapshots__/**"],
"absolute": true,
"gitignore": true
}
...
}

简要介绍一下上述配置字段含义:



  • threshold:表示重复度的阈值,超过这个值,就会输出错误报警。如阈值设为 10,当重复度为18.1%时,会提示以下错误❌,但代码的检测会正常完成。


ERROR: jscpd found too many duplicates (18.1%) over threshold (10%)


  • reporters:表示生成结果检测报告的方式,一般有以下几种:

    • console:控制台打印输出

    • consoleFull:控制台完整打印重复代码块

    • json:输出 json 格式的报告

    • xml:输出 xml 格式的报告

    • csv:输出 csv 格式的报告

    • markdown:输出带有 markdown 格式的报告

    • html:生成html报告到html文件夹

    • verbose:输出大量调试信息到控制台



  • ignore:检测忽略的文件或文件目录,过滤一些非业务代码,如依赖包、文档或静态文件等

  • format:需要进行重复度检测的源代码格式,目前支持150多种,我们常用的如 javascript、typescript、css 等

  • absolute:在检测报告中使用绝对路径


除此之外还有很多其他的配置,有兴趣的可以看源码文档中有详细的介绍。


检测报告


完成以上jscpd配置后执行以下命令即可输出对应的重复检测报告。运行完毕后,jscpd会生成一个报告,展示每个重复代码片段的信息。报告中包含了重复代码的位置、相似性百分比和代码行数等详细信息。通过这些信息,我们可以有针对性的进行代码重构。


jscpd ./src -o 'report'

项目中的业务代码通常会选择放在 ./src 目录下,所以可以直接检测该目录下的文件,如果是放在其他目录下根据实际情况调整即可。
通过命令行参数-o 'report'输出检测报告到项目根目录下的 report 文件夹中,这里的report也可以自定义其他目录名称,输出的目录结构如下所示:



生成的报告页面如下所示:


项目概览数据:



具体重复代码的位置和行数:



默认检测重复代码的行数(5行)和tokens(50)比较小,所以产生的重复代码块可能比较多,在实际使用中可以针对检测范围进行设置,如下设置参数供参考:



  • 最小tokens:--min-tokens,简写 -k

  • 最小行数:--min-lines,简写 -l

  • 最大行数:--max-lines,简写 -x


jscpd ./src --min-tokens 200 --min-lines 20 -o 'report'

为了更便捷的使用此命令,可将这段命令集成到 package.json 中的 scripts 中,后续只需执行 npm run jscpd 即可执行检测。如下所示:


"scripts": {
...
"jscpd": "jscpd ./src --min-tokens 200 --min-lines 20 -o 'report'",
...
}

忽略代码块


上面所提到的ignore可以忽略某个文件或文件夹,还有一种忽略方式是忽略文件中的某一块代码。由于一些重复代码在实际情况中是必要的,可以使用代码注释标识的方式忽略检测,在代码的首尾位置添加注释,jscpd:ignore-startjscpd:ignore-end 包裹代码即可。


在js代码中使用方式:


/* jscpd:ignore-start */
import lodash from 'lodash';
import React from 'react';
import {User} from './models';
import {UserService} from './services';
/* jscpd:ignore-end */

在CSS和各种预处理中与js中的用法一致:


/* jscpd:ignore-start */
.style {
padding: 40px 0;
font-size: 26px;
font-weight: 400;
color: #464646;
line-height: 26px;
}
/* jscpd:ignore-end */

在html代码中使用方式:



<meta data-react-helmet="true" name="theme-color" content="#cb3837"/>
<link data-react-helmet="true" rel="stylesheet" href="https://static.npmjs.com/103af5b8a2b3c971cba419755f3a67bc.css"/>
<link data-react-helmet="true" rel="apple-touch-icon" sizes="120x120" href="https://static.npmjs.com/58a19602036db1daee0d7863c94673a4.png"/>
<link data-react-helmet="true" rel="icon" type="image/png" href="https://static.npmjs.com/b0f1a8318363185cc2ea6a40ac23eeb2.png" sizes="32x32"/>


总结


jscpd是一款强大的前端本地代码重复度检测工具。它可以帮助开发者快速发现代码重复问题,简单的配置即可输出直观的代码重复数据,通过解决重复的代码提高代码的质量和可维护性。


使用jscpd我们可以有效地优化前端开发过程,提高代码的效率和性能。希望本文能够对你了解基于jscpd的前端本地代码重复度检测有所帮助。




看完本文如果觉得有用,记得点个赞支持,收藏起来说不定哪天就用上啦~


作者:南城FE
来源:juejin.cn/post/7288699185981095988
收起阅读 »

H5车牌输入软键盘

web
前言 公司的业务背景是个大型园区,不可避免的要接触太多与车辆收费相关的业务,于是就有了这个车牌输入软键盘。对于车牌,用户手动输入的是不可信的,而且车牌第一位的地区简称打字输入实在是太麻烦,所以界定用户的输入内容,才能让双方都更加方便。 预览: pxsgdsb...
继续阅读 »

前言


公司的业务背景是个大型园区,不可避免的要接触太多与车辆收费相关的业务,于是就有了这个车牌输入软键盘。对于车牌,用户手动输入的是不可信的,而且车牌第一位的地区简称打字输入实在是太麻烦,所以界定用户的输入内容,才能让双方都更加方便。



预览: pxsgdsb.github.io/licensePlat… (请使用移动端打开)


github:github.com/pxsgdsb/lic…


gitee:gitee.com/PxStrong/li…



screenshots.gif

实现


因为车牌内容是固定的,所以直接写死在元素内。但是,为了提高组件的复用性,需要做一些简单的封装


; (function ($) {
function LicensePlateSelector() {
// 输入框元素
this.input_dom = `<ul class="plate_input_box">
<li class="territory_key" data-type="territory_key"></li>
<li style="margin-right:.8rem;"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li data-end="end"></li>
<li data-cls="new_energy" data-end="end" class="new_energy">
<span>新能源</span>
</li>
</ul>`

// 键盘元素
this.keyboard_dom = `...省略`
}
/**
* 初始化 车牌选择器
* @param {string} config.elem 元素
* @param {string} config.value 默认填充车牌
* @param {number} config.activeIndex 默认选中下标 (从0开始)
* @param {function} inputCallBack 输入事件回调
* @param {function} deleteCallBack 键盘删除事件回调
* @param {function} closeKeyCallBack 关闭键盘事件回调
*/

LicensePlateSelector.prototype.init = function (config) {
config = {
elem: config.elem,
value: config.value || "",
activeIndex: config.activeIndex || false,
inputCallBack: config.inputCallBack || false,
deleteCallBack: config.deleteCallBack || false,
closeKeyCallBack: config.closeKeyCallBack || false,
}
this.elemDom = $(config.elem);
this.elemDom.append(this.input_dom);
this.elemDom.append(this.keyboard_dom);
// 监听输入
this.watchKeyboardEvents(function(val){
// 键盘输入回调
if(config.inputCallBack){config.inputCallBack(val);}
},function(){
// 键盘删除事件回调
if(config.deleteCallBack){config.deleteCallBack();}
},function(){
// 关闭键盘事件回调
if(config.closeKeyCallBack){config.closeKeyCallBack();}
})
// 输入默认车牌
if (config.value) {
this.elemDom.find(".plate_input_box li").each(function (index) {
if (config.value[index]) {
$(this).text(config.value[index])
}
})
}
// 选中默认下标
if(config.activeIndex){
this.elemDom.find(".plate_input_box li").eq(config.activeIndex).click();
}
};
})(jQuery);

watchKeyboardEvents()函数用于在元素创建完成后创建事件监听


/**
* 监听键盘输入
* @param {function} inputCallBack 输入事件回调
* @param {function} deleteCallBack 键盘删除事件回调
* @param {function} closeKeyCallBack 关闭键盘事件回调
*/

LicensePlateSelector.prototype.watchKeyboardEvents = function(inputCallBack,deleteCallBack,closeKeyCallBack) {
let _this = this
// 输入框点击
_this.elemDom.find(".plate_input_box li").click(function (event) {
// 显示边框
$(".plate_input_this").removeClass("plate_input_this");
$(this).addClass("plate_input_this")
// 弹出键盘
// 关闭别的键盘
$(".territory_keyboard").css("display","none")
$(".alphabet_keyboard").css("display","none")
if ($(this).attr("data-type") && $(this).attr("data-type") == "territory_key") {
if (_this.elemDom.find(".territory_keyboard").css("display") == "none") {
_this.elemDom.find(".alphabet_keyboard").animate({ bottom: "-50rem" }).hide()
_this.elemDom.find(".territory_keyboard").show().animate({ bottom: 0 })
}
} else {
if (_this.elemDom.find(".alphabet_keyboard").css("display") == "none") {
_this.elemDom.find(".territory_keyboard").animate({ bottom: "-50rem" }).hide()
_this.elemDom.find(".alphabet_keyboard").show().animate({ bottom: 0 })
}
}
// 点击新能源
if ($(this).attr("data-cls") == "new_energy") {
$(this).empty().removeClass("new_energy").attr("data-cls", "")
}
event.stopPropagation(); // 阻止事件冒泡
})

// 地域键盘输入事件
......
}

使用时html只需要创建一个根元素,js输入配置项,自动渲染组件。


<div id="demo"></div>
<script>
let licensePlateSelector = new LicensePlateSelector();
// 初始化
licensePlateSelector.init({
elem: "#demo", // 根元素id
value: "湘A", // 默认填充车牌
activeIndex: 2, // 默认选中下标 (从0开始,不传时,默认不选中)
inputCallBack:function(val){ // 输入事件回调
console.log(val);
let plate_number = licensePlateSelector.getValue(); // 获取当前车牌
console.log(plate_number);
},
deleteCallBack:function(){ // 键盘删除事件回调
let plate_number = licensePlateSelector.getValue(); // 获取当前车牌
console.log(plate_number);
},
closeKeyCallBack:function(){ // 关闭键盘事件回调
console.log("键盘关闭");
},
})
</script>

参数


参数类型必填说明示例值
elemString指定元素选择器"#demo"
valueString默认填充车牌"湘A"
activeIndexnumber当前输入框下标,从0开始,不传时,默认不选中2
inputCallBackfunction输入事件回调函数,返回参数:当前输入的值
deleteCallBackfunction键盘删除事件回调函数
closeKeyCallBackfunction关闭键盘事件回调函数

方法


getValue 获取当前车牌


let plate_number = licensePlateSelector.getValue();

setValue 设置车牌


licensePlateSelector.setValue("粤A1E9Q3");

clearValue 清空车牌


licensePlateSelector.clearValue();

END


如果觉得对你还有些用,顺手点一下star吧。


作者:彭喜迎MAX
来源:juejin.cn/post/7288609174124576783
收起阅读 »

喂,鬼仔!你竟然还在瞒着我偷偷使用强制相等

web
我们都知道JavaScript有== (强制相等)和===(严格相等)运算符进行比较。但你可能不知道它们两个究竟有什么不同,并且更重要的是,在 js 引擎中使用它们的时候发生了什么? 前面我们提到 == 是强制比较。强制意味着 VM 试图将进行比较的双方强制...
继续阅读 »

我们都知道JavaScript有== (强制相等)和===(严格相等)运算符进行比较。但你可能不知道它们两个究竟有什么不同,并且更重要的是,在 js 引擎中使用它们的时候发生了什么?


前面我们提到 == 是强制比较。强制意味着 VM 试图将进行比较的双方强制为相同的类型然后查看它们是否相等。以下我们列举了一些自动被强制相等的例子:


"1" == 1 // true
1 == "1" // true
true == 1 // true
1 == true // true
[1] == 1 // true
1 == [1] // true


你要知道,强制是对称的,如果a == b为真,那么b == a也为真。另一方面,只有当两个操作数完全相同时===才为真(除了Number.NaN)。因此,上面的例子都真实的情况下都是假真 (即,在 === 的情况下是 false 的)。



为什么强制相等有这样的问题,这要归咎与强制相等的规则。


强制相等的规则


实际的规则很复杂(这也是不使用==的原因)。但是为了显示规则有多么复杂,我通过使用===实现了==,带大家看看强制相等的规则到底多复杂:


function doubleEqual(a, b) {
if (typeof a === typeof b) return a === b;
if (wantsCoercion(a) && isCoercable(b)) {
b = b.valueOf();
} else if (wantsCoercion(b) && isCoercable(a)) {
const temp = a.valueOf();
a = b;
b = temp;
}
if (a === b) return true;
switch (typeof a) {
case "string":
if (b === true) return a === "1" || a === 1;
if (b === false) return a === "0" || a === 0 || a == "";
if (a === "" && b === 0) return true;
return a === String(b);
case "boolean":
if (a === true) return b === 1 || String(b) === "1";
else return b === false || String(b) === "0" || String(b) === "";
case "number":
if (a === 0 && b === false) return true;
if (a === 1 && b === true) return true;
return a === Number(String(b));
case "undefined":
return b === undefined || b === null;
case "object":
if (a === null) return b === null || b === undefined;
default:
return false;
}
}

function wantsCoercion(value) {
const type = typeof value;
return type === "string" || type === "number" || type === "boolean";
}

function isCoercable(value) {
return value !== null && typeof value == "object";
}

这是不是太复杂了,我甚至不确定这是正确的! 也许有你知道更简单的算法。


但有趣的是,你会发现在上面的算法中,如果其中一个操作数是对象,VM 将调用. valueof()来允许对象将自身强制转换为基本类型。


强制转换的成本


上面的实现很复杂。那么===== 要多浪费多少性能呢? 看看下面这张图,我用基准测试做了一个对比:


image.png


其中,图表中越高表示越快(即,每秒操作次数越多)。


首先我们来讨论数字数组。当 VM 注意到数组是纯整数时,它将它们存储在一个称为PACKED_SMI_ELEMENTS的特殊数组中。在这种情况下,VM 知道将 == 处理为 === 是安全的,性能是相同的。这解释了为什么在数字的情况下,===== 之间没有区别。但是,一旦数组中包含了数字以外的内容,== 的情况就变得很糟糕了。


对于字符串,===== 的性能下降了 50%,看起来挺糟的是吧。


字符串在VM中是特殊的,但一旦我们涉及到对象,我们就慢了 4 倍。看看 mix 这栏,现在速度减慢了 4 倍!


但还有更糟的。对象可以定义 valueOf,这样在转换的时候可以将自己强制转换为原语。虽然在对象上定位属性可以通过内联缓存,内联缓存让属性读取变得快速,但在超大容量读取的情况下可能会经历 60 倍的减速,这可能会使情况更糟。如图中最坏情况(objectsMega)场景所示,===== 慢15 倍!


有其他使用 == 的理由吗


现在,=== 非常快! 因此,即使是使用 === 的15倍减速,在大多数应用程序中也不会有太大区别。尽管如此,我还是很难想出为什么要使用 == 而不是 === 的任何理由。强制规则很复杂,而且它存在一个性能瓶颈,所以在使用 == 之前请三思。


作者:编程轨迹
来源:juejin.cn/post/7216894387992477757
收起阅读 »

国庆,与山重逢

重庆多山,重庆的县城也多山。从主城回到重庆最东北,是横穿一座又一座山,是横跨一座又一座桥。桥不跨江,是用来连接两座山的。 每当向不很了解重庆的朋友分享我的回家路时,他们总不相信:“重庆不是一个直辖市么?你回家怎么可能要8小时的?” 我回家是真需要至少8小时的。...
继续阅读 »

重庆多山,重庆的县城也多山。从主城回到重庆最东北,是横穿一座又一座山,是横跨一座又一座桥。桥不跨江,是用来连接两座山的。


每当向不很了解重庆的朋友分享我的回家路时,他们总不相信:“重庆不是一个直辖市么?你回家怎么可能要8小时的?”


我回家是真需要至少8小时的。国庆第一天上午11点出发,晚上9点回到山上家中,除去路上堵车的两小时,全程整好8小时。


即便回家很远,回家的路很难走,我依然很喜欢回家。


我从没仔细想过自己为什么喜欢回家,只是每年国庆劝说阿妮回家用的说辞总一样:“爷爷奶奶外公外婆都在家。”


我的母亲今年也在家,所以今年国庆,绝大部分时间是在山上度过的。


大概是10年前,绝大部分“高山”——单纯的字面意思,山的高处——住户搬到低山,高山上的住户,只剩十几家。山上村子住的人家变少,便给了山很大的自由。


原有的山路,平日里少有人行走,路面长满各式各样我全不记得名字的草,郁郁葱葱,互相缠绕。路旁斜坡新长出许多很小的树,它们不管旁边是否有路,只向空旷处挤,挤着挤着,就没了路。如果从没走过这些路,是肯定看不出来曾经有过路的。稍远处老些的大树,掉落的枯的枝丫,触手可及,捡柴再不用去很远地方,只沿着路挨着捡便好。


原有的山田,在退耕还林时全种上了果树,核桃与板栗。不知是水土不服还是品种不佳,核桃树只剩下些印象,田中长起来的,只有板栗。十多年过去,板栗成了山田里的佼佼者,每一棵树的主干,都有大腿那么粗。


搬走的人家多了,没搬走的也大都外出打工只在过年时回家,于是还喂猪的人家更少,山中落叶不再被收集回家为猪铺床。再走远些,林间落叶铺了一层又一层,厚厚的,挡住菌子的冒头路线。


图片


母亲一大早沿路捡的菌子


菌子,是山中的特产,春天有,夏天有,秋天也有。母亲说:“秋天菌子不闹人(‘闹人’是无毒的意思),最好吃。春夏的菌子就要注意,有些吃不得,要挑一哈。”


捡菌子的最好时机,是下雨后的第二天,有些刚冒出头,有些刚长成型。长过(腐烂)生蛆?此时是不会的。


母亲是捡菌子的好手,似乎所有菌子她都认识。我没有学到捡菌子这门手艺,只在菌子回家后跟着母亲洗菌时认识几个品类。


石灰菌是白色的,山里最多,平均体型最大,吃起来脆脆的不爽口。


红菌子好吃,但需要仔细辨认,有许多其它红颜色的菌是不能吃的,能吃的要肥厚一些。


蜂窝菌伞把内部像蜂窝,伞面滑滑的,只在秋天有。它是我最喜欢吃的菌子,炒好的成品入口也滑滑的,一嗦就进了肚;如果吃的慢些,咀嚼两次,又会发现它也是脆脆的;蜂窝菌,只放油、盐、大蒜和辣椒,味道就已经很好。


我听过的名字,还有枞树菌、紫檀菌,它们并不多见,我暂且只记得名字不记得长相与口感。


我们三个帅的计划,是国庆第二天上山捡菌子。


计划依据天气预报——国庆第二天小雨,后面几天,要么是中雨要么是大雨——制定。天气预报不准确,真正的小雨,只在下午出现一小会儿。我极不愿意极不建议天黑走山路,于是宝帅的下山时间,定在下午6点。


雨真正变小的时间,是下午4点半,一个半小时时间,四个人一起,能从山中收获些什么呢?


答案是半背板栗与一碗菌子。


四个人,两个筐筐,一个装菌子一个装板栗;一把弯刀一把火钳,弯刀用来开路——砍去那些挤在路上的树枝与刺条,火钳用来捡板栗的有刺包子;再背一个背篓,万一筐筐装不下呢?


时间很紧,意犹未尽。


母亲将板栗硬塞给宝帅一行,留下的一碗菌子,是当晚桌上的一盘菜。


图片


炒熟的菌


菌的做法,是简单的。菌子去跟,摘掉树叶,洗净泥巴,煮半小时;捞出用凉水泡一泡,将大的菌撕成小的适合入口形状,再洗再煮再捞出;锅内放油放蒜放辣椒,炒香装盘。


菌的味道极好。


图片


八月瓜壳


我知道的能在山上长出果子的果树,有苹果、梨、杏、枣、桃、山楂、板栗和八月瓜。苹果、梨、杏、枣、桃和山楂,都需要人的维护——剪枝或是嫁接,不维护的果树,任它自然生长,要么过两年枯掉,要么果小不好吃。


不用维护的,是板栗和八月瓜。八月瓜纯野生,我见的不多,但板栗,是一直都存在的。


十几年前,高山上的人家很多,捡板栗需要走很远,走到悬崖边,走到“弯里”(山的最里面,很大一片山里只有一户人家),走到绝大部分人不愿去的地方。


我印象中的第一次全家捡板栗,是高中时的某个国庆,母亲和贵嬢嬢,带着各自小孩,背背篓提筐筐不带弯刀,一大群人去弯里。


弯里的板栗很小,不像新长起来的山田里的品种。


飞包土是我们家最远、最高的一块田,它是退耕还林时被最先“退”掉的,田里栽的树,是板栗。时间过去十几年,山田真的变回树林,板栗成了山里的树。


国庆离开家的那天上午不下雨,我和阿妮上飞包土,再捡半筐板栗。


图片


刚洗过的板栗


今年国庆,与山重逢。


作者:我要改名叫嘟嘟
来源:juejin.cn/post/7288163743035965440
收起阅读 »

唱衰这么多年,PHP 仍然还是你大爷!

web
PHP 是个庞然大物。 尽管有人不断宣称 PHP “即将消亡”。 但无法改变的事实是:互联网依然大量依赖 PHP。本文将通过大量的数据和事实告诉你为何 PHP 仍然在统治着互联网,你大爷仍然还是你大爷。 统计数据 PHP 仍然是首选编程语言 根据 W3 ...
继续阅读 »

PHP 是个庞然大物。


尽管有人不断宣称 PHP “即将消亡”。



但无法改变的事实是:互联网依然大量依赖 PHP。本文将通过大量的数据和事实告诉你为何 PHP 仍然在统治着互联网,你大爷仍然还是你大爷



统计数据


PHP 仍然是首选编程语言



根据 W3 Techs 对全球前 1000 万个网站使用的编程语言分析,我们可以看到:



  • PHP 占比 77.2%

  • ASP 占比 6.9%

  • Ruby 占比 5.4%


基于 PHP 的内容管理框架


绝大多数公共网站都是通过 PHP 和 CMS 来构建的。根据市场份额,12 大 CMS 软件中有 8 个是用 PHP 编写的。下面的数据来自 W3 Techs 对前 1000 万个网站的 CMS 使用情况调查,每个百分点代表前 1000 万个网站中的 10 万网站。



  • [PHP] WordPress 生态系统 (63%)

  • [Ruby] Shopify

  • Wix

  • Squarespace

  • [PHP] Joomla 生态系统 (3%)

  • [PHP] Drupal 生态系统 (2%)

  • [PHP] Adobe Magento (2%)

  • [PHP] PrestaShop (1%)

  • [Python] Google Blogger

  • [PHP] Bitrix (1%)

  • [PHP] OpenCart (1%)

  • [PHP] TYPO3 (1%)



不得不说,Wordpress 在内容管理领域依然站有绝对的统治地位。


PHP 在电商领域的应用


根据 BuiltWith 2023 年 8 月对在线商店的报告,我们可以看到 PHP 在电商领域仍然占统治地位:




趣闻轶事


Kinsta 发表了一篇文章,证明 PHP 仍然很快,仍然很活跃,仍然很流行:



早在 2011 年,人们就一直在宣称 PHP 已死。但事实是,PHP 7.3 的请求处理速度是 PHP 5.6 的 2-3 倍,而 PHP 8.1 则更快。正因为 PHP 的普及,我们可以很轻松地招聘到有经验的 PHP 开发者。



Vimeo 工程师 Matt Brown 在《这不是遗留代码,而是 PHP》一文中表示:



PHP 从未停止创新。尽管我们计划将 500,000 行的 PHP 代码划分为多个 [服务],但最终这些建议都没有被采纳。


Vimeo 自 2004 年以来规模扩大了数倍,我们的 PHP 代码库也是如此。



Ars Technica 发布了一个包含历史数据的 W3 Techs 报告,证明 PHP 仍然遥遥领先



尽管 PHP 有许多臭名昭著的怪癖,但它似乎还能活很久。从 2010 年的 72.5% 市场份额增长到今天的 78.9% 市场份额,目前还没有任何明显的竞争对手能让 PHP 感到威胁




针对 Python 创始人 Guido van Rossum 的一个采访播客中,Lex Fridman 如是说:



Lex: 目前互联网的大部分后端服务仍然是用 PHP 写的


Guido: 没错!



Daniel Stenberg 在其年度 Curl 用户调查(第 18 页)中统计了用户使用 curl 的方式。直接使用 curl 命令行的用户占比最高(78.4%),用户最熟悉的方式就是在 PHP 中使用 curl,自 2015 年调查开始以来一直都是这个结果。2023 年的调查报告显示有 19.6% 的用户在 PHP 中使用 curl。



curl (CLI) 78.4%, php-curl 19.6%, pycurl 13%, […], node-libcurl 4.1%.



Ember.js 虽然起源于 Ruby 社区,但作为一个前端框架,它可以与任何后端配合使用。Ember 的社区调查报告显示,PHP 是受访者第三喜欢的选项,仅次于 Ruby 和 Java。



Ember 的调查还询问了一些通用的行业问题。例如,有 24% 的受访者表示他们的基础设施都是“自托管”,而不是依赖于主流的云服务提供商。虽然这项调查本身不能完全代表整个行业,但结果仍可能会让人大吃一惊,特别是对那些依赖社交媒体和会议演讲来了解商业现状的人来说更是如此。对于企业来说,现在准备好云退出战略(例如 NHS)比以往任何时候都更加重要。你可以阅读 Basecamp 的文章了解云退出战略是如何为他们每年节省数百万美元的。


大规模 PHP 应用


上述统计数据衡量了不同网站和公司的数量,其中绝大多数是基于 PHP 构建的。但所有这些只告诉我们它们的规模在前 1000 万名之内。那前 500 名呢?


Jack Ellis 在《Laravel 能否扩展?》这篇文章中指出,你不应该仅根据每秒可以处理的请求数量来做选择。大部分业务都不太可能达到那个水平,而且还会面临很多其他瓶颈。但事实证明,PHP 是可以扩展到这一水平的语言之一。




当看到我们的软件(基于 Laravel 构建的 Fathom Analytics)增长迅猛时,我们从未怀疑过“这个框架是否能够扩展?”。


我与多家企业合作过,他们利用 Laravel 支撑整个业务运营。像 Twitch、Disney、New York Times、WWE 和 Warner Bros 这样的公司也在他们的多个项目中使用 Laravel。Laravel 能够轻松应对大规模的应用需求。



Vimeo 工程师 Matt Brown 在《这不是遗留代码,而是 PHP》一文中强调:




可以很明确地告诉你们,PHP 还是你大爷。Vimeo 在 PHP 方面的持续成功就是证明,在 2020 年它仍然是快速发展的公司的绝佳工具。



Vimeo 还以开发流行的 PHP 静态分析工具 Psalm 而闻名。


Slack 公司首席架构师 Keith Adams 在《认真对待 PHP》一文中提到:




Slack 服务端大部分应用逻辑都是由 PHP 来执行的。


相比于 PHP 的优势而言(通过故障隔离减少 bug 成本;安全并发;高吞吐量),PHP 存在的问题可以忽略不计。



我们再分析一下 W3 Techs 的报告,分析部分业务比较单一的公司的规模。规模最大的是 WordPress,它驱动着 Automattic 的 WordPress.com。每月有 200 亿次页面访问(Alexa 全球排名 55)。


如果我们继续往下看,来到占市场份额 0.1% 的条目,可以看到大量的网站都是靠 PHP 系统来支撑的,PHP 仍然是 10w 小网站的首选框架。



MediaWiki维基百科背后的平台,每月有 250 亿的页面浏览量(Alexa 排名 12)。同时 MediaWiki 还驱动着 Fandom(每月有 20 亿的页面浏览量,Similarweb 排名 44)和 WikiHow(每月有 1 亿访问者,Alexa 排名 215)。



除此之外还有一大批互联网公司由 PHP 驱动,例如 Facebook(Alexa 排名 7)、Etsy(Alexa 排名 66)、Vimeo(Alexa 排名 165)和 Slack(Similarweb 排名 362)。


Etsy 之所以引人关注,是因为它有高比例的活跃会话和动态内容。这与维基百科或 WordPress 不同,后者可以从静态缓存中提供大多数页面视图。这意味着尽管规模相似,但 Etsy 的 PHP 应用程序更容易受到高流量的影响。


Etsy 也是 PHP 创始人 Rasmus Lerdorf 的东家。他有时会在技术分享中展示 Etsy 的代码库片段。(极客旁注:他在 2021 年的现代 PHP 讲座中解释了 Etsy 是如何使用 rsync 进行部署的,就像 Wikipedia 在过去 10 年使用 Scap 一样)。Etsy 的官方博客偶尔会提到他们对模块化 PHP 单体的工作进展,例如 Plural 本地化。有时也会放出详细的 Etsy 站点性能报告



很高兴地告诉大家,升级到 PHP7 之后,本季度整个网站的性能都得到了提高,所有页面的性能都有了显著的提升。



我的观点


大多数人认为,PHP 社区似乎在公共舆论中占据的空间不大。无论是 PHP 核心开发者 , 还是 PHP 软件包(例如 Laravel、Symfony、WordPress、Composer 和 PHPUnit)的作者,亦或是日常工作中使用 PHP 的普通工程师,我们很少在社交媒体上的争论中看到他们的身影。


你也很少看到我们在会议上做演讲,宣称某个技术栈“绝对会”为你的公司带来裨益。如果你听了某些 JavaScript 框架粉丝的演讲,你可能会认为大多数公司今天都在使用他们的技术栈。


我不是说 JavaScript 不好,而是某些人在没有考虑技术或商业需求的前提下给出了“xxx 最好”的断言。这是一种过度营销,你怎么知道它最好?你跟别的语言比较过了吗?


我也不是说 JavaScript 没有用武之地,我们要辩证地看待世间万物。你可以分享你的经验和成果,比如哪些行得通,哪些行不通。要持续探索、持续创新、持续分享,持续推动人类前进。这就是自由软件的精神!


你可能看过《The Market for Lemons 》和《A Historical Reference of React Criticism》这两篇文章,他们都指出了 JS 的问题。但是 ... React 仅占有 3% 的市场份额。再加上其他的小框架(Vue、Angular、Svelte),这个数字才达到 5%。而基于 Node.js 的 Web 服务也仅占有 3% 的市场份额。这是否意味着超过 90% 的人都错过了 PHP?


别忘了,这 5% 代表了 50 万个主要网站,这是一个巨大的数字。Node.js 有自己的优势(实时消息流)。但是,Node.js 也有其弱点(阻塞主线程)。另外要强调一点:市场份额并不能完全反映规模。你可能驱动着排名前 1% 的几个大型组织,也可能驱动着排名后 1% 的组织。或者像 WordPress 那样同时支撑排名前 1% 和其他 4000 万个网站。


结论


无论是老公司还是小公司,无论其规模大小,可能都没有使用我们在公共场所经常听到的技术栈。如果不考虑个人项目和烧钱的初创公司,其他公司的这个现象更为明显。


对于正在成长和持续经营的企业来说,PHP 是否能够成为企业首选的前三名语言?当一个企业和其团队在扩大规模时,编程语言是否完全不重要?我们不得而知。


我只知道如今有许多企业都在使用 PHP,而 PHP 已被证明是一种可持续的选择,它经受住了时间的考验。例如,像 Fathom 这样的新公司,在短短三年内就实现了盈利。正如 Fathom 的文章所说,大部分公司的业务永远达不到那种规模。不过话又说回来,即使面对大规模的业务,PHP 仍然是一种经济可持续的选择


那么问题来了,PHP 是唯一的选择吗?当然不是。


有的语言速度更快(Rust),有的语言社区规模更大(Node.js),或者编译器更成熟(Java),但这往往会牺牲其他价值。


PHP 达到了某种柔中取刚的平衡点。它速度很快,社区规模较大语法现代化开发活跃,易于学习,易于扩展,并且拥有一个庞大的标准库。它可以在大规模场景下提供高效和安全的并发,而又没有异步复杂性或阻塞主线程的问题。由于平台稳定,加上社区重视兼容性和低依赖性,它的维护成本往往较低。


当然,每个人的需求不尽相同,但想要达到上述的这种平衡点,PHP 是少数几个能满足需求的软语言之一。除此之外还有哪个语言可以做到?


作者:米开朗基杨
来源:juejin.cn/post/7288963080855617573
收起阅读 »

离开了浪浪山,简直不要太爽

web
今年年初的时候,《中国奇谭》火了,与其说是《中国奇谭》火了,还不如说是这个动漫和普通打工人太有共鸣了,动漫里面的小猪妖是很多普通打工人的写照,毕业进入了父母亲戚以为很不错的工作,领着一份不多不少的工资,每天要处理各种工作上的事情,事情比较多的时候,还需要经常加...
继续阅读 »

今年年初的时候,《中国奇谭》火了,与其说是《中国奇谭》火了,还不如说是这个动漫和普通打工人太有共鸣了,动漫里面的小猪妖是很多普通打工人的写照,毕业进入了父母亲戚以为很不错的工作,领着一份不多不少的工资,每天要处理各种工作上的事情,事情比较多的时候,还需要经常加班。每个人都想和小猪妖一样离开浪浪山,不过最近我却离开了浪浪山。


公司裁员


准确的说是公司裁员了。人事通知我,说去下会议室,当时我就有预感到是要裁员了,因为之前公司就开始裁员了。一开始就是人事主管就说:最近工作怎么样?我就猜到了基本就是要裁员了。后面赔偿也符合我的预期。谈好了赔偿,做了工作的交接,和几个同事吃了一个饭,就和这个工作了几年的公司拜拜了。


开始的时候也是挺不适应的,自从大学毕业之后,一直都是有规律的上班生活,每个月都有一份固定的工资领,能维持日常开销,多余的钱投投资,日子过得也还行。忽然一下子没了工作,意味着就没有了收入了,要为下个月的房租担心了,不过好在赔偿金还能维持几个月。


今年行情普遍不太好,身边也有失业的朋友,有的找了几个月还没有找到工作。有的朋友还说好的公司面试基本都要二本以上和三年工作以下的面试,总体来说要求还是比较严格的,如果不出去面试,也不会意识到现在就业行情的严峻。后面索性就先玩玩吧,去周边走走、去附近的香港走走。


周边逛逛


首先就准备去盐田那边玩,经常看小红书有人分享那边的打卡地方,有海上图书馆,打定主意就出发。路过一个地铁口,看到一些可爱的动漫,灌篮高手、海贼王。



还有可爱的一个公交车,这个公交完美的贴合的墙壁上,门框刚好做成一个上下的车门,设计的比较巧妙。



之前上班的时候,走路的都是匆匆忙忙的,上班都比较辛苦,周末都基本就用来补觉休息。出门人也比较多,现在人都比较少,慢慢走,欣赏沿途的风景




坐了一个小时的地铁到了海山地铁站,映入眼帘就是清澈的海水,远离的城市的喧嚣,欣赏自然的美景。往里面走就看到了海上图书馆,环境还是挺不错的,海水比深圳湾的清澈多了。




沿着上面的海边一直散步,享受这海风吹拂的感觉,小雨淅淅沥沥的下,听着下雨的声音,一边走,一望无际的白云和天空,让人身体特别放松。






**程序员都是脑力工作为主,坐在工位上一坐就是几个小时,运动量比较少,都是固定的上下班,周末也基本是休息。**不过固定的生活模式过久了就会感觉很单调和平淡,每天都生活的都是复制,也会让人感觉很无聊,所以还是要多出去走走,体验一下不一样的生活。



雨天爬山


去玩海边之后,之后一直在下雨,之前也经常爬山,不过都是天气不错的时候爬的,这次就尝试一下雨天爬山吧。


因为开始爬山的是下午 2 点多,人不是很多,上山看到了很多下山的人。一路上也没什么人了。





快到山顶的时候,就开始下雨了,天也变暗了,雾也越来越大了。



上山的时候还能看到山下的房子,现在都看不请了。还以为误入衡山了。




在亭子上躲雨休息,随着天越来越暗,山下的灯光一点点打开,路上的车灯,路边的路灯。直到点亮所有的灯光,在马路上形成一道靓丽的风景线。



后面还去了各种公园,还去了一趟香港,再去了一趟香港大学。可以说这几周的经历比我上几年的经历都多


不上班真爽


不用每天上班,不用处理各种问题,也没有时间焦虑症(每天到哪个点就要上班,哪个点就要下班),这段时间完全不需要考虑时间的问题,想去哪里就可以立刻去哪里。不需要请假,不需要调休,晚上玩的比较晚了也不用担心第二天要早起上班起不来。不需要为工作而烦恼,只做自己想做的事情。


上面不是讲了去海边玩吗,走海边走路的时候,走着走着,竟然感觉到自己饿了,很难得有这种感觉。只有读书的时候,在外面运动了很久才会感觉的饥饿。


目的性不强的做事,也没有时间上的焦虑。没有压力的做事才是最自然的、最舒服、最享受的做事


失业焦虑吗


被通知裁员的时候,虽然心里有些准备,但是真的听到被裁的时候,心里还是有些焦虑,特别是现在就业行情也不太好,感觉找工作还是有些困难的。 习惯了每天按部就班的上班,完成各种工作上的任务。周末放假偶尔出去玩玩,休息。基本都没有太大的变化。不过心里也不是很焦虑,对自己的技术还是挺有信心,坚持写文章,写 Github,扩大自己的影响力。工作上也比较努力、认真。博客写了快两年了,每天都在积累,阅读量最高的都有十万多了,有了一些积累,心里也更有底气了。



其实给公司打工的同时也要给自己的打工,在工作中一般有问题就需要立刻去解决,解决之后及时的总结和归纳,做事的同时也要积累的自己的经验。积累的越多,自己做事也就更快,做事也更有章程了。


现在自己也是把简历改好,投投简历。没有工作也适当的放松放松,去周边城市旅旅游。有面试就去面试。


写在最后


现在就业行情不太好,打工人还是需要有被裁员的准备。现在可能很多公司给打工人更多的压力。这时候就需要放平自己的心态,尽量把自己的工作做好。同时也要多做积累,多做输出,未雨绸缪。有工作的就好好工作,尽量提高自己的能力,能力提高了,才有有更多的成长。失业的也不要气馁,多投简历,降低消费。


无论有没有离开浪浪山,都需要努力并自信的生活。


作者:小码A梦
来源:juejin.cn/post/7288602155111563264
收起阅读 »

你敢信?比 setTimeout 还快 80 倍的定时器

web
起因 很多人都知道,setTimeout是有最小延迟时间的,根据MDN 文档 setTimeout:实际延时比设定值更久的原因:最小延迟时间中所说: 在浏览器中,setTimeout()/setInterval() 的每调用一次定时器的最小间隔是 4ms,这...
继续阅读 »

起因


很多人都知道,setTimeout是有最小延迟时间的,根据MDN 文档 setTimeout:实际延时比设定值更久的原因:最小延迟时间中所说:



在浏览器中,setTimeout()/setInterval() 的每调用一次定时器的最小间隔是 4ms,这通常是由于函数嵌套导致(嵌套层级达到一定深度)。



HTML Standard规范中也有提到更具体的:



Timers can be nested; after five such nested timers, however, the interval is forced to be at least four milliseconds.



简单来说,5 层以上的定时器嵌套会导致至少 4ms 的延迟。


用如下代码做个测试:


let a = performance.now();
setTimeout(() => {
let b = performance.now();
console.log(b - a);
setTimeout(() => {
let c = performance.now();
console.log(c - b);
setTimeout(() => {
let d = performance.now();
console.log(d - c);
setTimeout(() => {
let e = performance.now();
console.log(e - d);
setTimeout(() => {
let f = performance.now();
console.log(f - e);
setTimeout(() => {
let g = performance.now();
console.log(g - f);
}, 0);
}, 0);
}, 0);
}, 0);
}, 0);
}, 0);

在浏览器中的打印结果大概是这样的,和规范一致,第五次执行的时候延迟来到了 4ms 以上。


2021-05-13-21-04-16-067254.png


探索


假设就需要一个「立刻执行」的定时器呢?有什么办法绕过这个 4ms 的延迟吗,在 MDN 文档的角落里有一些线索:



如果想在浏览器中实现 0ms 延时的定时器,可以参考这里所说的window.postMessage()



这篇文章里的作者给出了这样一段代码,用postMessage来实现真正 0 延迟的定时器:


(function () {
var timeouts = [];
var messageName = 'zero-timeout-message';

// 保持 setTimeout 的形态,只接受单个函数的参数,延迟始终为 0。
function setZeroTimeout(fn) {
timeouts.push(fn);
window.postMessage(messageName, '*');
}

function handleMessage(event) {
if (event.source == window && event.data == messageName) {
event.stopPropagation();
if (timeouts.length > 0) {
var fn = timeouts.shift();
fn();
}
}
}

window.addEventListener('message', handleMessage, true);

// 把 API 添加到 window 对象上
window.setZeroTimeout = setZeroTimeout;
})();

由于postMessage的回调函数的执行时机和setTimeout类似,都属于宏任务,所以可以简单利用postMessageaddEventListener('message')的消息通知组合,来实现模拟定时器的功能。


这样,执行时机类似,但是延迟更小的定时器就完成了。


再利用上面的嵌套定时器的例子来跑一下测试:


2021-05-13-21-04-16-210864.png


全部在 0.1 ~ 0.3 毫秒级别,而且不会随着嵌套层数的增多而增加延迟。


测试


从理论上来说,由于postMessage的实现没有被浏览器引擎限制速度,一定是比 setTimeout 要快的。


设计一个实验方法,就是分别用postMessage版定时器和传统定时器做一个递归执行计数函数的操作,看看同样计数到 100 分别需要花多少时间。


实验代码:


function runtest() {
var output = document.getElementById('output');
var outputText = document.createTextNode('');
output.appendChild(outputText);
function printOutput(line) {
outputText.data += line + '\n';
}

var i = 0;
var startTime = Date.now();
// 通过递归 setZeroTimeout 达到 100 计数
// 达到 100 后切换成 setTimeout 来实验
function test1() {
if (++i == 100) {
var endTime = Date.now();
printOutput(
'100 iterations of setZeroTimeout took ' +
(endTime - startTime) +
' milliseconds.'
);
i = 0;
startTime = Date.now();
setTimeout(test2, 0);
} else {
setZeroTimeout(test1);
}
}

setZeroTimeout(test1);

// 通过递归 setTimeout 达到 100 计数
function test2() {
if (++i == 100) {
var endTime = Date.now();
printOutput(
'100 iterations of setTimeout(0) took ' +
(endTime - startTime) +
' milliseconds.'
);
} else {
setTimeout(test2, 0);
}
}
}

实验代码很简单,先通过setZeroTimeout也就是postMessage版本来递归计数到 100,然后切换成 setTimeout计数到 100。


直接放结论,这个差距不固定,在 mac 上用无痕模式排除插件等因素的干扰后,以计数到 100 为例,大概有 80 ~ 100 倍的时间差距。在硬件更好的台式机上,甚至能到 200 倍以上。


2021-05-13-21-04-16-326555.png


Performance 面板


只是看冷冰冰的数字还不够过瘾,打开 Performance 面板,看看更直观的可视化界面中,postMessage版的定时器和setTimeout版的定时器是如何分布的。


2021-05-13-21-04-16-602815.png


这张分布图非常直观的体现出了上面所说的所有现象,左边的postMessage版本的定时器分布非常密集,大概在 5ms 以内就执行完了所有的计数任务。


而右边的setTimeout版本相比较下分布的就很稀疏了,而且通过上方的时间轴可以看出,前四次的执行间隔大概在 1ms 左右,到了第五次就拉开到 4ms 以上。


作用


也许有同学会问,有什么场景需要无延迟的定时器?其实在 React 的源码中,做时间切片的部分就用到了。


const channel = new MessageChannel();
const port = channel.port2;

// 每次 port.postMessage() 调用就会添加一个宏任务
// 该宏任务为调用 scheduler.scheduleTask 方法
channel.port1.onmessage = scheduler.scheduleTask;

const scheduler = {
scheduleTask() {
// 挑选一个任务并执行
const task = pickTask();
const continuousTask = task();

// 如果当前任务未完成,则在下个宏任务继续执行
if (continuousTask) {
port.postMessage(null);
}
},
};

React 把任务切分成很多片段,这样就可以通过把任务交给postMessage的回调函数,来让浏览器主线程拿回控制权,进行一些更优先的渲染任务(比如用户输入)。


为什么不用执行时机更靠前的微任务呢?关键的原因在于微任务会在渲染之前执行,这样就算浏览器有紧急的渲染任务,也得等微任务执行完才能渲染。


总结


可以了解如下几个知识点:



  1. setTimeout的 4ms 延迟历史原因,具体表现。

  2. 如何通过postMessage实现一个真正 0 延迟的定时器。

  3. postMessage定时器在 React 时间切片中的运用。

  4. 为什么时间切片需要用宏任务,而不是微任务。


作者:睡醒想钱钱
来源:juejin.cn/post/7229520942668824633
收起阅读 »

产品:能实现长列表的滚动恢复嘛?我:... 得加钱

web
前言 某一天,产品经理找到我,他希望我们能够给用户更好的体验,提供长列表的滚动记忆功能。就是说当鼠标滚轮滚动到长列表的某个位置时,单击一个具体的列表项,就切换路由到了这个列表项的详情页;当导航返回到长列表时,还能回到之前滚动到的位置去。 思路 我低头思考了一阵...
继续阅读 »

前言


某一天,产品经理找到我,他希望我们能够给用户更好的体验,提供长列表的滚动记忆功能。就是说当鼠标滚轮滚动到长列表的某个位置时,单击一个具体的列表项,就切换路由到了这个列表项的详情页;当导航返回到长列表时,还能回到之前滚动到的位置去。


思路


我低头思考了一阵儿,想到了history引入的scrollRestoration属性,也许可以一试。于是我回答,可以实现,一天工作量吧😂。产品经理听到后,满意地走了,但是我后知后觉,我为数不多的经验告诉我,这事儿可能隐隐有风险😨。但是没办法,no zuo no die。


scrollRestoration


Chrome46之后,history引入了scrollRestoration属性。该属性提供两个值,auto(默认值),以及manual。当设置为auto时,浏览器会原生地记录下window中某个元素的滚动位置。此后不管是刷新页面,还是使用pushState等方法改变页面路由,始终可以让元素恢复到之前的屏幕范围中。但是很遗憾,他只能记录下在window中滚动的元素,而我的需求是某个容器中滚动。

完犊子😡,实现不了。

其实想想也是,浏览器怎么可能知道开发者想要保存哪个DOM节点的滚动位置呢?这事只有开发者自己知道,换句话说,得自己实现。于是乎,想到了一个大致思路是:



发生滚动时将元素容器当时的位置保存起来,等到长列表再次渲染时,再对其重新赋值scrollTop和scrollLeft



真正的开发思路


其实不难想到,滚动恢复应该属于长列表场景中的通用能力,既然如此,那...,夸下的海口是一天,所以没招,只能根据上述的简单思路实现了一个,很low,位置信息保存在localStorage中,算是交了差。但作为一个有追求的程序员,这事必须完美解决,既然通用那么公共组件提上日程😎。在肝了几天之后,出炉的完美解决方案:



在路由进行切换、元素即将消失于屏幕前,记录下元素的滚动位置,当元素重新渲染或出现于屏幕时,再进行恢复。得益于React-Router的设计思路,类似于Router组件,设计滚动管理组件ScrollManager,用于管理整个应用的滚动状态。同理,类似于Route,设计对应的滚动恢复执行者ScrollElement,用以执行具体的恢复逻辑。



滚动管理者-ScrollManager


滚动管理者作为整个应用的管理员,应该具有一个管理者对象,用来设置原始滚动位置,恢复和保存原始的节点等。然后通过Context,将该对象分发给具体的滚动恢复执行者。其设计如下:


export interface ScrollManager {
/**
* 保存当前的真实DOM节点
* @param key 缓存的索引
* @param node
* @returns
*/

registerOrUpdateNode: (key: string, node: HTMLElement) => void;
/**
* 设置当前的真实DOM节点的元素位置
* @param key 缓存的索引
* @param node
* @returns
*/

setLocation: (key: string, node: HTMLElement | null) => void;
/**
* 设置标志,表明location改变时,是可以保存滚动位置的
* @param key 缓存的索引
* @param matched
* @returns
*/

setMatch: (key: string, matched: boolean) => void;
/**
* 恢复位置
* @param key 缓存的索引
* @returns
*/

restoreLocation: (key: string) => void;
/**
* 清空节点的缓存
* @param key
* @returns
*/

unRegisterNode: (key: string) => void;
}


  • 上述Manager虽然提供了各项能力,但是缺少了缓存对象,也就是保存这些位置信息的地方。使用React.useRef,其设计如下:


//缓存位置的具体内容
const locationCache = React.useRef<{
[key: string]: { x: number; y: number };
}>({});
//原生节点的缓存
const nodeCache = React.useRef<{
[key: string]: HTMLElement | null;
}>({});
//标志位的缓存
const matchCache = React.useRef<{
[key: string]: boolean;
}>({});
//清空节点方法的缓存
const cancelRestoreFnCache = React.useRef<{
[key: string]: () => void;
}>({});


  • 有了缓存对象,我们就可以实现manager,使用key作为缓存的索引,关于key会在ScrollElement中进行说明。


const manager: ScrollManager = {
registerOrUpdateNode(key, node) {
nodeCache.current[key] = node;
},
unRegisterNode(key) {
nodeCache.current[key] = null;
//及时清除
cancelRestoreFnCache.current[key] && cancelRestoreFnCache.current[key]();
},
setMatch(key, matched) {
matchCache.current[key] = matched;
if (!matched) {
//及时清除
cancelRestoreFnCache.current[key] && cancelRestoreFnCache.current[key]();
}
},
setLocation(key, node) {
if (!node) return;
locationCache.current[key] = { x: node?.scrollLeft, y: node?.scrollTop };
},
restoreLocation(key) {
if (!locationCache.current[key]) return;
const { x, y } = locationCache.current[key];
nodeCache.current[key]!.scrollLeft = x;
nodeCache.current[key]!.scrollTop = y;
},
};


  • 之后,便可以通过Context将manager对象向下传递


<ScrollManagerContext.Provider value={manager}>
{props.children}
</ScrollManagerContext.Provider>


  • 除了上述功能外,manager还有一个重要功能:获知元素在导航切换前的位置。在React-Router中一切路由状态的切换都由history.listen来发起,由于history.listen可以监听多个函数。所以可以在路由状态切换前,插入一段监听函数,来获得节点相关信息。


location改变 ---> 获得节点位置信息 ---> 路由update


  • 在实现中,使用了一个状态shouldChild,来确保监听函数一定在触发顺序上先于Router中的监听函数。实现如下:


const [shouldChild, setShouldChild] = React.useState(false);

//利用useLayoutEffect的同步,模拟componentDidMount,为了确保shouldChild在Router渲染前设置
React.useLayoutEffect(() => {
//利用history提供的listen监听能力
const unlisten = props.history.listen(() => {
const cacheNodes = Object.entries(nodeCache.current);
cacheNodes.forEach((entry) => {
const [key, node] = entry;
//如果matchCache为true,表明从当前路由渲染的页面离开,所以离开之前,保存scroll
if (matchCache.current[key]) {
manager.setLocation(key, node);
}
});
});

//确保该监听先入栈,也就是监听完上述回调函数后才实例化Router
setShouldChild(true);
//销毁时清空缓存信息
return () => {
locationCache.current = {};
nodeCache.current = {};
matchCache.current = {};
cancelRestoreFnCache.current = {};
Object.values(cancelRestoreFnCache.current).forEach((cancel) => cancel());
unlisten();
};
}, []);

//改造context传递
<ScrollManagerContext.Provider value={manager}>
{shouldChild && props.children}
</ScrollManagerContext.Provider>



  • 真正使用时,管理者组件要放在Router组件外侧,来控制Router实例化:


<ScrollRestoreManager history={history}>
<Router history={history}>
...
</Router>

</ScrollRestoreManager>

滚动恢复执行者-ScrollElement


ScrollElement的主要职责其实是控制真实的HTMLElement元素,决定缓存的key,包括决定何时触发恢复,何时保存原始HTMLElement的引用,设置是否需要保存的位置等等。ScrollElement的props设计如下:


export interface ScrollRestoreElementProps {
/**
* 必须缓存的key,用来标志缓存的具体元素,位置信息以及状态等,全局唯一
*/

scrollKey: string;
/**
* 为true时触发滚动恢复
*/

when?: boolean;
/**
* 外部传入ref
* @returns
*/

getRef?: () => HTMLElement;
children?: React.ReactElement;
}


  • ScrollElement本质上可以看作为一个代理,会拿到子元素的Ref,接管其控制权。也可以自行实现getRef传入组件中。首先要实现的就是滚动发生时,记录位置能力:


useEffect(() => {
const handler = function (event: Event) {‘
//nodeRef就是子元素的Ref
if (nodeRef.current === event.target) {
//获取scroll事件触发target,并更新位置
manager.setLocation(props.scrollKey, nodeRef.current);
}
};

//使用addEventListener的第三个参数,实现在window上监听scroll事件
window.addEventListener('scroll', handler, true);
return () => window.removeEventListener('scroll', handler, true);
}, [props.scrollKey]);


  • 接下来处理路由匹配以及DOM变更时处理的能力。注意,这块使用了对useLayoutEffectuseEffect执行时机的理解处理:


//使用useLayoutEffect主要目的是为了同步处理DOM,防止发生闪动
useLayoutEffect(() => {
if (props.getRef) {
//处理getRef获取ref
//useLayoutEffect会比useEffect先执行,所以nodeRef一定绑定的是最新的DOM
nodeRef.current = props.getRef();
}

if (currentMatch) {
//设置标志,表明当location改变时,可以保存滚动位置
manager.setMatch(props.scrollKey, true);
//更新ref,代理的DOM可能会发生变化(比如key发生了变化,remount元素)
nodeRef.current && manager.registerOrUpdateNode(props.scrollKey, nodeRef.current);
//恢复原先滑动过的位置,可通过外部props通知是否需要进行恢复
(props.when === undefined || props.when) && manager.restoreLocation(props.scrollKey);
} else {
//未命中标志设置,不要保存滚动位置
manager.setMatch(props.scrollKey, false);
}

//每次update注销,并重新注册最新的nodeRef,解决key发生变化的情况
return () => manager.unRegisterNode(props.scrollKey);
});


  • 上述代码,表示在初次加载或者每次更新时,会根据当前的Route匹配结果与否来处理。如果匹配,则表示ScrollElement组件应是渲染的,此时在effect中执行更新Ref的操作,为了解决key发生变化时DOM发生变化的情况,所以需要每次更新都处理。

  • 同时设置标识位,相当于告诉manager,node节点此刻已经渲染成功了,可以在离开页面时保存位置信息;如果路由不匹配,那么则不应该渲染,manager此刻也不用保存这个元素的位置信息。主要是为了解决存在路由缓存的场景。

  • 也可以通过when来控制恢复,主要是用来解决异步请求数据的场景。

  • 最后判断ScrollElement的子元素是否是合格的


//如果有getRef,直接返回children
if (props.getRef) {
return props.children as JSX.Element;
}

const onlyOneChild = React.Children.only(props.children);
//代理第一个child,判断必须是原生的tag
if (onlyOneChild && onlyOneChild.type && typeof onlyOneChild.type === 'string') {
//利用cloneElement,绑定nodeRef
return React.cloneElement(onlyOneChild, { ref: nodeRef });
} else {
console.warn('-----滚动恢复失败,ScrollElement的children必须为单个html标签');
}

return props.children as JSX.Element;

多次尝试机制


在某些低版本的浏览器中,可能存在一次恢复并不如预期的情况。所以实现多次尝试能力,其原理就是用一个定时器多次执行callback,同时设定时间上限,并返回一个取消函数给外部,如果最终结果理想则取消尝试,否则再次尝试直到时间上限内达到理想位置。更改恢复函数:


restoreLocation(key) {
if (!locationCache.current[key]) return;
const { x, y } = locationCache.current[key];
//多次尝试机制
let shouldNextTick = true;
cancelRestoreFnCache.current[key] = tryMutilTimes(
() => {
if (shouldNextTick && nodeCache.current[key]) {
nodeCache.current[key]!.scrollLeft = x;
nodeCache.current[key]!.scrollTop = y;
//如果恢复成功,就取消
if (nodeCache.current[key]!.scrollLeft === x && nodeCache.current[key]!.scrollTop === y) {
shouldNextTick = false;
cancelRestoreFnCache.current[key]();
}
}
},
props.restoreInterval || 50,
props.tryRestoreTimeout || 500
);
},

至此,滚动恢复的组件全部完成。具体源代码可以到github查看,欢迎star。 github.com/confuciusth…


效果


scroll-restore.gif


总结


一个滚动恢复功能,如果想要健壮,完善地实现。其实需要掌握Router,Route相关的原理、history监听路由变化原理、React Effect的相关执行时机以及一个好的设计思路。而这些都需要我们平时不断的研究,不断的追求完美。虽然这并不能“加钱”,但这种能力以及追求是我们成为技术大牛的路途中,最宝贵的财富。当然,能够加钱最好了😍。


创作不易,欢迎点赞!


作者:青春地平线
来源:juejin.cn/post/7186600603936620603
收起阅读 »

关于浏览器的一个逆天bug

web
1.问题描述: 这个bug是我在做一个二次元项目(vue+vite+mysql)的时候,最开始都没有问题,但是后来有一天我的这个项目打开控制台后出现了资源无法加载的问题,包括图片,组件等,但是我只要不打开控制台就没有问题,所以当时我觉得这个问题非常的逆天,...
继续阅读 »

1.问题描述:




这个bug是我在做一个二次元项目(vue+vite+mysql)的时候,最开始都没有问题,但是后来有一天我的这个项目打开控制台后出现了资源无法加载的问题,包括图片,组件等,但是我只要不打开控制台就没有问题,所以当时我觉得这个问题非常的逆天,


bug如图


bug效果





2.解决思路:


先说正确答案:浏览器抽风,把我默认的网络限制改成了离线,而我之前一直是无限制,因此导致了我一打开控制台就断网,最主要的惑因就是不止我常用的edg浏览器这样了,捏吗连谷歌浏览器都跟着抽风,导致我误判了




  1. 首先我遇到这种问题想的肯定先是我的代码有没有问题,因为这个bug是突然出现的。所以我检查了我的代码问题,例如图片我把原来的静态的src:“巴拉巴拉.jpg”换成了import动态引入的方法


     import src1 from "../assets/movie/miaonei/miaonei.aac";
     ​
     export default {
      name: "profile",
      components: { userTop },
      data() {
        return {
          src1,
        };
      },
      }

    但是问题依然没有得到解决。


    2.接下来我考虑到了浏览器本身的问题,但是因为我浏览器网络那里是默认,我的默认一直是无限制,接下来我就用谷歌打开了项目结果也是一样的,所以我就排除了是控制台网络的原因


    3.接下来就考虑是我nodel_modles或者vue,npm版本有问题,所以就开始检测各种的版本,但是也没有发现问题


    4.最后我就先放弃的一段时间,毕竟不用控制台也只是开发效率降低,不是不能写,后来我突然想到这种样子不就是断网吗,所以我认定了就是控制台打开导致的断网,所以一定是network那里的默认不是我之前的东西了,虽然我根本没有改过,但只有这一种可能了


    5.问题解决。


    3.解决后效果




    结语:



    山重水复疑无路,柳暗花明又一村。


    做项目遇到bug是很正常的事,对于在读生来说,遇到bug反而是一件是好事,我可以通过自己思考,结合所学的东西来解决问题,这样可以提升我们的能力,巩固我们的境界。


    就上面这个bug而言,在我成功解决这个问题之前,我都是不知道原来浏览器自己能修改我默认的东西。





作者:BittersweetYao
来源:juejin.cn/post/7189295826366103589
收起阅读 »