-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
17 lines (17 loc) · 20.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html><html lang="zh-Hans"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta name="description" content="前端小白的个人总结记录"><meta name="keywords" content="React,前端,移动端,H5,JavaScript,React Hook,TypeScript"><meta name="author" content="ZK8080"><meta name="copyright" content="ZK8080"><title>ZKAT</title><link rel="shortcut icon" href="/melody-favicon.ico"><link rel="stylesheet" href="/css/index.css?version=1.9.0"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css?version=1.9.0"><meta name="format-detection" content="telephone=no"><meta http-equiv="x-dns-prefetch-control" content="on"><link rel="dns-prefetch" href="https://cdn.jsdelivr.net"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><script src="https://v1.hitokoto.cn/?encode=js&charset=utf-8&select=.footer_custom_text" defer></script><script>var GLOBAL_CONFIG = {
root: '/',
algolia: undefined,
localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容:${query}"}},
copy: {
success: '复制成功',
error: '复制错误',
noSupport: '浏览器不支持'
},
hexoVersion: '5.4.0'
} </script><meta name="generator" content="Hexo 5.4.0"></head><body><canvas class="fireworks"></canvas><i class="fa fa-arrow-right" id="toggle-sidebar" aria-hidden="true"></i><div id="sidebar" data-display="false"><div class="author-info"><div class="author-info__avatar text-center"><img src="/img/avatar.png"></div><div class="author-info__name text-center">ZK8080</div><div class="author-info__description text-center">前端小白的个人总结记录</div><div class="follow-button"><a target="_blank" rel="noopener" href="https://github.com/zk8080">Follow Me</a></div><hr><div class="author-info-articles"><a class="author-info-articles__archives article-meta" href="/archives"><span class="pull-left">文章</span><span class="pull-right">36</span></a><a class="author-info-articles__tags article-meta" href="/tags"><span class="pull-left">标签</span><span class="pull-right">15</span></a><a class="author-info-articles__categories article-meta" href="/categories"><span class="pull-left">分类</span><span class="pull-right">2</span></a></div></div></div><nav id="nav" style="background-image: url(https://raw.githubusercontent.com/zk8080/blog-picture/master/img/8FdEwlxP3oU.jpg)"><div id="page-header"><span class="pull-left"> <a id="site-name" href="/">ZKAT</a></span><i class="fa fa-bars toggle-menu pull-right" aria-hidden="true"></i><span class="pull-right menus"> <a class="site-page" href="/">主页</a><a class="site-page" href="/archives">归档</a><a class="site-page" href="/tags">标签</a><a class="site-page" href="/categories">分类</a></span><span class="pull-right"><a class="site-page social-icon search"><i class="fa fa-search"></i><span> 搜索</span></a></span></div><div id="site-info"><div id="site-title">ZKAT</div><div id="site-sub-title"></div><div id="site-social-icons"><a class="social-icon" href="https://github.com/zk8080" target="_blank" rel="noreferrer noopener nofollow"><i class="fa-github fa"></i></a></div></div></nav><div id="content-outer"><div class="layout" id="content-inner"><div class="recent-post-item article-container"><a class="article-title" href="/2022/03/06/%E5%9C%A8React%E9%A1%B9%E7%9B%AE%E4%B8%AD%E4%BD%BF%E7%94%A8TypeScript%E5%AE%9E%E8%B7%B5%E6%8C%87%E5%8D%97/">在React项目中使用TypeScript实践指南</a><time class="post-meta__date"><i class="fa fa-calendar" aria-hidden="true"></i> 2022-03-06</time><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/React/">React</a><span class="article-meta__link">-</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/React-Hook/">React Hook</a><span class="article-meta__link">-</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/TypeScript/">TypeScript</a></span><div class="content"><p>本文主要记录我如何在React项目中优雅的使用TypeScript，来提高开发效率及项目的健壮性。</p></div><a class="more" href="/2022/03/06/%E5%9C%A8React%E9%A1%B9%E7%9B%AE%E4%B8%AD%E4%BD%BF%E7%94%A8TypeScript%E5%AE%9E%E8%B7%B5%E6%8C%87%E5%8D%97/#more">阅读更多</a><hr></div><div class="recent-post-item article-container"><a class="article-title" href="/2022/01/06/%E4%BD%BF%E7%94%A8IntersectionObserver%E5%AE%9E%E7%8E%B0%E7%AE%80%E6%98%93%E7%9A%84%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD%E7%BB%84%E4%BB%B6/">使用IntersectionObserver实现简易的图片懒加载组件</a><time class="post-meta__date"><i class="fa fa-calendar" aria-hidden="true"></i> 2022-01-06</time><span class="article-meta"><span class="article-meta__separator">|</span><i class="fa fa-inbox article-meta__icon" aria-hidden="true"></i><a class="article-meta__categories" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/React/">React</a><span class="article-meta__link">-</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/JavaScript/">JavaScript</a><span class="article-meta__link">-</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/TypeScript/">TypeScript</a></span><div class="content"><p>最近在项目中准备做一下首屏加载时间优化，发现大量的图片资源加载，这些静态资源阻塞了页面onload。打算对这些图片进行懒加载处理，图片懒加载成熟的库有很多，今天来自己实现一个简单的懒加载图片组件，加深自己的理解，以及对<code>IntersectionObserver</code>API的使用。</p></div><a class="more" href="/2022/01/06/%E4%BD%BF%E7%94%A8IntersectionObserver%E5%AE%9E%E7%8E%B0%E7%AE%80%E6%98%93%E7%9A%84%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD%E7%BB%84%E4%BB%B6/#more">阅读更多</a><hr></div><div class="recent-post-item article-container"><a class="article-title" href="/2021/11/03/%E5%9C%A8TypeScript%E4%B8%AD%E4%BD%BF%E7%94%A8useReducer/">在TypeScript中使用useReducer</a><time class="post-meta__date"><i class="fa fa-calendar" aria-hidden="true"></i> 2021-11-03</time><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/React-Hook/">React Hook</a><span class="article-meta__link">-</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/TypeScript/">TypeScript</a></span><div class="content"><p>在项目中已经使用了很久的TypeScript和Hooks，记录一下如何在TypeScript中友好的使用<code>useReducer</code>。</p></div><a class="more" href="/2021/11/03/%E5%9C%A8TypeScript%E4%B8%AD%E4%BD%BF%E7%94%A8useReducer/#more">阅读更多</a><hr></div><div class="recent-post-item article-container"><a class="article-title" href="/2021/10/18/iOS%E5%86%85%E5%B5%8CH5%E9%A1%B5%E9%9D%A2%EF%BC%8C%E8%BF%94%E5%9B%9E%E4%B8%8A%E4%B8%80%E9%A1%B5%E5%87%BA%E7%8E%B0%E7%99%BD%E5%B1%8F%E7%9A%84%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/">iOS内嵌H5页面，返回上一页出现白屏的解决方案</a><time class="post-meta__date"><i class="fa fa-calendar" aria-hidden="true"></i> 2021-10-18</time><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/H5/">H5</a></span><div class="content">问题场景描述在iOS内嵌的H5页面中，从带滚动的A页面底部点击->跳转B页面后返回->A页面出现白屏，触摸或滚动后页面恢复。
解决方案修改history.scrollRestoration属性使用history.back返回上一页的时候，浏览器会记录页面的滚动位置，而在iOS上面，滚动后 ...</div><a class="more" href="/2021/10/18/iOS%E5%86%85%E5%B5%8CH5%E9%A1%B5%E9%9D%A2%EF%BC%8C%E8%BF%94%E5%9B%9E%E4%B8%8A%E4%B8%80%E9%A1%B5%E5%87%BA%E7%8E%B0%E7%99%BD%E5%B1%8F%E7%9A%84%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/#more" style="margin-top: 14px">阅读更多</a><hr></div><div class="recent-post-item article-container"><a class="article-title" href="/2021/09/15/%E6%AF%8F%E5%A4%A9%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E8%87%AA%E5%AE%9A%E4%B9%89Hook%E4%B9%8BuseAsync/">每天实现一个自定义Hook之useAsync</a><time class="post-meta__date"><i class="fa fa-calendar" aria-hidden="true"></i> 2021-09-15</time><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/React/">React</a><span class="article-meta__link">-</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/JavaScript/">JavaScript</a><span class="article-meta__link">-</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/React-Hook/">React Hook</a><span class="article-meta__link">-</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/TypeScript/">TypeScript</a></span><div class="content"><p>今天来实现一个简单的用来处理<code>async</code>函数或者<code>Promise</code>函数的自定义Hook。<code>useAsync</code>只会单纯的处理异步操作，返回请求的状态和数据，如果想要使用功能齐全和成熟的的异步请求自定义Hook，可以使用<a target="_blank" rel="noopener" href="https://swr.vercel.app/zh-CN">useSWR</a>或者<a target="_blank" rel="noopener" href="https://ahooks.js.org/zh-CN/hooks/async">useRequest</a>。接下来来实现我们的<code>useAsync</code>，直接上代码：</p></div><a class="more" href="/2021/09/15/%E6%AF%8F%E5%A4%A9%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E8%87%AA%E5%AE%9A%E4%B9%89Hook%E4%B9%8BuseAsync/#more">阅读更多</a><hr></div><div class="recent-post-item article-container"><a class="article-title" href="/2021/09/13/%E6%AF%8F%E5%A4%A9%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E8%87%AA%E5%AE%9A%E4%B9%89Hook%E4%B9%8BuseWindowSize/">每天实现一个自定义Hook之useWindowSize</a><time class="post-meta__date"><i class="fa fa-calendar" aria-hidden="true"></i> 2021-09-13</time><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/React/">React</a><span class="article-meta__link">-</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/JavaScript/">JavaScript</a><span class="article-meta__link">-</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/React-Hook/">React Hook</a><span class="article-meta__link">-</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/TypeScript/">TypeScript</a></span><div class="content"><p>今天来实现一个获取当前window窗口的宽高的自定义Hook。逻辑简单，直接上代码：</p></div><a class="more" href="/2021/09/13/%E6%AF%8F%E5%A4%A9%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E8%87%AA%E5%AE%9A%E4%B9%89Hook%E4%B9%8BuseWindowSize/#more">阅读更多</a><hr></div><div class="recent-post-item article-container"><a class="article-title" href="/2021/09/12/%E6%AF%8F%E5%A4%A9%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E8%87%AA%E5%AE%9A%E4%B9%89Hook%E4%B9%8BuseOnScreen/">每天实现一个自定义Hook之useOnScreen</a><time class="post-meta__date"><i class="fa fa-calendar" aria-hidden="true"></i> 2021-09-12</time><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/React/">React</a><span class="article-meta__link">-</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/JavaScript/">JavaScript</a><span class="article-meta__link">-</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/React-Hook/">React Hook</a><span class="article-meta__link">-</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/TypeScript/">TypeScript</a></span><div class="content"><p>今天来实现一个可以检测元素何时可见的自定义Hook，该Hook实现逻辑依赖了<code>IntersectionObserver</code>API，对其不了解的可以去<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API">MDN</a>上查看详细介绍，主要是提供了一种异步检测目标元素与祖先元素或 viewport相交情况变化的方法，后续打算整理一篇详细的使用情况。这里先实现我们的自定义Hook，直接上代码：</p></div><a class="more" href="/2021/09/12/%E6%AF%8F%E5%A4%A9%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E8%87%AA%E5%AE%9A%E4%B9%89Hook%E4%B9%8BuseOnScreen/#more">阅读更多</a><hr></div><div class="recent-post-item article-container"><a class="article-title" href="/2021/09/12/%E6%AF%8F%E5%A4%A9%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E8%87%AA%E5%AE%9A%E4%B9%89Hook%E4%B9%8BuseTitle/">每天实现一个自定义Hook之useTitle</a><time class="post-meta__date"><i class="fa fa-calendar" aria-hidden="true"></i> 2021-09-12</time><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/React/">React</a><span class="article-meta__link">-</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/JavaScript/">JavaScript</a><span class="article-meta__link">-</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/React-Hook/">React Hook</a><span class="article-meta__link">-</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/TypeScript/">TypeScript</a></span><div class="content"><p>今天来实现一个设置页面标题的自定义Hook，逻辑简单。直接上代码：</p></div><a class="more" href="/2021/09/12/%E6%AF%8F%E5%A4%A9%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E8%87%AA%E5%AE%9A%E4%B9%89Hook%E4%B9%8BuseTitle/#more">阅读更多</a><hr></div><div class="recent-post-item article-container"><a class="article-title" href="/2021/09/10/%E6%AF%8F%E5%A4%A9%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E8%87%AA%E5%AE%9A%E4%B9%89Hook%E4%B9%8BuseUpdateEffect/">每天实现一个自定义Hook之useUpdateEffect</a><time class="post-meta__date"><i class="fa fa-calendar" aria-hidden="true"></i> 2021-09-10</time><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/React/">React</a><span class="article-meta__link">-</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/JavaScript/">JavaScript</a><span class="article-meta__link">-</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/React-Hook/">React Hook</a><span class="article-meta__link">-</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/TypeScript/">TypeScript</a></span><div class="content"><p>今天来实现一个只在依赖更新时执行的<code>useEffect</code>，逻辑简单。直接上代码：</p></div><a class="more" href="/2021/09/10/%E6%AF%8F%E5%A4%A9%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E8%87%AA%E5%AE%9A%E4%B9%89Hook%E4%B9%8BuseUpdateEffect/#more">阅读更多</a><hr></div><div class="recent-post-item article-container"><a class="article-title" href="/2021/09/09/%E6%AF%8F%E5%A4%A9%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E8%87%AA%E5%AE%9A%E4%B9%89Hook%E4%B9%8BuseInterval/">每天实现一个自定义Hook之useInterval</a><time class="post-meta__date"><i class="fa fa-calendar" aria-hidden="true"></i> 2021-09-09</time><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/React/">React</a><span class="article-meta__link">-</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/JavaScript/">JavaScript</a><span class="article-meta__link">-</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/React-Hook/">React Hook</a><span class="article-meta__link">-</span><i class="fa fa-tag article-meta__icon" aria-hidden="true"></i><a class="article-meta__tags" href="/tags/TypeScript/">TypeScript</a></span><div class="content"><p>今天来实现一个可以处理<code>setInterval</code>的自定义Hook。直接上代码：</p></div><a class="more" href="/2021/09/09/%E6%AF%8F%E5%A4%A9%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E8%87%AA%E5%AE%9A%E4%B9%89Hook%E4%B9%8BuseInterval/#more">阅读更多</a><hr></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><span class="space">…</span><a class="page-number" href="/page/4/">4</a><a class="extend next" rel="next" href="/page/2/"><i class="fa fa-chevron-right"></i></a></div></nav></div></div><footer class="footer-bg" style="background-image: url(https://raw.githubusercontent.com/zk8080/blog-picture/master/img/8FdEwlxP3oU.jpg)"><div class="layout" id="footer"><div class="copyright">©2018 - 2022 By ZK8080</div><div class="framework-info"><span>驱动 - </span><a target="_blank" rel="noopener" href="http://hexo.io"><span>Hexo</span></a><span class="footer-separator">|</span><span>主题 - </span><a target="_blank" rel="noopener" href="https://github.com/Molunerfinn/hexo-theme-melody"><span>Melody</span></a></div><div class="footer_custom_text">hitokoto</div><div class="busuanzi"><script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><span id="busuanzi_container_site_uv"><i class="fa fa-user"></i><span id="busuanzi_value_site_uv"></span><span></span></span><span class="footer-separator">|</span><span id="busuanzi_container_site_pv"><i class="fa fa-eye"></i><span id="busuanzi_value_site_pv"></span><span></span></span></div></div></footer><i class="fa fa-arrow-up" id="go-up" aria-hidden="true"></i><script src="https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js"></script><script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@latest/velocity.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-ui-pack@latest/velocity.ui.min.js"></script><script src="/js/utils.js?version=1.9.0"></script><script src="/js/fancybox.js?version=1.9.0"></script><script src="/js/sidebar.js?version=1.9.0"></script><script src="/js/copy.js?version=1.9.0"></script><script src="/js/fireworks.js?version=1.9.0"></script><script src="/js/transition.js?version=1.9.0"></script><script src="/js/scroll.js?version=1.9.0"></script><script src="/js/head.js?version=1.9.0"></script><script src="/js/search/local-search.js"></script><script>if(/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {
$('#nav').addClass('is-mobile')
$('footer').addClass('is-mobile')
$('#top-container').addClass('is-mobile')
}</script><div class="search-dialog" id="local-search"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章"></div></div></div><hr><div id="local-search-results"><div id="local-hits"></div><div id="local-stats"><div class="local-search-stats__hr" id="hr"><span>由</span> <a target="_blank" rel="noopener" href="https://github.com/wzpan/hexo-generator-search" style="color:#49B1F5;">hexo-generator-search</a>
<span>提供支持</span></div></div></div><span class="search-close-button"><i class="fa fa-times"></i></span></div><div class="search-mask"></div></body></html>