- 博客(380)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 发明专利公开 -- CSS动画精准实现时钟
上一篇【setTimeout不准时，CSS精准实现计时器功能】的博文，最后提到了通过 CSS 动画实现计时器的方式。本文详情描述如何通过 CSS 完整实现时钟效果，这也是团队 21 年专利的一项内容（专利公布号：CN114003087A）。该发明专利主要解决大屏下通过 javascript 实现的时钟不准确的问题。通过 CSS 动画进行计时，避免同步阻塞卡顿的问题。
2023-05-12 13:55:02
920
原创 文从字顺|程序员须知，如何编写高质量代码
高质量代码是软件开发中至关重要的一部分。高质量的代码不仅可以提高软件的可维护性和可复用性，还可以增强软件的安全性和稳定性。同时，可以降低软件维护成本，提升开发效率，为用户提供更好的使用体验。写出高质量代码是每个程序员追求的终极目标。
2023-05-06 13:25:59
751
原创 setTimeout不准时，CSS精准实现计时器功能
实际开发过程中，我们会经常遇到，首次进入页面进行相应提示，然后指定时间后自动消失或者前端时钟展示等需求。按照传统方案，我们可以使用 setTimeout 实现。但其存在：实际延时比设定值更久的情况。
2023-05-04 10:32:13
1018
原创 【社区图书馆】30+危机，最值得读烂的5本书｜必读
“年少时总会抱怨读书无用，殊不知那只是你没有用心感受读书带给你的好处。”一直觉得迈入30+大门并不可怕，“35岁危机”也离自己甚远。然而，近1年自己身上发生的一些事情，让自己越来越认识到：只有不断丰富内在、提高认知，才能不陷于现状、打破循规蹈矩的生活。至此，我增大阅读量，领悟“大家”的思想，不断获得新的启迪。
2023-04-23 17:10:29
636
原创 vue 模板中使用 console.log
模板中的表达式将被沙盒化，仅能够访问到有限的全局对象列表。该列表中会暴露常用的内置全局对象，比如 Math 和 Date。没有显式包含在列表中的全局对象将不能在模板内表达式中访问。如何注册能够被应用内所有组件实例访问到的全局属性？
2023-04-20 15:56:53
2056
原创 从兴趣或问题出发
当我们还沉寂在移动互联网给生活带来众多便利中，以 ChartGPT 为代表的 AI 时代已彻底到来。科技的发展，时刻在改变着我们的生活，我们需要不断地学习新知识和掌握新技能才能享受变化带来的便利，以及自身不被社会淘汰。因此，终身学习是每个人在当下社会所必须学会的技能。然而，当下又是匆忙的，每天的大量时间被工作所占据，如何在有限的时间高效学习更是关键。
2023-04-13 23:54:55
439
原创 深入实战探究 Vue 2.7 Composition API 的强大之处
Composition API是 Vue 2.7 中引入的一种新的组件逻辑复用方式。它与 Vue 之前的 Options API 有很大的不同。Options API：基于对象的方式，将组件的各种选项，如data、methods、computed等，组织在一个对象中；Composition API：允许我们将组件的逻辑拆分成更小的、可复用的部分，称为composition函数。在实际开发过程中，使用 Composition API 带来了一些显著的优点，使得组件可以更加灵活、清晰，复用性也得到显著提高
2023-04-12 19:50:15
1443
原创 Thinking -- vue性能优化：保持 props 稳定
在 Vue 中，组件 props 的改变会导致组件更新。由此，确保组件 props 保持稳定，可以有效减少更新次数，提高效率。这个技巧的核心思想就是让传给子组件的 props 尽量保持稳定。
2023-03-30 14:20:57
338
原创 你真的了解 browserslist 吗？一文彻底搞懂
关于 Browserslist 大家一定都不陌生，在现有前端工程都会有它的身影。Browserslist 帮助我们在浏览器兼容性和包大小之间保持适当的平衡。使用 Browserslist，可以做到覆盖更广泛的受众（浏览器），同时包的体积也会保持最小化。通过下述内容，我们一一解答。
2023-03-29 18:01:49
1245
原创 Thinking -- CSS从根解决选择前一个兄弟元素
何选中特定class的前一个兄弟元素。了解了浏览器正常情况下的流布局形式（从左到右，从上到下），我们就可以得知：CSS 之所以不支持，是由于其流布局导致。如果可以通过当前元素选择前一个兄弟元素，可能会导致额外的重绘操作！"既然没有选择前一个兄弟元素的选择器"，那就布局反向（从右向左），这样问题就变为了”如何选择后一个兄弟元素“。解决这个问题的方式并不难，但思路值得延伸。
2023-03-21 18:07:06
5340
4
原创 webpack dll 提升构建速度
DLL，动态链接库（Dynamic Link Library 或者 Dynamic-link Library），由微软公司提出。目的是为了节约应用程序所需的磁盘和内存空间。在一个传统的非共享库中，如果两个程序调用同一个子程序，就会出现两份那段代码。让多个应用共享的代码切分到一个DLL中，在硬盘上存为一个文件，在内存中使用一个实例（instance）。DllPlugin 和 DllReferencePlugin 用某种方法实现了拆分 bundles，同时还大幅度提升了构建的速度。
2023-03-08 17:38:19
698
原创 map&area标签实现图片热点区域点击
在购物网站 Landing page 页，往往会存在商品宣传信息，为提升首页加载速度，往往会使用一张图片来包含所有要展示商品（① 减少http请求个数；② 减少页面DOM数）。如何在一张商品海报上，实现点击某商品，跳转到该商品详情页面？以上，也可以使用指定不规则的热点（可点击）区域。HTML与一起使用来定义一个图像映射 (一个可点击的链接区域)。
2023-02-28 10:37:54
742
原创 一图说明 monorepo 落地流程方案
上图为目前团队贡献的主流程：① 本地开发 => ② 提交Git仓库 => ③ 触发 gitlab CI/CD => ④ 发布。关于 monorepo 初次讨论已有2年载，目前团队已经沉淀了成熟的技术方案且经受住了实战考验。
2023-02-20 11:51:28
478
原创 Thinking--FastDom消除浏览器布局抖动
对于大量操作 DOM 的场景，页面时常会出现卡顿现象，导致用户体验不佳。卡顿的原因是由于丢帧导致！FastDom 通过批处理 DOM 读/写操作 消除布局抖动。每一个 measure(读)/mutate(写) 操作任务都会被添加到对应的队列中。队列在下一帧使用 window.requestAnimationFrame() 执行。其目标是在应用程序的所有模块中像一个单例，返回相同实例，统一对 DOM 进行 读/写 操作。
2023-02-14 18:43:24
644
原创 一文搞懂SOLID原则（javascript）
SOLID 是面向对象编程重要的原则，javascript 作为面向对象开发的语言之一，掌握这些原则，可以写出更优雅的代码。SOLID 由 Robert C. Martin（其被誉为世界编程大师，设计模式、敏捷开发先驱）在21世纪初定义。采用 SOLID 编程，可以让代码的。ingle Responsibility Principle：单一职责原则pen Closed Principle：开闭原则iskov Substitution Principle：里氏替换原则。
2023-02-09 10:51:07
517
原创 华夏历史人物之「王阳明」
阳明心学的“知行合一，致良知”的哲学理论，更是影响着无数人，其被后人称为“圣人”（中国历史上两个半圣人–孔子、王阳明、曾国藩）。四配（颜回、曾子、子思、孟子）、十二哲（11位孔子得意弟子+南宋朱熹）、先贤（孔子弟子+孟子3弟子）：79人；由于其对儒家文学的贡献，于明代万历十二年，从祀于孔庙的先儒之列。他的整套心学思想，成为日本明治维新运动的思想武器，推动日本走向了发达国家的行列中。与“孔子、孟子、朱熹”并称“孔孟朱王”，真正做到了不朽：立德、立功、立言。是非常之人，有非常之事，立非常之功。
2023-02-06 13:45:03
1003
翻译 理解 javascript:void(0) 语句
在需要链接但不需要操作时用作占位符 URL，而用作占位符 URL 以跳转到页面顶部或在同一页面内创建内部链接。
2023-01-31 14:28:00
2239
原创 从南丁格尔图到医学发展史
可视化中，前端用于表现不同类目的数据在总和中的占比的场景，往往会采用饼图。针对数据大小相近，南丁格尔图的呈现会更加美观。
2023-01-16 14:55:34
543
原创 vue2.0 插槽不是响应性的
请注意插槽不是响应性的。如果你需要一个组件可以在被传入的数据发生变化时重渲染，我们建议改变策略，依赖诸如props或data等响应性实例选项。
2023-01-12 10:56:15
1170
原创 Web Workers RPC：Comlink 源码解析
上篇文章，有提及 Web Workers RPC 以解决浏览器不阻塞UI的问题，其中 comlink 是一把利器，本文就 comlink 的关键源码进行解析。Comlink 通过提供 RPC 实现将基于的 API 变成了对开发人员更友好的“类似本地调用”方式。
2022-10-24 11:42:33
1447
原创 Web Workers RPC
Comlink（RPC方式）使我们可以更多的关注业务内容，忽略调用（网络）细则。客户端应用程序调用本地存根（stub），而不是调用实际代码；服务端应用程序接受参数，通过服务器存根（stub）检索实际代码进行运行。
2022-09-21 10:09:46
1960
原创 关于el-upload看这一篇就够了
el-upload 提供了诸多处理，为我们日常开发提供了便利性，同时也存在着一些边界没有处理。所以，这里建议如下：【关于校验】放到on-change中实现，而不是中这样无需关心是否为自动上传执行问题（非自动掉用submit，才触发）返回 false，会执行on-remove，整体比较混乱【关于是否自定义 file-list】如果存在存量file，一定要使用file-list，便于初始化展示对于文件列表有其他业务要求可自定义，否则不建议使用，避免引用之间的传递问题...
2022-08-03 19:29:18
7325
原创 别把对象当Map
使用JavaScript开发过程中，我们经常会借助对象Object来存储数据，从某种意义上，其作用类似Map，均为key-value键值对的方式存储。JavaScript 中的对象是糟糕的 map，只能使用字符串类型作为 key，并且存在访问原型属性的风险。因此，使用内置的 Map 集合！！！...
2022-07-27 19:19:32
668
1
原创 javascript 位操作用途、位移枚举（多选枚举）
计算机系统中，数值一律采用二进制补码来表示和存储（寄存器）。 javascript 中的整型在内存中都是一个 64 位双精度浮点型，但是 js 进行位运算时，会将操作数转成带符号位的 32 位比特序列 01（补码）。运算结束后，再按照 64 位浮点格式存储。这样导致的结果：精度丢失（直接截断）！...
2022-07-22 11:05:40
998
原创 最佳实践：vue组件引用传值（续篇）
需要大家深刻理解vue单向数据流思想，不要为了节省代码（或偷懒），产生难以维护的代码！当父子组件对引用类型需要同步修改时，在子组件中需要切断相关引用，避免引用传值传递破坏vue的副作用，违背了vue单向数据流的设计初衷。...
2022-07-15 09:34:07
706
原创 Thinking--validatorjs中isIP的巧妙实现
Thinking系列，旨在利用10分钟的时间传达一种可落地的编程思想。isIP 是 validatorjs 中经常被使用到的验证方法，关于该验证方法具体是如何实现的？validatorjs 中又有哪些好的点可以借鉴？方法说明isIP(str [, version])check if the string is an IP (version 4 or 6)version 作为可选项，如果不传递任何值，需要进行 v4 或 v6 的判断，任何一个通过即可。模拟实现编写两个.
2022-05-04 23:18:20
763
原创 如果身处历史，你会怎么选？-- 舍不得读完的中国史
先贴一段个人感觉越想越有意思（道理）的话：就寻常人而言，他们的能力只能看到眼下的事儿，面对伟大的突破时，他们一上来不可能热心投入。（先是说明庸人们的眼界有局限。）他们会有闲言碎语，他们会冷嘲热讽。可是等丰硕成果显现后，他们又会欢天喜地地第一个冲上去“摘桃”。（人性丑陋，人们的意见是不值得当回事的。）真正品格高贵的人，绝对不会随波逐流；建立不世功业的人，绝不会征求每一个人的意见。（牛人自己得有主意。）只要能使国家富强受益，不一定要遵循传统。（痛打旧势力的脸。）普通人只习惯于他们的那种生活方式，所谓
2022-03-09 11:32:26
1225
原创 Vue项目兼容IE（续） babel7.4.0+
关于 vue-cli 项目兼容 IE 的内容，请查看 https://blog.csdn.net/ligang2585116/article/details/103554818本文针对 babel 7.4.0+ ，处理方式仍然是寻找相应 Babel polyfill。转换 ES6+ 代码这里我们仍然采用官方「第3种」 方式。babel.config.js 无需修改（这里需要特别注意）module.exports = { presets: [ '@vue/cli-plugin-b.
2022-02-08 18:15:03
940
1
原创 web 通信--跨文档、worker、通道
跨文档通信（cross-document messaging）、worker通信（cross-worker messaging）、通道通信（channel messaging）MessageEvent消息事件 MessageEvent() 用于：Cross-document messaging (参见 Window.postMessage() 和 Window.onmessage).Channel messaging (参见 MessagePort.postMessage() (en-US) 和M
2022-01-23 20:14:36
1141
1
原创 thinking--javascript 中如何使用记忆（Memoization ）
Memoization 是一种常用的技术，可以帮助显着加快代码速度。这种技术依赖于缓存来存储先前完成的计算或执行的结果。缓存的目的是避免多次执行相同的工作。基于当前处理的方案，很容易清晰界定使用的边界：用： Memoization 主要用于加速性能缓慢、成本高或耗时的函数在相同情况下的多次调用的场景弃： Memoization 将结果存储在内存中，因此在不同的情况下多次调用同一函数时应避免使用以 斐波那契 为例：连续调用 fibonacci(32)10次。const fibonacci = (
2021-12-25 11:09:02
718
原创 Thinking--javascript 多类目创建（npm源码解读）
Npm 获取配置的顺序（由高到低）：Command Line Flags > Environment Variables > npmrc Files > Default ConfigsCommand Line Flags：--flag1 --flag2 bar -- flag3 结果：flag1=true，flag2=bar，flag3为命令参数。Environment Variables：以 npm_config_ 开头的环境变量将被解释为配置参数。npm_config_flag
2021-12-08 20:08:47
815
原创 碳达峰、碳中和计算原理
偶然的机会参与到了公司新合作洽谈的业务中。新的业务是“双碳”，作为技术人员和中国双碳协会有了一次正式的沟通机会。在这过程中，第一次和国家宏观政策如此近距离，对于自己来说，是一次小白的学习之旅。本文主要想讲述一下关于“双碳”的基本概念，以及作为一名技术人员，对其中公式及底层逻辑的梳理。2020年9月22日，中国政府在第七十五届联合国大会上提出：“中国将提高国家自主贡献力度，采取更加有力的政策和措施，二氧化碳排放力争于2030年前达到峰值，努力争取2060年前实现碳中和。”上述提到的“双碳”，正是指：碳
2021-11-20 21:44:46
9057
原创 vue2项目中如何使用es2020
ECMAScript 规范史ECMAScript 基于多种原始技术，最著名的是 JavaScript (Netscape) 和 JScript (Microsoft)。截止2022年，正式标准一共发布12次，es2020草案撰写中。1997年06月，ECMAScript 第一版语言被采纳，标准规范发布；1998年06月，Ecma 大会批准了第二版；1999年12月，强大的正则表达式、更好的字符串处理、新的控制语句、try/catch 异常处理、更严格的错误定义、数字输出格式以及对未来语言增长预期的
2021-11-04 20:26:25
4070
6
原创 JavaScript移除对象中不必要的属性
Thinking系列，旨在利用10分钟的时间传达一种可落地的编程思想。业务开发中，我们经常会遇到：基于后端返回接口数据，前端保存到对象 Object 中，前端开发过程中为了一些场景的便利性，需要在该对象中增加相应的属性，但这些属性对于后端没有意义，保存提交时希望删除掉。真实业务代码：保存前需要删除对应的 *Value 字段async saveData (type, data) { // 提交时删除多余字段 delete data.isCommonValue delete data.is.
2021-10-24 20:12:18
9282
2
原创 LFU -- Javascript实现版本
LFU（Least Frequently Used）LFU 最近最不常用，是一种常见的淘汰（置换）算法，选择最近使用次数最少的予以淘汰。常用于内存管理。对每个块进行引用计数，当缓存达到容量上限并有新的模块插入时，系统将搜索具有最低计数的块删除。算法实现：双向链表 + 哈希表节点：Node {key, value, freq, pre, post}key、valuefreq：使用频率， 删除时使用pre、post： 前置及后置节点，插入使用双向链表：DualLinkedList
2021-10-24 20:06:46
674
原创 LRU -- Javascript实现版本（核心代码只有10行）
LRU（Least Recently Used）LRU 最近最少使用，是一种常见的淘汰（置换）算法，选择最近最久未使用的予以淘汰。常用于内存管理。浏览器 IndexedDB 达到存储上限后，自动清理采用的策略正是 LRU。当可用磁盘空间已满时，配额管理器将根据LRU策略开始清除数据——最近最少使用的源将首先被删除，然后是下一个，直到浏览器不再超过限制。我们使用临时存储跟踪每个源的“上次访问时间”。 一旦达到临时存储的全局限制（之后会有更多限制），我们将尝试查找所有当前未使用的源（即没有打开选项卡
2021-10-11 19:14:19
630
原创 前端新的构建范式
前端的交付基于浏览器，资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，是前端发展中一直探索的难题。模块化 这个词大家一定有所熟知。模块的产生就是为了解决前端日趋复杂，从而加载越来越多资源而产生的问题。最终目的是为了提高生产力！前端模块发展历程：前端模块化系统模块化发展到今天，其基本的范式为：利用 bundle 工具（如 webpack）将源码打包成浏览器可识别的 bundle。范式从本质上讲是一种理论体系、理论
2021-09-26 18:35:26
896
1
原创 你不知道的 forEach（javascript）
forEach 为何会跳过不存在的元素？callback 中变更元素又有哪些问题？如何终止执行？异步执行顺序如何保障？结合ecma262规范一一解答。
2021-09-22 18:21:30
892
3
aes加密&解密算法前端实现
2023-02-23
程序员面试宝典-前端-2023最新
2023-02-23
毕业论文-办公自动化系统的设计和实现
2023-02-20
jquery插件
2014-11-15
yuicompressor-2.4.jar
2014-11-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人