Hello-World
这是哪里 这里是小康博客Hexo版，此站将会替代曾经的博客。 搬迁缘由 首先要说明的就是我还是一个学生，目前所使用的服务器均是阿里学生机，这意味着24岁时就要享受不打折服务了。🤮 然而对于我这个没有收入的人来说，这简直时天文数字。 一开始也打算换成国外的服务器，但是每年也是100-300的支出，服务器在国外就意味着在国内要做一些优化，不然我这个“处女座心里”怎么能忍受的了。 经过再三考虑决定使用hexo+github搭建一个免费的博客，甚至域名都打算用GitHub免费的。但是速度吧。。。大家都懂得，我就不多说了。一开始觉得还可以，大概是缓存原因，于是写了几篇文章，突然发现一个问题：我的电脑不在身边怎么办。这样我就没法写文章了；或者长时间在外边，没有带电脑。后来一直没有找到一个好的解决办法，这个计划也就这么不了了之了。 知道昨天，发现了coding这个平台可以跟腾讯cloud studio配合使用。哇，我仿佛发现了一个新天地，我可以将代码传到coding，再用腾讯的studio实现云环境编写，就这样经过一晚上的试验终于成功了！ 😄 。 地址说明 本博客采用的地址是不加www的 ...
Hexo博客之butterfly主题优雅魔改系列
butterfly背景修改，透明度修改，卡片分类折叠等Hexo主题魔改。
VUE单文件组件开发
前言 首先需要阐明的是本文单文件开发最终实现的结果：**在 HTML 中通过引入打包后的 js 文件，然后使用组件标签即可渲染。**例如： <!DOCTYPE html> <html lang="en"> <body> <div id="page"> <xk-head :msg="msg">2213</xk-head> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script> <script src="./dist/main.js"></script> <script> var app = new Vue({ el: '#page', data: { msg: 'Hello Vue!123' } }) &l ...
前端优化：网页中文字体压缩与提取
前言 遇到需要自定义字体的需求时就需要向用户索要相关字体，然而从用户那里拿到的字体通常10m左右，假如用户的服务器带宽不够大，那么。。。。 于是参考网页中文字体压缩（woff2）、拆分、去繁体字库，提高加载速度 进行的字体"安排" 字体提取 为了便于以后更方便的提取，于是绝对将其安装在我得腾讯云无忧主机上，这样以后在提取直接上传到服务器即可。 字符集 字数 Unicode 编码 基本汉字 20902字 4E00-9FA5 基本汉字补充 74字 9FA6-9FEF 扩展A 6582字 3400-4DB5 扩展B 42711字 20000-2A6D6 扩展C 4149字 2A700-2B734 扩展D 222字 2B740-2B81D 扩展E 5762字 2B820-2CEA1 扩展F 7473字 2CEB0-2EBE0 扩展G 4939字 30000-3134A 康熙部首 214字 2F00-2FD5 部首扩展 115字 2E80-2EF3 兼容汉字 477字 F900-FAD9 兼容扩展 542字 2 ...
JavaScript中的防抖和节流
什么是防抖 函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下图，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。 防抖应用场景如下 搜索框输入查询，如果用户一直在输入中，没有必要不停地调用去请求服务端接口，等用户停止输入的时候，再调用，设置一个合适的时间间隔，有效减轻服务端压力。 表单验证 按钮提交事件。 浏览器窗口缩放，resize事件(如窗口停止改变大小之后重新计算布局)等。 具体实现(Lodash库) /** * * @param { Function } func 要进行debouce的函数 * @param { Number } wait 等待时间,默认500ms * @param { Boolean } immediate 是否立即执行 */ export function debounce(func, ...
移动端滚动方案：better-scroll
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 ...
给bber换个皮肤
简单介绍 此项目仅仅作为哔哔点啥数据的前端页面展示，并不会修改及影响任何关于云函数的内容。 注：前端解析不在使用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', // 腾 ...
一、VUE中的遗漏的知识
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 ...
JavaScript中的设计模式
设计原则 单一职权原则（SRP） 一个对象或方法只做一件事情。如果一个方法承担了过多的职责，那么在需求的变迁过程中，需要改写这个方法的可能性就越大。 应该把对象或方法划分成较小的粒度 最小知识原则（LKP） 一个软件实体应当 尽可能少地与其他实体发生相互作用 应当尽量减少对象之间的交互。如果两个对象之间不必彼此直接通信，那么这两个对象就不要发生直接的 相互联系，可以转交给第三方进行处理 开放-封闭原则（OCP） 软件实体（类、模块、函数）等应该是可以扩展的，但是不可修改。 当需要改变一个程序的功能或者给这个程序增加新功能的时候，可以使用增加代码的方式，尽量避免改动程序的源代码，防止影响原系统的稳定 什么是设计模式 假设有一个空房间，我们要日复一日地往里面放一些东西。最简单的办法当然是把这些东西直接扔进去，但是时间久了，就会发现很难从这个房子里找到自己想要的东西，要调整某几样东 西的位置也不容易。所以在房间里做一些柜子也许是个更好的选择，虽然柜子会增加我们的成本，但它可以在维护阶段为我们带来好处。使用 这些柜子存放东西的规则，或许就是一种模式 设计模式 ...