- 博客(208)
- 资源 (9)
- 收藏
- 关注
RSS订阅原创 webpack源码分析——enhanced-resolve库之getType、normalize、join和cachedJoin函数
该函数通过传入的路径，判断并返回其类型值。返回的类型值为PathType中定义的值之一。该函数通过调用node的path.normalize方法规范化给定的 path。该函数在 join 函数的基础上加上缓存。注：什么是Posix？该函数进行路径进行拼接。
2024-04-19 19:56:52
1139
原创 webpack源码分析——enhanced-resolve库之cdUp函数
该函数寻找上层目录，每次调用函数时对输入的路径进行一次寻找上级目录。如果没有找到返回null。
2024-04-18 11:12:35
1078
原创 webpack源码分析——makeCacheable函数和weakMap的缓存应用场景
例如，在Web开发中，对于解析URL或处理文件路径等操作，使用缓存可以显著减少重复计算的开销，从而提高应用程序的响应速度和效率。通过将缓存绑定到特定的对象，可以确保缓存的生命周期与对象的生命周期相匹配，这有助于避免内存泄漏问题。如果提供了关联对象，fn 将尝试从缓存中获取结果，如果缓存中没有结果，它将调用 realFn 并将结果存储在缓存中。否则，它会创建一个新的 Map 对象，将其与对象关联，并返回它。该函数是将一个不带缓存的函数 realFn 转换成一个带缓存的版本。
2024-03-28 17:55:13
499
原创 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
939
原创 webpack源码分析——cleverMerge、parseObject、cachedParseObject、cachedCleverMerge、mergeEntries等函数
主要功能是合并两个给定的对象，并且使用缓存来存储合并结果，以便在将来传入相同的对象时可以直接返回缓存的结果，而不需要重新计算。mergeEntries 函数的主要功能是合并两个对象，这些对象可能包含基础值、按属性分类的值，以及按值分类的映射。cleverMerge 函数中代码相对比较简单，主要的逻辑在 _cleverMerge 函数中。这个合并不是简单的表层合并，而是递归地合并嵌套的对象和数组。该函数的功能是判断并返回传入值的类型。主要功能是对给定的对象进行结构化解析，并组织信息以便于后续的访问和处理。
2024-02-19 10:02:01
803
原创 webpack源码分析——truncateArgs函数
因为装不下所以输出内容，通过availableLength < arraySum(lengths.map(i => Math.min(i, 6)))，判断发现可以装下args数组中前3项。如果lengths中长度超过6时按照6算，是为了实现在不充裕的界面可用长度下该字符最多显示的数量。该函数可以用于用户界面中的文本截断，确保长文本在有限的显示空间内能够适当显示，并且用户可以了解到部分文本已被省略。当多个参数时，truncateArgs 函数总是想着把多个参数内容，最大化输出到界面上，因此呈现如下规律。
2024-01-30 16:17:20
1071
原创 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
1247
原创 合成事件在san.js中的应用
DOM3 Event 新增了合成事件(CompositionEvent ), 用于处理通常使用 IME 输入时的复杂输入序列。
2023-11-18 18:22:27
2217
原创 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
2049
原创 san.js源码解读之模版解析(parseTemplate)篇——readIdent函数
这里需要知道的是为啥是match[1] 而不是 match[0] 或者 [2]?完全匹配成功的文本将作为返回数组的第一项，从第二项起，后续每项都对应一个匹配的捕获组。可以简单为正则表达式中使用括号‘()’括起来的就是一个捕获组，在匹配变量名表达式中可以看出([$0-9a-z_]+)是。首先用到了 walk 类中的 match 函数，该函数源码如下(这里不是 walk 类全部代码而是列出了本次用到的代码)match 函数中主要用到了 exec 函数来进行正则表达式匹配，match 函数中需要注意一下几点。
2023-10-28 22:28:11
1047
原创 san.js源码解读之工具(util)篇——nexttick函数
在代码中可以看到 _resolve 函数，这个是怎么实现的呐？大家都知道代码是同步解析，在遇到 callbacks.push 代码时，会向 callbacks 数组中推入匿名函数，但是此时 _resolve 函数为 undefined, 因为没有执行到 callbacks 数组中的函数所有没事也不会报错，接着执行下面代码。flushCallbacks 函数，用来主要执行队列中的函数。执行 timerFunc 函数时，由于里面是有微/宏任务，所以先执行下面的同步任务，到同步任务执行完了之后再执行微/宏任务。
2023-09-27 16:32:23
362
原创 san.js源码解读之工具(util)篇——splitStr2Obj函数
【代码】san.js源码解读之工具(util)篇——splitStr2Obj函数。
2023-09-26 17:51:36
265
原创 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
244
原创 san.js源码解读之工具(util)篇——each函数
但是这个迭代器模式，可能你已经用了很久了只是不知道它的名字罢了。比如 jquery中的 each 函数。如果不了解迭代器模式的话这里贴一篇我之前写过的博客可以看一下。在开始解析源码之前，先来看一下 javascript 设计模式——迭代器模式，如果没有接触过该模式的小伙伴可能一脸疑惑，表示没听说过。，在这里就不多说了。
2023-09-18 16:59:56
136
原创 san.js源码解读之工具(util)篇——inherits函数
它的思路是使用原型链继承原型上的属性和方法，使用借用构造函数继承实例属性。从上述代码中可以看出，两个实例(instance1、instance2)操作了同一个父类实例属性，这里只是向里面推入数据，如果有多个实例对该实例共享属性做增删改查，那么最后得出的结果会和预期不符。上面示例中因为只是继承了父类的实例属性和方法，所有父类原型链上的方法和属性时访问不到的。这种继承的最大特点是：在子类构造函数中调用父类构造函数以及子类原型继承父类的实例对象。这种继承的最大特点是：它是寄生式继承+借用构造函数的组合。
2023-09-17 17:41:17
182
原创 san.js源码解读之工具(util)篇——extend函数
通过 for in 循环 source 对象中的可遍历属性, 需要注意的是 for in 循环也能遍历到对象上的继承属性，所以使用 hasOwnProperty 函数判断是否是属于自身属性，如果属于自身属性的拷贝，就进行拷贝(这里需要注意的是拷贝不是深拷贝而是浅拷贝)。解释：该方法返回一个布尔值，表示对象自有属性（而不是继承来的属性）中是否具有指定的属性，它不会在对象原型链中检查指定的属性。in 语句以任意顺序迭代一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。
2023-09-14 10:22:11
155
原创 Layui源码解读之use函数(模块加载)
立即执行函数中做的事情是，把 string 和 function 类型的参数转为字符串数组形式并返回给 apps ，数组中是layui要加载的模块。会先判断当前环境中是否已经引入 jquery，如果引入就遍历要加载的模块(apps)，找到要加载的模块名为 jquery 的，然后删除。获取加载的模块 URL。如果是内置模块, 则按照 dir 参数拼接模块路径, 否则如果是扩展模块, 则判断模块路径值是否以 {/} 开头, 如果路径值是 {/} 开头, 则模块路径即为后面紧跟的字符。
2023-06-02 10:00:25
4757
原创 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
1280
原创 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
1072
2
原创 手动创建 vue2 ssr 开发环境
手动搭建 vue ssr 一直是一些前端开发者的噩梦，因为其中牵扯到很多依赖包之间的配置以及webpack在node中的使用。就拿webpack配置来说，很多前端开发者还是喜欢用webpack-cli脚手架搭建项目。导致这样的原因之一无外乎学习成本高，软件复杂等。这也是有些前端开发者直接拥抱nuxt.js的部分原因。这篇博客使用vue2，以步骤为主，来展示如何创建完整ssr测试环境。
2023-02-19 21:50:18
1508
2
原创 js 回到顶部逻辑实现和elementUI源码解析
大家或多或少都会遇到“回到顶部”这样的需求，在此分享这个技术点以及可能遇到的问题。再分析element源码。回到顶部关键技术点在backTopClickHandle函数中在该函数中，首先判断当前是否存在定时器，如果有下面步骤不执行。否则获取滚动条高度, 启动定时器，在定时器中计算出当前滑动速度，并计算出当前滚动条高度。最后如果滚动条高度小于等于0，清除定时器。在backTopClickHandle函数中有两点需要特别注意scrollTop的位置在setInterval(() => {…})内，效果图
2022-11-16 16:46:17
1714
原创 Vue packages version mismatch: - [email protected] - [email protected] 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
4796
3
原创 Selenium: The ChromeDriver could not be found on the current PATH
在源码中找到 locateSynchronously()函数并进行debug发现原来是。当时反复确认自己的代码和环境变量配置无误后，就直接看源码了。安装官网提示的安装步骤进行安装并开始启动时报如下错误。所以解决方案时重启电脑或者重启node即可。...
2022-08-31 17:37:06
1182
原创 nodeJs如何搭建http2 localhost环境?
知道mkcert生成的证书(在生成并安装证书的第二步中已经知道，在管理员目录下)，并移动到http2项目下的key目录。设置PowerShell的ExecutionPolicy为Bypass或者AllSigned。把pem文件类型改为(改之前可以先备份)crt结尾文件(因为win上不识别pem)两种方法大致一样选哪个都行，如果自己有特殊需求可以直接查看。以管理员的身份打开PowerShell的控制台。的GitHub提示使用choco下载。这里提供我两种成功下的方法。创建localhost证书。...
2022-07-31 11:40:16
560
原创 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
1144
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
3685
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
2109
原创 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
4155
原创 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
294
原创 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
45775
3
原创 策略和状态模式应用——tab切换时，图表内容变化(二对一)
注意:本篇博客不讲原理，如果看不懂请先补充策略模式、状态模式、闭包、惰性求值、函数式编程等相关内容一、效果二、为什么使用策略和状态模式vue普通的tab切换很简单，使用下面代码就可以搞定。凡事就怕但是，如果使用下面的代码形式画echarts的话，切换图的时候，因为echarts获取不到宽高，导致图渲染不到页面上去。有人会说可以加this.$nexttick，是的。可以通过加入该函数做到延迟的echarts获取到dom宽高再渲染，但是需要有几个切换加几个this.$nexttick。而且有几个切换需要
2021-11-07 17:04:15
281
1
原创 Vue 通过localStorage使用字符串数组队列实现全局搜索功能(从需求到实现 超详细！！)
一、需求1.使用浏览器localStorage，开发网站全局搜索功能。2.搜索历史不超10条，超过10条依次覆盖时间最久的历史搜索记录3.新输入的搜索记录，下次input不输入内容focus时应该展示在第一条。4.新输入的搜索记录回车搜索后，如果之前历史搜索记录中存在，下次input不输入内容focus时这把这条记录放置历史记录展示页面最上面第一条5.input 在输入内容时不展示搜索记录6. 搜索记录不能有重复值7. 一键清除大致开发思维： 使用数组队列来存储历史记
2021-08-14 12:01:04
856
6
原创 Vue+TS Echarts股票图
一、效果图二、echarts 股票配置根据dom 生成echarts 实例(this as any)[instance] = echarts.init(this.$refs[ref] as HTMLBaseElement); //创建实例注:instance,ref是变量需要外部传入2. 股票基础配置 import ECHARTSOPTIONSCONFIG from './config/echartConfig';//导入 /* ...... ... .. */(this a
2021-07-22 14:29:23
2129
5
原创 使用TS编写职责链模式优化请求返回数据处理中if判断——前端开发小技巧
一、场景在前端日常开发中，经常会根据返回的状态码判断进行相应的数据操作。在then中充斥着大量的if，这使代码非常耦合并且不直观（如图1.1），在以后维护中也是非常让人头疼。所以今天来优化一下代码图1.1 对请求返回的数据判断然后进行相应数据操作根据图1.1可以发现里面有多个if/else判断。可能大家会觉得图1.1里面的if/else数量还行，不需要优化，但是如果在后期中再加入多个if判断的话，then中整体的if/else会比较多。如果是自己开发的项目可以随意些，但是如果是多人开发的项目，在日后其
2021-05-29 09:54:45
961
3
原创 使用yeoman 创建vue脚手架，并发送npm包，下载并实验。
一、总括yeoman手动搭建自己的脚手架。基本步骤如下①:请确保你有能够正常运行的npm②：请确保你已经了解了yeoman③：npm install -g yo③: npm install -g generator-generator④：编写代码⑤：发布npm包二、起步①:请确保你有能够正常运行的npm这一点不用多说，是必须项②：请确保你已经了解了yeoman如果没有了解yeoman 基本不需要向下面看了。点击可以学习yeoman③：npm install -g yo
2021-03-30 21:30:32
441
原创 vue2.x+ts项目,在props type导入自定义接口类型报‘xxx‘ only refers to a type, but is being used as a value here处理办法
一、报错 ‘xxx’ only refers to a type, but is being used as a value here在Props中使用自定义类型约束时，报上面的错误。然后 我在网上查找教程，找到一个说在ts中导出class 接口，虽然没有报错，但是按照我的下面的定义，在父组件中传入data值，会报错误。那如何改动呐？export class popType { title: { name: string; nameStyle?: style; }; cont
2021-03-10 17:07:56
15345
原创 git 在同一分支开发遇到的Please commit your changes or stash them before you can merge.问题，如何解决
昨天用git 拉去远程分支遇到了一个棘手问题。因为两个人一起开发，所以用的是同一个分支，所以push之前要pull一下。但是在pull之后会得到下面的提示昨天根据上面的提示我选择了commit，结果悲剧了。没有效果，咋啦取代码都没有变化，然后git log 看了才知道 已经覆盖了原来的递交。所以今天简单说一下遇到这样的问题如何解决。第一步：git pull 后，暂存当前的修改第二步:pull 拉取第三步：把暂存的修改pop，解决冲突。就ok了...
2021-03-03 14:44:33
1834
2
原创 webpackcli和webpack-dev-server兼容问题
项目配置"devDependencies": { "cross-env": "^7.0.3", "html-webpack-plugin": "^5.2.0", "ts-loader": "^8.0.17", "webpack": "^5.23.0", "webpack-cli": "^4.5.0", "webpack-dev-server": "^3.11.2" }当使用官方给出方式启动webpack-dev-server时会报错，node:in
2021-02-22 09:39:34
2978
3
数据结构(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关注的人