- 博客(385)
- 资源 (4)
- 收藏
- 关注
RSS订阅
原创 Git汇总--版本库操作
版本库操作日志–log显示提交历史！ 当不使用任何参数调用，相当于使用了缺省的参数HEAD，即显示当前HEAD能够访问到的所有历史提交。可以指定某个远程或者分支进行查看：$ git log upstream/master参数说明--oneline最精简的日志输出--graph分支图显示-<n>显示最近的几条日志--stat显示每次...
2018-12-04 22:36:35
2989
1
原创 Git汇总--对象及版本库存储
下述内容为团队内部分享整理所得，实用性较强，整体性偏差！PS：关于完整的Git内容，请参照之前发表过一系列文章，详见：Git Pro深入浅出（一）、Git Pro深入浅出（二）、Git Pro深入浅出（三）推荐两个地址：ProGit、GotGit阅读完内容，你会很快的解决下面问题，并了解其底层原理。问题1：如何丢弃本地工作区修改的内容？$ git checkout -- <fi...
2018-12-04 22:28:26
2815
1
原创 HTTP缓存知道这些就够了
随着用户访问量越来越大，缓存变得越来越重要。HTTP文件缓存可以减少冗余数据的传输；缓解网络瓶颈；降低对原始服务器的请求；以及降低距离延迟。命中和未命中有了缓存，就可以保留第一条服务器响应的副本，后继请求就可以有缓存的副本来应对了。可以用已有的副本为某些达到缓存的请求提供服务，这些被称为缓存命中（cache hit）。HTTP没有为用户提供一种手段来区分响应是否缓存命中的，还是访问原始服务器得到的。
2017-07-03 10:13:30
2398
原创 定时任务高效触发
圆通处事，方能达到目的!开发中我们经常会遇到一些需要定时来解决的业务场景。比如，有这样一个需求：“如果连续30s没有请求包（例如登录，消息，keepalive包），服务端就要将这个用户的状态置为离线”。轮询处理、定时处理、环形队列处理。
2017-06-04 15:44:22
6056
1
原创 性能：React 实战优化技巧 之 函数闭包
🚧 示例：点击子组件中按钮，获取 input 数据进行提交（常见于表单）React 中：组件内的每个函数都是一个闭包，因为组件本身只是一个函数。组件就被重新渲染一次【prop onClick 发生了变化】！借助 ref 每次渲染间存储信息及修改不会触发渲染的特性；函数虽然在整个组件生命周期中保持不变，但它通过调用。，在 props 没有改变的情况下跳过重新渲染！动态更新引用的函数，避免了闭包问题。函数会被重新创建，从而捕获最新的。，避免传递给组件的 props。：这个参数在首次渲染后被忽略。
2025-02-20 21:28:20
853
原创 TypeScript系列：第五篇 - 断言&守卫（as、satisfies、is、as const）
类型断言是一种编译时的机制，它不会在运行时检查类型，而是告诉编译器按照指定的类型处理变量。类型守卫是一种运行时的机制，它通过检查来确保变量的类型，并根据检查结果改变类型信息。类型确认是一种更加灵活的机制，它指定一个对象必须满足某种类型的结构，但不会改变该对象的类型。在编写 TypeScript 代码时，推荐尽可能使用类型守卫，因为它们提供了运行时的安全性。类型断言应该谨慎使用，只在你完全确定变量类型的情况下使用，以避免运行时错误。
2024-10-17 11:46:12
1095
原创 TypeScript系列：第四篇 - typeof 与 keyof
本文将详细介绍keyof和typeof运算符的基本概念、应用场景以及如何结合使用它们来提高代码的类型安全性。keyof运算符用于获取一个类型的所有键名（属性名）。typeof运算符用于获取一个变量的类型。
2024-09-24 20:19:28
1232
原创 TypeScript系列：第三篇 - 泛型
泛型（Generics）本质上是一种参数化类型。在定义时不指定具体数据类型，用一个或多个占位符（通常用字母「如TUV」）来表示类型参数；而在使用时指定具体的数据类型。return arg;上述函数返回值的类型与参数类型相关；可以接收任何类型的参数，并返回相同类型的值。指类型参数，可以将其理解为类型声明需要的变量，在调用时传入具体的参数类型。调用时提供具体类型string省略不写，TypeScript 通常可以在泛型调用中推断出预期的类型参数。
2024-09-24 20:12:47
1136
原创 TypeScript系列：续篇 - 对象类型（含数组、元数组、函数）
在 TypeScript 中，对象类型用于定义对象的形状（shape），即对象包含哪些属性以及这些属性的类型。对象类型可以是具体的，也可以是抽象的，用于类型检查和类型推断。或。🚎 接口interface：适合定义对象的形状，并且可以被扩展和实现，这使得它在面向对象编程中非常有用。🚃 类型别名type：更灵活，可以定义更复杂的类型，包括联合类型、交叉类型、字面量类型和映射类型。
2024-09-12 21:45:33
628
原创 TypeScript系列：初篇 - 类型系统
TypeScript 是 JavaScript 的一个超集，添加了类型系统和编译期错误检查等功能 => 静态类型检查。类型指的是一组具有相同特征的值。静态类型系统描述了运行程序时的值的形状和行为。TypeScript 支持块级类型声明，即类型可以声明在代码块（用大括号表示）里面，只在当前代码块有效。
2024-09-12 21:18:11
1188
2
原创 Git 仓库间代码迁移 | merge & cherry-pick
工作中遇到了这样场景：原工程 A 由于业务发展，衍生出了 B 工程，至此两个工程独立迭代。A 工程近期上线了一个功能，B 工程也希望具备该功能，需要研发同学做代码的同步。merge将两个或多个分支的历史合并在一起；cherry-pick允许开发者精确地选择和应用特定的提交到不同的分支。
2024-09-03 20:03:28
817
2
原创 Immutable-持久化数据结构：助力 React 性能提升
如果组件的属性和状态是不可变的数据结构，可以显著简化Diff算法的复杂性：引用比较：每次更新都会产生一个完全新的对象，而不是修改原有对象，React可以简单地通过比较对象的引用，来确定数据是否发生了变化。如果两个对象的引用不同，那么肯定不同，这比深度比较数据结构的每个部分要快得多；结构共享：Immutable数据结构在进行更新时，只创建变动部分的新实例，而保留未变部分的引用。这意味着在Diff算法中，React能够迅速识别出哪些部分是完全相同的，从而跳过这些部分的比较，直接关注那些确实发生了变化的部分。
2024-08-14 21:32:20
1045
1
原创 npm vs pnpm 之幽灵依赖
项目使用 npm 安装依赖可以正常运行，而使用 pnpm 安装依赖运行报错！使用 npm 安装，所有依赖都被提升到了 node_modules 下（npm@3之后的依赖扁平化，解决路径地狱）；使用 pnpm 安装，只有直接依赖（package.json dependences 中声明）安装在 node_modules 下，其他在 .pnpm（扁平化） 目录下。
2024-08-07 11:15:53
1271
原创 Thinking--在应用中添加动态水印，且不可删除
水印是一种用于保护版权和识别内容的技术，通常用于图像、视频或文档中。它可以是文本、图像或两者的组合，通常半透明或以某种方式嵌入到内容中，使其不易被移除或篡改。静态水印易于实现，且不会影响页面的加载和渲染性能；但容易被移除，且不能动态调整文案（在应用系统中，水印往往是登录者信息）。动态水印可以根据用户行为或特定条件动态显示或隐藏水印
2024-07-09 20:16:50
539
原创 Thinking--Promise解决动态挂载静态资源重复问题
循环过程会产生多个 `` 组件实例，进而产生多个获取资源 `loadResources()` 的调用。加载资源是异步过程，`window.videojs` 资源加载完才会追加。解决思路：1. 将实例创建改成串行，确保第二个初始化时，第一个已经处理完毕（存在），这样 `window.videojs` 的判断可以生效。=> 可以解决，但不是最佳方案，整体页面渲染效率下降 2. 初始化多个 `` 实例（并行加载），确保资源只加载一份。=> 资源全局单例
2024-07-02 19:05:37
1039
原创 React 通信：深层传递（Props、Context、Children Jsx）
当需要在组件树中深层传递参数以及需要在组件间复用相同的参数时，传递 props 就会变得很麻烦。Context 使组件向其下方的整个树提供信息，会穿过中间的任何组件。子组件可以通过某种方式“访问”到组件树中某处在其上层的数据。无需逐层透传，直接广播形式！需要的组件直接获取。
2024-06-19 14:39:05
1291
4
原创 useTransition：开启React并发模式
并发模式（Concurrent Mode）的一个关键特性是渲染可中断。React 18 之前，更新内容渲染的方式是通过一个单一的且不可中断的同步事务进行处理。同步渲染意味着，一旦开始渲染就无法中断，直到用户可以在屏幕上看到渲染结果。在并发渲染中，React 可以开始渲染一个更新，然后中途挂起，稍后又继续；甚至可能完全放弃一个正在进行的渲染。整个过程 UI 会保持一致。为了实现这一点，它会在整个 DOM 树被计算完毕前一直等待，完毕后再执行 DOM 变更。
2024-05-24 11:07:01
1321
原创 性能：React 实战优化技巧
性能优化的主要点：①减少DOM的渲染频次；②减少DOM的渲染范围；③非必要的内容延后处理。避免不必要的组件重新渲染，是提高程序性能的重要方式之一。
2024-05-07 10:53:57
685
2
原创 Reducer：让代码更灵活&简洁
对于拥有许多状态更新逻辑的组件来说，过于分散的事件处理程序可能会令人不知所措。对于这种情况，可以将组件的所有状态更新逻辑整合到一个外部 Reducer 函数中。
2024-04-29 14:47:31
766
原创 Fiber：React 的性能保障
React Fiber 是 Virtual DOM 的底层实现，它提供了一种新的调度机制来处理 Virtual DOM 的更新。Fiber 引擎使得 React 能够更细粒度地控制渲染过程。1. Virtual DOM：主要是一种优化技术，用于减少实际 DOM 操作的次数及范围，提高性能；2. Fiber：是一种新的协调引擎，旨在改善 React 的渲染性能、实现更好的并发控制，并支持增量渲染，从而提高 React 的响应能力。
2024-04-22 16:03:34
718
2
原创 Hooks：尽享React特性 ，重塑开发体验
React 16.8 版本引入了 Hooks ，可以在不使用 Class 的情况下使用 React 特性。Hooks 允许从函数组件 “hook into” React 状态和生命周期特性。Hooks 让我们根据代码所做的，而不是生命周期方法名称来分割代码。React 组件一直更像是函数，而 Hooks 则拥抱了函数。
2024-04-11 11:21:12
1016
1
原创 对比：React 还是 Vue
随着 Vue、React 的演进，其各自框架的基本形态和功能已经很完备，最根本差异点逐渐演变成了框架开发者各自的理念差异，不同的理念让框架有了各自的设计模式和最佳实践。然而，对于使用者来说，搞懂其设计模式、沉淀其最佳实践、了解其基本原理，是掌握一门框架的捷径，也是衡量对其熟悉程度的标尺。Vue 更贴近传统前端开发方式，更符合人的直觉，更易上手更简单；React 让函数变得更加复杂，使用者有更大的控制权，更加灵活，从而优雅。
2024-04-01 20:22:32
1405
3
原创 Effect：由渲染本身引起的副作用
Effect 允许指定由渲染本身，而不是特定事件引起的副作用。React 组件中的两种逻辑类型：① 渲染逻辑代码 位于组件的顶层，接收 props 和 state，进行转换，返回屏幕上看到的 JSX，只计算不做其他任何事情；② 事件处理程序 嵌套在组件内部的函数，由特定的用户操作（如按钮点击）引起的”副作用“（改变了程序的状态）。实际开发过程中，还会遇到当进入页面时触发一些动作（如播放视频、日志发送、连接到聊天服务器等）。其①不能在渲染过程中发生，②也没有一个特定的事件（比如点击。
2024-03-20 16:57:17
763
原创 脱围：使用 ref 保存值及操作DOM
ref 是一种脱围机制，用于保留不用于渲染的值。同时，ref 是一个普通的 JavaScript 对象，具有一个名为 `current` 的属性，可以对其进行读取或设置。与 state 不同，设置 ref 的 `current` 值不会触发重新渲染**。**不要在渲染过程中读取或写入 `ref.current`。这使组件难以预测。
2024-03-11 16:10:07
1126
原创 续篇：展开聊下 state 与 渲染树中位置的关系
状态与渲染树中的位置相关：相同位置的相同组件会使得 state 被保留下来 ；相同位置的不同组件会使 state 重置 。只要一个组件还被渲染在 UI 树的相同位置，React 就会保留它的 state。如果它被移除，或者一个不同的组件被渲染在相同的位置，那么 React 就会丢掉它的 state。
2024-03-11 11:35:53
1062
原创 总结：React 中的 state 状态
`props`：只读，父组件通过 `props` 传递给子组件其所需要的状态；子组件内部不能直接修改`props`，只能在父组件中修改。`state`：可变，是组件内部维护的一组用于反映组件UI变化的状态集合。React 会将更新函数依次加入队列，以便在事件处理函数中的所有其他代码运行后进行处理。在下一次渲染期间，React 会遍历队列并给你更新之后的最终 state。
2024-03-04 18:18:03
1111
原创 探讨：围绕 props 阐述 React 通信
React 组件使用props来互相通信。每个父组件都可以提供 props 给它的子组件，从而将一些信息传递给它。当组件中的重要信息是由 `props` 而不是其自身状态驱动时，就可以认为该组件是“受控组件”；受控组件具有最大的灵活性，但它们需要父组件使用 `props` 对其进行配置。当组件中的重要信息是由其自身状态 `state`驱动时，就可以认为该组件是“非受控组件”；非受控组件通常很简单，因为它们不需要太多配置。
2024-02-28 20:10:04
1109
2
原创 开篇：通过 state 阐述 React 渲染
React中，有两种原因会导致组件的渲染: ① 组件的初次渲染。② 组件（或者其祖先之一）的状态发生了改变。State setter 函数更新变量（状态发生改变）并触发 React 再次渲染组件。
2024-02-21 20:11:53
1225
1
原创 如何构建自己的技术博客
拥有自己的技术博客，不仅可以提升自己的技术能力，还可以提升自己的影响力，未来也可能带来一些“睡后”收益。对于我们职场人来说，拥有自己的技术博客一方面可以总结沉淀自己所学内容，同时也是一个不错的加分项。Vuepress 以 Markdown 为中心的项目结构，可以专注于写作，同时结合 Github 提供的用于搭建个人网站的静态站点托管服务。
2023-08-31 18:39:36
422
原创 从SVG到Canvas：选择最适合你的Web图形技术
SVG 和 Canvas 都是可以在 Web 浏览器中绘制图形的技术。众所周知， icon 通常使用 svg（如 iconfont），而交互式游戏采用 Canvas。二者具体的区别是什么？该如何选择？
2023-08-21 18:05:16
629
原创 三款快速删除未使用CSS代码的工具
针对历史项目或项目中有引入CSS框架（如Bootstrap），可能会存在大量的 CSS 样式未被使用。这可能产生一些不良的影响，如： 增加额外加载时间、可维护性下降。推荐PurgeCSS、UnCSS、PurifyCSS三款工具，自动去除未使用CSS代码。
2023-08-11 18:00:28
2001
原创 URL存储解锁数据管理的新思路，重新定义数据传输与共享（@vue/repl）
通过 URL 存储最大的便利是：无需服务端且通过URL可以分享。好的技术方案一定是根据场景来的！且通过阅读源码，我们可以获取到一写比较不错且小巧的开源库，如上述的 fflate。
2023-07-31 16:41:46
1194
原创 【揭秘Vue核心】为什么不建议在 v-for 指令中使用 index 作为 key，让你秒懂！
在没有 key 的情况下，Vue 将使用一种最小化元素移动的算法，并尽可能地就地更新/复用相同类型的元素。如果传了 key，则将根据 key 的变化顺序来重新排列元素，并且将始终移除/销毁 key 已经不存在的元素。虚拟DOM在比较元素的时候，因为DOM上的key等属性均未发生变化，所以其自身和内部的input均被复用了。所以，在实际开发过程中不要把 index 作为 key 值。
2023-07-17 11:05:01
473
原创 深入了解 CSS 变量，让 CSS 创造更多可能！
日常开发中所说的 CSS 变量，实际上是 CSS 的变量函数 var() 与 CSS 自定义属性的统称。使得开发和维护成本更低了，如让整个网站的换肤变得更容易；改变了在图形交互效果的实现中 JavaScript 的占据比重，使得开发门槛降低了，体验升级了。使自定义语法的扩展成为可能。
2023-07-11 22:18:30
513
原创 【揭秘Vue核心】深入解析Object.defineProperty和Proxy的区别，让你秒懂！
proxy和Object.defineProperty是用于实现响应式数据的两种不同方式。Object.defineProperty 通过直接修改对象的属性描述符来实现数据的劫持。Vue2.x中就是通过此来实现数据的响应式。但有一些限制，如只能劫持已经存在的属性，无法对新增属性或删除属性进行劫持。这就导致Vue 2.x需要在创建实例之前声明数据属性，否则无法实现响应式。而Vue 3.0使用了Proxy，它是ES6新增的特性。可以对整个对象进行劫持，包括对新增属性和删除属性的劫持。可以更加灵活地监听和代理。
2023-07-05 16:32:38
397
原创 CSS新特性，提升开发效率与视觉表现，必读！
CSS2.1中的CSS属性的设计初衷是图文展示，所以并没有专门与布局相关的CSS属性。因此，在CSS2.1中出现了很多奇怪的现象，如float属性，设计之初是为了文字环绕效果，最后居然成了布局中常用的属性。CSS2.1从2002开开始制定，到2011年成为规范，花费了10年。CSS3.0及以后版本，为了加速CSS标准化，将 CSS 划分为更小的组件，称之为模块。模块之间互相独立，按照各自速度走镖标准化。下面列举一些在开发中可以经常用到，且节省大量代码及提升效率的CSS新特性：
2023-07-04 11:42:31
815
原创 掌握这些vue内容，让你在提升代码复用上不再纠结！
前端工程化的最终目的都是为了能够更好地维护代码。代码复用是提升效率和可维护性的利器。vue 中针对不同场景和业务情况，提供了各种方式。全面了解这些内容，可以在开发过程中让你得心应手！1. 组件：主要的构建模块；2. 组合式函数：侧重于有状态的逻辑；3. 自定义指令：重用涉及普通元素的底层 DOM 访问的逻辑；4. 插件：添加全局功能的工具代码。
2023-06-28 18:59:40
533
原创 掌握这些容易被忽略的Vue组件细节，提升开发效率，事半功倍！
组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。组件在日常开发的重要性不言而喻，掌握这些细则，可以让你在开发中事半功倍！
2023-06-27 18:49:13
507
aes加密&解密算法前端实现
2023-02-23
程序员面试宝典-前端-2023最新
2023-02-23
毕业论文-办公自动化系统的设计和实现
2023-02-20
jquery插件
2014-11-15
yuicompressor-2.4.jar
2014-11-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人