All Posts

在 NextJs 中使用 Storybook

在nextjs项目中通过制作一个博客访问人次的小功能说明使用 Urql、Apollo-server4、Prisma 实现数据库到后端再到前端的类型安全的全流程

xState 和 RxJS 都是非常有趣的 JS 库，可以用来实现状态管理。xState 是有限状态机在 JS 中的实现，而 RxJS 是响应式编程在 JS 中的实现。本文介绍了 xState 的概念、使用方法以及延伸 API，并提供了在 React 中使用和有趣例子。同时也讲解了为什么要使用 RxJS 以及它的基本思想。虽然两者毫不相关，但也有跨界合作的地方，比如 xState 里可以调用 RxJS 的 Observables，把 RxJS 视为数据源。

IntersectionObserver API用于实现电商业务中的广告位曝光埋点。通过注册一个回调方法，每当期望被监视的元素进入或者退出另外一个元素的时候，该回调方法将会被执行，并且浏览器可以帮助我们优化和管理两个元素的交集变化。使用 IntersectionObserver API 监控页面广告位与视窗的位置，通过针对性的增加时间的统计来完成广告位曝光埋点。相比于传统的方案，使用 IntersectionObserver API 可以避免卡顿和回流等性能问题，更加轻量级且易于维护。

介绍了使用 Hexo + GitHub + Netlify + Cloudflare 搭建个人博客的全流程，并列举了选择这些工具的原因。作者从申请域名、配置 DNS 解析和 CDN 加速、安装 Hexo，到使用 GitHub 托管博客源码、使用 Netlify 自动化构建和部署、启用 HTTPS 安全协议等方面详细讲解了每一个步骤。同时，作者还分享了在实践过程中可能会遇到的一些问题以及对应的解决方法，例如域名备案、主题配置、CDN 设置等。通过阅读本文，读者可以掌握使用 Hexo 和 GitHub Pages 搭建个人博客的全过程，并且免费地享受到 CDN 加速和 HTTPS 安全协议带来的优势。

重新梳理 ES6+ 中的 this 机制，帮助读者更好地理解 JavaScript 中最令人困惑的机制之一。文章主要涵盖了箭头函数中的 this、类中的 this、bind()、call() 和 apply() 方法等内容。通过具体的例子和代码实现来说明不同情况下的 this 指向和用法。同时，作者也提到了一些需要注意的点，如在类中使用箭头函数时，this 指向的是定义时所在的对象，而不是运行时所在的对象。掌握这些知识可以让开发者更加熟练地使用 this，避免出现一些常见的问题，提高代码的可读性和可维护性。