随笔分类 - 前端技术栈
摘要：setTimeout 模拟实现 setInterval js单线程，在线程占用时间较长的情况下，setInterval可能会向任务队列里添加很多宏任务 这些宏任务在线程空下来的时候，会依次执行，而不会间隔执行，导致失效 所以使用setTimeout+递归来模拟，只有前一次任务执行了之后，才添加下一次
阅读全文
摘要：for (var index = 1; index < 5; index++) { ((i) => { setTimeout(() => { // console.log(i); }, 1000 * i); })(index) } for (let index = 1; index < 5; ind
阅读全文
摘要：// 红黄绿： 使用异步编程方案， promise, async await等都行 // 循环打印： 一轮打印完了以后递归重复这一过程 const taskRunner = (light, timeout) => { return new Promise((resolve) => { setTime
阅读全文
摘要：先找到根(父)节点，然后根据根节点的id和数组元素的pid找到对应父子关系 重复上一步骤 const getTree = (root, list) => { if(!Array.isArray(list)) throw 'list must be Array' root = root || list
阅读全文
摘要：Hook定义 useDragList import { useState } from "react"; interface DragPropsType { list: Array<any>, dragItemClassName: string } const checkValidDragItem
阅读全文
摘要：js draggable 拖拽效果 drag 拖拽中 dragstart 开始拖拽 dragover 拖拽悬浮时触发 dragenter 拖入目标节点 dragleave 离开源节点 drop 落进目标节点 event.dataTransfer.setData 拖拽时传输数据，可用于dragstar
阅读全文
摘要：const shuffle = arr => { let len = arr.length let rand = 0 while (len) { rand = Math.floor(Math.random() * len--) ;[arr[len], arr[rand]] = [arr[rand],
阅读全文
摘要：js实现日期转换函数 用yyyy,MM,dd固定字符串做替换 const dateFormat = (date, formatter) => { const fDate = new Date(date) const day = fDate.getDate() const month = fDate.
阅读全文
摘要：bind返回一个函数 闭包保存this, 执行的时候用apply或call绑定this js中new的优先级高于bind Function.prototype._bind = function (context) { if (typeof this !== "function") throw "ty
阅读全文
摘要：比较麻烦的是this指向的问题，但是可以通过"对象的函数调用指向对象自身"来处理 如果没有传入context， 那么this默认指向window Function.prototype._call = function (context) { const type = typeof this if (
阅读全文
摘要：js 手写类型判断函数 判断引用类型 调用Object.prototype.toString截取字符串 判断基本类型 返回typeof function getType(target) { if (target null) { return "null" } // 引用类型 if (typeof t
阅读全文
摘要：手写防抖 如果存在之前的计时器，取消重新计时。 即多次点击只执行最后一次 注意this指向和回调形参列表 <button onclick="clickMe(1)">click me</button> <script> const clickMe = debounce((a) => { console
阅读全文
摘要：入参必须实现iterator接口，一般为一个非空数组 返回一个promise, 结果为数组中第一个改变为成功/失败状态的那个promise元素 Promise._race = function (promises) { if (!promises instanceof Array || !promi
阅读全文
摘要：入参必须实现iterator接口，一般为数组 全部成功才算成功，有一个失败就失败, 如果成功，结果顺序和入参顺序保持一致 返回一个新的promise, Promise._all = function (promises) { if (!promises instanceof Array) throw
阅读全文
摘要：Promise状态枚举 收集状态更改的回调函数到数组里 实现resolve,reject, 注意校验状态为pending 执行Promise形参函数，传入resolve，reject const statusMap = { PENDING: 'PENDING', RESOLVED: 'RESOLVE
阅读全文
摘要：创建一个新对象base，将base的原型链设置为构造函数的原型 new构造函数，构造函数的this指向新对象，可以为新对象添加实例属性 执行构造函数，如果构造函数自己有引用类型的返回值ret，就用ret, 否则用base const isValidRet = v => v !== null && (
阅读全文
摘要：o instanceof Ctor 判断对象o是不是构造函数Ctor生产的实例，原理是判断构造函数的原型是不是位于实例原型链或父级原型链上 const _instanceof = (o,Ctor)=>{ if(o null) return false let proto = Object.getPr
阅读全文
摘要：Object.create, 即生成一个新对象，同时将参数作为新对象的原型链 通过new将构造函数的原型设置到实例对象的原型链上，完成create的功能 基于new方法的方式有个问题，new作用的构造函数必须返回一个引用类型，而我们通常用Object.create(null)来创建一个原型链为空的对
阅读全文
摘要：进程与线程 进程是一个程序的运行实例。 启动一个程序的时候，操作系统会为这个程序分配内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样一个环境叫做进程。当一个进程关闭之后，程序会回收进程的内存 线程依附于进程，线程由进程启动管理 进程中的任意线程崩溃，都会引起进程崩溃 线程之间可以共
阅读全文
浙公网安备 33010602011771号