- 博客(38)
- 收藏
- 关注
原创 React State 更新时同步更新 dom -- flushSync 方法
React State 更新时同步更新 dom -- flushSync 方法
2023-03-09 00:29:23
2196
原创 ts基础
定义属性interface Person { name: string age: number [k:string]: any}const person: Person = { name: 'zhangsan', age: 12, hobby: ['a','b'], job: '' }as、is、in、keyofas: 类型断言,类型断言纯粹是一个编译时语法,同时,它也是一种为编译器提供关于如何分析代码的方法;is:判断一个变量.
2021-01-29 18:14:36
301
1
原创 Linux基础命令
1、pwd:显示当前路径2、ls:当前路径的所有内容 - ls -l :展示当前路径下的所有文件 / 文件夹(不包括隐藏的文件 / 文件夹)及其具体信息; - ls -a:展示当前路径的所有内容(包括隐藏的文件 / 文件夹); - ls -la:(两者结合使用)展示当前路径下的所有内容及其具体信息; - ls *xxx:(*代表0个或者多个字符),该命令用于方便检索,eg: ls *.txt 、 ls *word,表示展示当前路径下以 .txt 结尾的文件,即 txt 格式的文件; l
2020-11-01 18:34:18
225
原创 使用createDocumentFragment和requestAnimationFrame,渲染大量数据页面不卡顿
1、实现思路:渲染大量数据时,合理使用 createDocumentFragment 和 requestAnimationFrame,将操作且分为一小段一小段去执行,从而实现页面不卡顿。2、createDocumentFragment()
2020-10-23 22:33:33
922
原创 cookie、session及其区别
一、cookie1、简述:cookie是一种在客户端保持HTTP信息的技术,由于HTTP协议是无状态的,而服务端的业务必须是要有状态的,因此可以使用cookie来存储状态信息、标识用户身份等(即cookie用于会话跟踪)2、cookie工作原理:由于HTTP是无状态的协议,服务器但从网络连接上无法知道用户身份。因此要给每个用户颁发一个通行证(即cookie),无论谁访问都必须携带自己的通行证(即cookie),这样就可以确认用户的身份了。3、cookie一般由服务端生成,cookie实际上是一小段的文
2020-10-21 16:35:30
235
1
原创 最大子串的题目
1、连续子数组的最大和var theMaxSum = function (arr) { let max = -Infinity; arr.reduce((total, item) => { if (total > 0) { total += item; } else { total = item; } max = max > total ? max : tot
2020-10-02 22:36:23
113
原创 手写节流和防抖
<body> <button id="btn">点击防抖</button></body><script> var btn = document.getElementById('btn') function click() { console.log(111); } function debounce(fn, delay) { return function () {
2020-09-23 11:18:55
221
转载 同源及如何规避、CORS介绍
浏览器同源政策CORS介绍转载:http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.htmlhttp://www.ruanyifeng.com/blog/2016/04/cors.html
2020-09-21 09:56:53
143
原创 CSS做一个三角形
<head> <style> /* 三角形制作的原理 */ /* 先设置一个没有 宽高 的盒子,然后设置他的边框 */ .one { width: 0; height: 0; border-top: 100px solid red; border-bottom: 100px solid green; borde
2020-09-21 09:45:01
197
原创 实心get函数,如果访问正常,那么返回访问值;如果访问异常,那么就返回传入的默认值
/* *实现get函数 *如果访问正常,那么返回访问值 *如果访问异常,那么就返回传入的默认值 defaultValue */ function get(obj, property, defaultValue) { let arr = property.split('.') let len = arr.length let cur = obj for (let i = 0; i < len; i+...
2020-09-20 11:49:26
157
原创 简单的实现rgb与十六进制的相互转换
function rgb1(str) { // 输入参数格式 如: 'F30A09'; 输出格式 如:(255,10,9) let res = []; for (let i = 0; i < str.length; i = i + 2) { res.push(Number('0x' + str.substr(i, 2))) } return '(' + res.join(',') + ')'}console.log(rgb1('FF0A09'));
2020-09-16 22:44:25
754
原创 实现一个圆形进度条(vue)
实现方式:首先是用svg画两个圆,同圆心同半径的两个圆,然后把颜色都设置成透明,利用圆的边框来实现。给两个圆设置相同的边框宽度,并且设置颜色(设置一个透明,一个有颜色);然后创建stroke-dasharray实线/虚线线条,长度(值)为 2πr,即圆的周长;将stroke-dashoffset设置为动态属性,这个属性是“定义实线/虚线的起点距离 路径 的起点的距离”,利用这个属性来当做进度条,从而控制进度。<template> <div id="pro"> <b
2020-09-15 21:18:56
3269
1
原创 实现一个条形进度条
<style> #c1 { width: 100%; background-color: darkgray; } #c2 { width: 10%; background-color: darkcyan; text-align: center; color: white; line-height: 30px; } </.
2020-09-15 16:44:08
316
转载 js的运算优先级
js运算优先级转载:https://blog.youkuaiyun.com/qq_33576343/article/details/82891208?ops_request_misc=
2020-09-13 16:09:29
292
转载 水平垂直居中常用方法
水平垂直居中转载:https://blog.youkuaiyun.com/qq_27576607/article/details/78697812?biz_id=102&utm_term
2020-09-11 00:14:40
105
转载 JavaScript(V8)输入输出操作指南
牛客网JavaScript(V8)输入输出操作指南转载:https://blog.youkuaiyun.com/weixin_42307756/article/details/82503025
2020-08-31 23:39:35
1037
原创 实现点击li就删除当前li(事件委托)
<ul class="list" id="ul"> <li>aa<a href="#">删除</a></li> <li>bb<a href="#">删除</a></li> <li>cc<a href="#">删除</a></li></ul><script src="jquery-3.
2020-08-27 14:42:50
1972
转载 VS code常用配置和插件
转载:https://github.com/varHarrie/varharrie.github.io/issues/10
2020-08-26 09:13:16
160
原创 基本数据类型放在栈中,复杂数据类型放在堆中
首先是堆比栈要大,但是栈比堆的运算速度要快。将复杂数据类型放在堆中的目的是为了不影响栈的效率,而是通过引用的方式去堆中查找。简单数据类型比较稳定,并且它只占据很小的内存,讲它放在空间小、运算速度快的栈中,能够提高效率。...
2020-08-26 09:08:31
1896
原创 SVG与canvas区别
1、什么是svgSVG 指可伸缩矢量图形 (Scalable Vector Graphics)SVG 用于定义用于网络的基于矢量的图形SVG 使用 XML 格式定义图形SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失SVG 是万维网联盟的标准2、SVG优势SVG 图像可通过文本编辑器来创建和修改SVG 图像可被搜索、索引、脚本化或压缩SVG 是可伸缩的SVG 图像可在任何的分辨率下被高质量地打印SVG 可在图像质量不下降的情况下被放大3、SVG 与 Canvas两者间的区
2020-08-25 13:55:53
284
转载 关于变量提升、函数表达式、构造函数表达值等的综合的一道问题
一道常被人轻视的前端JS面试题转载:https://www.cnblogs.com/xxcanghai/p/5189353.html
2020-08-24 16:51:44
73
原创 vue实现一个简单的自动补全
结构:<template> <div> <input v-model="searchKey" > <ul> <li v-for="(item,index) in completeData" :key="index"> {{ item }} </li> </ul> </div&
2020-08-24 15:10:52
1450
2
原创 vue实现一个简单的轮播图
HTML结构<template> <div> <!-- 图片主体区域 --> <div> <ul> <!-- v-show="index===num" 只显示当前需要显示的图片,其他的都隐藏--> <li v-for="(imgUrl,index) in bannerList" :key="index" s
2020-08-24 11:22:22
1491
转载 html+css+js实现简单的弹窗
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta htt..
2020-08-20 09:46:41
1734
1
原创 Promise的实现
const PENDING = 'pending'; const RESOLVED = 'resolved'; const REJECTED = 'rejected'; function Promise(executor) { const that = this // 三个属性 that.status = PENDING //Promise对象状态属性,初始状态为 pending that.data = un.
2020-08-19 11:11:31
147
转载 vue-element-admin登录流程
一、登录权限:1、登录的大致流程做后台项目区别于做其它的项目,权限验证与安全性是非常重要的,可以说是一个后台项目一开始就必须考虑和搭建的基础核心功能。我们所要做到的是:不同的权限对应着不同的路由,同时侧边栏也需根据不同的权限,异步生成。登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(将这个token存贮到cookie/sessionStorage中,保证刷新页面后能记住用户登录状态),前端会根据token再去拉取一个 user_info
2020-08-17 17:52:39
1602
原创 技术栈原理
VueRouter原理:https://juejin.im/post/6854573222231605256#heading-15Vuex原理:https://juejin.im/post/6855474001838342151#heading-4Promise原理:https://juejin.im/post/6856213486633304078axios原理:https://juejin.im/post/6856706569263677447webpack原理:https://juejin.i
2020-08-10 07:53:46
194
原创 ES6常用内容
一、ES6简介1、发布时间ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。2、ECMAScript 和 JavaScript 的关系ECMAScript 和 JavaScript 的关系是:前者是后者的规格,后者是前者的一种实现。二、let和const1、let命令ES6 新增了let命令,用来声明变量。它的用法类似
2020-08-07 16:17:36
448
1
原创 src与href的区别
1、srcsrc指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将指向的资源下载并应用到文档内,比如img图片、js脚本等,<script src=“main.js”> </script>;当浏览器解析该元素时,会暂停其他资源的下载和处理,直到该资源执行完毕。2、hrefhref指向网络资源所在位置,建立当前元素或文档之间的链接,如 <link href =“common.css”/>;浏览器在并行下载资源并且不会停止当前文档的处
2020-06-01 21:01:22
143
原创 求字符串/数组出现次数最多的字符/元素
求字符串/数组中出现次数最多的字符/元素,以及他们的出现次数,可以采取以下方法,下列方法中不仅可以求出次数最多的字符/元素,还可以得出各个字符/元素出现的次数:// 以下是求出字符串中各个字符出现的次数及次数最多的字符var str = "abcadeabg";var obj = {};for (i = 0; i < str.length; i++) { var chars = str.charAt(i); // 得到索引为 i 的字符 // 如果obj里面已经有这个属性了
2020-05-22 23:26:48
1208
原创 扩展运算符的一些运用
1、利用扩展运算符 求未知个数的数字和// (...args) 代表接受函数的 所有实参,他是一个数组形式var sum = (...args) => { let total = 0; // 在这里给 数组遍历 让它求和 args.forEach((item) => { total = total + item }); return total;}console.log(sum(20, 40)); // 20+40=60console.log(sum
2020-05-21 14:26:57
317
原创 Promise简介
1、promise是什么?(1) 关于promise① 抽象表达:promise是JS进行异步编程的新的解决方案。② 具体表达:promise是一个构造函数,promise对象用来封装一个异步操作并可以获取其结果。(2) promise的状态改变promise的初始状态(new Promise 的时候)为 pending,状态的改变只有以下两种:① pending 变为 resolved (成功)② pending 变为 rejected (失败)注:只有这两种状态的变化,一个promis
2020-05-12 23:26:55
299
原创 复杂数据类型深拷贝的方法
深拷贝与浅拷贝: 在复制过程中,如果B复制了A,当其中一个改变时,对方会跟着变化的是浅拷贝;对方不会跟着变化的是深拷贝。注意: 当采用赋值拷贝时,基本数据类型(String、Number、Boolean等)的拷贝是深拷贝,复杂数据类型(Object、Array等)的拷贝是浅拷贝。在有些时候,我们想对复杂数据类型进行深拷贝,我们可以采取以下几种方法实现复杂数据类型的深拷贝:1、采用递归 // 利用递归方法实现深拷贝 // 这里要实现 obj2 与 obj1 的深拷贝 var ob
2020-05-08 23:33:04
990
原创 ES6--改变this指向 call、apply、bind
1、call()的使用使用方法:要改变this指向的函数.call(this的新指向,参数1,参数2……)事例:function fun(x, y) { console.log(x + y); console.log(this);}fun(1, 2); // 输出 3 window 调用fun()函数的是window 故this指向windowvar obj = { ...
2020-05-01 21:40:36
615
原创 ES6--原型及原型链
1、构造函数和原型prototype(1)原型prototype:每个构造函数都有一个prototype属性,指向一个对象。prototype的本质也是一个JavaScript对象,称为原型对象,这个对象的所有属性和方法都会被构造函数所拥有。因此,可将共用的一些方法直接定义在prototype上,这样所有对象实例就可以共享这些方法;(2)作用:原型prototype的作用是共享方法、节约内存;...
2020-04-27 23:57:31
1119
原创 ES6---let、const与var
1、var:有变量提升,存在覆盖问题,允许重复声明以下是一个变量覆盖的例子:// 变量覆盖 var time = 'today'; function fun() { console.log(time); if (false) { var time = 'tomorrow'; /* var变量提升,覆盖了外层的 time = 'to...
2020-04-24 17:31:32
203
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人