做一个有温度和有干货的技术分享作者 —— Qborfy

背景

前阵子搞了一下如何在Vue项目中加载远程的组件，文章为【低代码平台加载远端组件解决方案(1)——defineAsyncComponent】，遗留一些问题，就是如何在项目中实际应用，因为所有的问题都来源自实际项目，所以本文会继续把这个坑填完。

解决思路

涉及到项目实战了，解决方案是需要通过wepack或vite构建工具将资源进行打包，然后通过解析文件，进行模拟封装成可以加载的 js函数即可，下面我们以 vite为构建工具进行编译组件文件async/Async.vue

做一个有温度和有干货的技术分享作者 —— Qborfy

背景

最近在做低代码平台项目中遇到一个很容易遇到的问题，具体描述如下：

• 问题描述：低代码平台依赖的组件库，如果将一个组件库进行融合打包到平台项目中的就会导致平台在渲染页面的时候需要加载完整的组件库，从而导致页面加载了一些大部分页面不需要的组件文件
• 希望方案：页面使用到哪些组件就去动态加载组件
• 解决方案：
  • Vue的异步加载组件，Suspense和defineAsyncComponent
  • React的异步加载组件， Suspense和import()

由于低代码项目本身使用的 Vue3 框架，而且 Vue和 React的异步加载组件方案其实差异不多，所以下面以 Vue为主进行介绍。

参考资料

• k8s学习资料 https://kuboard.cn/learning/
• k8s管理界面 https://github.com/eip-work/kuboard-press

做一个有温度和有干货的技术分享作者 —— Qborfy

思考的框架

我们绝大部分行为都是建立在我们所理解的知识领域基础之上，所以我们大部分决策都是都是存在盲区，为了做出更好的决策，本书讲述了不同的思维模型，用来让你的大脑在做出决策之前可以通过不同的思维角度去思考。

做一个有温度和有干货的技术分享作者 —— Qborfy

做一个有温度和有干货的技术分享作者 —— Qborfy

前言

循环轮播图，基本上大家用的都是现有组件，如果要让你自己设计实现一个，其实最主要的两个点：循环算法和滚动动画

手写难度：⭐️⭐️

涉及知识点：

• 循环播放的思路
• CSS 动画，transtion和 transform
• Web Component 自定义组件

做一个有温度和有干货的技术分享作者 —— Qborfy

背景

最近在开发一个简单的个人记录网站，技术栈是使用 Vite + Vue3，由于使用的单台服务器，有时候服务器会被限制带宽，所以平时都会比较访问比较慢。所以想实现一个离线应用，而 PWA 应用则是目前最佳方案。

本文涉及知识点如下：

• PWA 的概念
• Service Worker使用
• 用构建工具搭建 PWA 应用

背景

其实从今年开始运营这个博客，我一直想增加一些新的交互功能，如：评论，之前一直有些问题没搞定，现在终于通过 Google 搜索解决问题了， 其实也算是每天学习一些新东西。

解决问题：给 Hexo 博客新增 Github评论功能

为什么选择 Github 呢？是因为 Github 对于偏向开发人员基本上属于一个必注册网站，而我博客的内容又偏向于技术，所以才会采取这个。

前言

虚拟滚动在前端中是一个很常见的解决方案，由于浏览器对于内存的限制，当页面需要展示大量 DOM 节点（如：列表数据超过 10 万）的时候，如果完整渲染整个 DOM 树，当页面数据需要更新重新渲染的时候就会出现滚动卡顿，这个时候就需要虚拟滚动去模拟浏览器原生滚动事件，从而避免这个卡顿情况。

手写难度：⭐️⭐️⭐️

涉及知识点：

• 滚动监听事件 wheel/move
• 事件节流
• 滚动偏移量 offset
• 按需渲染计算方案

前言

前端路由，大家都使用过，那么有没有想过它是怎么实现的吗？如：Vue-Router 或者 React-Router。或许有个大概印象，但是真正要自己去实现还是没有什么思路，那么这篇文章将完整的实现思路去实现一次。

手写难度：⭐️⭐️⭐️

涉及知识点：

• history api 和监听事件
• onhashchange 监听事件
• Web Component 自定义组件