js
前端_小栗子
满满的正能量
展开
-
react - mqtt封装
mqtt react原创 2023-01-17 13:17:35 · 414 阅读 · 2 评论 -
websocket.js的封装,包含保活机制,通用
websocket的封装,包含保活机制原创 2023-01-04 10:56:09 · 994 阅读 · 0 评论 -
图片url地址转base64格式
// url地址转bace64export function getImageBase64Data(imgSrc) { function getBase64(img) { let canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; let ctx = canvas.getContext("2d");原创 2022-05-12 16:14:23 · 1755 阅读 · 0 评论 -
react-父组件访问子组件中的方法和state(函数组件使用ref)
函数组件中:父组件想要访问子组件中的方法和数据;子组件使用forwardRef做转发,使用useImperativeHandle把方法暴漏出去,在父组件中即可访问到;子组件代码示例import { useImperativeHandle, forwardRef } from 'react';const Children = forwardRef((props, ref) => { useImperativeHandle(ref, () => ({ getL原创 2022-05-05 11:26:04 · 2180 阅读 · 0 评论 -
fetch请求超时取消请求封装
AbortController 可以终止一个或者多个fetch请求1创建一个 AbortController 实例2该实例具有 signal 属性3将 signal 传递给 fetch option 的 signal4调用 AbortController 的 abort 属性来取消所有使用该信号的 fetch。一.简单使用:const controller = new AbortController();const { signal } = controller;fetch("http:原创 2022-04-02 17:58:56 · 1146 阅读 · 0 评论 -
前端 @功能的实现,在react、vue中通用
废话不多说,先上需求:在输入框中输入@后,弹出选人的浮框,然后选择人(可多选),选完后,关闭浮框,然后在输入框中加入@XXX,然后焦点定位刚开始输入@的位置。删除的时候,@XXX要一块删除。分析:1.因为要在输入框中把@xxx高亮显示,所以需要用到可编辑元素。 <div contentEditable></div>2.用到selection和range对象开撸:<div className={styles.talkInput} id="talkInput原创 2022-02-26 20:53:17 · 2988 阅读 · 8 评论 -
发布-订阅模式
归纳:简单来说就是通过对象这种key,value的映射特性把一个我们未来可能会用到的事件类型和对应事件先注册到一个全局的对象中,这一步也叫做订阅,就是我们的on事件,然后再在其他地方去触发这个事件,这一步也叫做发布,对应我们的emit事件,发布的时候可以携带参数,从而触发我们订阅的这个事件,这个被订阅的事件被触发并且接受到触发时候携带的参数。通常应用的场景:页面之间的通信,比如在A页面订阅一个事件,在B页面去发布这个事件并且携带参数,A页面的事件被触发拿到B页面发布时携带的参数,从而达到组件之间的通.原创 2022-01-12 13:57:53 · 372 阅读 · 0 评论 -
js实现继承,什么是原型、构造函数、实例和原型的关系,原型链继承的优缺点,组合式继承,寄生式继承。继承的最优解决方案
js实现继承的主要方式是原型链,想要理解原型链,首先需要理解原型下面我们讲解构造函数、实例、原型之间的关系,最后来理解原型链实现继承原型:即原型对象,当我们创建一个函数,该函数都会生成一个prototype属性,这个属性是一个指针,指向原型对象;实例可以共享原型对象上定义的属性和方法;原型对象里也有一个指针constructor指向构造函数;构造函数:构造函数和普通函数的区别:1、命名上,构造函数一般命名时候约定首字母大写;2、 调用方式上,构造函数使用new操作符调用;实例当原创 2022-01-07 15:58:54 · 440 阅读 · 0 评论 -
构造函数、实例、原型对象之间的关系(笔记草稿)
每个函数都会创建一个prototype属性,这个属性是一个对象,即原型对象,包含实例共享的数据和方法,实际上这个属性就是实例的原型,使用原型的好处就是定义在原型对象上的属性和方法可以被实例共享总结 :每个函数都有一个prototype属性(是一个对象)指向原型对象,所有原型对象都会有一个constructor 属性(指回构造函数),原型对象上的属性和方法可以被实例共享Person.prototype.constructor 指向 Personprototype :{ -> 指向原型对象Cons原创 2021-10-18 14:59:19 · 211 阅读 · 0 评论 -
antd Table合并行 rowSpan
实现这种效果,同一种知识点类型合并行。 <Table columns={columns} // dataSource={dataSource} dataSource={createNewArr(dataSource)} pagination={false} />.原创 2021-08-17 10:04:22 · 2120 阅读 · 0 评论 -
js函数柯里化 a=>b=>{}
function add(a) { return function(b) { return a + b }}等价于:let add = a => b => a + b原创 2021-04-20 11:52:48 · 359 阅读 · 0 评论 -
js 函数防抖和函数节流 理解和掌握
函数防抖概念:规定函数至少间隔多久执行场景:代码:remitSearch (val) { if (this.timeOutId) clearTimeout(this.timeOutId) this.timeOutId = setTimeout(() => { this.key = val; this.getdetaillist() },300) console.log(this.timeOutId);},在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计原创 2021-04-20 11:42:35 · 117 阅读 · 0 评论 -
js的Object.getOwnPropertyDescriptor
对象原型的toString方法,以及数组的length属性都是不可枚举的。对象的每个属性都有一个描述对象(Descriptor),用来控制该属性的行为。Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象。let obj = { foo: 123 };Object.getOwnPropertyDescriptor(obj, 'foo')// {// value: 123,// writable: true,// enumerable:原创 2021-04-19 16:41:25 · 2428 阅读 · 0 评论 -
js 遍历对象常用方法
for…inconst obj = { id:1, name:'zhangsan', age:18} for(let key in obj){ console.log(key + '---' + obj[key]) }输出:id—1name—zhangsanage—181)、Object.keys(obj)2)、Object.values(obj)const obj = { .原创 2021-04-19 16:32:46 · 88 阅读 · 0 评论 -
js 寻找节点的所有父级元素
deptList树状结构(每一项有parentID)element该节点 loop(deptList , element){ var arrRes = []; if (deptList.length == 0) { if (!!element) { arrRes.unshift(deptList) } return arrRes; } let rev = (data, nodeId) => {原创 2021-04-19 15:55:31 · 1205 阅读 · 0 评论 -
js闭包的使用和误区纠正
闭包就是能够读取其他函数内部变量的函数。–来自阮一峰的文章两种常见形式:(function() { var local= "变量"; function foo(){ console.log(local)}window.fooFun = foo})()local变量和foo就形成了闭包。function foo(){ var local = 1 function bar(){ local++ return local } return bar原创 2021-04-19 15:35:56 · 168 阅读 · 2 评论 -
js的!和!!的使用
!null 为true!undefined 为true!’ ’ 为true!100为false!'abc’为falsevar a;if(!!a){ 判断变量a为非空,未定义或者非空串才能执行方法体的内容。 //a有内容才执行的代码... }来代替:var a;if(a!=null&&typeof(a)!=undefined&&a!=''){ //a有内容才执行的代码 }使代码更简洁。...原创 2021-04-19 15:06:28 · 76 阅读 · 0 评论 -
js的事件循环(Event loop)、执行上下文、执行栈和事件队列的手记
js是一个单线程非阻塞的脚本语言。单线程意味着,javascript代码在执行的任何时候,都只有一个主线程来处理所有的任务。非阻塞则是当代码需要进行一项异步任务(无法立刻返回结果,需要花一定时间才能返回的任务,如I/O事件)的时候,主线程会挂起(pending)这个任务,然后在异步任务返回结果的时候再根据一定规则去执行相应的回调。为什么要单线程?因为js是和浏览器交互的,需要操作各种dom, 如果javascript是多线程的,那么当两个线程同时对dom进行一项操作,例如一个向其添加事件,而另一个删除原创 2021-02-23 10:47:56 · 324 阅读 · 1 评论