- 博客(34)
- 收藏
- 关注
RSS订阅原创 Webpack总结
Webpack是一个。它可以将多个模块按照进行静态分析，并生成一个或多个打包后的文件。Webpack的核心概念包括entry（入口）、output（输出）、loader（加载器）和plugin（插件）。
2025-03-16 19:34:55
1147
原创 Ts学习笔记
anyany类型表示任意类型，它可以绕过 TypeScript 的类型检查。当你把一个值指定为any类型时，TypeScript 不会对这个值进行类型检查，你可以对它执行任何操作，就像在 JavaScript 中一样。unknownunknown同样代表任意类型，但它是一种更安全的“任意类型”。和any不同，TypeScript 会对unknown类型的值进行类型检查，在使用unknown类型的值之前，你必须先对其进行类型断言或者类型缩小，否则不能对它进行操作。
2025-03-16 17:32:41
608
原创 lodash手写源码-cloneDeep,debounce,throttle
深拷贝对象用于创建一个对象或数组的深拷贝，即递归地复制对象及其所有嵌套的属性，新对象与原对象在内存中是完全独立的。
2025-03-06 17:47:48
595
原创 Webpack学习笔记（9）
不建议直接使用import @babel/polyfill，这样做会全局引入整个polyfill包，比如array.from全局引入，不但体积大，而且还会污染全局环境。配置library，type可以设置为：window，commonjs，module，amd等等，可以设置为umd可满足多个type但不包括module。当模块运行在commonjs上下文中，this指向的是module.exports并不是window，所以可以覆盖一下。npm publish发布，其他人可以使用。
2024-12-30 18:36:48
439
原创 Webpack学习笔记（8）
entry可以配置为字符串、数组、对象（可以分开打包）上图，app2.js和app.js会打包到一个文件main.js中；lodash会被打包到lodash.js。
2024-12-29 20:47:51
504
原创 Webpack学习笔记（7）
webpack通过resolvers实现模块之间的依赖和引用。所引用的模块可以来自应用程序的代码，也可以是第三方库，resolver帮助webpack从每个require/import语句中，找到需要引入的bundle中的模块代码，当打包模块时，webpack使用enhanced-resolve来解析文件路径。
2024-12-29 17:47:46
376
原创 Webpack学习笔记（6）
首先搭建一个基本的webpack环境：执行npm init -y，创建pack.json，保存安装包的一些信息执行npm install webpack webpack-cli webpack-dev-server html-webpack-plugin -D，出现node_modules和package-lock.json。
2024-12-26 19:49:48
1570
原创 Webpack学习笔记（4）
可以通过命中缓存降低网络流量，是网站加站速度更快。然而在部署新版本时，不更改资源的文件名，浏览器可能认为你没有更新，所以会使用缓存版本。由于缓存存在，获取新的代码成为问题。接下来将配置webpack使得生成的文件会被缓存，并且变化时又能请求到新的文件。如果文件内容改变了，文件名没变，浏览器会使用缓存，所以通过修改output的filename可以实现根据文件内容变化同时修改文件名。
2024-12-21 17:22:37
448
原创 Webpack学习笔记（3）
webpack自身可以加载js模块，不能转化js代码如果打包js文件会原封不动传到浏览器，如果当前浏览器支持ES6代码则可以正常显示，若浏览器版本过低则不支持，需要使用babel-loader结合babel和webpack对js文件解析。
2024-12-20 17:31:50
863
原创 Webpack学习笔记（2）
将src文件下的toml，yaml，json5的文件导入。yaml:有key，有value,靠缩进完成子项设置；toml:通过key=value的格式，子项使用【】；json5：可以加注释，key不用加引号，值可以用单引号，也可以使用转义字符；
2024-12-19 21:27:04
1963
原创 Webpack学习笔记（1）
使用asset打包.jpg后缀的文件，在使用asset时可以自定义资源界限，默认是小于8kb会被视为inline模型，反之是resource模型。grunt和gulp是最早使用的任务执行器，是将所有的项目文件拼接在一起（IIFE）,从而解决了大型作用域问题。当函数变成了一个立即调用的表达式时，表达式中的变量不能够在外部访问，不会污染window，解决了作用域问题。如何加载文件：（在index.html使用script标签加载，data-main='入口文件路径'）
2024-12-18 22:46:08
480
原创 Lodash源码分析-sortBy,orderBy,groupBy
下面依次介绍各个模块。1.baseOrderBy模块-1 : 1);});} else {});});});baseOrderBy 是一个功能强大的排序函数，支持按多个字段或条件对集合进行排序，并且可以指定每个字段的排序顺序。它的核心逻辑包括：处理 iteratees，将其转换为函数。为每个元素生成排序依据的 criteria。使用 compareMultiple 函数进行多条件排序。2.sortBy函数return [];});
2024-12-17 21:34:46
734
原创 Lodash源码分析-filter,find,findLast,reject,partition
下面依次介绍各个模块。1.filter函数});filter函数用于从集合（如数组或对象）中筛选出满足指定 predicate 函数的元素，并返回一个新的数组。arrayFilter：专门用于数组过滤，通过索引遍历数组，效率较高。baseFilter：通用过滤函数，适用于各种集合类型，通过 baseEach 遍历集合。filter：对外公开的方法，根据集合类型选择合适的过滤函数，并处理 predicate。2.reject函数case 0:return!
2024-12-17 20:20:06
1064
原创 Lodash源码分析-countBy,reduce,reduceRight
下面依次介绍各个模块。1.countBy函数} else {});countBy函数用于统计对象数组中某个特定属性的出现次数。其中，createAggregator 是一个假设存在的函数，用于创建一个聚合器。这个函数通常会接收一个聚合操作的回调函数，并返回一个新的聚合函数。hasOwnProperty 是一个对象方法，用于检查对象自身是否具有某个属性，而不是通过原型链继承的属性。baseAssignValue 是一个假设存在的函数，用于将值赋给对象的属性。
2024-12-09 21:08:50
443
原创 Lodash源码分析-every,some,size,includes
下面依次介绍各个模块。1.baseEvery和arrayEvery模块result =!!});if (!baseEvery 函数通过 baseEach 遍历集合中的每个元素，并对每个元素执行 predicate 函数，检查是否所有元素都满足条件。arrayEvery 函数专门为数组设计，通过 while 循环遍历数组中的每个元素，并对每个元素执行 predicate 函数，检查是否所有元素都满足条件。所有条件都满足返回true，有一个不满足则返回false。2.every函数。
2024-11-29 16:34:55
1945
原创 Lodash源码分析-forEach,eachRight,map,flatMap,flatMapDeep,flatMapDepth
下面依次介绍各个模块。1.arrayEach模块break;arrayEach函数遍历数组中的每个元素，并对每个元素执行传入的迭代函数（iteratee）。如果迭代函数返回 false，遍历将提前终止。2.baseEach函数if (!break;createBaseEach 函数用于生成一个新的函数 baseEach。这个新函数 baseEach 可以用来遍历集合（如数组或对象），并对其中的每个元素执行指定的操作。3.forEach函数。
2024-11-27 20:28:10
926
原创 Lodash源码分析-xor,xorBy,xorWith
下面依次介绍各个模块。1.baseXor模块= index) {baseXor 函数的作用是计算多个数组的异或（XOR）结果，即从多个数组中提取出只出现在一个数组中的元素。该函数的核心是通过多次调用 baseDifference 函数来实现这一功能，最终将结果进行去重并返回。baseUniq：对数组进行去重。baseFlatten：将嵌套的数组扁平化。baseDifference：计算两个数组之间的差异，返回第一个数组中不在第二个数组中的元素。2.xor函数});
2024-11-26 18:23:08
492
原创 Loadsh源码分析-zip,zipObject,zipObjectDeep,zipWith,unzip,unzipWith
下面依次介绍各个模块。1.arrayFilter模块arrayFilter函数，的主要目的是基于predicate函数的逻辑来过滤array中的元素，并返回一个新的数组，该数组仅包含满足predicate条件的元素。2.baseTimes模块baseTimes函数用于执行一定次数的迭代操作，并将每次迭代的结果存储到一个数组中。n: 一个整数，表示要执行的迭代次数。iteratee: 一个函数，它接受一个参数（当前索引）并返回一个值，该值将被存储在结果数组中。
2024-11-26 18:09:58
1017
原创 Lodash源码分析-uniq,uniqBy,uniqWith
下面依次介绍各个模块。1.baseUniq模块if (set) {} else {outer:== 0)?value : 0;if (seen!baseUniq 函数用于在数组中去除重复的元素，并返回一个包含唯一元素的新数组。这个函数的主要作用是去重，并且提供了一些额外的选项，如 iteratee 函数用于对数组元素进行转换，以及 comparator 函数用于自定义比较逻辑。index = -1：用于遍历数组的索引。
2024-11-25 17:16:37
1194
原创 Lodash源码分析-union,unionBy,unionWith
下面依次介绍各个函数。1.union函数});//例子// result 将是 [1, 2, 3, 4, 5, 6]union 函数的作用是创建一个包含所有给定数组元素的全新数组，同时去除重复的元素。即并集。2.unionBy函数});//例子// result 将是 [1.1, 2.2, 3.3, 4.6]unionBy 函数的作用是创建一个包含所有给定数组元素的全新数组，同时去除重复的元素。
2024-11-25 16:48:28
486
原创 Lodash源码分析-take,takeRight,takeRightWhile,takeWhile
下面依次介绍各个模块。1.baseSlice模块baseSlice模块用于从数组中提取指定范围的元素。2.baseWhile模块baseWhile 函数是一个用于根据条件从数组中提取或删除元素的工具函数。array: 需要操作的数组。predicate: 一个函数，用于判断每个元素是否满足条件。它接受三个参数：当前元素、当前索引和整个数组。isDrop: 一个布尔值，决定是提取满足条件的元素（false）还是删除不满足条件的元素（true）。
2024-11-25 16:31:11
837
原创 Lodash源码分析-sortedIndex,sortedLastIndex,sortedUniq...
下面依次介绍各个模块。1.baseSortedIndexBy模块return 0;baseSortedIndexBy模块是一个二分查找的实现，用于在已排序的数组中找到一个特定值的插入位置。这个函数考虑了值的比较和特殊情况的处理，如 NaN、null、undefined 和 Symbol。array: 已排序的数组。value: 要插入的值。
2024-11-24 22:01:10
827
原创 Lodash源码分析-pull,pullAll,pullAllBy,pullAllWith,pullAt，remove
下面依次介绍各个模块。1.basePullAll模块if (seen!//例子basePullAll 模块用于从数组中移除指定值的函数。这个函数的核心思想是遍历 values 数组中的每一个值，并在 array 数组中找到所有匹配的值，然后将其移除。这个函数支持自定义的迭代器 (iteratee) 和比较器 (comparator)，使得它在使用时更加灵活。array: 目标数组，我们将从中移除指定的值。values: 需要从 array 中移除的值的数组。
2024-11-24 16:49:55
768
原创 Lodash源码分析-intersection,intersectionBy,intersectionWith
下面依次介绍各个模块。1.baseIntersection模块undefined;value : 0;if (!(seen?)) {if (!(cache?baseIntersection 函数用于计算多个数组的交集，并返回一个包含所有数组中共有的元素的新数组。该函数还支持对数组元素进行预处理（通过 iteratee 函数），并且可以选择使用自定义的比较函数（通过 comparator 函数）来判断元素是否相同。
2024-11-22 16:48:22
819
原创 Lodash源码分析-fromPairs,head,indexOf,initial
下面依次介绍各个模块。1.fromPairs函数//例子// 输出: { a: 1, b: 2, c: 3 }fromPairs函数用于将一个由键值对数组构成的数组转换为一个对象。它遍历输入的 pairs 数组，并将每个键值对添加到结果对象中。2.head函数head函数用于获取数组的第一个元素。如果数组为空或 null/undefined，则返回 undefined。3.baseIndexOf模块（strictIndexOf、baseFindIndex）
2024-11-20 16:45:04
876
原创 Lodash源码分析-flatten,flattenDeep,flattenDepth
下面依次介绍各个模块。} else {三者均用到基础函数 baseFlatten,它通过递归方式展开数组，并允许指定展开的深度。array: 要展开的数组。depth: 展开的深度。如果为 1，则只展开最外层嵌套；如果为 2，则展开前两层嵌套，依此类推。predicate: 一个函数，用于判断哪些值可以被展开。如果不提供，则默认使用 isFlattenable 函数。isStrict: 一个布尔值，用于控制是否严格展开。
2024-11-20 16:10:05
1000
原创 Lodash源码分析-findIndex,findLastIndex
下面依次介绍各个模块。1.baseFindIndex模块1 : -1);return -1;baseFindIndex模块用于从数组中查找满足特定条件的元素的索引。array: 要查找的数组。predicate: 一个函数，用于判断数组中的元素是否满足条件。该函数接受三个参数：当前元素、当前索引和整个数组。fromIndex: 开始查找的索引位置。fromRight: 一个布尔值，指示查找方向。如果为 true，则从右向左查找；如果为 false，则从左向右查找。
2024-11-19 22:27:51
391
原创 Lodash源码分析-fill
下面依次介绍各个模块。1.baseClamp模块if (upper!if (lower!//例子// => 5// 解释：5 在 1 到 10 的范围内，返回 5// => 10// 解释：15 超出上限 10，返回 10// => 1// 解释：0 低于下限 1，返回 1// => NaN// 解释：输入的数值是 NaN，返回 NaNbaseClamp模块用于将一个数值 number 限制在指定的上下限范围内。它不会对参数进行强制类型转换，确保数值在上下限范围内。
2024-11-18 15:41:04
751
原创 Lodash源码分析-drop
下面介绍一下drop函数，还有dropRight、dropRightWhile、dropWhile这几个函数。1.drop函数if (!//例子// 解释：默认移除第一个元素，返回剩余部分 [2, 3]// => [3]// 解释：移除前两个元素，返回剩余部分 [3]// => []// 解释：移除的数量大于数组长度，返回空数组// 解释：移除的数量为 0，返回原数组drop函数用于从数组的起始位置。
2024-11-18 15:13:29
395
原创 Lodash源码分析-difference
下面从下到上依次介绍各个模块。1.baseSetToString模块if (func!if (!try {}());});baseSetToString用于设置函数的toString方法。
2024-11-15 20:21:20
777
原创 Loadsh源码分析-concat
下面依次介绍各个模块。1.arrayPush模块/*** @private*/arrayPush函数实现了类似于JavaScript原生数组的push方法的功能，其主要作用是将一个或多个值添加到给定数组的末尾，并返回更新后的数组。2.copyArray模块/*** @private*/copyArray函数的主要作用是将一个数组source中的所有元素值复制到另一个数组 array 中。
2024-11-14 21:41:11
854
原创 Lodash源码分析-compact
*** @static* @example*/compact 函数的主要作用是对输入的数组 array 进行过滤操作，创建一个新的数组，其中包含了原数组中所有 “真值” 元素，即移除了原数组中所有的 “假值” 元素。在 JavaScript 中，“假值” 包括 false、null、0（数字零）、""（空字符串）、undefined、NaN 这些值。
2024-11-14 20:14:52
238
原创 Lodash源码分析-chunk
从下到上依次介绍每个模块1.objectToString模块/*** @private*/objectToSrtring函数用于将任意类型的值转换为字符串。其中nativeObjectToString是Object.prototype.tostring的别名, Object.prototype.tostring方法会返回一个表示对象类型的字符串，.call()方法是为了把value强制转换为this传递给方法，call方法的第一个参数是要绑定的this值，后续参数是传递给函数的参数列表。
2024-11-14 20:06:01
706
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人