自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(23)
  • 收藏
  • 关注

原创 实现一个无限滚动的弹幕库

分五步走,确定弹幕的初始位置、确定所有弹幕的位置、让弹幕动起来、让弹幕停止、让弹幕重新开始

2024-04-15 13:58:42 841

原创 使用 qiankun 搭建微前端应用

qiankun 是一个基于 single-spa 的微前端实现库,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。具体更多内容请参考qiankun官网主应用是一个进程服务,子应用的容器,比如有个id=‘container’ 的 div。微应用的都会挂载到这个div 上。类似 spa 的 id=‘root’ 的dom。一个微应用就是一单独的一个项目,有自己的node_modules等。能自己单独运行。当主应用根据路由匹配到微应用时。微应用就会挂载到 id=‘container’ 的 div。

2024-03-23 15:56:20 960

原创 React + 发布订阅 ===> Modal弹窗

要造个轮子之前,我们需要先分析步骤,而后才开始动手写代码,实现具体细节。

2024-03-19 16:46:58 349

原创 electron 使用ipcRenderer,ipcMain 实现进程之间的通信

通过ipcApi 这个类 就 代替了 preload.js 作为中转绑定的效果。

2024-02-04 16:15:42 1066 1

原创 Promise 日常开发技巧

页面代码 BaseModal.show 返回的是个Promise , resolve 时,await beforeUpload() 就会响应到当前状态。总结:promise 基于事件循环的延迟 和 等待,还有很多妙用的地方。需要在具体工作中练习实践。

2024-01-11 17:38:20 383 2

原创 immer.js 原理 - 使用 Proxy 实现不可变数据

不可变数据,就是值的数据无法被修改,改动数据的时候会创建一个新值。说白了就是数据的克隆,克隆的方式有很多种。可以参考该文章循环克隆说到不可变数据,就得说起函数式编程。immer.js 就是 react 实现不可变数据的一种方式不可变数据是函数式编程的安全帽,在js 中 如果函数传入的参数是复杂数据类型,没有经过克隆等手段,改动参数就可能 会产生副作用。

2023-11-27 17:17:57 199 1

原创 微信 小程序 js 错误监控

线上错误一直是一个敏感且严重的问题,所以我们在前端错误监控方面要做好做全。今天将介绍微信小程序自己提供的日志和api 来完成错误的捕获。

2023-10-31 16:56:22 271 1

原创 手写一个删除console的loader(ast)

console是我们开发过程中最常用的调试方式。但是在生产环境,console基本是个无用的代码。甚至过多的console还会导致一些性能问题。今天我们就来讨论一下怎样删除无用的console。

2023-10-26 15:16:54 59 1

原创 js 对象克隆的另一种姿势,循环

在框架横行的年代,对象克隆表现的尤为重要。react 提出“不可变数据”的概念,实际也是对象克隆。在函数式编程领域,不可变数据 就是函数式编程的基础。言归正传我们看看常用的对象克隆方式有哪些通过序列化和返序列化实现拷贝;细节使用参考JSON 序列化和反序列化你真的会了吗?递归实现对象克隆项目里面常用的方式就是这两种,或者使用第三方的库lodash 等。以上实现方式多多少少都会有些问题。比如递归最大的问题就是爆栈:函数声明到销毁是一个进栈出栈的过程,对象层级过深就会出现栈内存用完的问题。

2023-10-24 14:16:26 54 1

原创 从里到外看透Promise

本篇文章将从零手写一个Promise,实现Promise的then , catch 实例方法;和all,allSettled,等静态方法。如有疑问或其他问题欢迎留言指教。

2023-09-20 22:19:23 49 3

原创 发布订阅的实现

【代码】发布订阅的实现。

2023-09-06 22:59:53 67 1

原创 JSON 序列化和反序列化你真的会了吗?

当对象里面存在toJSON 方法时,JSON.stringify 会调用toJSON。根据toJSON的返回值序列化为json字符串。2、带reviver参数,为JSON.parse的第二个参数(可选)2、第二个参数(replacer, [])的用法。3、第三个参数 space 美化输出格式。3、通过第二个参数实现属性过滤。

2023-08-14 11:37:23 69 1

原创 vue nuxt 服务器渲染和缓存

vue nuxt爱情之----使用asyncData你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:全新的界面设计 ,将会带来全新的写作体验;在创作中心设置你喜爱的代码高亮样式,Markdown 将代码片显示选择的高亮样式 进

2021-10-05 18:13:43 835

原创 js数组去重

这里写自定义目录标题es6以前:es6新增 new Set()数组去重在js操作中是非常常见的。很多时候对接后台时,后台返回的数据中就有重复的数据,这时我们前端会把这些数据给重新过滤,在渲染到页面。es6以前: var arr = [1,2,3,5,4,5,6,2,3,2,1]; //要操作的数据 var arr2 = []; //定义一个新数组 for(var i = 0; i < arr.length; i++) { if(arr2.indexOf(arr[i]) == -1

2020-05-22 09:21:13 109

原创 节流和防抖

网站性能优化我们在执行鼠标移动事件时,触发事件的频率非常的快,这样的执行方式会让我们的网页出现卡顿的现象。用得比较多的地方是当我们快抢或发送Ajax请求时,如果没有优化懂一点技术的人就会使用恶意脚本对后台提交数据。节流:在同一时间内,只能触发一次函数html<body> <div id="text">0</div> <butto...

2019-12-27 17:31:36 99

原创 网页是怎样绘制的

DOM树的构建  网页在绘制页面时首先解析页面中的所有标签(若有加载资源的标签会异步执行),根据深度优先的原则构建一个树形结构——dom树(domTree)。CSS树的构建   当dom树构建完成以后,加载css文件,解析css代码。构建出另一个树形结构——css树(cssTree)。渲染树  当页面的dom树和css树都绘制完成以后,总合两棵树。生成一棵新的树——渲染树(randerT...

2019-12-23 12:36:11 315

原创 es6声明的变量去了哪儿?

let ,const声明的全局变量去挂载到了哪儿?在es6以前,我们声明变量使用var,当我们使用var声明一个全局变量以后,变量会挂载到window对象上面(顶级作用域)。可以通过window来直接访问。es6新增了let和const。当我们使用es6方法声明全局变量时,它也会把变量挂载到顶级作用域,但不是window。因为到es6,顶级作用域和window被分成了两个不同的部分。 3....

2019-12-18 15:17:44 126

原创 程序员中的大咖

ACM世界冠军陆靖acm(国际大学生程序设计大赛)  现就职阿里云,为人十分低调,公司内号称“人肉逻辑机”,他做事不轻易动手,深思熟虑后开干,一气呵成,鲜有编译错误。遇到搞不定的代码找他时,他就看代码,不调试,一遍一遍看代码,然后指出某行代码有错误。我们都觉得他看代码的时候大脑其实就是多核CPU,在一次又一次的运行代码。某次代码遇到bug,良久无策和另外一个同事打电话问他,他在电话里说你们检查...

2019-12-14 21:07:41 359

原创 TCP三次握手和四次挥手

什么是TCP我们经常看到的都是tcp/ip协议:是的它们一直都是成对出现的(传输控制协议/网际协议),是在网络的使用中的最基本的通信协议。TCP/IP传输协议对互联网中各部分进行通信的标准和方法进行了规定。并且,TCP/IP传输协议是保证网络数据信息及时、完整传输的两个重要的协议。什么是三次握手聊完tcp我们来聊一聊三次握手:我们用三个关系来模拟一下,小编在高中的时候喜欢一个女生,但又因为自...

2019-12-10 19:23:53 164

原创 javascript闭包的理解

– 在解释闭包前我们先来理解理解执行期上下文和作用域链一、执行期上下文概念:执行上下文就是当前 JavaScript 代码被解析和执行时所在环境的抽象概念, JavaScript 中运行任何的代码都是在执行上下文中运行。在全局中会生成一个全局的执行期上下文,(Global Object) GO在每一个局部函数中都会生成一个局部的执行期上下文,AO (Activation Object)。...

2019-12-07 10:53:02 57

原创 css基本知识

css(层叠样式表)选择器的分类id选择器(#id)class选择器(.class)分组选择器(.class,.class)类型选择器(标签名)包含选择器(.class .class)在选择器前面加一个限制的选择器css的链接方式行内样式(在标签中添加style属性)内部样式(在html页面中用style标签)外部样式(在html页面使用link标签链接)link rel...

2019-11-18 19:12:43 92

原创 HTML基本知识

SEO用于网站的性能优化标签标签 == 标签名+属性属性的作用:解释,限制,说明属性的分类:公有属性,私有属性,自定义属性;标签使用的嵌套规则行类标签不能包裹块级标签P标签不能包裹块级标签a标签不能包裹a标签hx 类标签不能包裹hx 标签dl、dt不能包裹dlul、ol、dl是固定的使用格式img标签的src属性图片的路径绝对路径:包括一个完整的路径相对...

2019-09-02 16:40:45 110

原创 css选择器的权重问题

选择器权重的排行:div &lt; class &lt; id &lt; javascript标签选择器(div)和类选择器(.)进行比较;**css代码**&lt;style type="text/css"&gt; /*类选择器*/ .wrapperClass{ background-color: green; } /*标签选择器*/ div{ back...

2019-03-05 14:23:05 328

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除