自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

分享前端知识,记录前端进阶

最慢的步伐不是跬步,而是徘徊;最快的脚步不是冲刺,而是坚持

  • 博客(69)
  • 收藏
  • 关注

原创 absolute和relative元素层级问题

是否脱离文档流和层级无绝对关系relative元素也有z-index,和absolute的层级要看谁z-index大。

2023-09-09 18:15:42 315

原创 zustand实践与源码阅读

zustand是一个轻量、快速、可扩展的状态管理库。目前在社区非常流行,原理也非常简单,快来参考学习!

2023-09-09 17:41:37 364

原创 解决安卓不能识别border 0.5px问题

width height border-radius border 要按照两倍设置。问题:css边框,设置0.5px,安卓不显示。解决:添加伪元素,设置边框1px,然后缩放。

2023-04-26 15:03:02 371 1

原创 js异步数据写剪切板失败—爬坑clipboard.js

阅读本文你将了解以下内容,js中ajax数据返回写剪切板失效原理,如何实现异步数据写剪切板

2023-03-19 10:45:46 643

原创 React中events的踩坑指南

本文介绍react项目中如何创建events来进行跨组件事件触发重点讲解自定义参数传递,和如何拿到最新的state值🌟。

2023-03-14 19:55:56 470

原创 如何实现无侵入式数据埋点

使用AOP思想构造的高阶装饰函数还可以统计函数执行时间、动态修改参数等功能。这种模式在日常开发中很有用,可以避免逻辑紧耦合,以无侵入的方式加入埋点,保证项目的主功能不受影响。

2023-03-12 09:12:13 421

原创 Canvas入门-01

通过这篇文章,你可以了解到以下内容:Canvas标签基本属性。如何使用Canvas画矩形、圆形、线条、曲线、笑脸😊

2023-03-01 20:12:30 404

原创 React设计原理—1框架原理

react本身是构建UI的库,将其称为框架是约定俗称的说法,其实不是框架框架f就是一个函数,自变量state是当前数据,因变量是宿主环境的视图● state: 当前数据● f:框架内部运行机制○ 根据自变量的变化计算出UI的变化○ 根据UI变化执行宿主环境的API● UI:宿主环境的视图state数据:自变量f函数:是逻辑UI:因变量y=f(x) 自变量x的变化,可能会导致依赖x的因变量y的变化当前组件的自变量或者因变量借助于UI传递给子组件,作为其自变量子组件自身的自变量称为stat

2023-02-10 21:06:02 848

原创 react中useReduer和useEffect

相信很多人对于变成中reduce、reducer命名都存在困惑,为了更好理解useRedecuer,我们不妨先来说说reduce。

2023-01-31 21:04:15 478

原创 js实现图片预加载(含源码)

对于一些首屏的必要图片,比如背景图,在页面加载的生命周期的早期阶段就开始获取,在浏览器的主渲染机制介入前就进行预加载。网上讲图片与加载的实现方法很多,按照实现方式可以分为CSS,js和ajax三类。提前发送网络请求,先拿到资源。等到真正渲染到元素时,再发送请求,直接。一些画册展示网站,会在用户登录界面把下一屏的图片都加载了。,这样更快,节省资源加载时用户的等待时间。的js预加载方式,并介绍使用场景。💡在react或者rax中使用。,有必要进行预先加载。

2023-01-01 22:21:17 961

原创 Promise高级用法,干掉所有回调函数

需求:2s后执行函数fn1,之后再过3s执行函数fn2上面👆那种流程式的写法虽然可是实现功能,但是存在回调嵌套问题,无论是书写还是阅读都极其不便,有没有更优雅的方式呢?有。

2022-12-11 22:58:45 149

原创 不想用js频繁操纵样式?不如试试

还在为js频繁操纵样式而苦恼吗,试试styleSheet吧,可以轻松实现元素样式增添

2022-12-07 09:48:04 206

原创 前端如何优雅使用缓存中的数据(有源码)

在开发前端需求时,有时需要在本地缓存记录一些数据状态,再次打开页面时,需要首先查询缓存中的数据,如果有就用缓存中的数据当作初始值,如果对应数据有更新,也要更新缓存

2022-12-06 20:13:03 484

原创 手把手教你构建一个前端路由

路由是一组映射关系,本质上来说是location.href和UI的映射关系。

2022-11-28 23:56:37 389

原创 import(变量)报错,找不到地址

在js中想要根据不同条件,动态import不同的包。尝试给import函数传入变量,发现报错找不到变量对应的包。本文会简短讲解该问题背后的原因,以及如何正确的引入包。

2022-11-23 18:24:48 1071 1

原创 react中Context以及useContext的使用

Why:提出context的初衷When:context的使用场合How:如何使用context

2022-11-17 20:13:25 773

原创 乘风破浪React—01React初体验

React起源于facebook公司工程师开发时的一个bug,三个消息提示图标右上角的数字显示实时未读消息的数目,过多的操作容易产生问题。工程师很轻易的排查并解决的bug,但是他们不满足于这个小问题的解决,开始思考出现这种错误背后的原因...

2022-06-19 10:42:01 177

原创 深入浅出JS—25小JSON,大用途

JSON是JavaScript Object Notation的缩写,翻译为JavaScript对象符号。和JavaScript不同,JSON不是一种编程语言,而是存储数据的一种格式,被广泛用于前后端数据传递、项目配置文件中JSON1. JSON数据类型2. JSON类型与JavaScript类型转换3 JSON.stringify方法4 JSON.parse方法1. JSON数据类型.json结尾的文件顶层可以存储三大类的数据基本类型字符串、数字、布尔类型、null(不能存undefine.

2022-05-30 15:01:07 100

原创 深入浅出JS—24谈谈前端模块化

早期JS中用不到模块化,JS多用来表单验证,没必要放到多个文件中来写;后来JS需求变得复杂:ajax前后端分离、SPA、前端路由和Node等,使得对模块化的需求愈加强烈。为此社区中产生了AMD、CMD、CommonJS等模块化规范,随着官方ES6中ES Module的提出,社区规范可以落幕了什么是模块化将程序划分为一个个模块,在模块内部可以编写属于自己作用域的代码,不会影响其他模块模块可以将自己希望暴露的东西暴露给别的模块使用,也可以导入其他模块暴露的变量、函数、对象等一个独立的js文件就.

2022-05-26 11:37:36 204

原创 深入浅出JS—23错误处理方案

介绍Error类,采用throw关键字主动抛出错误,采用try-catch主动捕获错误

2022-05-20 16:49:14 507

原创 深入浅出JS—22事件循环及面试题

介绍浏览器和Node两种环境下的JS事件循环,包括宏任务、微任务的划分,以及优先级;列举常见面试题,对深入理解事件循环机理和通过面试都很有帮助

2022-05-19 17:08:17 856

原创 深入浅出JS—21 异步代码处理方案之async-await

在开发中,我们通常会遇到需要多个串联异步请求的方案,即要依靠第一个异步请求结果来发起下个异步请求,这时如果采用Promise会形成回调地狱,不利于代码的管理,所以采用async和await关键字来解决异步代码处理方案一个异步请求:Promise多个串联异步请求:Promise(可能会用到Promise.all/race等进行结果处理)多个串联异步请求:async-await(本质上是Promise+生成器的语法糖)async和await是包装好的语法糖、但我们不至于用,还是要一步一步进行推.

2022-05-18 16:17:29 984

原创 深入浅出JS—20 生成器控制函数执行

为了给函数具有暂停、中断等功能,ES6中新增了生成器函数和生成器Generator来控制函数执行。生成器是一种特殊的迭代器,同样可以通过调用next方法得到函数执行中返回值,同时可以中途给函数传递参数

2022-05-18 11:02:58 272

原创 深入浅出JS-19 手把手写个迭代器

迭代器迭代器是一个特殊的对象,可以帮助我们遍历另一个数据结构(数组 链表 映射表等1. 基本结构JS中迭代器是一个具体的对象,这个对象有一个next函数:函数无参数或者有一个参数,返回一个拥有以下两个属性的对象done(boolean):如果迭代器可以产生序列中的下一个值,则为 false;如果迭代器已将序列迭代完毕,则为 true。value(任意类型):迭代器返回的值const iterator = { next() { reutrn { done: false, value:'任

2022-05-17 19:26:21 308

原创 深入浅出JS—18 手把手实现一个Promise类

Promise类的实现是高级面试中常考的题目,由于Promise包含的方法比较多,一般写到Promise1.0或者2.0版本已经能够满足面试要求了,不过全面深入理解Promise对于工作中Promise的使用也非常有帮助Promise1.0版本⭐实现constrcutor函数,then函数Promise是一个类,要创建对象就要调用new关键字,传入的参数为一个函数executorexecutor函数有两个入参,为两个回调函数resolve,reject,它们已经在Promise类内部实现好.

2022-05-14 19:24:34 414

原创 深入浅出JS—17 Promise产生背景与使用方法

介绍了Promise类产生的背景与使用方法,包括对象方法和类方法

2022-05-14 14:48:43 201

原创 深入浅出JS—16 Vue2和Vue3的响应式的实现

本文详细介绍了响应式原理,手把手实现Vue中的响应式1 什么是响应式响应式可以理解为:数据发生改变时,用到该数据的代码块自动重新执行简而言之,就是A变,依赖A(用到A的值)的函数也跟着变。那么就需要依次考虑一下问题:如何监听到A的值的改变了:Proxy代理set捕获器可以监听值改变监听到之后,重新执行用到A相关的函数:如何知道数据和函数的依赖关系每个A都对应一个响应数组,里面存用到它的函数怎么知道函数用到A:响应式函数需要额外包裹包裹时执行函数2 代码设计cons.

2022-05-11 19:11:40 365

原创 深入浅出JS—15 ES6中Proxy及Reflect的使用

在一些前端框架中,常常需要监听数据变化,页面进行响应。为了监听对象的变化,需要对对象的操作进行捕获。本文着重介绍ES6中Proxy代理对象的使用,以及涉及到的映射对象Reflect使用

2022-05-11 11:19:20 789

原创 深入浅出JS—14 ES6+必会知识点盘点

新数组方法includes,flat,flatmap,对象方法Object.entries()和Object.fromEntries(),以及空值合并运算符??

2022-05-07 09:48:54 284

原创 深入浅出JS—13 Set和Map应用场景

介绍Map和Set的构造、属性以及方法、WeakMap在Vue3响应式实现中的应用

2022-05-05 22:03:19 769

原创 深入浅出JS—12对象的Symbol属性

对象属性key可以分为字符串类型和Symbol类型两种,本文介绍了Symbol类型对象属性的声明和修改。同时也介绍了不同属性的遍历方法。

2022-05-04 13:13:33 592

原创 深入浅出JS—ES6中提升效率的小技巧

ES6重要技巧:对象和数组解构赋值、函数默认参数与剩余参数、let和const作用域以及用法

2022-05-04 11:38:02 695

原创 深入浅出JS—11 ES6中类class和extends的使用

ES6中引入class语法糖来定义类,采用extends关键字来实现类的继承。相比于ES5中构造函数的方式在书写的简便性上有了质的提升。但是万变不离其宗,本文带你解密语法糖背后的实现原理,看完你会对class和extends有更深入的理解和认识

2022-04-28 11:55:38 4124

原创 深入浅出JS—10 构造函数的继承

在面向对象的语言中,类的继承最重要的特征之一。本文通过讨论JS中原型链继承法、借用构造函数继承法和寄生组合式继承法的优缺点,来逐步推导出类继承最为成熟的方案

2022-04-26 18:50:33 1172

原创 深入浅出JS—09 对象原型、函数原型及其关系

JavaScript中每个对象都有一个特殊的内置原型属性 [[prototype]],指向另外一个对象。每个函数除了隐式原型外,还有一个显式原型prototype,当函数作为构造函数调用来创建实例对象时,实例对象的原型会被赋值为函数的显式原型

2022-04-26 11:27:37 1303

原创 深入浅出JS—08 构造函数new的用法

JavaScript中构造函数是批量生产对象的利器。首先要声明,构造函数本身也是一个普通的函数,只不过以new操作符来调用时,该普通函数被称为构造函数

2022-04-25 19:25:25 453

原创 深入浅出JS—07 面向对象之Object.defineProperty()

学好对象对于JS非常重要,我们可以很轻易的对对象中的属性进行增删改查,但是如果要对某个属性进行适当“限制”,或者劫取属性的get的set操作,那么就需要用到Object.defineProperty()方法了

2022-04-22 18:05:14 1235

原创 深入浅出JS—06 纯函数、函数柯里化、组合函数

函数式编程是一种编程范式,它不是JavaScript中特有的,只能说JavaScript遵循函数式编程范式。 本文主要讲解函数式编程中:纯函数、函数柯里化以及组合函数的概念和用法

2022-04-21 20:14:04 747

原创 深入浅出JS—05 浅实现个call、apply、bind函数

在JavaScript语法中,call,apply和bind可以为函数显式绑定this。代码底层是用C++实现的,但是我们可以用JS代码写一个自己的call,apply和bind函数,实现相同功能

2022-04-21 10:43:15 592

原创 深入浅出JS—04 this指向判断

普通函数和箭头函数中this指向的区别,以及如何快速判断this指向,含日常高频实用代码this解析

2022-04-19 20:53:21 506

空空如也

空空如也

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

TA关注的人

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