- 博客(66)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 【vite+vue3.0】基于vite写一个将md文件渲染为js文件的插件
基于vite写一个将md文件渲染为js文件的插件前言尤大是这么描述 Vite 的：「一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打包。」这篇博客笔者想分享编写Vite插件【md文件渲染为js文件】的技术栈：md插件源码地址相关文章基于vue3
2021-01-18 15:24:40
2707
19
原创 【Vue3 造轮子项目 】kaiteUI中利用Custom Block(自定义块)和vite实现代码渲染器
关于kaiteUI中通过json数据实现代码渲染器前言上礼拜笔者分享了搭建UI框架的技术栈，其中一个较为关键的技术——代码渲染器，由于篇幅问题放到了今天这篇博客中给大家做一个详细的分析解读。在这里先分析一下上篇博客内容—— 基于vue3.0 + vite + TypeScript 实现一个UI框架 - kaiteUI,这篇主要是通过基于vue3.0 + vite + TypeScript技术框架来实现一个UI框架，笔者自己搭建框架的初衷是运用并巩固最近学习的vue3.0新特性。技术栈废话不多说，
2021-01-16 10:32:40
2872
15
原创 【Vue3 造轮子项目 ------ kaite-ui】基于vue3.0 + vite + TypeScript 实现一个UI框架 - kaiteUI
基于vue3.0 + vite + TypeScript 实现一个UI框架 - kaiteUI前言前段时间笔者一直忙于学习Vue3方面新知识，比如如何从vue2.0版本过渡到vue3.0，如何理解vue3.0的新接口Composition API等等,笔者相信随着vue3.0正式版的发布，企业的需求量增大，掌握vue3.0将会是一个必要的升职加薪的技能。本片文章并非是vue3.0学习知识点，而是通过基于vue3.0 + vite + TypeScript技术框架来实现一个UI框架。由于vue3.0刚
2021-01-07 09:06:53
1417
4
原创 【node】异步编程之异步函数promise、async、await
异步编程之异步函数一、简介node.js是一个Javascript运行环境(runtime environment)，实质是对Chrome V8引擎进行了封装；node.js不是一个 JavaScript 框架，也不是浏览器端的库，node.js是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。1.1 特点异步IO事件与回调函数单线程（javascript语言的特点)跨平台1
2020-12-26 15:51:58
737
原创 【vue 3.x】利用name参数实现组件的递归调用
利用name参数实现组件的递归调用一、name的定义官方文档：给出name的定义：翻译：允许组件在其模板中递归调用自身。 请注意，当组件在Vue.createApp({}).component（{}）中进行全局注册时，全局ID会自动设置为其名称。指定name选项的另一个好处是调试.命名的组件会产生更有用的警告消息。 另外，在vue-devtools中检查应用程序时（打开新窗口），未命名的组件将显示为<AnonymousComponent>，这不是很有用。 通过提供name选项，您将获
2020-12-20 13:49:34
1718
1
原创 【Ajax】 ajax的函数封装 json
ajax的函数封装目的当页面数据需要更新时，需要频繁使用Ajax通讯时，不进行ajax函数封装的话，需要针对不同请求追加不同的ajax处理代码，会产生代码冗余，所以ajax函数封装旨在减少代码冗余。基本思路将ajax请求所需要的各类参数以对象形式传入封装函数请求参数要考虑的问题： 1.请求参数的位置问题 将请求参数传递到ajax函数内部，在函数内部根据请求方式的不同将请求参数放置在不同的位置 get 放在请求地址的后面 p
2020-12-11 17:19:03
299
1
原创 【VUE】vue前端框架知识整理
VUE.JS学习笔记文章目录第一章 vue简介1.1 Vue基本使用1.2 Vue模板语法1.2.1 前端渲染1.2.2指令使用==a.使用v-cloak指令解决差值表达式存在闪动问题==b. 数据绑定指令1.v-text 填充纯文本2.v-html 填充HTML片段3.v-pre 填充原始信息c.数据响应式d.双向数据绑定***MVVM设计思想e. 事件绑定f. 属性绑定g. 样式绑定1.class样式处理2.样式绑定相关语法细节3.style样式处理h. 分支循环结构1.分支结构2. 循环结构1.3
2020-07-03 09:03:12
1811
4
原创 利用网络层进行防抖，取消重复请求
全局定义一个队列，存储pending状态（没有response）的请求，在请求拦截器中给每个需要防抖的请求加一个signal（信标），每个请求进来的同时去判断当前等待队列中是否有相同的请求，如果有就取消队列中的请求，加入最新的请求的信标（这个逻辑也可以改成取消当前请求，保留队列中的请求的信标，这个主要看你的业务需求，一般c端都是需要最新数据，所以我使用的是前面的逻辑），如果没有当前的信标加入队列中；在响应拦截器里，删除队列中的请求signal。
2023-02-08 11:10:03
450
原创 网络重连封装
部分情况会遇到业务接口失败，但我们又不希望让用户去退出应用重启，这时候我们可以在网络层设置一个重连机制。写这个的时候我想到了当时实现token无痛刷新时没有去解决的一个痛点，但我去刷新token的时候如果是获取令牌的接口报错那程序会持续不断的请求令牌接口，这对服务端不太友好。之后我会把重连尝试次数限制加到无痛刷新机制中
2023-02-08 11:08:51
189
原创 websocket连接封装
WebSocket是一种在单个TCP连接上进行全双工通信的协议。使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
2023-02-08 11:08:09
303
原创 小程序与axios结合的网络层封装
小程序在网络层提供的API是能够完成一个程序与服务端交互的完整链路，但需要大量的定制化代码，才能实现请求拦截和响应拦截，不太符合大多数开发者的使用习惯，对于前端开发者来说，网络层还得是axios。
2023-02-08 11:07:57
815
原创 基于类的axios完整封装
1、集成了网络重连、防止重复网络请求、取消网络请求等功能****2、集成了JSON、application/x-www-form-urlencoded;charset=UTF-8、multipart/form-data;charset=UTF-8（文件上传）三种类型上传；****3、为一个项目使用多个服务端请求地址提供便利，通过生成多个实例对象实现****4、与TS深度结合
2023-02-08 11:05:32
640
2
原创 探索埋点基本技术实现
1.为什么要探索这纯属是我个人意愿，不想不明不白的使用一个东西，不求完全掌握，但想大概知道如何实现。刚进亚运项目小组，接到埋点任务，通过组内学习基本上明白了埋点API的使用，半懂半蒙的完成了埋点任务。近期手上任务都提测了，闲下来想去探索探索我心中的几个疑问：埋点是否会影响性能？埋点是Ajax请求吗？背后实现思想是什么？2.如何探索？本人没有技巧，混迹各种技术社区，俗称水群，总有大佬会说出一些你不知道的web规范、或者说新规范。其实是自己懒，不能想各种大佬一样每周都会去看看web mdn。
2022-04-30 11:04:33
691
原创 token无痛刷新
1.技术背景在追求网络安全的大环境下，前端在处理网络请求的安全性控制有了更高的需求，回归问题的本质，处理token过期问题。1.1 token过期需要解决的几个痛点i. 怎么在响应式拦截器中重新发起请求ii. 怎么处理token过期后大量请求并发iii. token过期后在响应拦截器中怎么重新获取token2.技术应用在解决上面提到的三个痛点之前，我们需要着重了解两个知识点：axios拦截器promise的三种状态success(resolve) fail(reject) pend
2022-04-25 15:40:04
1829
原创 canvas实现图像裁剪
1.技术背景随着都市类程序开发业务推进，在各类活动、个人信息等模块逐渐依赖图像裁剪、上传等功能，那么如何实现图像缩放、裁剪就成了前端工程师们关注优化的重点。2.应用技术本次使用的技术主要是依赖canvas,又叫画布，是H5新增内容，可以使用js脚本在其中绘制图像的元素。可以完成图片处理、动画渲染、图表渲染等操作。最近用uni-app的推流组件做了个图片裁切、上传的组件，拍照、选择照片完成后还需要对图片进行裁切，才能真正使用。3.处理思路使用两个canvas分别为操作canvas、目标canva
2022-04-24 17:47:04
4730
原创 油猴脚本+钉钉机器人实现实时合并提醒
作者：@(kaite-han)一、方案背景出于代码质量考虑，远端仓库的代码合并设置了多人审核通过后才能合并，那么如何保证合并审核的通知的及时性成为影响工作效率的关键因素。二、方案目的此方案为最简单、直接、暴力的方式通过判断用户点击按钮的文案来识别你在页面中的行为，但你达到特定行为后脚本会发送ajax请求去给机器人下发消息，以此让机器人通知到群内所有人。此次方案仅供初接触油猴前端攻城狮学习使用。三、方案实现话不多说，贴代码，都是js代码不难读，就不解释了。至于油猴内置的API，直接贴文档。//
2022-04-15 18:07:08
1193
原创 支付宝小程序modal弹窗——滚动穿透与滚动溢出
滚动穿透问题描述：在移动端开发模态框时（小程序也会出现），当模态框下的页面超过一屏时，在fixed定位的弹窗遮罩层上进行滑动，它下面的内容也会跟着一起滑动，看起来好像事件穿透到了下面的DOM元素一样，我们类比点击穿透，姑且称他为滚动穿透。问题原因：通过事件的表象，可以推测是文档的滚动事件被触发了，那我们就禁用滚动事件就好办了。案例伪代码：解决方案✅ e.preventDefault()小程序——脚本语法，通过e.preventDefault()阻止元素的touch-move事件。（H5同理
2022-04-06 10:18:45
2199
原创 VUE渲染时报错 Avoid using non-primitive value as key, use string/number value instead.
VUE渲染时报错 Avoid using non-primitive value as key, use string/number value instead.进入页面，就会冒出这么一长串的报错，这个是由于v-for循环里，key值可能重复了，所以会报这个错。查看了一下页面代码： 发现key值重复了当我们将key值设置为item.id属性时，问题就解决了。...
2021-10-13 14:02:21
1094
原创 【node sql】如何使用sql实现分页（mysql）
如何使用sql实现分页（mysql）一：分页需求：客户端通过传递pagenum(页码)，pagesize(每页显示的条数)两个参数去分页查询数据库表中的数据，那我们知道MySql数据库提供了分页的函数limit m,n，但是该函数的用法具体的分析如下：参数说明limit m,n 其中m表示需要查询的页码是从第几条数据开始，但需要注意的是m 的值是从零开始的，所以我们需要处理传过来的pagenum,即pagenum-1;其中n表示每页中显示的条数。简单使用1.假设我们要查找a表中的是第1页
2021-09-14 08:06:06
825
2
原创 @hapi/joi 报错 “message“: “Cannot mix different versions of joi schemas“
@hapi/joi 报错 “message“: “Cannot mix different versions of joi schemas“最近node项目中接触到了便捷式的检验工具包@hapi/joi,但在使用过程中将它放到错误级中间件去抛出错误时发现与预期的报错不同，@hapi/joi 老是报错“message“: “Cannot mix different versions of joi schemas“。问题： 使用 @hapi/joi 报错 “message”: “Cannot mix d
2021-09-10 10:58:36
468
原创 怎么实现一个简单的模板引擎及其原理分析
怎么实现一个简单的模板引擎及其原理分析首先最近读者在温顾模板引擎相关的知识点所以简单给写一些总结和分享一下自己写的一个极度简单的模板引擎，同时也是通过这个让大家理解模板引擎的实现原理。模板引擎的作用模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。模板引擎的原理模板引擎的实现方式有很多，最简单的是“置换型”模板引擎，这类模板引擎只是将指定模板内容（字符串）中的特定标记（子字符串）替
2021-08-18 15:32:51
454
3
原创 如何使用H5中 drag API实现拖拽功能
如何使用H5中 drag APIdrag API是h5中的新功能，想要对某个元素拖拽，需要首先给元素加上draggable=“true”，默认a标签和img是可以拖动的。一、元素在拖放过程中触发的事件先列下拖拽过程中可能触发的事件，如下：dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。dragover：事件主体是目标元素，在被拖放在某
2021-07-12 15:50:29
1441
1
原创 【leecode 剑指offer】 1~n整数中1出现的次数
题目输入一个整数 n ，求1～n这n个整数的十进制表示中1出现的次数。例如，输入12，1～12这些整数中包含1 的数字有1、10、11和12，1一共出现了5次。示例示例1输入：n = 12输出：5示例2输入：n = 13输出：6解题思路将 11 ~ nn 的个位、十位、百位、…的 11 出现次数相加，即为 11 出现的总次数。这边可以使用排列组合的方法解决，统计所有1出现的次数，我们可以吧所有整数理解为行李箱上的密码锁，先固定某一位上的数据控制为1，然后归纳所有数字的
2021-06-05 16:30:09
319
原创 百度地图bmap + echarts的结合以及运用
百度地图bmap + echarts的结合以及运用最近在学习echarts时，在官方用例中看到echarts结合百度地图的官方用例，查阅之后分享一下我最近的经验所得。其中我在他处找到了相关示例：首先引入相关文件：文件引入后,在相关echarts文件中配置相关option：var len = data.rows.length // data.rows是后台返回站点的数组var mapChart = echarts.init(document.getElementById('myChart
2021-05-26 09:17:07
1127
2
原创 【leecode 剑指offer】连接连续二进制数字
连接连续二进制数字给你一个整数 n ，请你将 1 到 n 的二进制表示连接起来，并返回连接结果对应的 十进制 数字对 109 + 7 取余的结果。解题思路对于第n个数和前n-1个数连接之后的数值sum，将n转成二进制字符串，假定长度为k，sum需要整体左移k个长度，就是乘以Math.pow(2,k)，所以一次遍历就完成了，注意每次取余即可。代码展示/** * @param {number} n * @return {number} */var concatenatedBinary = f
2021-03-25 10:12:02
156
原创 【leecode 剑指offer】复杂链表的深拷贝
复杂链表的深拷贝请实现 copyRandomList 函数，复制一个复杂链表。在复杂链表中，每个节点除了有一个 next 指针指向下一个节点，还有一个 random 指针指向链表中的任意节点或者 null。解析用一个哈希表表示映射关系：键是原节点，值是复制的节点。整体算法流程是：第一次遍历，复制每个节点和 next 指针，并且保存“原节点-复制节点”的映射关系第二次遍历，通过哈希表获得节点对应的复制节点，更新 random 指针代码实现/** * // Definition for
2021-03-18 10:41:55
107
原创 在VSCode中配置并使用less文件进行使用
在VSCode中配置并使用less文件进行使用前言笔者在最近不使用框架的情况下，做一个数据可视化应用，发现在使用VSCode时，无法使用less文件。究其原因，是因为HTML文件只认识.css文件而不认.less文件，所以我们应该通过配置VSCode来使用less文件。配置方法1.首先在VSCode插件商店找到 Easy LESS 的插件，操作方法如下：2.其次是在设置中配置setting.json,方法如下：按住 ctrl+, 快捷键或者通过【文件】----->【首选项】----&g
2021-03-11 16:31:02
1136
2
原创 it does not have a type annotation and is referenced directly or indirectly in its own initializer
关于在vue3 reactive中使用TypeScript时，出现'state' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.报错。关于这个错误的解释是：“state”隐式具有类型“any”，因为它没有类型注释，并且在其自己的初始化程序中直接或间接引用。解决方案出现这个问题时由
2021-03-02 17:06:53
2868
1
原创 【CSS3】浅谈display属性flex弹性布局、gird网格布局
浅谈display属性flex弹性布局、gird网格布局这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。一、Flex布局Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性
2021-03-01 15:01:23
1071
原创 【leecode 剑指offer】二叉树中和为某一值的路径
题目二叉树中和为某一值的路径描述输入一棵二叉树和一个整数，打印出二叉树中节点值的和为输入整数的所有路径。从树的根节点开始往下一直到叶节点所经过的节点形成一条路径。思路本问题是典型的二叉树方案搜索问题，使用回溯法解决，其包含 先序遍历 + 路径记录 两部分先序遍历： 按照 “根、左、右” 的顺序，遍历树的所有节点。路径记录： 在先序遍历中，记录从根节点到当前节点的路径。当路径为 ① 根节点到叶节点形成的路径 且 ② 各节点值的和等于目标值 sum时，将此路径加入结果列表。算法流程：
2021-02-25 16:57:34
116
2
原创 【leecode 剑指offer】二叉搜索树的后序遍历序列
二叉搜索树的后序遍历序列题目输入一个整数数组，判断该数组是不是某二叉搜索树的后序遍历结果。如果是则返回 true，否则返回 false。假设输入的数组的任意两个数字都互不相同。参考以下这颗二叉搜索树：解题思路后续遍历是左右根。因此postorder的顺序是左子树+右子树+根。二叉搜索树的性质是，左子树都比根节点小，右子树都比根节点大。并且每个节点（除叶子节点）都符合这个情况。因此检查左子树是否都小于根节点，右子树是否都大于根节点。并递归检查每个子树。都符合返回true算法展示/**
2020-12-26 14:35:01
109
原创 【node】利用Promise解决回调地狱问题
利用Promise解决回调地狱问题代码展示：const fs = require('fs');// 创建promise对象// let promise = new Promise((reslove,reject)=>{// fs.readFile('./1.txt','utf-8',(err,result)=>{// if(err!=null){// // 传给外部then方法// reject(err);
2020-12-25 09:51:59
101
原创 【node】不使用其他库实现简易访问静态资源
不使用其他库实现简易访问静态资源代码示例const http = require('http');const url = require('url');const path = require('path')const fs = require('fs')const app = http.createServer();app.on('request',(req,res)=>{ let pathname = url.parse(req.url).pathname; le
2020-12-24 15:45:41
83
原创 【node】不使用其他库实现简易路由
不使用其他库实现简易路由代码实现const http = require('http');const url = require('url');const app = http.createServer();app.on('request',(req,res)=>{ const method = req.method.tolowerCase(); let pathname = url.parse(req.url).pathname; if(method=='get
2020-12-24 15:43:28
68
原创 【leecode 剑指 Offer】从上到下打印二叉树 III
从上到下打印二叉树 III题目请实现一个函数按照之字形顺序打印二叉树，即第一行按照从左到右的顺序打印，第二层按照从右到左的顺序打印，第三行再按照从左到右的顺序打印，其他行以此类推。示例例如:给定二叉树: [3,9,20,null,null,15,7],返回其层次遍历结果：解题思路算法流程：BFS 循环： 循环打印奇 / 偶数层，当 queue 为空时跳出；打印奇数层： 从左向右 打印，先左后右 加入下层节点；若 queue 为空，说明向下无偶数层，则跳出；打印偶数层： 从右向左
2020-12-23 14:28:04
69
原创 【VUE 3.x】深入破解vue3.x新特性
深入破解vue3.x新特性一、基础准备了解常见的ES6新特性1. ES6的导入导出语法2. 解构赋值3. 箭头函数4. …剩余操作符了解VUE2.X的基本使用组件常用指令生命周期函数computed、watch、ref 等了解TypeScript的基本使用1.语法与JS兼容（初期使用可以当做js来用）二、关键背景在 Vue.js 伦敦大会上，Vue.js 作者尤雨溪简要介绍了 Vue 下一个主要版本要发布的内容，2018年9 月 30 日，尤雨溪在 medium 个
2020-12-20 09:39:21
761
1
原创 【leecode 剑指offer】 从上到下打印二叉树 II
从上到下打印二叉树 II一、题目从上到下按层打印二叉树，同一层的节点按从左到右的顺序打印，每一层打印到一行。二、示例例如:给定二叉树: [3,9,20,null,null,15,7],返回其层次遍历结果：提示：节点总数 <= 1000三、思路I. 按层打印： 题目要求的二叉树的 从上至下 打印（即按层打印），又称为二叉树的 广度优先搜索（BFS）。BFS 通常借助 队列 的先入先出特性来实现。II. 每层打印到一行： 将本层全部节点打印到一行，并将下一层全部节点加入队列，以此
2020-12-19 18:27:56
88
1
原创 【VUE 3】浅谈Vue2 和 Vue3使用上的区别
浅谈Vue2 和 Vue3使用上的区别引言本人最近正在利用 vite + Vue3 +TypeScript 框架做一个造轮子项目，本人也在Vue2向Vue3转型，所以在这里分享一下我在项目构建的过程中的一点总结、心得吧！区别1.Vue 3 的 Template 支持多个根标签，Vue 2 不支持vue2: 组件中只能有一个根标签<template> <div>根元素 示例</div></template>vue3:可以有多个根标签&
2020-12-19 17:04:06
3315
4
vue_shop.rar
2020-07-08
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人