- 博客(214)
- 资源 (9)
- 收藏
- 关注
RSS订阅原创 前端实现大文件上传(文件分片、文件hash、并发上传、断点续传、进度监控和错误处理，含nodejs)
大文件分片上传是前端一种常见的技术，用于提高大文件上传的效率和可靠性。主要原理和步骤如下。
2025-01-04 15:46:51
1216
原创 colorthief.js(图像中自动提取出主色调、调色板或者平均颜色)源码解析&&MMCQ算法
Color Thief 是一个开源的 JavaScript 库，它能够从图像中自动提取出主色调、调色板或者平均颜色。通过分析图像的像素数据，Color Thief 计算出最具代表性的颜色，并将这些颜色值返回。这个库可以在浏览器和 Node.js 环境中运行，使得动态地获取图片的主要颜色成为可能核心功能getColor：获取图像的主导颜色，返回一个包含三个整数的数组，分别代表红、绿、蓝值。
2024-11-30 12:00:11
1048
1
原创 js ResizeObserver API
使用场景：如果你需要监测特定元素的大小变化，Resize Observer 是更好的选择。如果只是需要监测窗口大小变化，使用 resize 事件更为简单。选择依据：基于项目需求和浏览器兼容性来决定使用哪种方法。对于性能要求高和需要精确控制的情况，Resize Observer 更合适；而对于基础的窗口调整监控，监听 resize 事件可能就足够了。希望这些信息能帮助你理解 Resize Observer 和窗口 resize 事件的区别及各自的优缺点！
2024-11-17 19:11:04
420
原创 使用二分查找实现纯文本展开和收起功能
二分查找是一种高效的查找算法，适用于在有序数组中查找特定元素。它的基本思想是通过将数组分成两半来缩小查找范围，从而减少查找次数。算法思想和基本实现步骤初始化边界：定义两个指针，left 指向数组的起始索引，right 指向数组的结束索引。计算中间索引：使用公式 mid = Math.floor((left + right) / 2) 计算中间索引。比较元素：将目标值与中间元素进行比较：如果目标值等于中间元素，查找成功，返回中间索引。
2024-11-10 15:41:45
610
原创 p-limit 并发库源码解析
p-limit 是一个用于控制并发操作数量的轻量级JavaScript 库，可以用在node和浏览器环境。它非常适合在处理异步操作时，例如网络请求或文件读取时，限制同时执行的操作数量，从而避免过载和资源消耗。
2024-10-19 16:29:05
1064
原创 webpack源码分析——loader-runner库之runLoaders函数
runLoaders 函数内分为“读取配置和变量初始化”、“初始化loader配置”、“初始化loaderContext对象”和“调用iteratePitchingLoaders函数”四个阶段。runLoaders 函数是loader-runner库导出的两个方法之一，它用来执行loader，对指定的文件进行“转义”\。dirname 函数(__dirname 的变体实现)parsePathQueryFragment 函数。
2024-04-24 10:56:21
501
1
原创 webpack源码分析——enhanced-resolve库之getType、normalize、join和cachedJoin函数
该函数通过传入的路径，判断并返回其类型值。返回的类型值为PathType中定义的值之一。该函数通过调用node的path.normalize方法规范化给定的 path。该函数在 join 函数的基础上加上缓存。注：什么是Posix？该函数进行路径进行拼接。
2024-04-19 19:56:52
1311
原创 webpack源码分析——enhanced-resolve库之cdUp函数
该函数寻找上层目录，每次调用函数时对输入的路径进行一次寻找上级目录。如果没有找到返回null。
2024-04-18 11:12:35
1185
原创 webpack源码分析——makeCacheable函数和weakMap的缓存应用场景
例如，在Web开发中，对于解析URL或处理文件路径等操作，使用缓存可以显著减少重复计算的开销，从而提高应用程序的响应速度和效率。通过将缓存绑定到特定的对象，可以确保缓存的生命周期与对象的生命周期相匹配，这有助于避免内存泄漏问题。如果提供了关联对象，fn 将尝试从缓存中获取结果，如果缓存中没有结果，它将调用 realFn 并将结果存储在缓存中。否则，它会创建一个新的 Map 对象，将其与对象关联，并返回它。该函数是将一个不带缓存的函数 realFn 转换成一个带缓存的版本。
2024-03-28 17:55:13
589
原创 webpack源码分析——tapable中before和stage如何改变执行顺序
循环前未准备插入tap4时：taps:[’‘tap1-stage:0’,‘‘tap2-stage:0’,’‘tap3-stage:3’, ‘‘tap3-stage:3’]循环前未准备插入tap4时：taps:[’‘tap1-stage:0’,‘‘tap2-stage:0’,’‘tap3-stage:0’, ‘‘tap3-stage:3’]不再循环完成插入时：taps:[’‘tap1-stage:0’,‘‘tap2-stage:0’,’“'tap4-stage:2”,‘tap3-stage:3’]
2024-03-03 10:54:32
1050
原创 webpack源码分析——cleverMerge、parseObject、cachedParseObject、cachedCleverMerge、mergeEntries等函数
主要功能是合并两个给定的对象，并且使用缓存来存储合并结果，以便在将来传入相同的对象时可以直接返回缓存的结果，而不需要重新计算。mergeEntries 函数的主要功能是合并两个对象，这些对象可能包含基础值、按属性分类的值，以及按值分类的映射。cleverMerge 函数中代码相对比较简单，主要的逻辑在 _cleverMerge 函数中。这个合并不是简单的表层合并，而是递归地合并嵌套的对象和数组。该函数的功能是判断并返回传入值的类型。主要功能是对给定的对象进行结构化解析，并组织信息以便于后续的访问和处理。
2024-02-19 10:02:01
872
原创 webpack源码分析——truncateArgs函数
因为装不下所以输出内容，通过availableLength < arraySum(lengths.map(i => Math.min(i, 6)))，判断发现可以装下args数组中前3项。如果lengths中长度超过6时按照6算，是为了实现在不充裕的界面可用长度下该字符最多显示的数量。该函数可以用于用户界面中的文本截断，确保长文本在有限的显示空间内能够适当显示，并且用户可以了解到部分文本已被省略。当多个参数时，truncateArgs 函数总是想着把多个参数内容，最大化输出到界面上，因此呈现如下规律。
2024-01-30 16:17:20
1138
原创 san.js源码解读之工具(util)篇——数据校验
createChainableChecker 函数是所有校验函数的基础，它接收一个参数(validate),在后面 checkType 函数中运行。对于简单类型(any、array、object、func、string、number、bool和symbol)校验函数在san中都是使用 createPrimaryTypeChecker 函数传入对应要校验的类型而生成的。处理 DataTypes.string 校验字符串外，san 提供了一系列校验函数(如下)，方便开发中使用。需要注意的是san为了考虑性能，
2024-01-06 16:16:11
1399
原创 合成事件在san.js中的应用
DOM3 Event 新增了合成事件(CompositionEvent ), 用于处理通常使用 IME 输入时的复杂输入序列。
2023-11-18 18:22:27
2339
原创 san.js源码解读之模版解析(parseTemplate)篇——readAccessor函数
这里需要了解的是向 paths 数组中推入数据时调用了 readTertiaryExpr ，这是因为在‘[]’中可能有复杂的表达式，里面有变量数值等逻辑，所以需要从头解析。如果符合 ‘true’ 、‘false’和’null’，那么直接返回，后续不执行。当遇到‘[’时，说明是’demo[job]'、‘demo[index?1: 0]’ 、‘demo[‘true’]’等情况，那么执行面的语句。然后对当前访问表达式进行循环匹配，当遇到 ‘.’ 时，说明是‘demo.job’ 这种情况，那么执行下面语句。
2023-10-29 10:23:50
2129
原创 san.js源码解读之模版解析(parseTemplate)篇——readIdent函数
这里需要知道的是为啥是match[1] 而不是 match[0] 或者 [2]?完全匹配成功的文本将作为返回数组的第一项，从第二项起，后续每项都对应一个匹配的捕获组。可以简单为正则表达式中使用括号‘()’括起来的就是一个捕获组，在匹配变量名表达式中可以看出([$0-9a-z_]+)是。首先用到了 walk 类中的 match 函数，该函数源码如下(这里不是 walk 类全部代码而是列出了本次用到的代码)match 函数中主要用到了 exec 函数来进行正则表达式匹配，match 函数中需要注意一下几点。
2023-10-28 22:28:11
1144
原创 san.js源码解读之工具(util)篇——nexttick函数
在代码中可以看到 _resolve 函数，这个是怎么实现的呐？大家都知道代码是同步解析，在遇到 callbacks.push 代码时，会向 callbacks 数组中推入匿名函数，但是此时 _resolve 函数为 undefined, 因为没有执行到 callbacks 数组中的函数所有没事也不会报错，接着执行下面代码。flushCallbacks 函数，用来主要执行队列中的函数。执行 timerFunc 函数时，由于里面是有微/宏任务，所以先执行下面的同步任务，到同步任务执行完了之后再执行微/宏任务。
2023-09-27 16:32:23
461
原创 san.js源码解读之工具(util)篇——splitStr2Obj函数
【代码】san.js源码解读之工具(util)篇——splitStr2Obj函数。
2023-09-26 17:51:36
337
原创 san.js源码解读之工具(util)篇——bind函数兼容
这里需要注意的是 bind 需要使用 apply 函数进行调用。因为 bind 必须在函数上调用，如果 nativeBind(func, slice.call(arguments, 1)) 这么传入会报错。判断原 bind 函数是否存在并且和传入函数原型链上的 bind 函数是否相同，如果相同就直接调用原 bind 函数。如果环境中没有 bind 函数，则需要兼容 bind 函数，兼容 bind 函数原理和手写 bind 函数基本一致。获取 bind 和 slice 原函数。
2023-09-26 11:13:48
326
原创 san.js源码解读之工具(util)篇——each函数
但是这个迭代器模式，可能你已经用了很久了只是不知道它的名字罢了。比如 jquery中的 each 函数。如果不了解迭代器模式的话这里贴一篇我之前写过的博客可以看一下。在开始解析源码之前，先来看一下 javascript 设计模式——迭代器模式，如果没有接触过该模式的小伙伴可能一脸疑惑，表示没听说过。，在这里就不多说了。
2023-09-18 16:59:56
197
原创 san.js源码解读之工具(util)篇——inherits函数
它的思路是使用原型链继承原型上的属性和方法，使用借用构造函数继承实例属性。从上述代码中可以看出，两个实例(instance1、instance2)操作了同一个父类实例属性，这里只是向里面推入数据，如果有多个实例对该实例共享属性做增删改查，那么最后得出的结果会和预期不符。上面示例中因为只是继承了父类的实例属性和方法，所有父类原型链上的方法和属性时访问不到的。这种继承的最大特点是：在子类构造函数中调用父类构造函数以及子类原型继承父类的实例对象。这种继承的最大特点是：它是寄生式继承+借用构造函数的组合。
2023-09-17 17:41:17
316
原创 san.js源码解读之工具(util)篇——extend函数
通过 for in 循环 source 对象中的可遍历属性, 需要注意的是 for in 循环也能遍历到对象上的继承属性，所以使用 hasOwnProperty 函数判断是否是属于自身属性，如果属于自身属性的拷贝，就进行拷贝(这里需要注意的是拷贝不是深拷贝而是浅拷贝)。解释：该方法返回一个布尔值，表示对象自有属性（而不是继承来的属性）中是否具有指定的属性，它不会在对象原型链中检查指定的属性。in 语句以任意顺序迭代一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。
2023-09-14 10:22:11
276
原创 Layui源码解读之use函数(模块加载)
立即执行函数中做的事情是，把 string 和 function 类型的参数转为字符串数组形式并返回给 apps ，数组中是layui要加载的模块。会先判断当前环境中是否已经引入 jquery，如果引入就遍历要加载的模块(apps)，找到要加载的模块名为 jquery 的，然后删除。获取加载的模块 URL。如果是内置模块, 则按照 dir 参数拼接模块路径, 否则如果是扩展模块, 则判断模块路径值是否以 {/} 开头, 如果路径值是 {/} 开头, 则模块路径即为后面紧跟的字符。
2023-06-02 10:00:25
7614
原创 Layui源码解读之define函数
exports函数中执行模块注册和存储回调函数，其中setApp函数通过 layui[app] = exports 语句把导出的内容挂在到全局中，并且使用 config.status[app] = true 语句表示该模块已经被加载。当你声明了上述的一个模块后，你就可以在外部使用了，demo 就会注册到 layui 对象下，即可通过 var demo = layui.demo 去得到该模块接口。callback函数执行时，首先判断 factory 函数是否为函数，为函数时执行 factory 函数。
2023-05-30 10:34:04
1785
原创 typescript is类型谓词
但是不同的是typeof、instanceof、in关键字在js中已经是存在的，在ts中使用它们，进行类型收缩时，比较无感知（因为符合js中的用法）会发现，ts不能够根据isUndef函数进行类型收缩，这时候可以使用is类型谓词告诉ts只有当参数为null或者undefined时，返回值才为true，从而进行类型收缩。第一个 if判断中使用typeof判断strs，如果通过的话，那么strs变量可能是数组或者null（ts提示操作也是这样的）如果判断的地方多了，可以抽取出一个公共函数来判断。
2023-05-04 18:15:09
1262
2
原创 手动创建 vue2 ssr 开发环境
手动搭建 vue ssr 一直是一些前端开发者的噩梦，因为其中牵扯到很多依赖包之间的配置以及webpack在node中的使用。就拿webpack配置来说，很多前端开发者还是喜欢用webpack-cli脚手架搭建项目。导致这样的原因之一无外乎学习成本高，软件复杂等。这也是有些前端开发者直接拥抱nuxt.js的部分原因。这篇博客使用vue2，以步骤为主，来展示如何创建完整ssr测试环境。
2023-02-19 21:50:18
1754
2
原创 js 回到顶部逻辑实现和elementUI源码解析
大家或多或少都会遇到“回到顶部”这样的需求，在此分享这个技术点以及可能遇到的问题。再分析element源码。回到顶部关键技术点在backTopClickHandle函数中在该函数中，首先判断当前是否存在定时器，如果有下面步骤不执行。否则获取滚动条高度, 启动定时器，在定时器中计算出当前滑动速度，并计算出当前滚动条高度。最后如果滚动条高度小于等于0，清除定时器。在backTopClickHandle函数中有两点需要特别注意scrollTop的位置在setInterval(() => {…})内，效果图
2022-11-16 16:46:17
1766
原创 Vue packages version mismatch: - vue@2.7.12 - vue-server-renderer@2.7.11 This may cause things to
如果项目中有package-lock文件时，使用npm shrinkwrap 则把package-lock更换为npm-shrinkwrap文件，并且npm-shrinkwrap。为了解决问题，首先通过传统的把清除npm缓存、node_modules删除、package-lock.json文件删除都是无效，最要命的是这个项目是3年前的项目，把node_modules删除后，再次下载报依赖错误，看来这种方法不可行，于是恢复了之前的状态。官网对npm-shrinkwrap.json文件的解释如下。
2022-10-13 17:40:06
5066
3
原创 Selenium: The ChromeDriver could not be found on the current PATH
在源码中找到 locateSynchronously()函数并进行debug发现原来是。当时反复确认自己的代码和环境变量配置无误后，就直接看源码了。安装官网提示的安装步骤进行安装并开始启动时报如下错误。所以解决方案时重启电脑或者重启node即可。...
2022-08-31 17:37:06
1282
原创 nodeJs如何搭建http2 localhost环境?
知道mkcert生成的证书(在生成并安装证书的第二步中已经知道，在管理员目录下)，并移动到http2项目下的key目录。设置PowerShell的ExecutionPolicy为Bypass或者AllSigned。把pem文件类型改为(改之前可以先备份)crt结尾文件(因为win上不识别pem)两种方法大致一样选哪个都行，如果自己有特殊需求可以直接查看。以管理员的身份打开PowerShell的控制台。的GitHub提示使用choco下载。这里提供我两种成功下的方法。创建localhost证书。...
2022-07-31 11:40:16
642
原创 Layui源码解读之data函数(本地持久化存储)
一、data 函数 // 本地持久性存储 Layui.prototype.data = function(table, settings, storage){ table = table || 'layui'; // 默认 layui storage = storage || localStorage; // 默认 localStorage // 如果没有 JSON 或者 parse, 则返回 if(!win.JSON || !
2022-05-14 16:04:48
1456
2
原创 Layui源码解读之device函数(获取浏览器信息)
一、device 函数 // 设备信息 Layui.prototype.device = function(key){ var agent = navigator.userAgent.toLowerCase(); // 获取 ua ① // 获取版本号 var getVersion = function(label){ var exp = new RegExp(label + '/([\^\\s\\_\
2022-04-24 11:17:05
3858
1
原创 Layui源码解读之img函数(图片预加载)
一、img 函数 Layui.prototype.img = function(url, callback, error){ var img = new Image(); // 创建 img img.src = url ; // 赋值 url // complete 更多内容查看 https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLImageElement/complete
2022-04-21 10:27:43
2325
原创 Layui源码解读之each函数(迭代器模式)
一、each函数 源码 // 遍历 (内部迭代) Layui.prototype.each = function (obj, fn) { var key; var that = this; var callFn = function (key, obj) { // 回调函数 return fn.call(obj[key], key, obj[key]); }; // fn 不为 fun
2022-04-17 17:15:39
4639
原创 IntersectionObserver API 创建图片懒加载(实战)
一、 效果图二、 代码<template> <img ref="imgLazy" :data-src="dataSrc" :src="src" :alt="alt" :title="title" class="kh-img-lazy" @error="imgErrorHandle" ></template><script lang="ts">import { defineCompon
2022-03-06 16:47:01
327
原创 Cannot find module ‘@xxxx‘ or its corresponding type declarations.Vetur(2307)
一、问题表述当我们想在vue页面通过import requestfrom '@client/utils/request’引入模块时，Vetur总是会提示Cannot find module ‘@xxxx’ or its corresponding type declarations。这样的错误，同时项目不能运行(如下图）。今天就解决以为这个问题。二、项目中为什么使用别名进行模块导入?如果使用相对导入(import myComponent from ‘…/…/…/components/myCompon
2021-12-26 11:56:45
49197
3
原创 策略和状态模式应用——tab切换时，图表内容变化(二对一)
注意:本篇博客不讲原理，如果看不懂请先补充策略模式、状态模式、闭包、惰性求值、函数式编程等相关内容一、效果二、为什么使用策略和状态模式vue普通的tab切换很简单，使用下面代码就可以搞定。凡事就怕但是，如果使用下面的代码形式画echarts的话，切换图的时候，因为echarts获取不到宽高，导致图渲染不到页面上去。有人会说可以加this.$nexttick，是的。可以通过加入该函数做到延迟的echarts获取到dom宽高再渲染，但是需要有几个切换加几个this.$nexttick。而且有几个切换需要
2021-11-07 17:04:15
375
1
原创 Vue 通过localStorage使用字符串数组队列实现全局搜索功能(从需求到实现 超详细！！)
一、需求1.使用浏览器localStorage，开发网站全局搜索功能。2.搜索历史不超10条，超过10条依次覆盖时间最久的历史搜索记录3.新输入的搜索记录，下次input不输入内容focus时应该展示在第一条。4.新输入的搜索记录回车搜索后，如果之前历史搜索记录中存在，下次input不输入内容focus时这把这条记录放置历史记录展示页面最上面第一条5.input 在输入内容时不展示搜索记录6. 搜索记录不能有重复值7. 一键清除大致开发思维： 使用数组队列来存储历史记
2021-08-14 12:01:04
984
6
数据结构(C语言版)——链队列(代码版)
2020-09-25
数据结构(C语言版)——循环顺序队列(代码版)
2020-09-24
数据结构(C语言版)——链栈(代码版)
2020-09-23
数据结构(C语言版)——顺序栈(代码版)
2020-09-22
实验3 Red Hat的操作 - 副本.doc
2019-09-26
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人