- 博客(91)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 一直都在用的rgba与hex颜色系统你了解过吗？
rgb与rgbargb(255,255,255)rgb色彩模式是工业界的一种颜色标准，是通过对红®、绿(G)、蓝(B)三个颜色通道 的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是运用最广的颜色系统 之一。（摘自百度百科）rgba(255,255,255,0.3)rgba即在rgb的基础上新增最后一位代表透明度，范围为0 - 1，小数点后保留两位。hex#FFFFFF简单来说hex就是将rgb或r
2022-04-25 22:48:58
4281
原创 React hooks 优化指北
阅读此篇，让我们一步一步的通过useCallback,useMemo,useReducer等hooks来避免一些组件的重新渲染。
2022-03-26 22:30:23
1191
原创 如何优雅的手写a,b,c三兄弟
apply,bind,call实现思想：皆是通过给目标对象赋值一个临时属性来改变this指向。注意事项：- 使用globalThis代替window...
2022-01-23 17:49:05
587
原创 跨域与同源策略
跨域是浏览器的行为，限制了浏览器中资源对资源的访问，和http协议没有关系同源策略协议/主机/端口号都相同被视为同一源。同源策略限制了什么？cookie，session，localStorage,indexDB无法读取Dom对象不能获取XML，fetch不能发送如何解决跨域？CORS使用额外的http请求头来告诉浏览器，让运行在一个origin上的web应用准许被跨域访问。当发生CORS跨域请求时，浏览器会发出一个Options的预检(Preflight)请求，preflight请求
2022-01-21 20:28:04
2563
原创 聊一聊浏览器对html的渲染过程
大体来说，浏览器渲染过程为：1. 浏览器接收到一个html文档，渲染引擎会立即解析它，并将其html元素生成对应的DOM节点，组成一个”DOM树“。2. 浏览器解析来自CSS文件和html中内联的样式，然后根据这些样式信息生成css对象模型树(CSSOM tree),接着和上一步创建的DOM树合并为一个“渲染树“。3. 浏览器引擎根据渲染树计算出每个节点在其屏幕上应该出现的精确位置，并分配这组坐标，这样的过程称为“布局”，也称为“自动重排”。4. 浏览器遍历渲染树，调用每一个节点的pain
2022-01-15 21:24:58
1292
1
原创 我肝了两周，用react做了一个俄罗斯方块
在线畅玩单人畅玩版双人测试版介绍表面上看，这就是一款简单的俄罗斯方块小游戏，分为单人模式与双人对战模式(测试中),而单人模式目前又分为普通模式与狂暴模式。我重点说一下狂暴模式，在设置中开启狂暴模式后，当消行的时候就会播放30s-60s的bgm，同时你的方块也会随着bgm抖动起来，就像这样技术栈与收获前端未react，后端为nodejs。在开发中我尝试使用了function core的开发模式，以及使用jestjs,即测试驱动开发，由于有双人模式，自然避不开websocket,因此我也熟悉了
2021-12-18 18:16:38
1624
4
原创 js 一网打尽之类型判断
let bool = true;let num = 1;let str = 'abc';let und= undefined;let nul = null;let arr = [1,2,3,4];let obj = {name:'xiaoming',age:22};let fun = function(){console.log('hello')};let s1 = Symbol();typeof快速区分基本数据类型，但不能区分除funtion外的引用类型。返回类型为strin
2021-11-28 14:30:58
617
原创 我肝了两周，写了一个小说阅读app
起始这学期有一门《Android开发与实战》，期末作业是让自己动手做一个app，刚好我还是比较喜欢看小说的，所以就准备写小说阅读器。app介绍app名字叫做originBook，简单来说，它的功能就是把浏览器上的盗版小说去一下广告，加入了分页阅读，黑暗模式，字体调节等功能，以大多数人更舒服的方式去阅读。浏览器中阅读：originBook优化后：章节页:黑暗模式：下载该项目为开源项目github地址android下载地址由于我没有苹果手机，所以虽然reactNative是跨平
2021-11-05 22:04:35
2655
原创 typescript中HTMLElement 和 Element的区别
引言你可能会注意到在ts中，通过document.getElementById()返回HTMLElement类型，而document.querySelect()返回Element类型。区别那么两者区别是什么呢？Element 是一个通用性非常强的基类，所有 Document 对象下的对象都继承自它。这个接口描述了所有相同种类的元素所普遍具有的方法和属性。一些接口继承自 Element 并且增加了一些额外功能的接口描述了具体的行为。例如， HTMLElement 接口是所有 HTML 元素的基本接口
2021-11-03 17:41:31
6244
3
原创 你的代码河里吗？
为什么写这篇博客今天晚上本来应该和往常一样，刷两道leetcode题结束卷卷的一天，结果这一道简单字符串题让我破防了是哪个题让我痛苦面具反转单词顺序事情的经过我之前开启了leetcode的剑指offer专题，这个专题会每天解锁特定类型的2~3道算法题，而我一般白天写bug，晚上刷题。我今晚刷的第一道题就是上文的罪魁祸首，关于该题leetcode的标签是双指针，事实上在写该题之前我已经写了3天的双指针了，当时我觉得这道题简直是有手就行（事实证明我可能连脚都没有）于是我就开始看题，理思路，认真思
2021-10-30 22:45:17
3849
原创 js链式调用
声明式UI前两天看到鸿蒙之前的jsUI变成了ArkUI，而新的UI居然是声明式UI。下面是从鸿蒙文档里复制的一段代码，大家可以简单看一下@Entry@Componentstruct MyComponent { build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Text
2021-10-28 19:59:31
205
3
原创 js drag事件的最后一次clientX为0
如图所示，drag事件的最后一次输出（松开鼠标）会跳变为0；//使用dragover阻止document.addEventListener("dragover", function(event) { // prevent default to allow drop event.preventDefault();}, false);
2021-10-10 16:49:41
755
原创 简单实现节流
题目implement basic throttle()实现节流，题目要求的节流和我们平常的不一样，上面题目要求节流的同时保持最大频率调用目标函数。例子let currentTime = 0const run = (input) => { currentTime = 0 const calls = [] const func = (arg) => { calls.push(`${arg}@${currentTime}`) } const th.
2021-09-28 23:56:37
445
原创 数组扁平化
题目implement Array.prototype.flat()写一个函数实现Array.prototype.falt。例子const arr = [1, [2], [3, [4]]];flat(arr)// [1, 2, 3, [4]]flat(arr, 1)// [1, 2, 3, [4]]flat(arr, 2)// [1, 2, 3, 4]答案//递归function flat(arr,depth=1){ return depth ? ar.
2021-09-27 22:46:09
80
原创 细节到极致，如何与面试官battle柯里化
看完本篇，你将理解如何构建简单curry，支持占位符的curry，理解Function.prototype.length的规则，理解Function函数，理解bind的真正细节，一个完善到极致的curry函数！
2021-09-23 19:10:39
107
原创 用一个类简单实现js 浏览器history
原题：create a browser historyclass BrowserHistory { /** * @param {string} url * if url is set, it means new tab with url * otherwise, it is empty new tab */ constructor(url) { this.queue=[] //当前current位置 this.currentIndex=0 if(url !==
2021-09-22 14:09:14
101
转载 大佬的有赞面经
面经作者：Severu5链接：https://www.nowcoder.com/discuss/730896来源：牛客网 (有赞前端)一面 (8.28 13:00)做两道题一个数组，判断是否有下标为 i, j, k 的三个数字递增，且 i < j < k对象转换，a_k 的键转为 aK，简单来说就是实现深拷贝同时对键做一个替换。数据结构了解吗？有哪些可以保持存入和取出的顺序不变的结构？队列、栈、链表清楚吗？有什么表现差异和区别?(这题没太听懂意思，掰扯了好久)
2021-09-05 22:49:03
144
原创 js dom操作大全
最基础的，不再分析(下图最后一个不太搜索命名空间的？)document.querySelector()根据选择器查找单个元素参数： 包含一个或多个要匹配的选择器的 DOM字符串DOMString。 该字符串必须是有效的CSS选择器字符串；如果不是，则引发SYNTAX_ERR异常。(参数包含伪元素返回空)返回值: 表示文档中与指定的一组CSS选择器匹配的第一个元素,一个 HTMLElement对象。如果没有匹配到，则返回null。例子：获取类名为test下id为a的domlet dom=xxx
2021-09-04 23:18:43
189
原创 vue3 初识
setup()使用 setup 函数时，它将接收两个参数：props 无法解构2. contextref，toRefs/toReftoRefs()函数可以将reactive()创建出来的响应式对象，转换为普通对象，只不过这个对象上的每个属性节点，都是ref()类型的响应式数据toRefsconst state = reactive({ foo: 1, bar: 2})const stateAsRefs = toRefs(state)/*Type of stateAsR
2021-08-16 08:43:09
175
原创 Fetch
原生Fetchfetch是基于Promise设计的，fetch是原生的，与XML同一级别。fetch符合关注分离。 语法简介原生fetch缺点(原生fetch非常拉跨，不建议使用)1）fetch只对网络请求报错，对400，500都当做成功的请求，服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。2）fetch默认不会带cookie，需要添加配置项： fetch(url, {credentials: ‘include’
2021-08-08 16:31:22
252
2
原创 你真的理解 == 吗？
== 与 ===我们都知道两者区别在于，检查值是否相等，而=检查值和类型是否相等。更精确点就是==检查的是允许类型转换情况下的值的相等性，===检查不允许类型转换情况下的值的相等性。== 类型转换细节我总结了==中几点重要的特例，如果想看全部细节可以到 es5规范 11.9.3。对于x == y来说当x，y类型相等时，x == y 与 x === y没有区别。模糊了null和undefined,即 null == undefined 结果为true。当x为Boolean时，会将x转为Nu
2021-08-05 10:05:22
77
原创 scss calc与%冲突报错
问题下面代码报错。@for $i from 0 to 24 {.wly-col-#{$i} { width: calc(1 / 24 * #{$i} * 100)%;}.wly-col-offset-#{$i} { margin-left: calc(1 / 24 * #{$i} * 100)%;}.wly-col-pull-#{$i} { position: relative; right: calc(1 / 24 * #{$i} * 100)%;}.wl
2021-08-04 21:17:25
442
4
原创 typescript接口与继承 初认知
接口在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。基本使用//可选属性 可以对可能存在的属性进行预定义 interface SquareConfig { color?: string; width?: number; } let mySquare = createSquare({color: "black"}); //如果不使用可选属性会报错 缺少width//只读属性 一些对象属性只能在对象刚刚创建的时候修改其值。 interf
2021-08-03 21:58:50
237
原创 typescript基础类型与类型注释 初认知
基础类型://boolean 布尔 let isDone: boolean = false;//string 字符串 let name: string = "bob";//number 数字 let decLiteral: number = 6;//数组有两种方式可以定义数组。 //第一种，可以在元素类型后面接上 []，表示由此类型元素组成的一个数组： let list:number[] =[1,2,3]; let list:Array<number> = [1,2,3
2021-08-02 09:53:05
157
原创 eventLoop 宏任务与微任务与消息队列
先看一道题这个就涉及到JavaScript事件轮询中的宏任务和微任务。那么，你能说清楚到底宏任务和微任务是什么？是谁发起的？为什么微任务的执行要先于宏任务呢？如上图所示，其中MessageQueue也叫taskQueue,MicrotaskQueue也叫jobsQueue.定时器,xhr,各种dom事件（点击。。）等异步放到消息队列，promise等放到微任务里面。宏任务与微任务我们放到后面说现在我们来看开头那道题的执行过程可以看到执行先后顺序为 调用栈 > 微任务 > 消息
2021-06-17 16:09:45
182
原创 js 彻底搞懂sort方法
arrayObject.sort(sortby)；sortby为一个函数，内有两参数，该函数返回两参数的差。arr=[1,2,4,5,6]var sortby=function(a,b){ return a-b;}arr.sort(sortby)//sort内部采用O(n^2)的冒泡排序，当sortby的返回值大于0，交换位置。//冒泡排序//升序function bubbleSort(arr) { var i = arr.length, j; var tempEx
2021-06-16 22:19:50
232
原创 大二下第十二周
课堂学习与生活一不小心就好几周没写博客，课堂学习还是那样，挺无聊的。小组学习挺好的。算法这几周算法落下的有点多，5月的leetcode算法截图。挺拉的
2021-05-22 17:24:30
109
1
原创 js防抖节流
防抖我们经常在业务中判断当前用户名是否存在，如代码1所示，如果每次触发input的change事件都向后台请求一次接口，那就非常没有效率，因此我们可以判断用户输入结束后再发送数据。//代码1<input type="text" name="userName"> <script> document.querySelector('input').addEventListener('input',function(){ console.log('我向后台验证了一次用户名
2021-05-10 08:13:00
84
原创 大二第七周（...）
课堂学习与生活蓝桥杯成绩出来了，还不错，省二，由此可以看出来蓝桥杯到底有多水，明年高低拿个省一去北京逛一圈。课堂学习就是课多，这周的课是真的多，20多节，好家伙，就离谱小组学习学习人学习魂！！算法算法使我快乐，4月的leetcode算法截图，不愧是我。...
2021-05-01 22:22:10
91
原创 大二第六周（逐渐暴躁的一周）
课堂学习与生活由于运动会，这周就上两天课，之后就一直练算法，越练越自闭，最后几天直接就开始自暴自弃，上午考完蓝桥杯，感觉还行，陪跑，明年高低拿个省一。小组学习算法算法
2021-04-18 15:16:30
77
原创 大二下第五周（毫无波澜的一周）
课堂学习与生活主要的一点就是早读，好家伙，4天早读4天没去，就离谱，之前刚报四级的时候是多么意气风发，还立flag说要每天背单词，现在想想不愧是我，老鸽子王了。小组学习然后小组方面呢？这周一直在写算法，算法真香。我爱算法。算法算法，yyds！...
2021-04-11 11:05:51
62
原创 大二下第四周
课堂学习与生活这周开始实行收手机政策了，感觉还是不错的，手机没得了就能好好听课了，总体来说，课堂学习的效率还是提高的，还有就是单词，这周的单词才背了没几天，一不上早读，就没有动力起来背单词。还是挺难受的小组学习然后小组方面呢？这一周整体来说比较轻松愉悦，没有那么多的任务，就一直在学vue，感觉对vue的体会又更加的深刻了，还用了高德的api去实现了一下定位功能，发现还是挺简单的，没想象中那么难算法忽然发现算法挺想的，接下来要好好练了...
2021-04-04 09:48:01
66
原创 大二下第三周（非常nice的一周）
课堂学习与生活这周总体来说，课堂学习的效率还是很高的，不和上上周一样，天天在课堂上划水，而且我每天都在课堂上认真的听课，收获了许多新的知识，感觉听课是真的舒服，以后还要认真听课，哈哈哈，还有就是我报上了大学英语四级，我一定要开始认单词听听，力争取一次考过，然后明年再考过六级，就非常的完美，还有就是我们今天去八里沟了（忽略走了三万步），过的就非常开心，哈哈哈，未来，yyds！小组学习然后小组方面呢？这一周整体来说比较轻松愉悦，没有那么多的任务，就一直在学vue，感觉对vue的体会又更加的深刻了，然后还有
2021-03-29 16:30:49
109
3
原创 js 你不知道的apply和call（方法借用）
我们都知道apply,call,和bind方法都是改变this指向的，但是他们之间的区别以及核心原理你真的懂了吗//代码1var obj={ name:"li", f: function(age,fm){ console.log(this.name+" "+age+" "+fm); }}var robber={name:"wang"} obj.f(18,"北京") //li 18 北京obj.f.call(robber,88,"新乡") //wa
2021-03-21 22:25:25
274
原创 大二下第二周（紧张刺激的一周）
小组学习发现这两周每周都过的挺快节奏的，上周是改寒假的考试系统，而这周是忙着讲课，这周基本上80%的时间都放在讲课上，但是随着越来越深入的了解，去查资料，不得不说js的水是真的深，还浑。网上千奇百怪的博客都有，光是箭头函数的指向就让我迷瞪一天，这也启发了我以后学js高级的时候尽量去看MDN上面的或者是小红书上面的，还是比较专业的。javascript，yyds!课堂学习与生活课堂学习的话就是我终于发现，认真听一节课真的很简单，自从我因为不想玩手机太无聊而不得不去听课后，我才发现，原来认真听课是那么的爽
2021-03-21 17:22:40
105
6
原创 js new运算符做了什么？
以下为我的浅显理解（仅供参考）在 JavaScript 中，用 new 关键字来调用的函数，称为构造函数。构造函数首字母一般大写。//代码1function Student(name,age){ this.name=name; this.age=age;}var stu1=new Student('小王',"18"); console.log(stu1.name) //小王如代码1所示，Student（）即为自定义的构造函数，其中使用new 关键字后会进行如下的操作：1，
2021-03-16 21:29:08
189
原创 大二下开学第一周
每周总结课堂学习和生活今天是开学第1周的周日，这周总体来说我的学习欲望还是异常的高涨，嗯，算是弥补了我假期没有学习的一个多月时间吧，然后发现这学期的课很多啊，你天天都快满课，就很烦，作业也多，有56门都有作业。小组学习然后下周前端就轮到我讲课了，现在也没开始准备，有点慌，然后这周买了个腾讯云服务器，终于部署了第一个动态网站。算法嗯，然后，还有就是算法方面，我已经一星期没有碰了啊，我在家好的三天还能写一道，现在一来学校，7天了一道还没写啊，蓝桥杯再过两个星期就开始了，如果再不写算法，我的300块就
2021-03-14 21:36:33
115
1
原创 放假第n+1周
学习不得不说，时间过得是真的块，马上就开学了，本来这个星期我应该已经到学校了，但是我们上周还说要延迟开学，就是延迟一个星期，所以说现在距离开学还有一个星期整的时间，然后下星期就开始上网课，还是逃脱不了网课的魔抓，然后学习方面就是感觉这个假期过的也不尽人意，就是很多东西假前安排的计划大都没完成，对自己的执行能力也挺失望的算法算法也是，每天写算法的心一点都不高涨了。有点难受总结今天不学习，明天变垃圾！！...
2021-02-28 14:36:12
89
原创 放假第n周
学习不得不说，时间过得是真的块，年已经差不多过去了，可是我却感觉才过去了几天，很难受，不知不觉假期就剩一个星期了，想想我好像还啥都没做，唉，不能再这样下去了，要认真的投入到学习的状态中去，抓住假期的尾巴，把立过的flag全部都写完，奥里给，肝就完了。算法算法也是，每天写算法的心一点都不高涨了。有点难受总结今天不学习，明天变垃圾！！奥里给...
2021-02-20 22:34:26
91
原创 放假第三周
学习不得不说，时间过得是真的块，已经过去3周了，可是我却感觉才过去了几天，很难受，不知不觉假期就剩一个月了，想想我好像还啥都没做，唉，不能再这样下去了，要认真的投入到学习的状态中去算法算法也是，每天写算法的心一点都不高涨了。有点难受总结今天不学习，明天变垃圾！！奥里给...
2021-01-30 23:44:04
96
2
好看的select下拉框（带搜索功能）javaScript，jquery两种方式实现
2020-11-15
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人