这是哪里 这里是小康博客Hexo版，此站将会替代曾经的博客。 搬迁缘由 首先要说明的就是我还是一个学生，目前所使用的服务器均是阿里学生机，这意味着24岁时就要享受不打折服务了。🤮 然而对于我这个没有收入的人来说，这简直时天文数字。 一开始也打算换成国外的服务器，但是每年也是100-300的支出，服务器在国外就意味着在国内要做一些优化，不然我这个“处女座心里”怎么能忍受的了。 经过再三考虑决定使用hexo+github搭建一个免费的博客，甚至域名都打算用GitHub免费的。但是速度吧。。。大家都懂得，我就不多说了。一开始觉得还可以，大概是缓存原因，于是写了几篇文章，突然发现一个问题：我的电脑不在身边怎么办。这样我就没法写文章了；或者长时间在外边，没有带电脑。后来一直没有找到一个好的解决办法，这个计划也就这么不了了之了。 知道昨天，发现了coding这个平台可以跟腾讯cloud studio配合使用。哇，我仿佛发现了一个新天地，我可以将代码传到coding，再用腾讯的studio实现云环境编写，就这样经过一晚上的试验终于成功了！ 😄 。 地址说明 本博客采用的地址是不加www的 ...

butterfly背景修改，透明度修改，卡片分类折叠等Hexo主题魔改。

什么是防抖 函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下图，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。 防抖应用场景如下 搜索框输入查询，如果用户一直在输入中，没有必要不停地调用去请求服务端接口，等用户停止输入的时候，再调用，设置一个合适的时间间隔，有效减轻服务端压力。 表单验证 按钮提交事件。 浏览器窗口缩放，resize事件(如窗口停止改变大小之后重新计算布局)等。 具体实现 非立即执行版 function debounce(func, wait) { let timeout; return function () { let context = this; let args = arguments; if (timeout) clearTimeout(timeout); timeout = s ...

BetterScroll 是什么 BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll (opens new window)的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。 BetterScroll 是使用纯 JavaScript 实现的，这意味着它是无依赖的。 官方文档：BetterScroll 官方Demo：示例 为什么不能滚动：滚动原理 绿色部分为 wrapper，也就是父容器，它会有固定的高度。黄色部分为 content，它是父容器的第一个子元素，它的高度会随着内容的大小而撑高。那么，当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是 BetterScroll 的滚动原理。 在项目中使用 基本HTML结构 <div class="container"> <header class="header-wrapper"> <div ...

简单介绍 此项目仅仅作为哔哔点啥数据的前端页面展示，并不会修改及影响任何关于云函数的内容。 注：前端解析不在使用markdown语法解析，但支持![]() 语法的图片。 示例页面：小康的bb页面 样式参考：微博 快速开始 请先确保按照其教程成功部署后，在你的markdown文件写入如下内容即可。 <div id='speak-bber'></speak> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ispeak-bber@1.1.1-beta/ispeak-bber.min.js" charset="utf-8" ></script> <script> ispeakBber .init({ el: '#speak-bber', name: 'DreamyTZK 🦄', // 显示的昵称 envId: '腾讯云开发环境id', // 环境id region: 'ap-shanghai', // 腾 ...

render中的h函数 h函数可以创建虚拟dom，通过创建的虚拟dom再转化为真的的DOM，从而渲染到页面中。 <script> // render function // template -> render -> h -> 虚拟DOM（JS对象）-> 真实 DOM -> 展示到页面上 const app = Vue.createApp({ template: ` <my-title :level="2"> hello xiaokang </my-title> ` }) app.component('my-title', { props: ['level'], render() { const { h } = Vue return h('h' + this.level, {}, [ this.$slots.default(), h('h4', {}, 'xiao ...

设计原则 单一职权原则（SRP） 一个对象或方法只做一件事情。如果一个方法承担了过多的职责，那么在需求的变迁过程中，需要改写这个方法的可能性就越大。 应该把对象或方法划分成较小的粒度 最小知识原则（LKP） 一个软件实体应当 尽可能少地与其他实体发生相互作用 应当尽量减少对象之间的交互。如果两个对象之间不必彼此直接通信，那么这两个对象就不要发生直接的 相互联系，可以转交给第三方进行处理 开放-封闭原则（OCP） 软件实体（类、模块、函数）等应该是可以扩展的，但是不可修改。 当需要改变一个程序的功能或者给这个程序增加新功能的时候，可以使用增加代码的方式，尽量避免改动程序的源代码，防止影响原系统的稳定 什么是设计模式 假设有一个空房间，我们要日复一日地往里面放一些东西。最简单的办法当然是把这些东西直接扔进去，但是时间久了，就会发现很难从这个房子里找到自己想要的东西，要调整某几样东 西的位置也不容易。所以在房间里做一些柜子也许是个更好的选择，虽然柜子会增加我们的成本，但它可以在维护阶段为我们带来好处。使用 这些柜子存放东西的规则，或许就是一种模式 设计模式 ...

前言 自从上次写了Commit 表情符号使用指南后，提交信息便一直使用标签符号进行提交。虽然好看，但是提交终归是不太方便，每次还需要打开文章进行符号搜索，然后粘贴。于是参考网上的各种规范记录此文。 提交预览 提交格式参数说明(type)参数说明(scope)参数说明(subject)示例<type>(<scope>): <subject> 用于说明git commit的类别，只允许使用下面的标识。 以下表格来自阿里技术 标识 含义 feat 新功能（feature） fix/to 修复bug，可以是QA发现的BUG，也可以是研发自己发现的BUG。fix：产生diff并自动修复此问题。适合于一次提交直接修复问题to：只产生diff不自动修复此问题。适合于多次提交。最终修复问题提交时使用fix docs 文档（documentation） style 格式（不影响代码运行的变动） refactor 重构（即不是新增功能，也不是修改bug的代码变动）。 perf 优化相关，比如提升性能、体验。 test 增加测试 ...

什么是flex布局 flex布局又称为弹性盒子模型，它有自己的一套属性，效率高，学习成本低，兼容性强！ 弹性盒子模型实现 HTML 页面布局是与方向无关的。不类似于块级布局侧重垂直方向，内联布局侧重水平方向。 弹性盒子模型主要适用于 HTML 页面的组件以及小规模的布局，而并不适用于大规模的布局，否则会影响 HTML 页面性能。 名词定义 伸缩容器（flex container）：包裹伸缩项目的父元素。 伸缩项目（flex item）：伸缩容器的每个子元素。 轴（axis）：每个弹性盒子模型拥有两个轴。 主轴（main axis）：伸缩项目沿其一次排列的轴被称为主轴。 侧轴（cross axis）：垂直于主轴的轴被称为侧轴。 方向（direction）：伸缩容器的主轴由主轴起点和主轴终点，侧轴由侧轴起点和侧轴终点描述伸缩项目排列的方向。 尺寸（dimension）：根据伸缩容器的主轴和侧轴，伸缩项目的宽度和高度。 对应主轴的称为主轴尺寸。 对应侧轴的称为侧轴尺寸。 定义弹性盒子 弹性盒子是css3新增的属性，因此弹性盒子模型及其属性存在浏览器兼容问题。具 ...