- 博客(230)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Tailwind CSS @apply Unknown at rule @apply scss(unknownAtRules) 解决方案
Unknown at rule @applyscss(unknownAtRules)
2024-08-28 10:30:04
625
原创 分析 Vue3 Effect 函数看响应式依赖收集和触发更新过程2
会在 effect._trackId 为 1 的 effect 的 deps 数组上保存 flag 和 name 这两个 dep，同时也分别在 flag 的 dep 和 name 的 dep 上保存 effect._trackId 为 1 的 effect。此时的 activeEffect 已经变样了（即使是从之前的 flag 的 dep 中取出的 effect）就是执行 effect 的回调函数。时触发 trigger，执行 flag 的 dep 中的 effect.run()执行 run 方法中的。
2024-08-08 00:20:52
799
原创 分析 Vue3 Effect 函数看响应式依赖收集和触发更新过程
先给一个简单的实例，分析依赖收集和更新的过程reactive 函数只会创建一个响应式对象，没有产生其他的什么副作用，仅在state对象在访问或者修改时才会触发proxy的getter和setter。
2024-08-07 22:28:40
517
原创 How to fix “__dirname is not defined in ES module scope“
How to fix "__dirname is not defined in ES module scope"
2022-11-02 11:06:18
666
原创 java 中 byte a = 1； a += 1和 a = a + 1 有什么区别？
因为 1 默认是 int 类型 byte + init 类型会隐私转换为 int 类型，将 int 类型直接分配给 byte 类型就会报错。
2022-10-22 21:48:52
794
原创 java 中 byte 溢出详解，为什么 byte 130 结果为 -126
在 java 中 byte 130 的 130 默认是 int 类型（十进制），int 类型占用 4 个字节。就是二进制定点表示法，即最高位为符号位，“0”表示正，“1”表示负，其余位表示数值的大小。在计算机中所有的数据都是以补码的形式出现。所以求出截取后的数据的补码即可。正数的反码与其原码相同；负数的反码是对其原码逐位取反，但符号位除外。通过截取后的结果可以看到，符号位（最高位）为 1，说明这是一个负数。正数的补码与其原码相同；负数的补码是在其反码的末位加1。最高位为符号位，为 1，代表负数。
2022-10-22 21:21:34
1158
原创 Vue Computed 依赖收集与更新原理
调用 watcher.depend() , this 指的是 computed watcher，会将 computed watcher 里面的 deps 保存在所有依赖调用 deps[i].depend()，进而调用 Dep 类中的 Dep.target.addDep(this)，使得 render watcher 中保存了当前的 dep，假设改变了 a，请问底层是如何收集依赖，如何触发更新的？所以，修改 a 属性的值，最后 notify 会清空这个 保存 watcher 的队列，进行页面更新！
2022-08-19 17:03:48
2115
原创 什么是 commonjs2
webpackissue的回答https//github.com/webpack/webpack/issues/1114。CommonJS2有export和module.export。CommonJS只有export。
2022-07-30 19:41:38
417
原创 react-router 使用 browserHistory 在 nginx 部署不生效解决方案
location / { root html/dist; index index.html index.htm; try_files $uri /index.html; }
2022-07-28 21:44:12
1114
原创 js正则表达式实现千分位符
解释首先理解一下： 正向肯定预查（look ahead positive assert） 和 正向否定预查(negative assert)正向肯定预查（look ahead positive assert）：正向否定预查(negative assert)：/(\d)(?=(\d\d\d)+(?!\d))/g 正则表达式图解：假设有字符串 ，正则表达式 首先，匹配 ，发现 后面有 ，正向预查到了，所以 会被匹配到；再次向后，匹配 ，发现 , 所以 也被匹配到,如下图加上 ，还要保证正向预查的
2022-06-21 16:18:57
846
原创 手写 promise
Promises/A+: https://promisesaplus.com/[译]Promise/A+ 规范: https://zhuanlan.zhihu.com/p/143204897
2022-06-17 17:48:44
231
原创 53. 最大子数组和
53. 最大子数组和给你一个整数数组 nums ，请你找出一个具有最大和的连续子数组（子数组最少包含一个元素），返回其最大和。子数组 是数组中的一个连续部分。解法1. 暴力解法切记这里双层循环时，定义 sum 的位置，如果放到顶级作用域，就求成了数组中的最大和了。这里是 最大和的连续子数组时间复杂度：O(n^2)时间复杂度：O(1)2. 动态规划定义数组 dp[i] 表示第 i 个数结尾的连续子数组的最大和初始化： dp[0] = nums[0]循环顺序：单层循环 nums递推公式：if dp[i
2022-06-04 21:28:59
160
原创 1143. 最长公共子序列
1143. 最长公共子序列确定dp数组（dp table）以及下标的含义dp[i][j]: 表示在字符串 text1 下标 [0, 1] 区间选取一些字符串，在字符串 text2 下标 [0, j] 区间选取一些字符串，求得最长的公共子序列。确定递推公式case 1: text1: '' text2: 任意case 2: text1: 'A' text2: 任意case 3: text1: '......A' text2: '........A'case 3 中最后一
2022-05-30 21:54:35
168
原创 416. 分割等和子集
416. 分割等和子集在若干物品中选出一些物品，每个物品只能使用一次，这些物品恰好能够填满容量为 sum/2 的背包。**动态规划思路：**一个一个物品去尝试，一点一点扩大考虑能够容纳的容积的大小。整个过程就像在填写一张二维表格确定dp数组（dp table）以及下标的含义dp[i][j]: 表示考虑下标 [0, i] 这个区间里的所有正数，在他们当中是否能够选出一些数，使得这些书之和恰好为正数 j确定递推公式不选择 nums[i]：dp[i][j] = dp[i - 1][j]选
2022-05-29 12:26:42
198
原创 01背包问题
背包问题源自代码随想录：动态规划：关于01背包问题，你该了解这些！01 背包有 n 件物品和一个最多能背重量为 w 的背包。第 i 件物品的重量是 weight[i]，得到的价值是 value[i] 。每件物品只能用一次，求解将哪些物品装入背包里物品价值总和最大。重量价值物品0115物品1320物品2430/** * * @param {*} weight 物品重量 * @param {*} value 物品的价值 * @param {*}
2022-05-29 12:24:04
284
原创 《Vue.js 技术与实现》第 11 章 快速 diff 阅读总结
第 11 章主要讲解了 Vue3 在 更新子节点的实现原理。实现原理上使用了快速 diff，它源起于 ivi 和 inferno 这两个框架，Vue 借鉴并扩展它。本章主要解决如下问题：处理相同的前置元素处理相同的后置元素判断是否需要进行DOM移动操作如何移动 DOM 元素处理相同的前置元素function patchKeyedChildren(n1, n2, container) { const newChildren = n2.children; const oldChildr
2022-04-02 21:44:23
665
原创 Vue3 最长递增子序列详解
Vue3 最长递增子序列研究本文初衷彻底讲清楚 Vue3 源码中实现最长递增子序列的算法。概念名词**最长递增子序列：**在一个给定的数值序列中，找到一个子序列，使得这个子序列元素的数值依次递增，并且这个子序列的长度尽可能地大。最长递增子序列中的元素在原序列中不一定是连续的。比如：序列 [10, 9, 2, 5, 3, 7, 101, 18] 的最长递增子序列是 [2, 3, 7, 101] 或 [2, 3, 7, 18]。序列 [3, 2, 8, 9, 5, 6, 7, 11, 15, 4]
2022-04-01 21:03:15
3469
原创 《Vue.js 技术与实现》第9章 简单 diff 阅读总结
上一章已经基本实现了一个渲染器了，但遗留了一个问题：一组节点和一组节点如何更新？上一章其实已经给出了解决方案：暴力循环，先将旧节点全部 unmount，再将新节点全部 mount但这看上去并不优雅那么，如何解决一组旧节点和一组新节点的比对方案呢？这看上去似乎是个比较复杂的问题针对旧节点的子节点和新节点的子节点数量不一的情况，给出如下方案：取出新旧子节点长度的最小值，Math.min(oldLen, newLen)循环公共长度，进行 patch 更新如果新的子节点长度 大于 旧的子节点长度，.
2022-03-30 16:39:49
1058
原创 《Vue.js 技术与实现》第4章 响应式系统的作用和实现 阅读总结
☁️ 2022.03.20 15:30这一章题序中上来就抛出了如下问题：什么是响应式数据和副作用函数？实现中如何避免无限递归？为什么需要嵌套的副作用函数？两个副作用函数之间会产生哪些影响？花费一个晚上＋一个下午读完了这一章，读完的第一感觉是信息量巨大。即使之前自己实现过一遍属于自己的 mini-vue，看完本章依然觉得填补了我很多知识盲区，收获很多，但一时很难消化。此刻难消化的原因：很难在头脑中重现源码中针对哪些问题给出了哪些解决方案？对于看完之后合上书本让人感觉虚空的问题，决定用自己方
2022-03-24 21:10:22
1570
原创 Vue3 Proxy Reflect
为什么 Vue3 中 Proxy 的 get 中使用的是 Reflect 获取属性值呢？来看一段代码：const target = { name: "yang", get alias() { console.log("this", this); // 打印的是 target return this.name; },};const proxy = new Proxy(target, { get(target, key, receiver) { console.
2022-03-20 12:29:56
622
原创 微信小程序国际化
需求：能够满足基本国际化字段配置，字段渲染，切换语言支持异步加载国际化字段调研：官方 miniprogram-i18n不敢相信这是大名鼎鼎的 wechat 团队做出来的东西！issue 一群骂声特点：不能开箱即用，需要使用 glup 构建，打包出新目录再进行开发。只能支持静态数据国际化，假设国际化字段从接口获取，那就没得玩了我的方案：满足国际化基本需求，实现异步国际化加载更新具体可以查看 github 仓库：miniprogram-i18n-plus...
2022-03-17 20:08:34
1090
原创 手写 Promise 源码
Promise基本 Promise执行器resolve, reject, then(同步)resolve(异步，基于发布订阅)then 链式调用 p.then().then();基本链式调用：在 then 里面返回 promise需要考虑 then return 的是 promise 还是普通值x 如果是 promise 则，需要考虑调用 resolve 还是 rejectx 如果是普通值， 则调用 resolve一、创建 Promise 类class Promise {
2022-02-12 21:09:34
608
原创 力扣 - 48. 旋转图像
48. 旋转图像给定一个 n × n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。你必须在 原地 旋转图像，这意味着你需要直接修改输入的二维矩阵。请不要 使用另一个矩阵来旋转图像。示例 1：输入：matrix = [[1,2,3],[4,5,6],[7,8,9]]输出：[[7,4,1],[8,5,2],[9,6,3]]示例 2：输入：matrix = [[5,1,9,11],[2,4,8,10],[13,3,6,7],[15,14,12,16]]输出：[[
2021-11-21 20:12:47
297
原创 CSS3绘制方格背景图类似于ProcessOn 绘制面板
<div class="canvas">中心画布</div>.canvas { border: 1px solid #f2f2f2; background: -webkit-linear-gradient( top, transparent 15px, #f2f2f2 15px, #f2f2f2 16px, transparent 16px, transparent 31px, #f2f2f2 31px, #
2021-10-30 18:27:35
493
原创 单链表实现
/** * 1、push(element)：向链表尾部添加一个新元素 * 2、insert(element, position)：向链表的特定位置插入一个新元素 * 3、getElementAt(index)：返回链表中特定位置的元素。如果链表中不存在这样的元素， 则返回 undefined * 4、remove(element)：从链表中移除一个元素 * 5、indexOf(element)：返回元素在链表中的索引。如果链表中没有该元素则返回-1。 * 6、removeAt(position)
2021-08-12 11:13:24
219
原创 搭建个人博客之 mysql 数据库表设计
代码地址：https://github.com/hefeng6500/blog-server/blob/master/sql_design/blog.sqlSHOW DATABASES;DROP DATABASE IF EXISTS blog;CREATE DATABASE IF NOT EXISTS blog DEFAULT CHARACTER SET utf8 DEFAULT COLLATE utf8_general_ci;USE blog;DROP TABLE IF EXISTS user_
2021-07-27 20:58:09
2792
原创 手写 Vue3.0 源码——响应式 api
@vue/reactivity本结实现响应式相关 api，包括如下@vue/reactivity/src/index.tsexport { ref, shallowRef, toRef, toRefs } from "./ref";export { effect } from "./effect";export { computed } from "./computed";export { reactive, shallowReactive, readonly, shallowR
2021-07-04 18:24:04
340
2
原创 手写 Vue3.0 源码 —— 搭建基础开发环境
搭建基础开发环境github: https://github.com/hefeng6500/build-your-own-vue3文档： https://hefeng6500.github.io/vue3.0-analysis/mini-vue3/base-env.html搭建 mini-vue3 基础开发环境全部按照 Vue-next 配置进行操作，删繁就简为实现一个简洁、可用、高效的环境！创建完成后目录如下build-your-own-vue3├─ .gitignore├─ doc│
2021-06-12 23:05:30
460
6
原创 debugger for chrome 使用
你是不是更我一样安装过 debugger for chrome 但是却不知道使用呢？原来我是这么认为的：我在做项目时，需要实现一个比较复杂的算法函数，我不敢保证我一次性写的完美，我先在桌面新建一个 index.html 然后在浏览器 debugger 一下。那么 debugger for chrome 是不是可以满足我在vscode 中 直接 F5 然后帮我启动一个 server 以 index.html 的形式引用了我的 index.js 呢？以致于我后续不用每次都新建一个 html 文件，只要再当
2021-04-24 17:21:37
2722
原创 2-买卖股票的最佳时机 II
2-买卖股票的最佳时机 II给定一个数组，它的第 i 个元素是一支给定股票第 i 天的价格。设计一个算法来计算你所能获取的最大利润。你可以尽可能地完成更多的交易（多次买卖一支股票）。注意：你不能同时参与多笔交易（你必须在再次购买前出售掉之前的股票）。示例 1:输入: [7,1,5,3,6,4]输出: 7解释: 在第 2 天（股票价格 = 1）的时候买入，在第 3 天（股票价格 = 5）的时候卖出, 这笔交易所能获得利润 = 5-1 = 4 。 随后，在第 4 天（股票价格 = 3
2021-04-06 21:54:46
238
原创 js扁平数组生成树形结构
在开发项目中，可能常见后端返回一个扁平的一维数组，前端可能要处理数据将其转化为 tree 型结构。类似：const data = [{ id: 1, parentId: null }, { id: 2, parentId: 1 }, { id: 3, parentId: 1 }, { id: 4, parentId: 2 }, { id: 5, parentId: 4 }];TO{
2021-03-08 22:00:54
871
原创 时间切片编程 timeslice
最近在做思考总结，项目原来在做智能合同的项目关于文档比对导致页面卡断问题，项目组同事给了我一个切片编程的方案很棒，在此做个总结！需求源文档和修改后的文档，差异点存在近 5000+ 的差异点需要在两个文档上进行颜色标注，整个标注过程都是在进行 DOM 操作，做完后存在严重的页面卡死问题，甚至等待 5~8分钟才标注完成，甚至卡死！这个问题亟待解决优化！分析在事件循环机制中主线程需要全部执行完才会进行页面渲染，5000+ 的 DOM 操作严重阻塞了主线程，所以是不是可以给主线程让出空间，将dom操作任务放
2021-03-07 12:17:07
2423
原创 对象转数字
对象转数字的过程中，JavaScript 做了同样的事情，只是它会首先尝试 valueOf 方法如果对象具有 valueOf 方法，且返回一个原始值，则 JavaScript 将这个原始值转换为数字并返回这个数字 否则，如果对象具有 toString 方法，且返回一个原始值，则 JavaScript 将其转换并返回。 否则，JavaScript 抛出一个类型错误异常。举个例子：console.log(Number({})) // NaNconsole.log(Number({a : 1})
2021-03-07 09:25:35
1847
原创 三栏布局之双飞翼布局
效果图* { margin: 0; padding: 0;}html,body { width: 100%; height: 200px; text-align: center; background: #eee;}.header { height: 48px; background: lightblue;}.footer { clear: both; height: 60px; background: lightgray;}.con
2021-02-03 15:31:24
238
原创 三栏布局之圣杯布局
运用到负边距的知识点margin-left 为负： 左移margin-right 为负：左拉*{ margin: 0; padding: 0;}html, body { width: 100%; height: 100%; text-align: center; background: #eee;}.header { height: 48px; background: lightblue;}.footer { clear: both; heig
2021-02-03 15:01:09
264
菲利普·科特勒（Philip Kotler市场营销：原理与实践（第16版）营销管理最新版 高清PDF
2018-12-04
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人