窦晨的博客

用于收藏 Github 上的优秀项目，需要自取👇，欢迎分享与添加～ Git Gitalk📑 描述：一款基于 GitHub Issue 和 Preact 开发的评论插件，可用于博客评论系统搭建。👍 推荐指数：⭐️🔗 链接：https://github.com/gitalk/gitalk 前端 带你入门前端工程📑 描述：主要记录了作者在近年来，在前端工程师实践经验和学习心得方面的总结，适合对前端工程化不了解或了解得不多的 “菜鸟” 同学。👍 推荐指数：⭐️⭐️⭐️🔗 链接：https://github.com/woai3c/introduction-to-front-end-engineering CSS Animate.CSS📑 描述：一款 CSS 动画封装库，使用简单方便，安装依赖库后可以直接在 animation-name中定义需要的动画特效。👍 推荐指数：⭐️⭐️⭐️⭐️🔗 链接：https://github.com/animate-css/animate.css css-buttons📑 描述：实现了 100 种不同的 Web 按钮样式，包括动画效 ...

前言随着函数式组件的产生，React Hooks 给我们带来了很多便利和新功能。先前我在《React Hooks 入门》这篇文章中简单介绍了几种常用的 Hooks。今天，本篇文章将谈一谈 useCallback 和 useMemo 两个钩子函数。 useCallback首先我们先看一下官方文档中对 useCallback 的说明： Pass an inline callback and an array of dependencies. useCallback will return a memoized version of the callback that only changes if one of the dependencies has changed. 简单来说，它和 useEffect 的基本原理类似：有两个参数，第一个参数是 内联回调函数，第二个是 依赖项数组。它将返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时才会更新。 一句话总结：缓存函数，仅在依赖项改变的时候才会更新。 由此可知， useCallback 可以有利于我们判断历史和当前 ...

前言很多网页的整体布局呈现为 “两栏” 或者 “三栏”，比如下图中 echarts 的布局就是最典型的左右两栏： 此外，另一种常用布局就是 “左-中-右” 三栏布局，比如下图中 pytorch 的官方文档： 当然，还有很多网页都采用的这种布局方式，这里我也就不一一举例。回归到问题本质，那么该如何实现这种布局？又或者说有哪些方法可以满足我们的布局需求呢？ 因为两栏布局比较简单，故本文将主要围绕三栏布局，思想大同小异，读者也可以灵活变通，从而解决两栏布局的问题。 这里我把本文的核心问题再提出来详细描述一番，以免有读者没有完全理解，即：将网页分为左中右三栏布局，左右部分定宽，中间部分宽度自适应。 常用方法及原理基于我自己开发的经验并借鉴其他的参考资料，本文根据布局的方法分为四种主体类型，其中基于 float 布局的方式下还包括经典的圣杯布局和双飞翼布局。如下所示： 基于 absolute 定位 基于 float 布局 圣杯布局 双飞翼布局 基于 flex 布局 基于 grid 布局 首先我们先定义三个元素，即：left、main、right 三个部分。其 html 形式 ...

前言今天我们讲一个简单而又常用的问题：居中问题。 对于我们绝大多数人来说，对称是一种美，包括我们身边的各种事物，甚至说我们自己本身，都是对称的。既然说到对称，那我们也很容易引申出居中这一概念。 在前端设计中，居中也是一个很普遍的需求。当然，实现居中的方法也是层出不穷，只有你想不到，没有前端工程师做不到的哈哈哈。因此，本文章将总结一些常用的元素居中方法。 常用的元素居中方法根据自己的理解和日常的使用，我主要总结了 8 种居中方法，读者可以根据自己的需求自行选取。 absolute + 负 margin absolute + margin: auto absolute + calc absolute + transform text-align + vertical-align + line-height 基于 table 布局 基于 grid 布局 基于 flex 布局 首先我们先定义两个元素，即：父元素（容器） container 和 子元素 element。其 html 组织形式如下所示，后续也将不再重复赘述这一部分。 123<div class='conta ...

前言在实践过程中遇到一个需求：高度设置为 auto 的元素如何实现高度变化的过渡动画。 简单点来说，假设一个场景: 我们把鼠标 hover 一个元素，会弹出一个类似 tooltips 的文字进行说明，而我们希望这个 tooltips 是以一种下滑动画的形式展示出来的。 但是我们可能不知道这个 tooltips 元素所占的高度，比如一堆文字放进一个 div 中，这堆文字所占的高度可能就和 div 的宽度、文字大小有关。那么我们该如何实现这种高度扩展/收缩的过渡动画？ 我们脑子里第一时间可能会想到 CSS transition 可以实现，确实如此，我们这个需求还是基于 transition 来实现。但是当你阅读了 CSS 官方文档或者说自己写下下面这段代码并测试时 1transition: height 1s ease-in-out 0s; 你可能会发现， CSS 对于 height 设置为 auto 的元素，是不会触发 transition 过渡动画的。正如官方文档中写道： height ：yes, as a length, percentage or calc(); h ...

前言我在自己的仓库中已经简单聊过 Flex 布局，如有需要可以自取查看。由于这篇笔记只是简单地讲了讲参数和对应的设置，并没有系统地进行讲解，因此后续我也将会出一期关于 Flex 布局的教程，谈一谈自己的学习感悟和理解。 题归正传，本篇文章讲谈一谈另一种布局，即 Grid网格布局。Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。然而，它们也存在一些区别并适用于特定的应用场景。 Flex 布局是一维布局，我们只能在一条线上或者说一个维度上，排布我们的子元素，而 Grid 布局则是将容器划分成 “行“ 和 “列“ ，类似于矩阵、格网，是二维布局。举个例子，如下： 概述Grid 布局顾名思义，就是网格。提到网格，在我们生活中的应用场景就很多了，比如：菜单、用户属性表或一系列复杂的二维排布的内容。如果使用其他的布局，虽然也可以实现我们的需求，但是其过程可谓是十分复杂且繁琐的，并且可能存在 “适应性/灵活性不强” 的问题。然而，Grid 布局为我们提供了便捷，并且几乎可以用于所有的浏览器。 网格是由一系列单元格和分割线组成的，而单元格内容的定位，我们 ...

d35b0e3d6cb45af717acfefbff13335bd815c9cd69801a6bae5851507b9b57d3ca64e4975fd273360398696b1282bc401dfeb047fdb501ae9bb783e21f19a5bb04470245e6d5402bcc914a59c1fd91379726fc457b920b84fdb77c3260840871a39a6b8f6fdd35692ac2965e38262261a69defb02bc184f0dd000a419a87aad99431e5c01ad2af5dbdaa5b611b74a98139c310fec429739af0d8e7e946df4b25a9372d3d0a246364991eb6ca7a773cfdd7efc80f086d73f40f77f72e700d4b5fbed405d348d3e05ebeab75025d04f5cd3474badd3be3cb691c732e547631f610dc83554ace63075047d0c125b664e177b70a46d794fb1a765 ...

d35b0e3d6cb45af717acfefbff13335bd815c9cd69801a6bae5851507b9b57d3ca64e4975fd273360398696b1282bc40b7c9f65b3e326a68dc7d8c8638b6483cda626b217e9a98c31216bc6631c3ce81563bf471c354a8e1d8d2e85477bc87e7c963532a0b0c49c63889d6ece3a37875dab28d2ef71ff0702dcfae4fad79c5f627050dcce221a7756fffbb00546f1dca3167aa35116518a927b99083a405e89cfcc62a6d788e051e534d19fca1433cef6dadd1e86e830c1cb11c3bda5fb0243b8160880497147d55e84097c54607f5173bad1f6c009611e240c246fda5548108ab05004c2921e9a9a1ae6b5ff7cdcf2ae96293ed62fc11954 ...

d35b0e3d6cb45af717acfefbff13335bd815c9cd69801a6bae5851507b9b57d3ca64e4975fd273360398696b1282bc409abb85df078b2cc6e3726bada10eaf5229fe28e94548994a14bb21cd78e4c91b546f10455cbe75d7e3ffc08b7284ca1b4170da0aba82036167b55509d0b3ef809ec9756494bc695542457cae22246ce317b8424618746af2e84c31cf4d36e820cdc668ad59a6aaf39e41a920d71805cc78e553c2e584e2a4a6c44702b44a251beecf3a5f3f62dfaa7399103a888d032f9f672b11badbdc118178de325edc49f44a6f8b7372247e94168ee5609e14959bf0ca024969e35dbbee8bb3ae1502b6de5cd5da1b7b73af58b ...

前言EventEmitter 可以提供我们实现事件的发布和订阅。 Node.js 已经提供了封装好的 EventEmitter 供我们使用，通过 events 模块可以使用。 1const eventEmitter = require('events').EventEmitter; 然而，自己动手实现 Wheel （造轮子）虽然不能够做到已有库那般稳定、高性能，但是有利于我们去了解其内部机理。 下面我们自己实现了一个简易的EventEmitter。 准备工作这里我是通过 JavaScript 语言实现的，利用到了少量 ES6 标准中的新内置变量。因此，希望你对这俩有一些基础的了解和基本应用能力。 (这里我推荐阮一峰老师的教程) JavaScript ECMAScript 6 实现原理EventEmitter 的实现原理还是比较简单的，用一句话概括就是：基于事件名称存储对应的方法，并通过事件名称调用方法。 其实，但凡关于事件的订阅与发布，其最基本原理皆是如此，不过是实现方法的差异而已。 因为我们需要重新造轮子，所以我们根据上述原理，可以把实现流程概括如下： ...