VUE单文件组件开发
前言 首先需要阐明的是本文单文件开发最终实现的结果：**在 HTML 中通过引入打包后的 js 文件，然后使用组件标签即可渲染。**例如： 123456789101112131415161718<!DOCTYPE html><html lang="en"> <body> <div id="page"> <xk-head :msg="msg">2213</xk-head> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script> <script src="./dist/main.js"></script> <script> var app = new Vue({ ...
JavaScript中的防抖和节流
什么是防抖 函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下图，持续触发 scroll 事件时，并不执行 handle 函数，当 1000 毫秒内没有触发 scroll 事件时，才会延时触发 scroll 事件。 防抖应用场景如下 搜索框输入查询，如果用户一直在输入中，没有必要不停地调用去请求服务端接口，等用户停止输入的时候，再调用，设置一个合适的时间间隔，有效减轻服务端压力。 表单验证 按钮提交事件。 浏览器窗口缩放，resize 事件(如窗口停止改变大小之后重新计算布局)等。 具体实现(Lodash 库) 123456789101112131415161718192021222324252627/** * * @param { Function } func 要进行debouce的函数 * @param { Number } wait 等待时间,默认500ms * @param { Boolean } ...
给bber换个皮肤
简单介绍 此项目只是一个前端皮肤，其功能受限于后端云函数。因此我已经将哔哔迁移speak。此皮肤项目不在维护！！！ 此项目仅仅作为哔哔点啥数据的前端页面展示，并不会修改及影响任何关于云函数的内容。 注：前端解析不在使用 markdown 语法解析，但支持![]() 语法的图片。 示例页面：小康的 bb 页面 样式参考：微博 快速开始 请先确保按照其教程成功部署后，在你的 markdown 文件写入如下内容即可。 1234567891011121314151617<div id='speak-bber'></speak><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/ispeak-bber.min.js" charset="utf-8" ></script><script>ispeakBber .init( ...
一、VUE中的遗漏的知识
render 中的 h 函数 h 函数可以创建虚拟 dom，通过创建的虚拟 dom 再转化为真的的 DOM，从而渲染到页面中。 123456789101112131415161718192021222324<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' ...
规范化Commit提交信息
前言 自从上次写了Commit 表情符号使用指南后，提交信息便一直使用标签符号进行提交。虽然好看，但是提交终归是不太方便，每次还需要打开文章进行符号搜索，然后粘贴。于是参考网上的各种规范记录此文。 提交预览 提交格式参数说明(type)参数说明(scope)参数说明(subject)示例1<type>(<scope>): <subject> 用于说明 git commit 的类别，只允许使用下面的标识。 以下表格来自阿里技术 标识 含义 feat 新功能（feature） fix/to 修复 bug，可以是 QA 发现的 BUG，也可以是研发自己发现的 BUG。fix：产生 diff 并自动修复此问题。适合于一次提交直接修复问题to：只产生 diff 不自动修复此问题。适合于多次提交。最终修复问题提交时使用 fix docs 文档（documentation） style 格式（不影响代码运行的变动） refactor 重构（即不是新增功能，也不是修改 bug 的代码变动）。 perf 优化相关，比如提升性能、 ...
一文搞懂弹性盒子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>，使用示例如： 1<audio src="野狼disco.m4a" controls></audio> 兼容写法 1234567<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=" ...
Github之Actions自动发布GitHub Release
前言 此文以node项目为例，目录存在package.json，其他项目如果参考本教程需自行创建json文件用于记录当前版本。 123{ "version":"1.1.1"} 上述代码仅作为JSON文件示例。 先来看看actions官方提供的发布demo 1234567891011- 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。因此我们只需要动态获取这三个变量即可实现按照我们的需求进行发 ...
如何为评论系统快速添加表情
为你的Valine、Waline、Twikoo评论丰富表情吧。阿鲁小表情，哔哩哔哩表情····
