萤火之森-Thezero-CSDN博客

原创 QQ互联避坑指南

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.comQQ互联避坑指南申请APPID在QQ互联官网h【ttp://connect.qq.com/】申请,根据项目需要，申请相应的接入。按照官网指示操作注册成为开发者注册成功后就可以创建自己的应用审核成功后就可以得到自己的APPID与APP KEY 这两个都会在后续接入中用到放置QQ登录按钮网站需要下载“QQ登录”按钮图片，并按照UI规范将按钮放置在页面合适的位置。获取Authorization Code打

2020-11-15 23:51:38 848

原创 Vue3 Hook 到底是啥黑魔法？

早就听说，React社区，已经全面拥抱Hook。Vue3的发布也支持了自定义Hook，作为只会Vue的前端小码农自然要去看看Vue3 Hook到底是啥黑魔法？个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com从不了解React Hook的角度来看一下啥是Hook？Vue 官方给出的自定义 Hook 的例子是这样的：import { ref, onMounted, onUnmounted } from "vue";export function useMous

2021-07-29 13:27:22 860

原创鼠标拖拽建立选区，选中元素

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com近段时间做一个编辑器，就需要一个鼠标拖拽选区的功能，方便批量选中元素，进行相应操作，所有就有了这篇文章。效果展示建立选区组件1、要想选中元素，肯定要先建立选区根据两个坐标点确定选区位置，并绘制出选区根据两个坐标删除选区的宽与高let size = computed(() => { let width = props.endPoint.x === 0

2021-07-14 20:08:24 828

原创粘贴板之二维码复制

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com说一点废话复制网页上的二维码，并分享到的聊天工具中,是特别常见的功能。在网上找了很多资料，大部分都是坑。解决思路使用 navigator.permissions api查询浏览器是否支持粘贴板操作使用fetch 请求二维码文件流将文件流转化为blob使用navigator.clipboard.write 将文件blob写入粘贴板未解决的问题粘贴板在不安全的环境中会有限制，可能导致复制失败。建议在ht

2021-05-18 16:21:56 1548

原创文件下载之response header中获取文件名

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com通过post获取文件流，并从中获取到文件信息。fetch API获取放在Content-Disposition的文件信息需要后端跨域支持，不然会出现，响应头为空的情况,从而得不到文件信息。附源码 /** * 获取文件流，并获取响应头中的文件信息，需要后端跨域支持 */ async downloadFile(url, params) { const request = {

2021-04-28 09:26:22 4440 2

原创 vue自定义指令之v-loading（附源码，可CV）

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com组件API：TigerUi：http://tigerui.xkongkeji.com效果图结构<template> <div :class="['ti-loading', 'ti-' + type]"> <div class="loader-inner"> <div class="loader-line-wrap">

2021-04-03 23:24:01 514

原创 socket.io初体验

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com什么是socket.ioSocket.IO 是一个封装了 Websocket、基于 Node 的 JavaScript 框架，包含 client 的 JavaScript 和 server 的 Node。其屏蔽了所有底层细节，让顶层调用非常简单。另外，Socket.IO 还有一个非常重要的好处。其不仅支持 WebSocket，还支持许多种轮询机制以及其他实时通信方式，并封装了通用的接口。这些方式包含 Adobe Flas

2021-03-31 14:43:11 238

原创你真的了解prototype和proto吗

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com一句话的图解：实例对象的隐式原型指向构造函数的的原型对象什么是prototypejavascript只有函数默认拥有prototype属性，由构造函数构造出来的实例默认是不具有扩展的，除非手动给这个实例加上扩展（当然这已经不是prototype了，仅是一个名叫prototype的属性而已）。在JS里，万物皆对象。方法(Function)是一个对象，方法的原型(Function.prototype)是对象。

2021-03-29 16:45:39 123

原创关于XSS与CSRF你应该知道的

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com在 Web 安全领域中，XSS 和 CSRF 是最常见的攻击方式。接下来就简单的说一下他们该怎么防范。什么是XSSXSS 攻击是指攻击者在网站上注入恶意的客户端代码，通过恶意脚本对客户端网页进行篡改，从而在用户浏览网页时，对用户浏览器进行控制或者获取用户隐私数据的一种攻击方式。XSS攻击的防范现在主流的浏览器内置了防范 XSS 的措施，例如 CSP。但对于开发者来说，也应该寻找可靠的解决方案来防止 XSS 攻击。

2021-02-08 21:42:50 210

原创 LeetCode刷题日记之链表中倒数第k个节点

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com解题思路：遍历出链表长度，设置一个计数点，当找到倒数第K个节点时返回，链表（感觉走了笨办法）var getKthFromEnd = function(head, k) { let conut=1; let index=1; let temp=head; while(temp&&temp.next){ conut++ temp=temp.next

2021-01-21 13:52:47 131

原创 LeetCode刷题日记之顺时针打印矩阵

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com解题思路：把矩阵分为一个一个的圆环，顺时针遍历圆环即可（设置边界值，根据边界值，遍历圆环），只剩下一行，从左到右依次添加，只剩下一列时，从上到下依次添加。let matrix = [ [1, 2, 3], [4, 5, 6], [7, 8, 9],];let spiralOrder = (matrix) => { if (matrix.length == 0) return

2021-01-12 13:58:00 122

原创 LeetCode刷题日记之找出数组中重复数字

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com对于一段程序，用不同的方法写消耗时间差距还是很大的，下面是本题的逐渐改进过程。遍历let nums = [0, 1, 2, 3, 4, 11, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];let findRepeatNumber = function (nums) { let startIndex = 0; let result; while (startInde

2021-01-11 16:17:38 140 1

原创关于EventLoop的简单理解

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.comEventLoop出现的目的js单线程众所周知js是单线程的，那为什么是单线程嘞，作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？单线程解决方案单线程就意味着，所有任务需要排队，前一个任务结束，才

2021-01-08 18:44:01 242

原创拜读vue官方文档

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com1、不要在生命周期函数上使用箭函数created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或

2020-12-17 22:50:07 147

原创 Vue插槽你真的弄懂了吗？

vue提供了三种插槽：匿名插槽，具名插槽，作用域插槽个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com匿名插槽子组件定义了solt，但未提供名字，这就是匿名插槽，也叫做默认插槽，只要出现的父组件中，未指定插槽名字的内容，都会默认放到匿名插槽里。子组件<template> <div> <slot><slot>//匿名插槽 </div></template>父

2020-12-14 16:57:10 244

原创 vue中的依赖注入 provide 和 inject

vue中的依赖注入 provide 和 inject个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.comvue中的依赖注入 provide 和 injectprovide 选项允许我们指定我们想要提供给后代组件的数据/方法。下面是一个组价刷新的案列<template> <div > <div class="view"> <router-view v-if="isRouterAlive">&lt

2020-11-24 22:43:22 241

原创手撕数据结构---栈

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com什么是栈栈是一种后进先出的数据结构，也就是说最新添加的项最早被移出；它是一种运算受限的线性表，只能在表头/栈顶进行插入和删除操作。栈有栈底和栈顶。class Stack { constructor() { this.list = []; } push(val) { return this.list.push(val); } getLength(

2020-11-22 20:07:02 154

原创浅谈method，computed，watch的区别

浅谈method，computed，watch的区别只要使用过vue的基本对三者都有一点的了解，基本用法就不说了。method（方法调用）页面数据每次重新渲染时都会重新执行，性能消耗大，如果你不希望有缓存，请用方法来替代。computed（计算属性）计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。watch（侦听属性）监听到数据变化的时候就会执行还属性的回调函数。当需要在数据变化时执行异步或开

2020-11-19 14:01:40 156

原创手撕数据结构----队列与优先队列

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com手撕数据结构----队列与优先队列什么是队列（先进先出）队列，和栈有点类似，但是又不太一样，队列遵循先进先出的原则。列就是排队，在前面的人先享受服务，完后前面的人先走。普通队列/** * 普通队列 */class Queue { constructor() { this.list = []; } push(val) { return this.list

2020-11-17 20:04:21 279

原创手写call、apply、bind详解

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.comcall、apply、bind详解三者都是改变函数执行时的上下文，也就是就是改变this的指向。call(obj,arg1,arg2) //call()的参数一个一个的传函数.call(第一个参数:想让函数中this指向谁,就传谁进来,后面的参数:本身函数需要传递实参,需要几个实参,就一个一个的传递即可);call的作用: 1. 调用函数 2.指定函数中this指向apply(obj,[arg1,arg2] /

2020-11-16 21:50:08 839

原创异步解决方案之Promise

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.comES6异步解决方案PromiseParmisePromise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。Promise对象有以下两个特点。（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都

2020-11-16 11:09:05 306

原创常用的三种模块化规范

常用的三种模块化规范个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.comES6Moudle使用import/export语法，在文件顶部导入需要的模块，特点是：静态化，在编译时候确定模块之间的以来关系，以及输入输出变量。ES6 中 export 和 import 一般的用法有两种（别名使用as关键字）命名导出（Named exports）默认导出（Default exports）ES6Moudle 在语言标准的层面上，实现了模块功能，而且实现得相当简

2020-11-16 00:05:33 784

原创时间自动过期解决方案之node-schedule

时间自动过期解决方案之node-schedule前言node-schedule简介安装简单使用schedule.scheduleJob(data,function)参数取消任务参考前言时间自动过期，除了用数据库提供的事件，触发器等解决，也可以用node-schedule，那什么是node-schedule？node-schedule简介Node Schedule 是一个Node.js的灵活的类似cron又不类似的任务调度库.它允许你调度任务（任意函数）在特殊的日期执行，并循环执行。他只在在任何给定的

2020-05-25 21:02:05 762

qq_42241862的博客