- 博客(63)
- 收藏
- 关注
RSS订阅原创 JavaScript重难点实例精讲
我们可能会想到在Array的map()函数中调用parseInt()函数。像下面这样：但是在运行后，得到的结果是[1, NaN, NaN, NaN]，与我们期望的结果[1, 2, 3, 4]差别很大，其实这就是一个藏在map()函数与parseInt()函数中的隐形坑。上面的代码实际与下面的代码等效：parseInt()函数接收的第二个参数实际为数组的索引值，所以实际处理的过程如下所示。任何整数以0为基数取整时，都会返回本身，所以第一行代码会返回“1”。第二行代码parseInt(‘2’, 1)，因
2022-12-21 14:57:47
672
1
原创 vue3组件通信方式
如果父组件是纯 Vue3 写法，子组件混合写法，可以通过 props 接收到 data 和 setup 函数里的属性，但是子组件要是在 setup 里接收，同样只能接收到父组件中 setup 函数里的属性，接收不到 data 里的属性。所以官方也不推荐混合写法。：如果父组件是混合写法，子组件纯 Vue3 写法的话，是接收不到父组件里 data 的属性，只能接收到父组件里 setup 函数里传的属性。props适用于父传子，有两种写法，混合写法和纯vue3写法（语法糖）
2022-10-11 18:10:57
2545
原创 vue3生命周期及setup介绍
setup 函数的第一个参数是组件的 props。和标准的组件一致，一个 setup 函数的 props 是响应式的，并且会在传入新的 props 时同步更新。props : {// 注意这里不要解构props，这样会使解构出来的变量失去响应性。如果一定要解构需要使用响应式api转发下。
2022-09-23 17:08:49
9077
原创 vue3初体验
组合式api（Composition API）算是vue3对开发者来说非常有价值的一个api更新，先不关注具体语法，先对它有一个基本的感知：options API开发出来的vue应用如下图所示，它的特点是理解容易，因为各个选项都有固定的书写位置，比如响应式数据就写到data选择中，操作方法就写到methods配置项中等，应用大了之后，相信大家都遇到过来回上下找代码的困境。
2022-09-22 15:43:17
289
原创 pinia——打败vuex的新一代vue存储库
vue3已经发布很长一段时间了，vue官网也已经默认访问vue3的文档了。因此打算系系统统仔仔细细的学习一波~ vue3系列文章将定期更新直至完结~ ~ ~使用官方提供的脚手架工具新建一个vue3项目会发现，官方已将pinia作为默认的状态存储库提供在安装选项中了。vuex的仓库中官方也有这么一段提示：大致是说：Pinia 现在是新的默认设置。Vue 的官方状态管理库已更改为Pinia。您可以简单地将 Pinia 视为具有不同名称的 Vuex 5。Pinia 也适用于 Vue 2.x。
2022-09-13 16:27:23
2520
1
原创 vue源码之视图响应式更新
前面两篇文章已经实现了对数据的变化的监听以及模板语法编译初始化，但是当数据变化时，视图还不能够跟随数据实时更新。本文就在之前的基础上介绍下视图响应式更新部分。
2022-09-07 16:29:53
527
原创 vue源码之解析指令compile
上篇文章我们已经介绍了Vue的响应式原理，并实现了对数据的监听，监听的目的是为了及时更新视图，所以这篇文章就来介绍下vue解析指令并初始化视图部分。
2022-09-05 17:45:09
512
原创 ahooks源码之LifeCycle
返回当前最新值的 Hook，可以避免闭包问题。等价于useRef，不同的是该hook直接返回最新的值。useRef需要.current。获取当前组件是否已经卸载的 Hook。应用场景：组件卸载时取消请求等。在组件卸载（unmount）时执行的 Hook。只在组件初始化时执行的 Hook。...
2022-08-15 17:57:22
360
原创 从看ahooks源码说起：源码准备阶段
pnpm是 Node.js 的替代包管理器。它是 npm 的直接替代品，但速度更快、效率更高。为什么效率更高？当您安装软件包时，我们会将其保存在您机器上的全局存储中，然后我们会从中创建一个硬链接，而不是进行复制。对于模块的每个版本，磁盘上只保留一个副本。例如，当使用 npm 或 yarn 时，如果您有 100 个使用 lodash 的包，则磁盘上将有 100 个 lodash 副本。pnpm 可让您节省数 GB 的磁盘空间！...
2022-08-10 17:54:22
274
原创 一看就懂的vuex核心源码
Vuex是什么Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。说白了，Vuex就是一个全局单例模式管理的仓库，里面存储着响应式的数据，任何组件都可以从仓库里面取到数据。其可预测表现在：更改只能通过Vuex来集中更改。通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，代码将会变得更结构化且易维护。vuex的核心概念和使用方法点此直达官网：https://vuex.v
2022-05-25 17:51:47
266
原创 奇妙的位运算
从二进制说起世界上有10种人，一种是懂二进制的，另一种是不懂二进制的。我们习惯性使用的是十进制，0，1，2，3，4，5，6，7，8，9是十进制的10个基数。至于为什么我们使用的是十进制而不是其他的几进制或者几十进制，我想大概是因为人类有10个手指头吧，掰着数到第十个就没得数了，只能进位。类比我们人类思想，在计算机世界中，他们没有手指，只有电流（计算机的CPU、内存等器件都是由二极管三极管构成的），他们都相当于一个开关。只有有电-没电（即真-假）两种状态。所以计算机的物理特性就决定了计算机语言要采用二
2022-05-20 18:03:00
316
原创 一文理解http缓存机制
HTTP报文浏览器的缓存机制也就是我们所说的HTTP缓存机制，是根据HTTP报文的缓存标识进行的。先了解下HTTP报文：请求报文报文格式：请求行 – 请求头(通用信息头，请求头，实体头) – 请求体(只有POST才有请求体)响应报文报文格式：状态行 – 响应头(通用信息头，响应头，实体头) – 响应体通用信息头指的是请求和响应报文都支持的头域：分别为Cache-Control、Connection、Date、Pragma、Transfer-Encoding、Upgrade、Via；实体
2022-05-18 16:22:27
1671
原创 2022年JS新增小技巧
1. null判断运算符???？类似于管道运算符||，但是表现上更为严格。const a = 0 || 1; // 1const b = 0 ?? 1; // 0区别：||运算符左边为假时（包括：null， undefined， ‘’， 0， false等），返回右边的值，否则返回左边的值??运算符只有左边为null或者undefined时才返回右边的值，否则返回左边的值。兼容性：2. 链式判断运算符?.const res = res.data ? res.data.list : []
2022-04-20 14:16:29
456
原创 从vue中的data访问说起
demo<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>demo</title></head><style></style><body&g
2022-04-11 22:11:56
1667
原创 微信小程序如何实现混入：自定义组件Behavior
behaviors 是用于组件间代码共享的特性，类似于一些编程语言中的 “mixins” 或 “traits”。每个 behavior 可以包含一组属性、数据、生命周期函数和方法。
2022-04-09 16:14:06
2062
原创 一看就懂的vue-router简版源码
1.Vue Router是什么？Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：嵌套路由映射动态路由选择模块化、基于组件的路由配置路由参数、查询、通配符展示由 Vue.js 的过渡系统提供的过渡效果细致的导航控制自动激活 CSS 类的链接HTML5 history 模式或 hash 模式可定制的滚动行为URL 的正确编码2.Vue Router的使用方式安装: vue add rout
2022-04-07 16:47:02
1233
原创 代码整洁之道：消除重复&提高表达力
我们都曾瞟一眼自己亲手造成的混乱，决定弃之不顾，走向新一天。我们都曾看到自己的兰程序居然能运行，然后断言能运行的烂程序总比什么都没有强。我们都曾经说过有朝一日再回头清理。当然，在那些日子里。我们都没有听过勒布朗法则：稍后等于永不（later equals never）坏的代码就像“沼泽”——我们趟过代码的水域，我们穿过灌木密布，瀑布暗藏的沼泽地，我们拼命想找到出路，期望有点什么线索能启发我们到底发生了什么事，但目光所及，只是越来越多死气沉沉的代码。花时间保持代码整洁不但有关效率，还有关生存。程序员遵.
2022-04-01 10:38:20
393
原创 javascript算法系列——树：二叉树和二叉查找树
二叉树的基本术语结点之间的关系若一个结点有子树，那么该结点称为子树根的双亲，子树的根称为该结点的孩子有相同双亲的结点互为兄弟一个结点的所有子树上的任何结点都是该结点的后裔从根结点到某个结点的路径上的所有结点都是该结点的祖先结点层：根结点的层定义为第一层，根的孩子为第二层，依此类推树的深度：树中最大的结点层结点的度：结点拥有的子树的个数树的度： 树中最大的结点度叶子结点：也叫终端结点，是度为 0 的结点分枝结点：度不为0的结点二叉查找树二叉查找树是一种 特殊的二叉树，相对较
2022-03-17 16:14:50
1435
原创 vue进阶：使用插件实现弹窗类组件
在之前的文章里，已经分析了怎么实现弹窗类组件，并且介绍了两种实现弹窗类组件的方式，分别是借助Vue构造函数和Vue的extend函数。想了解的可以先看我之前的文章：vue进阶：弹窗类组件实现方式插件插件是嘛?插件通常用来为 Vue 添加全局功能。我们vue项目中最常用的插件就是vue-router。vue插件和组件的诞生都是为了实现逻辑的复用，他们的本质都是对代码逻辑的封装，所以在一定程度上，组件可以封装成插件，插件也可以改写成组件。具体使用插件还是组件就要看项目中的实际使用场景了。Vue 插件和V
2022-03-14 15:05:32
1857
2
原创 javascript算法系列——树：二叉树（1）
二叉树二叉树（Binary tree）是树形结构的一个重要类型。许多实际问题抽象出来的数据结构往往是二叉树形式，即使是一般的树也能简单地转换为二叉树，而且二叉树的存储结构及其算法都较为简单，因此二叉树显得特别重要。1.定义二叉树（binary tree）是指树中节点的度不大于2的有序树，它是一种最简单且最重要的树。二叉树的递归定义为：二叉树是一棵空树，或者是一棵由一个根节点和两棵互不相交的，分别称作根的左子树和右子树组成的非空树；左子树和右子树又同样都是二叉树。简单理解就是：二叉树的每个子节点都只有
2022-03-07 14:21:56
662
原创 javascript算法系列——排序7：堆排序
堆的知识堆是一个完全二叉树。完全二叉树： 二叉树除开最后一层，其他层结点数都达到最大，最后一层的所有结点都集中在左边（左边结点排列满的情况下，右边才能缺失结点）。大顶堆：根结点为最大值，每个结点的值大于或等于其孩子结点的值。小顶堆：根结点为最小值，每个结点的值小于或等于其孩子结点的值。堆的存储： 堆由数组来实现，相当于对二叉树做层序遍历。堆排序思路将初始二叉树转化为大顶堆（heapify）（实质是从第一个非叶子结点开始，从下至上，从右至左，对每一个非叶子结点做heapify操作），此时
2022-03-04 17:24:47
435
原创 vue进阶：弹窗类组件实现方式
弹窗类组件的特点弹窗类组件的特点就是他们在当前的vue实例之外独立存在，通常挂载于body。他们是通过纯JS创建的，不需要在任何组件中声明。常见的食用方式是这样：this.$create(Notice, { title: '标题标题', message: '提示信息'}).show();分析实现思路根据上面的实用方式，我们要想实现在vue组件中全局使用this.$create()方法，就需要将该方法赋值到vue的原型对象上。假设我们已经实现了create方法：Vue.prototype.
2022-02-24 17:33:03
4522
原创 javascript算法系列——排序6：希尔排序
核心思想：分组的插入排序希尔排序就是就是将数组按照某一递减数组间隔进行分组，然后利用插入排序使得组内有序，整体数组部分有序。首先取一个整数d1 = n / 2，将元素分为d1个组，每组相邻两个元素之间的距离为d1 ，在各组内进行直接插入排序。取第二个整数d2 = d1 / 2,重复上述分组排序过程，直到di = 1，即所有元素在同一组内进行直接插入排序。希尔排序每趟并不使某些元素有序，而是整体数据越来越接近有序；最后一趟排序使得所有数组有序。看下希尔排序过程：将数组每间隔四个分成一组，第一
2022-02-22 13:36:56
753
原创 javascript算法系列——排序5：归并排序
归并排序归并排序的核心思想：分治&递归递归大家应该都知道，那么分治是什么意思呢？分治即分而治之：先将问题分成一些小的问题然后递归求解，再将分的阶段得到的各答案"修补"在一起。来看下怎么把分治的思想应用到排序上：先将数组按照len / 2 的长度递归划分为2个数组,直到数组长度=1（分）,然后再讲划分后的小数组合并成有序的数组（治）。javascript代码实现：const merge_sort = (arr) => { const tempArr = []; const le
2022-02-16 19:23:37
481
转载 为什么esbuild如此快
前言esbuild 是新一代的 JavaScript 打包工具。他的作者是 Figma 的 CTO - Evan Wallace。(这卡姿兰大眼睛，令人唏嘘的发际线， 一看就知道很强！ ）esbuild以速度快而著称，耗时只有 webpack 的 2% ～3%。esbuild 项目主要目标是: 开辟一个构建工具性能的新时代，创建一个易用的现代打包器。它的主要功能：Extreme speed without needing a cacheES6 and CommonJS modul.
2022-02-10 10:12:09
452
原创 vue进阶：自定义指令directive
自定义指令vue提供了很多内置的指令，比如v-if ，v-show，v-model等等，通常情况下，我们是没有必要去自定义指令的，代码复用和抽象的主要形式是组件。但是呢，有的情况下，我们需要对普通的DOM进行底层操作，这个时候就需要用到自定义指令。两个常见的示例1.输入框自动聚焦原生的input组件有autofocus这个属性可以让输入框自动聚焦，但是这个属性有兼容性问题（autofocus 在移动版 Safari 上不工作），一个理想的方案就是使用自定义指令去直接触达该input元素，令其聚焦。
2022-02-10 09:19:18
329
原创 vue进阶：混入mixin
混入mixin混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。先定义一个混入对象：const myMixin = { created: function () { // this表示组件的实例 this.hello() }, methods: { hello: function () { console.log(
2022-02-09 09:10:36
758
原创 vue进阶：过滤器 filters
1.过滤器 filters过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”（|）符号指示。例如：// 在双花括号中 <span>{{ price | formatPrice('$') | test}}</span>// 在`v-bind`中 <span v-bind:price="price | formatPrice('$')"></span>filters中的函数可接受传参，传的参数顺序从函数的第二位开始往后排，函数的第一
2022-01-25 18:03:30
176
原创 vue进阶：计算属性与侦听器（computed VS watch）
栗子先来看个例子<template> <div> <input type="text" placeholder="请输入待办事项" @keyup.enter="insertTodo" :value="todo"> <ul v-for="(todo, i) in todos" :key="i"> <li>{{ todo }}</li> </ul>
2022-01-19 18:07:27
561
原创 微信小程序动画(七)：让页面动起来
本文默认读者已具备小程序基本动画api，如不了解可先阅读相关的详细介绍文章：微信小程序动画（一）：样式微信小程序动画（二）：旋转微信小程序动画（三）：缩放微信小程序动画（四）：平移微信小程序动画（五）：倾斜微信小程序动画（六）：矩阵变形一： wx.createAnimation(Object object)创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。api文档：https://
2022-01-17 10:48:02
7117
原创 javascript算法系列——排序4：插入排序与快速排序
一： 插入排序插入排序与之前学习过的冒泡排序（循环n趟，每趟与所有的数字进行比较，大就交换位置），选择排序（循环n趟，每趟对比（n-i）个数字，找出最小的，将其与i的位置的数字互换）并称为low B三人组哈哈哈，为啥low呢，自然是时间复杂度不够完美~插入排序的核心思想：类比斗地主吧。每次将从无序区摸出的牌与手里的牌进行对比，放到正确的位置。循环n趟，从后往前一次对比，每个数对比i-1次，记录当前的数，如果前面的数比自己大，就将大的数依次往后移，直到移完或者下一个数不再比自己大位置，将自己插入到该
2022-01-13 16:32:36
466
原创 javascript算法系列——排序3：冒泡排序与选择排序
1. 冒泡排序冒泡排序核心思想：将第i个数依次与剩下的数进行比较，如果比后面的数大就互换位置。咕嘟咕嘟咕嘟，大的数字都给我上去。javascript代码：const bubble = (arr) => { for(let i = 0; i<arr.lenght - 1; i++) { for (let j = 0; j<arr.length - 1 - i; j++) { let c = null if (arr[j] > arr[j + 1]) {
2022-01-12 19:54:26
288
原创 javascript算法系列（第二周）：二分法
二分法查找，也称为折半法，是一种在有序数组中查找特定元素的搜索算法。二分法查找的思路如下：（1）首先，从数组的中间元素开始搜索，如果该元素正好是目标元素，则搜索过程结束，否则执行下一步。（2）如果目标元素大于/小于中间元素，则在数组大于/小于中间元素的那一半区域查找，然后重复步骤（1）的操作。（3）如果某一步数组为空，则表示找不到目标元素。二分法查找的时间复杂度O(logn)两个指针： left 和 right。 根据left和right确定mid位置。通过对目标值和mid位置的值进行对比，
2022-01-12 12:17:47
397
原创 javascript算法系列（第一周）：时间复杂度与空间复杂度&汉诺塔问题
程序 = 数据结构 + 算法算法： 解决问题的过程时间复杂度：执行该算法消耗的时间空间复杂度：执行该算法内存占用情况以空间换时间1.时间复杂度时间复杂度与空间复杂度均用大O表示法常见的时间复杂度效率排序：O(1)<O(logn{log_{n}}logn)<O(n)<O(nlogn{log_{n}}logn)<O(n2n^2n2)<O(n2lognn^2{log_{n}}n2logn)<O(n3n^3n3)复杂问题的复杂度：O(n!) ，O.
2022-01-12 10:14:12
619
原创 react页面缓存：React Keep Alive和React-Keeper
vue中有keep-alive进行页面缓存，react提倡尽可能少的api以减少开发者的使用成本，并没有提供相关的api（我觉得这样更麻烦了），需要自己手写，我从git找到两种评价较高的对应插件分析给大家。（这两种插件不仅仅在做页面缓存时有用，还有很多意外之喜。例如在登录拦截，路由配置拆分的时候也用的到）。React Keep Alive git地址：https://github.com/StructureBuilder/react-keep-aliveReact-Keeper git地址：https:
2022-01-12 09:16:44
811
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人