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） 软件实体（类、模块、函数）等应该是可以扩展的，但是不可修改。 当需要改变一个程序的功能或者给这个程序增加新功能的时候，可以使用增加代码的方式，尽量避免改动程序的源代码，防止影响原系统的稳定 什么是设计模式 假设有一个空房间，我们要日复一日地往里面放一些东西。最简单的办法当然是把这些东西直接扔进去，但是时间久了，就会发现很难从这个房子里找到自己想要的东西，要调整某几样东 西的位置也不容易。所以在房间里做一些柜子也许是个更好的选择，虽然柜子会增加我们的成本，但它可以在维护阶段为我们带来好处。使用 这些柜子存放东西的规则，或许就是一种模式 设计模式 ...
规范化Commit提交信息
前言 自从上次写了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布局 flex布局又称为弹性盒子模型，它有自己的一套属性，效率高，学习成本低，兼容性强！ 弹性盒子模型实现 HTML 页面布局是与方向无关的。不类似于块级布局侧重垂直方向，内联布局侧重水平方向。 弹性盒子模型主要适用于 HTML 页面的组件以及小规模的布局，而并不适用于大规模的布局，否则会影响 HTML 页面性能。 名词定义 伸缩容器（flex container）：包裹伸缩项目的父元素。 伸缩项目（flex item）：伸缩容器的每个子元素。 轴（axis）：每个弹性盒子模型拥有两个轴。 主轴（main axis）：伸缩项目沿其一次排列的轴被称为主轴。 侧轴（cross axis）：垂直于主轴的轴被称为侧轴。 方向（direction）：伸缩容器的主轴由主轴起点和主轴终点，侧轴由侧轴起点和侧轴终点描述伸缩项目排列的方向。 尺寸（dimension）：根据伸缩容器的主轴和侧轴，伸缩项目的宽度和高度。 对应主轴的称为主轴尺寸。 对应侧轴的称为侧轴尺寸。 定义弹性盒子 弹性盒子是css3新增的属性，因此弹性盒子模型及其属性存在浏览器兼容问题。具体可查看C ...
HTML5中audio与video
音频 HTML5中提供的音频API标签为<audio></audio>，使用示例如： <audio src="野狼disco.m4a" controls></audio> 兼容写法 <audio controls> <source src="resource/audio/OUTPUT.mp3" type='audio/mpeg'> <source src="resource/audio/OUTPUT.aac" type='audio/aac; codecs="aac"'> <source src="resource/audio/OUTPUT.ogg" type='audio/ogg; codecs="vorbis"'> 您的浏览器不支持，<a href="resource/audio/OUTPUT.mp3">请下载</a> </audio> 当浏览器不支持或者当前音乐地址失效时会分别访问source提供的路径，如果全部失效则提示最下边的文本。 音乐属性 属性名 说 ...
Github之Actions自动发布GitHub Release
前言 此文以node项目为例，目录存在package.json，其他项目如果参考本教程需自行创建json文件用于记录当前版本。 { "version":"1.1.1" } 上述代码仅作为JSON文件示例。 先来看看actions官方提供的发布demo - name: 创建GitHub Release id: create_release uses: actions/create-release@latest env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: tag_name: tag的名称 release_name: 发布的名字 body: 发布的内容 draft: false prerelease: false 以上几个需要我们自己填写的只有tag_name、release_name、body。因此我们只需要动态获取这三个变量即可实现按照我们的需求进行发布。 获取tag_name tag_name一 ...
