前言此低代码编辑器 demo，实现用意是让用户可以通过拖拉拽的形式，自行配置页面展示。 再做一下区分，由于业务性，不涉及到生成结构性代码生成，而是生成描述形式的 JSON，交由负责展示的项目或者模块翻译表达。 产品需求确认我列出来的这些都需要和产品确认，如果有的话，没有产品，我们在开发前也需要明确： 二级页面、滚动页拖拽、悬浮重叠组件、组件内交互、参数量级、校验。 明确我们要做的大致内容，以及面临的挑战，这样在开发中才不会迷失方向。 接下来就是调研工作，低代码产品，不是一个新东西，很多公司都做过，我们可以取取经。 这里我一笔带过了~ 技术路线/技术实现实现一个 demo，效果为左侧拖拽组件，中间预览，右侧编辑 form。 左侧拖拽至右侧左侧主要是组件的展示预览区域，一般会简要告诉用户该组件是做什么的，用户可以通过点击或拖拽添加至中间预览区编辑。其中涉及相对困难的点在于： 左侧拖拽至右侧，实现方案： 基于原生 drag 实现，没有找到合适的第三方支持 由于左侧本身应该不支持拖拽排序，而只是允许拖拽至右侧，并且组件并不会消失,这与多拖拽组件设计之初相违背，使用原生则会简单可拓展一些。 ...

技术栈文章中涉及的技术栈大致包含以下： React18：UI 框架 TypeScript：类型语言 Vite4：构建工具 ReactRouter：路由 zustand：状态管理 ESlint,Prettier：代码规范 Axios：请求 antd：组件库 TailwindCSS3：css 解决方案 i18next，i18n-ally：多语言 ahooks：工具方法库 pnpm: 依赖管理 由于项目的规模、复杂性和要求都有所不一样，在技术选型上都会有所差异，我这边指出的是常见的后台管理类项目的需求架构。 技术选型是项目架构中占比比较大的一部分，下面简述一下，我是如何对比选择的技术栈： React vs Vue两者并没有谁好谁差的说法，一些论坛上吵来吵去谁也没办法说服谁。如果是个人项目，当然可以主观用哪个都是不错的，但从团队的角度，可能就需要考虑以下这些点了： 对 React 的掌握程度：至少要有一个核心成员熟练 React，避免出现有问题不知道问谁的情况。 前端团队成员的意向 or 招聘需求 设计趋向 antd or element，能复用就能提高开发效率 社区生态，例如你想 ...

【Vue3 开源项目】后台管理系统（Vue3 + TypeScript + Pinia）基于 Vue3 全家桶开发的后台管理系统，线上地址在这。适用于自学 Vue3 的同学，以及外包项目快速交付。 技术栈该项目使用技术栈如下： Vue 3：前端框架 TypeScript：语言 Vite：打包工具 Pinia：状态管理 Vue Router：路由管理 Element Plus：UI 组件库 Echarts：图表 Axios：网络请求 项目截图登录页： 首页： 表格： 安装# 克隆项目git clone https://github.com/HearLing/vue3-management-system.git# 进入项目目录cd vue3-management-system# 安装依赖npm install# 本地开发，启动服务npm run dev# 打包构建npm run build# ESLint修复npm run lint 参考资料 参考项目 Vue3 中文文档 Vue Router 中文文档 Pinia 中文文档 Element Plus ...

React 模拟面试题 之前总结了 Vue 相关的面试题，看的人没想到挺多的，但是也为我带来了不小的争议。虽然我有明确写出答案《仅供参考》但是还是有同学照抄呀，这么说呢就是你完全没有思考直接跟面试官对答，就算你没说错但也经不起细问的呀。 废话不多说，俺还是比较关心大伙的春秋招面试准备得咋样了，面试的 React 复习得怎么样了呢？ 如果你感觉在 React 这方面还比较薄弱的话，不如来做一做这套模拟面试吧，看看大伙能不能打个满分，祝你顺利~ 🌸🌸🌸🌸🌸答案仅供参考🌸🌸🌸🌸🌸 欢迎访问GitHub 仓库，目前已经有 552 道大厂真题了，涵盖各类前端的真题。也可以访问我的 面试专栏 ，我的文章会第一时间更新在这。 免杠声明1、咱们是 模拟面试 并且是 React 专题 ，不是你真实面试的场景，咱们是把 React 面试题集中到了这场模拟面试中了。 2、因为是模拟面试，所以会有一些 情景导入 以及模拟面试官（也就是我）的 心理活动。目的是能让你有点被面试的感觉，以及让你了解一些面试官在想些什么。当然如果觉得啰嗦的话，直接点目录就可以到你想看的题了。 3、答案仅供参考 ...

前言写这篇文章，是因为在最近一次字节的面试中，一道异步题，我写不出来，并且没什么思路。于是我痛定思痛，必须搞明白，才有了这篇文章。如果觉得有用，点赞支持一下，抚慰我我受伤的心灵 ~~ 本文我将尽量使用 setTimeout、promise、async/await 这三种方式写出题解。 实现每隔 1 秒输出 1,2,3不要看这道题简单，其实有很多可以考察。我们从简单开始理解再到复杂。 此题的变形有：实现每隔1秒请求接口，实现每隔几秒刷新时间，或者换个间隔时间等等，换汤不换药，为了更好适应变形写出其他题，这里用数组arr存数据。 //公共代码const arr = [1, 2, 3]; setTimeout 实现使用回调嵌套，注意记录 count function timeout(count = 0) { if (count === arr.length) return; setTimeout(() => { console.log(arr[count]); timeout(++count); }, 1000);}timeo ...

发布订阅/观察者模式发布—订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。 通俗的例子小玲最近迷上了看连载书，每天都在等更新，，，什么时候有书除了书店没有人能够知道。于是小玲隔三差五都会来书店看看出没出新版。除了小玲，还有张三、李四、王五也会来看更新了没。小玲不高兴，每天要跑来看有没有更新。书店不高兴，每天都有人问一样的问题。 当然现实中不会这么笨的处理：小玲离开之前，把电话号码留在了书店。书店答应他，新书一出就马上发信息通知，他们的电话号码都被记在花名册上，新书出的时候，书店会翻开花名册，依次发送一条短信来通知他们。 优点： 在这个例子中使用发布—订阅模式有着显而易见的优点： 读者不用再天天向书店咨询，在合适的时间点，书店作为发布者会通知这些消息订阅者。 读者和书店之间不再强耦合在一起，当有新的读者出现时，他只需把手机号码留在书店，书店不关心读者的任何情况，不管读者是男是女。而书店的任何变动也不会影响读者，只要书店记得发布新书了给他们发短信这件事情。 由优点可以见得： 第一优点 发布—订阅模式可以广泛应用 ...

理解保证一个类仅有一个实例，并提供一个访问它的全局访问点。也可以理解成在我们的应用程序中共享一个全局实例。 场景单击按钮的时候，页面中会出现一个浮窗，而这个浮窗是唯一的，无论单击多少次按钮，这个浮窗都只会被创建一次，那么这个浮窗就适合用单例模式来创建。 实现用一个变量来标志当前是否已经为某个类创建过对象，如果是，则在下一次获取该类的实例时，直接返回之前创建的对象。 传统面向对象语言实现传统的面向对象语言，单例对象是从“类”中创建而来。（现在可以告知的是，在JavaScript 中这种并不完全适用，但还是需要了解） const Singleton = function(name){ this.name = name; this.instance = null;// 变量标记}Singleton.prototype.getName = function(){ alert(this.name);}Singleton.getInstance = function(name){ if(!this.instance){ thi ...

前言对于不同团队而言，使不使用 useCallback和 useMemo 都有着不同的见解，看过很多文章都说不要用，作为深度使用 useCallback和 useMemo 这两个钩子的我来说，我完全能理解为什么很多人都说不要用。而这篇文章是帮助你理解 useCallback 和 useMemo，以便于结合实际来考量。 本篇文章基本概括了很多人对 useCallback 和 useMemo 的疑问，至于是要多用还是少用，相信看完你会有自己的思考。 如果你不太好考量，请看最后我结合我的开发习惯和公司情况的总结：尽量使用 useCallback 和 useMemo 注意：由于 useCallback(fn, deps) 相当于 useMemo(() => fn, deps) 。以及大部分人只争议 useCallback 要不要用，所以会着重针对 useCallback。 官方＆源码React官网对useCallback的介绍是比较简短的，我们一起来解析一下吧： 开篇第一句话： 返回一个 memoized 回调函数 意思很显而易见就是会返回被记忆的函数，具体如何实现，看看源码： / ...

前言本文总结了我 2021 这一整年的学习、工作还有生活上的总结，可能文章会有点长，这我避免不了，但是你可以通过目录直接跳转到你想看的部分哦，我会尽量分好章节目录。 简单介绍一下我自己大家好呀，这里是 HearLing，一个非常努力「 变强不变秃 」的前端程序媛，可能一些关注我的小伙伴都不知道我是女生吧哈哈。那在这里正式认识一下吧～ 非常感谢一直关注我的小伙伴对我的支持；当然也十分欢迎新的朋友来关注我，以后我们一起进步努力呀～ 学习先从学习说好了。我始终认为不断的保持学习，才能一直不断的提升自我，不断进步。没有了学校教授知识，学习变成了一件需要主动进行的事情。变成了可以学想学的，有更多的学习支配时间，学习的东西也更多元了。但也可以变成啥也不学吃老本。 这一章，就列举一些这一年接触和深入学习的一些知识。 前端技术首先由于我本身就是前端的嘛，相对于这方面的学习自然会多一些，这里列举一些前端技术。相对于之前，今年我觉得主要是围绕 React 进行的，更加贴近公司技术栈，相对来说其他学习的技术是占小头的。 Vue 全家桶从 Vue2 到 Vue3 虽然工作上还没有用到，但是说不定以后就能用到 ...