抱歉,您的浏览器无法访问本站

本页面需要浏览器支持(启用)JavaScript


了解详情 >

现代前端的Web应用路由-为React打造一个迷你路由器

路由不仅仅只是网络的代名词,它更像是一种表达路径的概念。与网络中的路由相似,前端中的页面路由也是带领我们前往指定的地方。 现代前端的 Web 应用路由时代在变迁,过去,Web 应用的基本架构使用了一种不同于现代路由的方法。曾经的架构通常都是由后端生成的 HTML 模板来发送给浏览器。当我们单击一个标签导航到另一个页面时,浏览器会发送一个新的请求给服务器,然后服务器再将对应的页面渲染好发过来...

性能优化-useMemo and useCallback

性能优化一直是一个值得考虑的问题,但更值得考虑的是什么时候该优化。如果优化不得当,对于向 React 这类成熟的框架来说,即可能会过早优化。反而花了过多的时间来降低其性能。 React 的 useMemo 和 useCallback 这两个 hook 基本上就是为性能优化而准备的。既然有了优化的方案,剩下的就是什么时候该做优化。对其我目前的看法就是除非性能明显降低,否则不必太早考虑去进行优化...

JavaScript-事件

JavaScript 和 HTML 直接的交互是通过事件实现的。当文档或者浏览器发生交互时,使用侦听器(处理程序)来预定事件,以便事件发生时执行相应的代码。在传统软件工程中被称之为观察员模式。 事件最早是在 IE3 和 Netscape Navigator 2 中出现的。 事件流经常在一些文章中看到的事件冒泡或者捕获就是用于描述事件流的两种方式。在浏览器发展到 IE4 的时代时,人们开始考虑...

自建简易 FaaS 平台

近些年来,传统的 IaaS、PaaS 已经无法满足人们对资源调度的需求了。各大云厂商相继开始推出自家的 Serverless 服务。Serverless 顾名思义,它是“无服务器”服务器。不过并不是本质上的不需要服务器,而是面向开发者(客户)无需关心底层服务器资源的调度。只需要利用本身业务代码即可完成服务的运行。 Serverless 是近些年的一个发展趋势,它的发展离不开 FaaS 与 B...

体验至上的暗色模式

暗色模式(Dark Mode)是近些年来掀起的风潮,通常暗黑模式是一种文字为浅色、背景为深色的应用程序模式。这和近些年来手机等移动设备上更多的 OLED 屏幕也有一定关系,因为 OLED 的工作原理,大面积的深色背景可以使其功耗更低。 另外,暗色模式也并不是近些年来才出现的一种模式。早期的计算机显示器多数就是黑底绿字,据说是因为当时 CRT 的工作原理导致显式黑色背景更为方便。 但不管具体来...

Nodejs多进程

众所周知,JavaScript 是一门单线程的语言。但它的实现环境可以帮助我们创建多进程甚至是多线程,这样在遇到高压力的性能计算时,可以更好的利用多核 CPU 资源。 基本概念 调度:线程作为调度和分配的基本单位,进程作为拥有资源的基本单位; 并发性:不仅进程之间可以并发执行,同一个进程的多个线程之间也可并发执行; 拥有资源:进程是拥有资源的一个独立单位,线程不拥有系统资源,但可以访问隶属于...

webpack静态网站开发

webpack模块 loader 可以链式调用。链中的每个 loader 都将对资源进行转换。链会逆序执行。第一个 loader 将其结果(被转换后的资源)传递给下一个 loader,依此类推。最后,webpack 期望链中的最后的 loader 返回 JavaScript。 初始化环境yarn init yarn add webpack webpack-cli -D 配置文件配置文件中需...

Vue3!

早期学习 Vue3 API 的笔记。 setupsetup 方法在实例被创建(created)之前。 ref直接在 setup 中定义变量无法自动成为响应式,需要使用 ref 将其通过 proxy 代理为响应式变量。 const name = ref('xfy') 上述是xfy变为Proxy({value: 'xfy'})这样一个响应...

原生图片懒加载

图片懒加载是一个常见的应用,它旨在不影响用户体验的情况下提示首屏的加载速度。原理很简单,在当前可视视口(Viewport)外的图片等到进入了视口内再进行加载(按需加载)。 资源处理请求浏览器对于不同资源的下载请求有着不同的优先级。在基于 Chromium 的浏览器中,有着这样的优先级: 在默认情况下,那些在可视视口外的图片可能有着更高的加载优先级。而可视视口外的图片提前加载是没有必要的,这...

移动端触摸轮播图

迫害移动端继上次的经典轮播图的实现方案,这次配合了TouchEvent来实现了移动端的触摸轮播图。 这次原生的实现方式和 Vue 基本相同,由于需要实现触摸滑动,仅仅靠absolute定位和 Vue 的过渡动画是不够的。所以使用了经典的图片队列,然后克隆两张图片来调换队列。 封装组件这次把整个轮播图图都尝试封装成一个单独的组件,图片的队列和动画延时都由父组件传递 props 过来。 <...