- 博客(284)
- 资源 (1)
- 问答 (3)
- 收藏
- 关注
RSS订阅
原创 js设计模式在web前端开发中的实践——网站登录
本文，笔者将以一个登录模块的开发流程，向各位说明穿插在其中的知识点 —— 【单例模式】和【发布-订阅模式】的使用。OK，步入正题。加入你是一个大型网站的前端开发人员，经过激烈地讨论以后，决定让你负责登录模块的开发。先说，这个网站很大，所以有很多模块，比如：header头部、nav导航、消息列表、购物车… 这些模块有一个共同的特点，就是必须先用ajax异步请求获取用户的登录信息 —— 这是正...
2019-12-14 19:10:27
2647
11
原创 煮酒论JavaScript：使用“更好的”代码（高性能的密码）
本文是一篇纯干货前端分享，也算是笔者最近一段时间的思考总结。（顺便为1024庆祝！）
2019-10-23 19:31:59
3792
8
原创 大道之音：防抖和节流以及其中蕴含的eventloop
写这篇文章的原因其实是我发现以前还未完全掌握防抖和节流的概念。对！就是概念，这是面试的重点，也是实际项目中如何抉择的依据。也可以把这篇文章当做这两篇文章的“后续”：https://blog.csdn.net/qq_43624878/article/details/101155944https://blog.csdn.net/qq_43624878/article/details/101687...
2019-10-20 09:24:10
3280
2
原创 前端项目分析：我是如何做图片优化的（预加载、懒加载和延迟加载）
众所周知：前端页面上的图片是优化时最重要也是最令人头疼的部分。图片的优化有两种方式： 预加载 和 懒加载。本文结合实际案例，为大家讲述网站中图片的优化妙方。文章不短，但没有废话，肯定令你耳目一新啦
2019-07-10 09:25:57
14786
20
原创 【python实现华为OD机试真题】创建二叉树【2023 Q1 | 200分】
2、然后根据operations依次添加节点: operations[i] = [height, index] 表示对第 height 层的第index 个节点node, 添加值为i的子节点，height、index 均从0开始计数;index 指所在层的创建顺序。若node 有左子节点,但无右子节点!根据返回的树根节点，按照 层序遍历二叉树打印的结果。若node 无左子节点!
2024-03-26 13:47:53
15
原创 【python实现华为OD机试真题】数据最节约的备份方法【2023 Q2 | 100分】
有若干个文件，使用刻录光盘的方式进行备份，假设每张光盘的容量是500MB,求使用光盘最少的文件分布方式所有文件的大小都是整数的MB,且不超过500MB；文件不能分割、分卷打包。输入输出示例仅供调试，后台判题数据一般不包含示例。
2024-03-26 13:10:30
18
原创 【python实现华为OD机试真题】阿里巴巴找黄金宝箱(II)【2023 Q2 | 100分】
一贫如洗的樵夫阿里巴巴在去砍柴的路上，无意中发现了强盗集团的藏宝地，藏宝地有编号从0~N的箱子。每个箱子上面贴有箱子中藏有金币的数量。从金币数量中选出一个数字集合，并销毁贴有这些数字的每个箱子如果能销毁一半及以上的箱子，则返回这个数字集合的最小大小。字串中数字的个数为偶数，并且个数>=1,=1,
2024-03-26 11:30:49
25
原创 华为OD机试真题 （python）之最小循环子数组
第一行 输入数组只中元素个数n，1 sn s 100000第二行输入数组的数字序列nums，以空格分割，0 s nums[i]< 10。给定一个由若干整数组成的数组nums，请检查数组是否是由某个子数组重复循环拼接而成，请输出这个最小的子数组。示例1 输入输出示例仅供调试，后台判题数据一般不包含示例输入。输出最小的子数组的数字序列，以空格分割。
2023-07-18 10:02:39
375
原创 华为OD机试真题 （python）之支持优先级的队列
实现一个支持优先级的队列，高优先级先出队列;同优先级时先进先出如果两个输入数据和优先级都相同，则后一个数据不入队列被丢弃。队列存储的数据内容是一个整数。队列的数据内容 (优先级信息输出时不再体现)示例1 输入输出示例仅供调试，后台判题数据一般不包含示例输入。组待存入队列的数据 (包含内容和优先级)[支持优先级的队列]
2023-07-18 10:01:05
480
原创 华为OD机试真题 （python）之评论转换输出
第一条评论是”hello,2,ok,0,bye,0"，第二条评论是”test,0"，第三条评论是”one,1,two,1,a,0"所有评论被保存成”hello.2,ok,0.bye,0,test,0,one,1two,1a,0"每一条评论都是一个非空英文字母 字符串Q在一个博客网站上，评论具有树状结构，除了根评论外，每个评论都有一个父评论。然后是打印n行，第i(1
2023-07-18 09:59:22
278
原创 ts，依赖分析统计你的代码使用情况
我们并没有先对 import 节点进行分析，如果代码中有同名的其它局部变量，那么它们也可以通过 “遍历所有 Identifier 类型节点名称” 这样的判定思路，它只能找到与 cookie 相同名称的 AST 节点而已，这并不能代表这些 cookie 都是从 sheer 导入的。但是区别的地方来了：如果是虚构的文件，虽然也可以使用这里说的其它API，但是生成的ast中最重要的。代表的是各种名字，而我们要寻找的是 cookie 这个 API 在代码中的调用情况，那就可以通过遍历所有。
2023-03-27 15:42:33
621
1
原创 问心 | 再看token、session和cookie
HTTP Cookie（也叫 Web Cookie或浏览器 Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。Session 代表着服务器和客户端一次会话的过程。Session 对象存储特定用户会话所需的属性及配置信息。这样，当用户在应用程序的 Web 页之间跳转时，存储在 Session 对象中的变量将不会丢失，而是在整个用户会话中一直存在下去。当客户端关闭会话，或者 Session 超时失效时会话结束。
2023-03-11 10:15:00
429
原创 SPA（单页应用）知多少
单页面应用程序将所有的活动局限于一个Web页面中，在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成，单页面应用不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换HTML的内容，从而实现UI与用户的交互。
2023-03-10 10:00:00
441
原创 如何在微信小程序中实现具有@功能的输入框
本文代码来源于笔者开源的组件库中的 atinput 组件。组件支持@功能，直接引入，方便开发。欢迎star！
2023-03-08 11:06:36
1055
原创 【python实现华为OD机试真题】优雅子数组【2023 Q1 | 200分】
当n是优雅数时，就需要额外加上新增的满足条件的子数组，这个数量是上一个优雅数的左边界left和当前优雅数的左边界right的距离。如果一个数组Q中出现次数最多的元素出现大于等于K次,被称为k-优雅数组，k也可以被称为优雅阈值只。这样一维数组形式的dp就存储了所有以当前位置为终点的，且满足K优雅的子数组的数量，最后求。就不是一一个3-优雅数组，因为其中出现次数最多的元素是1和2，只出现了2次。dp存储的是以当前位置为终点的满足K优雅条件的子数组的个数。注意：子数组是数组中一个或多个连续元素组成的数组。
2023-02-26 23:05:19
292
原创 【python实现华为OD机试真题】最长的密码【2022 Q4 | 100分】
在一个密码本中，每一页都有一个由26个小写字母组成的若干位密码，每一页的密码不同，需要从这个密码本中寻找这样一个最长的密码，从它的末尾开始依次去掉一位得到的新密码也在密码本中存在。密码本由一个字符串数组组成，不同元素之间使用空格隔开，每一个元素代表密码本每一页的密码。请输出符合要求的密码，如果有多个符合要求的密码，则返回。输入输出示例仅供调试，后台判题数据一般不包含示例。输入输出示例仅供调试，后台判题数据一般不包含示例。若没有符合要求的密码，则返回。
2023-02-26 22:58:32
159
原创 微信小程序组件库解析：图片上传与排序组件yImgPro
这里尤其需要注意的是：获取图片区域信息时用的 API 只能获取“当前元素距离屏幕顶部的距离”。如果你在使用笔者的组件库，并且遇到了“当前组件并不是一开始就在页面上出现而是动态展示”的场景，那么您也可以通过参数将这个“偏差”传入组件。因为拖动排序，所以我们不仅需要计算当前元素的偏移，还需要计算元素偏移后和“路过元素”的位置关系 —— 临界点判断。第二种方案在笔者的功能库中也有组件：yImg。然后是子元素的宽高和padding也是动态的，没事，我们会在初始化时动态的获取它 —— 顺便添加一些我们需要的数据。
2023-02-20 15:11:11
1338
原创 JSBridge：混合开发中的双向通信[Android、iOS&JavaScript]
WebView 是移动端中的一个控件，它为 JS 运行提供了一个沙箱环境。WebView 能够加载指定的 url，拦截页面发出的各种请求等各种页面控制功能，JSB 的实现就依赖于 WebView 暴露的各种接口。由于历史原因，IOS以8为分界，Android以4.4为分界，分为高低两个版本。而它们的区别在于 —— 回调。高版本可以通过执行回调拿到 JS 执行完毕的返回值，然后准确进行下一步操作。而低版本无法执行回调！Hybrid App 的核心。
2023-02-20 15:10:22
1382
原创 微信小程序内部那些事
微信小程序分为“视图层”和“逻辑层”。视图层是在 webview 中渲染，逻辑层则用 JavaScriptCore 来渲染。其中视图层可以有多个，但逻辑层则只有一个。小程序中视图层负责页面渲染，逻辑层负责逻辑处理、状态管理、请求和接口调用。逻辑层和视图层的通信是通过微信的 JSBridge 实现的。逻辑层数据变化通过 JSB 通知到视图层，触发视图层更新；当视图层触发事件则继续通过 JSB 将事件通知到逻辑层做处理。WeixinJSB 在开发者工具、IOS 和 Android 的实现机制不同。在调用 Na
2023-02-09 15:57:39
3010
原创 新年第一弹：js、css与高度（宽度）共享
高度共享，是高度共享和宽度共享的总称。是笔者总结的一个针对某些问题解决的思路。并不是一个新的技术点或模式 —— 至少目前来说。甚至可能你已经在项目中用过类似的。它的核心就是：降低 js 复杂计算和耗时操作在类似场景中的比重。没啥说的，通过两个业务场景描述一下即可。
2023-01-11 18:13:41
9756
6
原创 一道算法题引出的业务场景回顾
在 leetCode 上看到了这样一道算法题：给定一个整数数组和一个整数目标，返回两个数字的索引，使它们加起来等于目标。你可能会假设每个输入都只有一个解决方案，并且，你可能不会两次使用相同的元素。你可以按任何顺序返回答案。这很容易想到双for循环O(n^2)那么，什么结构既能满足“快速查找”的目的，又能避免循环呢？Map！这里说Map只是为了引出业务场景中的使用。事实上，当数据量够小时我们通常使用的是Object，而当涉及到大量数据或对顺序有要求或需要遍历时选择Map。是不是非常简单明了？
2022-12-19 09:47:44
5295
4
原创 来用Service worker吧
当cache里面没有缓存，则使用fetch发起请求，这个Fetch发起请求的是用来代替XMLHttpRequest来发请求的方案；当请求响应了错误直接返回错误信息，当请求响应成功的情况，更新cache缓存，将新的响应存入cache缓存中，下次在访问就直接从缓存中读取。注意：上面说的是“静态资源缓存”，也就是缓存列表是固定的。事件，这里我们可以进行一些静态资源的 cache，以防止在后面的请求时依然对这些资源发送请求！阶段，而老的那个还处于工作状态，新的那个就会进入。后，新的才能正常替换老的那个的工作。
2022-12-08 16:41:32
3168
原创 为了验证某些事，我实现了一个toy微前端框架【万字长文，请君一览】
众所周知微前端是企业中前端发展的必经之路。我司搭建了自己的微前端脚手架工具，它将项目变成了“多页应用”，跳转方式由这类api进行。所以笔者之前在想：这种方式跳转能不能有动画效果呢？在“上层建筑”中进行“反直觉”的操作，结果当然是失败的。但是笔者又有了一个新想法：自己实现一个微前端框架，由通过劫持路由和history实现一些小操作！本文将我实现第一版微前端架子的步骤呈现给各位，希望对大家能有一些帮助。
2022-11-15 15:39:25
3228
2
原创 用户体验与响应式字体二三事｜rem单位与flexible.js、rpx单位与css媒体查询
在视觉和前端眼中，需要着重考虑的只有一点：当可视区域变化时，是在一行中展示更多/更少的内容？如果针对一个个单独的点做处理，过多的 media 反而会使效率大打折扣，所以我更建议选取“某些阶段”的临界点做处理。很显然，之前的开发中并没有考虑到极小屏下的场景 —— 在字体允许的、不影响体验的大小下宽度并不足以支持和大屏一样的内容。而在H5中，由于各种情况影响，很多时候会选择后者。，我们把设备可视区域也就是我们的各种移动端设备的这个画布也分成10份，并赋值给根元素的。可以明确的是，上面的问题并不针对“字体”。
2022-10-19 15:08:26
11555
4
原创 Typescript助力项目开发：JS切换TS、TS类型定制与思考
TS已经成为可以帮助项目顺利开发的存在了。在上半年笔者就被要求采用TS开发新的项目，并在一些老项目中用TS去改造（因为沟通原因我以为某个远程组件只有TS版本）。在其中也有了一些思考。首先是目录结构。毫无疑问一个拥有TS的项目必须有像、这样的说明文件，根据项目需要可能还有这样的配置文件 —— 它们都和src目录同级。
2022-10-13 15:21:33
7822
6
原创 小文一篇，说说:where、:has和:is的特殊性吧
css推出的:where、:has和:is伪类满足了我对“逻辑化CSS”的简单幻想。简单说下，假如你有这么一个需求：在响应式页面中，你需要判断头部元素中是否具有某一个图标，以决定 Top 文字的样式（间距、对齐方向等）。不知道各位以前是怎么实现的。为了“性能考虑”，笔者通常是通过“动态 class”，用 js 操作元素样式。那时候就想，如果css中就可以去判断元素就好了！但是从张大佬那得知，我这种想法是“子元素选择”，就是父元素根据子元素调整，这样可能会带来重绘这样严重的影响。
2022-09-29 14:00:00
5242
7
原创 聊聊“前端引导操作”（慎用fixed、relative、absolute组合技）
对这个“引导页”，我第一时间也是迷茫的，有些按钮询问了产品才知道是干啥用的。几乎所有的相关文章都在说 relative 会如何影响到 absolute 和 fixed，但似乎笔者没有见到有反过来研究的，也可能是我阅读的少，如有见谅。第一种方式，保证了元素的“独立性”，但是缺失了元素的“可交互性”。但这不是最重要的，每次的clone会带来繁琐的操作，我们应该避免它！当然，这种方法也是有遗憾的：由于这时候“高亮”也是“画”出来的，所以这时候切记不可让页面滚动 —— 页面操作是有延迟的！
2022-09-23 10:21:31
5432
7
原创 用户体验新尝试&思考｜让“跳转”加速
当然，对后半部分来说，本文举的例子其实并不那么恰当。在笔者的实践和实际一些项目使用的效果来看，我认为它的使用场景应该更多的在买家端。而且本文只说了pc端的情况，要知道，H5是没有“鼠标事件”的，这又会带来一个问题：如何更精准的知道“哪些资源需要提前获取？”关于这个问题以及后续的问题我都会及时回到本文中进行更新～相比之下，在本文这种场景下，笔者更认同“在新建-保存时缓存一份表单项数据，在进入时判断”这种做法 —— 虽然一刷新就无了。最后，我再一次认为，用户体验是没有尽头的。
2022-09-21 03:15:00
1943
原创 让iframe为项目增加更多可能性
最近在研究微前端。我觉得从理论上来说，iframe是微前端最理想的组合技术。使用iframe能够将一个页面内嵌到另一个页面中，并且和链接集成一样具有松散的耦合和高鲁棒性。iframe具有极强的隔离性，其中发生的一切只会影响到自身 —— 实际上目前大多数在线编辑平台都是iframe技术实现的。...
2022-08-28 14:22:25
8275
7
原创 让mixin为项目开发助力【及递归优化新尝试】
默认 Mixin 上会首先被注册，组件上的接着注册，这样我们就可以在组件中按需要重写 Mixin 中的语句。它的优势也是为人诟病的一点就是“使用这两个API，祖先组件不需要知道哪些后代组件在使用它提供的数据，后代组件也不需要知道注入的数据来自哪里。再来看第二个场景，其实我们很清楚地知道：这时候我们需要的不是一个可以传值的组件，而是一个类似于插件一样的 js 代码（这么说能够理解吧）！有了上面的实践，我突然觉得能够继续完成之前的一个畅想：有一个方法能够在不深入侵入业务代码的同时完成任意组件联动的功能。....
2022-08-06 22:02:49
6346
原创 【随笔】移动端input type｜语义与IOS按键
基于iOS对web页面的规则，input的type为不同值时软键盘的弹出规则尤其是右下角按键名就非常值得注意。以为例，在安卓段展示正常，右下角是一个蓝白“搜索图标”。但iOS仍然遵循默认“换行”效果。以至于不少人会这么做......
2022-07-21 09:45:07
8546
原创 小tips；CSS和JS“通信”
假如我有一个需求，必须通过 js 执行动画，还得让 css 去配合。拿一个简单却不太恰当的例子来说：‘一闪一闪’效果的实现。传统Vue必须要利用“动态”。但是在 vue3.2 中，尤大提出了一个概念：Js in Css。它让我们可以在 css 中使用 js 变量，更好的控制动画的轨迹！从而达到“js向css传值”的效果。使用前需注意：本规则依托于，除此之外需先引入：那 css 怎么向 js 传参？比如“主题跟随系统变化”：比如“响应式布局中判断pc还是移动端”：等等。这些情况大多是由于页面的变
2022-07-05 10:00:43
2590
原创 虚拟滚动列表和css虚拟滚动【有思考】
我所理解的是，虚拟滚动需要一次性获取所有数据，但是只渲染显示屏幕可见范围内的那些。要做到这些我需要知道：假设一次只需要展示 10 条数据，需要加载的数据是一个数组，只需要裁剪数据范围随着滚动条向下，将可以计算出当前行数。而要模拟滚动条高度就要在页面挂载时就手动设置页面的高度为。最后也是最关键的是保持列表一直保持在当前位置上，手动设置列表容器等于当前滚动条高度。如何使用？CSS虚拟滚动这个概念忘了在哪听到的了。其实我认为它更像是一种内容的懒加载。他需要用到一个css属性：：控制一个元素是否渲染其内
2022-06-17 11:15:00
1876
原创 小tips：页面滚动到关闭时的位置与不滚动
标题显而易见，要说两种情况：重新打开页面或者返回某个页面时滚动到上次离开时的位置，以及不滚动保持在顶部。这也有两种情况：页面重新打开，与返回某个页面。如果是前者，必定用或者。或者麻烦一点的、在webview中用其他手段。总之这个必须有存储。然后在组件的或是时取出存储内容改变。非常牛逼。若是第二种情况，则只需要临时缓存即可，这里拿vue演示一下：有两个方案。其一，利用路由中的，在离开页面时缓存 top 信息然后在回到当前页面时拿到临时缓存，并赋值组件内其二，利用缓存整个页面。但是仅限于没有实时数据变
2022-06-03 11:12:49
5791
7
原创 用户体验思考与flex三坑：元素不均分、溢出不省略和垂直不滚动
flex已经越来越成为前端不可避免的话题。曾经为了搞清flex的原理偶然画了一张图。但后来发现只是冰山一角。通过我的实践，发现使用flex布局时稍不注意便会遇到三个问题：子元素不平分父元素空间、对文字设置了溢出省略却失效、flex下列表溢出但是滚动失效。常常会让人摸不着头脑。这里记录探究。元素不均分“均分列”，也就是子元素等宽应该是项目中最常见的效果。我常常在项目中见到这样的代码：flex: 1;似乎有很多人认为在 Flex 布局中这样显式设置即可“一劳永逸”。但事实是什么？事实是我们都知道
2022-05-15 14:17:30
9343
5
原创 无感token刷新，我是怎么做的
最近总是回想起大三时为了体(装)验(逼)提出要在学校新版系统中加入无感刷新token的功能。当时只是听到这个玩意甚至还没搞明白是咋回事，于是直到几个月后出来实习也没真正加上这个功能。先说一个场景：我们都知道 JWT。假如说某系统将其token存留时间设置为5分钟。那么，如果说用户在这一时间内恰好有其他事，快结束时回来以后再点“提交”，发现弹出“用户凭证已失效，请重新登录”。怎一个惨字了得！当然，类似的场景还有许多，毫无疑问的是，如果过期时间设置的很短，用户就必须每隔一段时间重新登录，以获取新的凭证，这会
2022-04-30 13:16:29
8983
5
原创 前端监控和页面卡顿
上一篇文章结尾提到了一个对图片至关重要的点：采样、量化和编解码。图像的显示需要GPU和CPU两者配合，CPU主要负责视图的创建，布局的计算和视图的绘制，然后进行图片的解码，将生成的位图交给GPU，GPU进行渲染，并将渲染的结果交到帧缓冲区，待下一个VSync 信号到来的时候视频控制器从帧缓冲区取出数据，经过转换，显示到屏幕上。如果在规定的16.7ms内，CPU和GPU的合作未完成，没有生成新的渲染数据到帧缓冲区中，那么就会出现卡顿或者掉帧的情况。一般我们常说的“精灵图”Sprite 其实不止优化了“网
2022-04-25 20:25:24
2799
原创 小小Tips：css，不止“突破浏览器12px限制”
之前写过一篇文章「小tips：如何摆脱浏览器下12px的限制」，不少人觉得“有点东西”。文中提到的“transform: scale()”方法也是利用了CSS中 transform 的特点，可以说兼顾了效果和性能。但是它必须考虑height甚至在“动态多行”效果时要用 JS 辅助的特点也很是让人头疼。其实还可以用两种方法解决这个限制：SVG解决文字12px限制SVG 本质上你可以看成是一张图片，给图片设置width:100%就能够跟随容器尺寸拉伸，SVG 也是如。并且由于 SVG 是矢量的，因此，再
2022-04-01 11:45:13
11247
2
原创 图片和web性能小论
图片让web性能变得复杂，也变得有趣了。相信初学者一定看到过这样的案例：“当你在HTML中将一张500*500像素的图像缩小，就会带来不必要的下载开销。”<img src="xxx" width="100" height="100" alt="xxx" />在这个例子中，你让浏览器将图片在视觉上缩小到了100*100，但浏览器还是要下载那张大图。也就是说，下载所需流量没有变。但更要命的是，有些浏览器将缩放图像作为一个“卖点”但其实并没有流行的软件比如 Image Magic 做得好。这就
2022-03-26 09:45:00
2530
JavaScript内存管理相关.docx
2020-04-10
window中写的第一版electron能不能在Mac中运行
2024-02-28
Mac中怎么安装window虚拟机
2024-02-24
html中的td和子元素
2023-08-04
页面打印并输出pdf
2023-07-15
filereader在Mac上读取中文乱码
2023-07-01
typescript解析器如何解析非单独文件的ts代码
2023-03-17
tab切换时css高度如何增加过渡/动画效果？
2022-08-29
vue中在touchend时阻止其他元素click事件
2021-12-15
elementui中el-popover为disabled时的click事件问题
2021-09-15
ajax现在不支持异步了？
2021-02-24
TA创建的收藏夹 TA关注的收藏夹
TA关注的人