![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
文章平均质量分 80
清风_1998
这个作者很懒,什么都没留下…
展开
-
浅谈react-fiber
浅谈React Fiber一、出现的缘由在页面元素很多,且需要频繁刷新的场景下,React 15 会出现掉帧的现象。请看以下例子:其根本原因,是大量的同步计算任务阻塞了浏览器的 UI 渲染。默认情况下,JS 运算、页面布局和页面绘制都是运行在浏览器的主线程当中,他们之间是互斥的关系。如果 JS 运算持续占用主线程,页面就没法得到及时的更新。当我们调用setState更新页面的时候,React 会遍历应用的所有节点,计算出差异,然后再更新 UI。整个过程是一气呵成,不能被打断的。如果页面元素很多,原创 2021-06-24 23:17:13 · 484 阅读 · 2 评论 -
html + js实现马赛克画板
前段时间面试"文远知行"无人驾驶汽车公司,在面试前做了一个小项目。在此做个记录。一、题目使用html + js写一个马赛克画板:1. 页面加载时,要求用户输入两个整数,对应长和宽,例如100, 2002. 页面显示100*200个格子,要求占满整个窗口,不能有滚动条。3. 当窗口大小变化时,依然要满足上述条件4. 鼠标左键点击任意一个格子时,填入一个随机颜色,即#000000-#FFFFFF中的一种5. 鼠标右键点击此格子时,擦除颜色6. 敲击键盘s键时,生成一张图片(可以是bmp或原创 2021-03-01 12:56:09 · 1087 阅读 · 2 评论 -
前端手写汇总
1. 手写防抖与节流// 时间戳实现的节流函数function throttle (cb, waitTime) { let previous = 0; return function (...args) { let now = new Date(); let context = this; if (now - previous > waitTime) { previous = now;原创 2020-12-26 15:54:10 · 279 阅读 · 3 评论 -
前端复盘笔记——原型链
没有原型的对象也是存在的 let hd = Object.create(null, { name: { value: 111 } });对象方法和原型方法的使用优先级。即使给_proto_给原型上添加相同方法。依然会先优先使用自己自身的方法。引入prototye注意:prototype是函数才有的属性,而__proto__是每个对象都有的属性function User () { };User.prototype.show = function () {..原创 2020-12-16 20:00:43 · 174 阅读 · 0 评论 -
40分钟教你手写符合promise/A+规范的promise
我们都知道实现异步有四种方法:回调、promise、async await、generator和co。而我们这篇文章主要讲promise的实现,不涉及另外三个方法。然后在编码过程中也会严格遵守promise/A+规范。注意:最终的代码可能与文章中代码略微不同,请以最后的源代码为主。一、promise的基本实现首先,我们首先在promise.js中实现promise的以下四个状态。解决(fulfill):指一个 promise 成功时进行的一系列操作,如状态的改变、回调的执行。虽然规范中用 fulfi原创 2020-11-21 19:56:50 · 614 阅读 · 0 评论 -
js寻找文件父目录路径
题目在一组文件路径集合中,找出那些存在子路径的集合并返回。说明:1.每个路径只由 / 和 小写字母结合,且不会出现多个 / 重叠的情况。2.以 / 开头,不以 / 结尾,而且不会出现单个的 /,都会组合字母。3.输出结果需要与原输入顺序一致例1:输入:'/a,/a/b,/a/c,/b/c,/b/c/d,/b/cf'输出:'/a,/b/c'解释:因为有 /a 及 /a/b,所以 /a 是文件夹。 因为有 /b/c 及 /b/c/d,所以 /b/c 是文件夹。/b 不存在于输入集合原创 2020-10-30 15:08:19 · 2646 阅读 · 0 评论 -
使用正则断言捕获html标签和国际化翻译函数的文本内容
一、背景最近在写国际化翻译的代码,其中有一个必须要做的事,是要提取出国际化翻译函数里的内容。一种是在html标签里写的国际化翻译:<lang :number="20013624">粤ICP备{number}号</lang>;另一种是在js代码里写的国际化翻译:_('{0} 一个记录日常生活的博客', 'Xlink Blog');二、实现提取js国际化翻译函数的文本内容let context = "_('{0} 一个记录日常生活的博客1', 'Xlink Blog') 分割符原创 2020-10-11 14:34:19 · 223 阅读 · 0 评论 -
ECharts自定义仪表盘
实现效果源代码html代码<div class="lui_seal_platform_col_4_3"> <!--3.盖章异常预警仪表盘--> <div class="lui_hr_platform_block_echarts_item"> <div id="seal_warning_gauge"></div>...原创 2019-12-10 12:10:33 · 3394 阅读 · 0 评论 -
正则表达式编程练习题(js版本)
使用jest测试工具进行测试,详细教程请见使用Jest测试JavaScript下面是源代码文件:chars_exercise.js/*****1.给一个连字符串例如:get-element-by-id转化成驼峰形式******/export default (str)=>{ var reg = /-\w/g; return str.replace(reg,function($0...原创 2019-11-12 13:02:03 · 1085 阅读 · 0 评论 -
JavaScript设计模式与开发实践(网课学习)
Js设计模式与开发实践面向对象5大设计原则23种设计模式面向对象继承,封装和多态js实现继承。(react中有应用)作用:继承可以将公共方法抽离出来,提高复用率,减少冗余 class Person{ constructor(name,age) { this.name = name; this.age = age; } getPerson...原创 2020-04-26 16:20:45 · 473 阅读 · 0 评论 -
ES2020-ES2015学习笔记
说明自 2015 年发布 ES6 以来,JavaScript 一直在快速发展,每次迭代中都会出现大量新功能。 JavaScript 语言规范的新版本每年更新一次,新语言功能建议的定稿比以往更快。此文章主要记录了ES语法的新特性。内容包括ES2020-ES2016的语法,每个语法都会有相应的demo(demo主要参考其他博客),demo在最新版本的谷歌浏览器的控制台可以直接运行。ES2020...原创 2020-04-18 13:09:01 · 940 阅读 · 0 评论