【手写组件库之日历组件教程第二篇】基于React实现无限滚动的日历详细教程,附在线DEMO与源码
最常见的日历大部分都是滚动去加载更多的月份,而不是让用户手动点击按钮切换日历月份。滚动加载的交互方式对于用户而言是更加丝滑和舒适的,没有明显的操作割裂感。那么现在需要做一个这样的无限滚动的日历,前端开发者应该如何去思考和代码实现呢?下面我会详细的介绍实现思路和步骤。在线演示DEMOhttps://calendar.levenx.com/#/scroll-calendar实现步骤渲染单个月日历如何对
前端 · 阅读 2327 · 2023年8月24日 22:32

CSS 动画效果知识点汇总
CSS动画效果包括3个属性:transform,transition,animationTransfrom:变形Transition:过渡Animation:动画一、变形transformtransform属性使一个dom进行各种位置转化方法备注translate平移scale缩放skew倾斜rotate旋转translate平移translate(x,y)translate3d(x,y,z)tr
前端 · 阅读 3774 · 2022年6月18日 12:04

HTTP 缓存原理与实践
科学正确的使用HTTP缓存,会让我的应用体验上升一次台阶,并有效的节约服务器资源。了解Http缓存机制与原理,并使用在自己的应用中。下文内容提供详细参考。一、HTTP缓存相关请求头Cache-ControlExpiresEtagLast-ModifiedIf-None-MatchIf-Modified-Sign二、强缓存第一次请求资源服务器ResponseHeader返回Cache-cont
前端 · 阅读 1926 · 2022年6月18日 12:13

通俗理解this指向问题以及实现call、apply、bind
电话面试的时候,面试官让我口述对this的理解,以及如何修改this的指向。本来是很常见也相对比较简单的问题,但是在口述如何手写call方法的时候,却回答的磕巴,感觉还是没有真正的理解本质,借这篇文章好好理一下思路在JavaScript中,this是一个特殊的关键字,用于指代当前执行上下文中的对象。它的指向问题是前端开发中经常遇到的一个难点。同时,[JavaScript]()中提供了call、
前端 · 阅读 3692 · 2022年6月18日 12:24

React Hooks 的 useContext 使用和实践
在React中,状态管理一直是一个非常重要的话题,React的HookAPI自从16.8版本起就为函数组件提供了状态管理和副作用等能力。其中useContext是一个非常强大的Hook,它可以让你在组件树中直接共享状态,而无需手动地传递props。什么是Context?在深入useContext之前,我们需要理解什么是Context。在React应用中,数据是通过props从上至下(从父到子)传递
前端 · 阅读 4616 · 2024年3月4日 14:12

【手写组件库之日历组件教程第一篇】基于React实现日历组件详细教程
日历组件是常见的日期时间相关的组件,围绕日历组件设计师做出过各种尝试,展示的形式也是五花八门。但是对于前端开发者来讲,主要我们能够掌握核心思路,不管多么奇葩的设计我们都能够把它做出来。本文将详细分析如何渲染一个简单的日历组件。在线演示DEMOhttps://calendar.levenx.com/#/simple-calendar实现步骤计算每个月中具体包含的日期因为日历需要把当前月的每一天都展
前端 · 阅读 4676 · 2023年8月24日 22:06

iframe页面通信 - iframe 页面如何传递数据
当我们的Web页面需要复用现有网站的页面时,我们通常会考虑代码层面的抽离引用,但是对于一些过于复杂的页面,通过iframe嵌套现有的网站页面也是一种不错的方式。虽然对于用户而言,看到的页面其实是一个整体,但是本质上是两个甚至多个页面的组装,那么页面跟页面之间的交互就避免不了相互通信。iframe 页面之间的通信主要是通过监听页面的全局 `message`事件,然后其他页面通过 `postMessa
前端 · 阅读 2159 · 2023年12月5日 09:51

基于Nestjs实现node发送邮件
背景效果落地方案依赖安装npminstall@nestjs-modules/mailer初始化module//app.module.ts@Module({imports:[MailerModule.forRoot({transport:{host:'smtp.exmail.qq.com',port:465,ignoreTLS:false,secure:true,auth:{user:'bot@fm
前端 · 阅读 4810 · 2023年3月29日 13:20

TailwindCSS 如何画一条0.5px的线
在移动端项目,一般为了让线条看起来更细、更锐利,此时使用0.5px的线条是非常合适的。那么如何使用TailwindCSS画一条0.5px的线条呢?在实现这个需求的时候,首先去TailwindCSS官网查了一下border有没有对应的内置工具类,发现内置的线条最细的是1px;所以我们需要自定义配置TailwindCSS的space属性。下面将详细说明如何配置。两种配置实现方式一基于配置spaci
前端 · 阅读 5006 · 2023年12月18日 23:24

Node 通过 http 协议上传文件到服务器
前言:web端上传图片、文件等流化数据,一般使用form表单方式,或者通过Ajax方式上传时就使用FormData来承载流化数据。具体可以参考AJAX图片上传功能实现(点击,拖拽,粘贴)Koa服务端同时也存在需要使用Node操作方式上传文件到http服务器上,下文详细记载。一、requestnode端添加request依赖库npminstallrequest文件上传操作constpath=requ
服务端 · 阅读 4484 · 2022年6月18日 12:14

