xiangzhihong8的专栏

APPium是一个开源测试自动化框架，适用于原生、混合或移动Web应用程序的自动化测试工具。APPium使用WebDriver协议驱动iOS、Android等应用程序。

在 Vue.js 中，事件修饰符是一种用于处理 DOM 事件的特殊指令，可以在事件处理程序中提供额外的控制或功能。Vue 中的事件修饰符是以 . 开头的指令后缀，常用的事件修饰符包括以下一些：.stop：阻止事件冒泡。.prevent：阻止事件的默认行为。.capture：使用事件捕获模式。.self：只当事件在该元素本身（比如不是子元素）触发时触发回调。.once：事件只触发一次。.passive：事件的默认行为立即执行，无需等待事件回调结束。

模块联邦允许Webpack构建之间的模块共享，它打开了一种新的方式来看待代码的复用和组合，尤其适合在微前端架构中使用。在微前端架构中，模块联邦使得每个微前端应用都可以暴露和共享自己的模块，供其他应用使用。这意味着你可以在一个微前端应用中定义一个组件或服务，然后在另一个微前端应用中直接使用它，而不需要复制代码或安装额外的依赖。代码拆分是动态加载的基础，它将应用的代码拆分成多个小的、独立的块（chunk），每个块可以独立地加载和执行。每个微前端应用都是独立的、可复用的，并且可以使用不同的技术栈进行开发。

Single-SPA是一个用于构建微前端应用的JavaScript框架。它允许你将一个大型前端应用拆分成多个独立的、可复用的微应用，并且这些微应用可以使用不同的框架或库进行开发。Single-SPA通过定义一套简单的生命周期钩子和路由机制，实现了微应用之间的通信和协同工作。

但需要注意的是，在 Vue 3 的 Composition API 写法里，数据或函数如果需要在 中使用，就必须在 setup 里将其 return 出去，而仅在 里被调用的函数或变量，不需要渲染到模板则无需 return。Composition API 虽然也是一个步伐迈得比较大的改动，但其组件结构并没有特别大的变化，区别比较大的地方在于组件生命周期和响应式 API 的使用，只要掌握了这些核心功能，上手 Vue 3 非常容易。可以看到 Vue 3 的组件也是 + + 的三段式组合，上手非常简单。

我们都知道 Vue 一直主流是使用 template 模板来进行页面的编写。而就在最近，Vue3 的超前项目 Vue Macros 中，发布了 defineRender、setupComponent、setupSFC 这些新的 API，这代表了，以后 Vue3 有可能可以全面拥抱 JSX/TSX 了！！说这个新 API 之前，我们先来说说什么是 Vue Macros。

接口重复提交指的是在网络通信中，同一个请求被客户端多次发送到服务器端的情况。这种情况可能由于多种原因导致，例如用户在等待期间多次点击提交按钮、网络超时后客户端重新发送请求、客户端发送的请求在网络传输过程中出现重复等。接口重复提交可能会导致多种问题，当服务器收到重复请求时，可能会多次处理相同的数据，导致数据重复操作或者产生不一致的结果。重复提交请求会增加服务器的负载和资源消耗，特别是在高并发情况下，可能会导致服务器压力过大，影响系统的性能和稳定性。

微前端架构是为了在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用(Frontend Monolith)后，随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。微前端框架内的各个应用都支持独立开发部署、不限技术框架、支持独立运行、应用状态隔离但也可共享等特征。本文会从框架的应用隔离实现方案、实战、优缺点三个方面探一探各个框架。帮助大家了解各个框架是如何使用，如何运行，从而能选出适合自己项目的微前端方案。

在本文中，我讲述了我最近一直在探索的在 ArcGIS Pro 中设计 3D 模型的过程。我的目标是尽可能避免与其他软件交互（即使是专门用于 3D 建模的软件），并利用 Pro 可以提供的可能性。这个短暂的旅程分为三个不同的阶段：准备、组装和照明。我们必须使用一些布局可能性以及一些地理处理工具来准备某些图层，然后继续设计局部场景。我不是 3D 专家，也不是 Blender 或其他类似软件的熟练用户。我只是在探索新的方法并与你分享，期望得到一些积极的反馈和改进建议。

定义一个名为「autoRotate」的关键帧动画，并将transition版本例子中显示立方体每一面的代码搬到@keyframes中去。

所有这些功能都可以在仅客户端的 React 应用程序中工作，例如在使用 Vite 打包的应用程序中。你不需要像 Next 或 Remix 这样的 SSR 框架就可以使用它们——尽管它们也可以与服务器集成的 React 应用程序一起工作。这些功能使得在 React 中实现数据获取和表单变得更加容易。然而，要创造出良好的用户体验，需要整合所有这些钩子，这可能会很复杂。或者，你可以使用像 react-admin 这样的框架，其中内置了带有乐观更新的用户友好表单。React 19 什么时候发布？

在2024年，随着Vue.js的不断普及和发展，这个轻量级、易于学习的JavaScript框架在前端开发者中的受欢迎程度日益上升。Vue.js之所以受到青睐，很大一部分原因是其庞大的生态系统，特别是众多的UI库，这些库提供了预先构建的组件和工具，帮助开发者快速高效地构建出既美观又响应迅速的用户界面。让我们来看看2024年最受欢迎的10个Vue.js UI库，这些库将帮助你提高开发效率，打造出令人印象深刻的应用程序。

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的技术框架。嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许开发者使用 JavaScript 代码来创建允许在Windows、macOS和Linux等平台。

这个项目是我跟着官方文档的那个Electron入门教程大致跑了一遍，了解了下Electron开发流程之后的实战项目，所以中间应该是会有很多写法不是很规范，安全性有可能也没考虑到，可实现的各种api也不是很了解，适合初学者。

在MicroApp开源后我们收到社区的一些反馈，其中一条关于性能的问题引起我们的重视。这不是MicroApp才存在的问题，而是微前端长久以来的难题，在社区有大量关于沙箱性能问题的讨论，却始终没有完美的解决方案。图片MicroApp采用的是和qiankun一样的proxy+with的沙箱方案，这也是目前js沙箱的主流方案。

如果逐个的进行升级，可能会比较麻烦，那我们可以使用如下的命令来忽略引擎的检查，命令如下。最近，安装了Node最新的版本20.10.0，在执行yarn安装依赖时爆了如下的错误。此时，再次执行yarn install命令安装以来包就没有任何的问题了。执行完上面的命令后，会看到如下的提示。

本文主要和大家介绍 Vue DevTools， Vue DevTools 是一个旨在增强 Vue 开发人员体验的工具，它提供了一些功能来帮助开发者更好地了解 Vue 应用程序。因为篇幅问题，关于 Vue DevTools 只是做了一个简短的介绍。

今天，给大家分享一个很实用的工具库 VueUse，它是基于 Vue Composition Api，也就是组合式API。支持在Vue2和Vue3项目中进行使用，据说是目前世界上Star最高的同类型库之一。图片。

这周又是面了一周，今天是周五了，目前还没有一个offer。好几家面试都是聊的很好，问题回答的自我感觉挺好（可能面试官没觉得好），然后就没有了后续。这周一共面试了6家公司，目前有2家过了2面。下周约了3面线下，可能工资不会给的太多。其中最遗憾的一家是bitget，二面面试官迟到了10分钟，然后面了半个小时不到，面试官匆匆结束面试，整个过程我也没觉得讲的多差，反正草草收场让我有点懵逼，我后来问HR说没有后续了，很可能我是被当成KPI了。

使用静态对象和形状构建 3D 场景非常酷，但是当你可以使用动画使场景栩栩如生时，它会更酷。在 3D 世界中，有一个称为角色装配的过程，它允许你创建称为骨架的特殊对象，其作用类似于骨骼和关节系统。这些骨架连接到一块 3D 几何体上，例如人、动物或其他任何物体，并允许你弯曲和移动关节以使连接的几何体变形。你可以使用此过程通过在骨架的不同姿势之间创建关键帧来创建动画。本教程不会教你如何创建这些装配角色之一，但会教你如何使用已在 React Three Fiber 中创建的角色。本教程由三个主要部分组成。

为了开发一套高效使用的 Vite5 + Vue3 + Element Plus 前端框架，你可以按照以下步骤进行。可以使用 Vue3 的路由库、状态管理库（如 Vuex）等来组织和管理代码，并进行对应的架构升级。开发之前，确保你的电脑已经安装了 Node.js（建议使用最新稳定版 LTS），然后安装 Vite CLI。事实上，一个完美的前端项目，需要根据项目需求和团队技能进行适当的调整，以达到最佳效果。以下是使用Vite5+Vue+Element Plus开发的后台系统，效果如下图。

12 月 28 日，Vue 3.4 正式版发布，代号为“🏀 Slam Dunk”，即灌篮高手。据尤大接收，这个版本进行了许多重要的内部改进，其中最引人瞩目的是重写的模板解析器。新的解析器将速度提高了 2 倍，显著提升了整体性能。此外，响应性系统也经过了重构，使得 effect 触发更为精确和高效。为了提升开发体验，还进行了一些 API 改进，包括 defineModel 的稳定以及绑定props时的新的同名简写。下面是本次版本更新的内容说明。

在介绍 Ant Design Web3 之前，先简单说说 Web3 DApp（去中心化应用）。DApp 可以说是除了 AI 应用外当下最受前端独立开发者青睐的应用了。当然，在 ChatGPT 还没有火的时候，Web3 DApp 才是最火的。但是我们如何开发一个 DApp 呢？对于一个前端开发者来说开发一个 DApp 简单吗？或者不会前端的开发如何可以更方便的构建一个 DApp 呢？

这些项目几乎可以立即安装和使用，涉及各种编程语言：Python、Rust、JavaScript等等。

Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术，专业术语叫 Dead code elimination。简单来讲，就是在保持代码运行结果不变的前提下，去除无用的代码。在Vue2中，无论我们使用什么功能，它们最终都会出现在生产代码中。主要原因是Vue实例在项目中是单例的，捆绑程序无法检测到该对象的哪些属性在代码中被使用到。而Vue3源码引入tree shaking特性，将全局 API 进行分块。如果您不使用其某些功能，它们将不会包含在您的基础包中。

由于最近的rust在前端领域的崛起，基于rust的前端生态链遭到rust底层重构，最近又爆出OxLint，是一款基于Rust的linter工具。Oxlint在国外前端圈引起热烈讨论，很多大佬给出了高度评价。事实上，Oxlint 是 Oxc 项目旗下的一款产品，专为 JavaScript 和 TypeScript 创建一系列高性能工具。而 Oxc 正在构建一个解析器、linter、格式化程序、转译器、压缩器、解析器等等，而且全部用 Rust 编写，性能非常优秀。

计算属性(computed)是Vue中的一个属性，它是一个函数，根据响应式的数据进行计算返回结果。计算属性可以多次使用，并且当计算属性所依赖的响应式数据改变时会重新计算，避免了不必要的计算。而方法(methods)则需要手动调用，无法自动触发并且不能被缓存，所以当方法所依赖的数据需要更新时需要手动调用。Vuex是Vue的状态管理库，它将组件的共享状态抽取出来，以一个全局单例模式进行管理，使得多个组件可以共享同一状态。

计算属性(computed)是Vue中的一个属性，它是一个函数，根据响应式的数据进行计算返回结果。计算属性可以多次使用，并且当计算属性所依赖的响应式数据改变时会重新计算，避免了不必要的计算。而方法(methods)则需要手动调用，无法自动触发并且不能被缓存，所以当方法所依赖的数据需要更新时需要手动调用。Vuex是Vue的状态管理库，它将组件的共享状态抽取出来，以一个全局单例模式进行管理，使得多个组件可以共享同一状态。

受控组件就是可以被 react 状态控制的组件。在 react 中，Input textarea 等组件默认是非受控组件（输入框内部的值是用户控制，和React无关）。但是也可以转化成受控组件，就是通过 onChange 事件获取当前输入内容，将当前输入内容作为 value 传入，此时就成为受控组件。方法1：通过受控组件，可以获取到state里面的值，获取修改结果，代码如下。state = {val:""//这是一个通用的写法，然后注意 name的值一定要与state定义的一直})

wasi-vfs创建了一个虚拟文件系统并嵌入到.wasm二进制文件中，它提供了一种机制，让 Ruby 源文件对ruby.wasm可读，但不允许在 WebAssembly 运行时访问主机文件系统。这个过程很简单，原则上，在安装了所有必需的依赖项，包括rustup、wasm32-wasi、cmake和 Rosetta 2（macOS）之后，只需运行make，然后像下面的示例一样执行 Ruvy 来从。Ruvy 基于ruby.wasm， 用 Rust 实现，提升了性能并简化了 Wasm 模块的执行。

visx 是用于 React 的富有表现力的底层可视化组件集合，结合了 d3 的强大功能来生成可视化，以及 React 更新 DOM 的诸多优势。在 Airbnb 内部，visx 的目标是统一整个公司的可视化堆栈，在此过程中，创建了 visx 项目，从而有效的将 D3 的强大功能与 React 结合在一起。目前，visx在 Github 上通过 MIT 协议开源，有超过 17.5k 的 star、0.7k 的 fork、2.2k 的项目依赖量、代码贡献者 150+，妥妥的前端优质开源项目。

你是否在把 Blender 动画导入你的 ThreeJS 游戏（或项目）中工作时遇到问题？您的 .glb (glTF) 文件是否正在加载，但没有显示任何内容？你的骨骼没有正确克隆吗？如果是这样，请阅读我如何使用 SkeletonUtils.js 解决此问题。

你是否曾想展示一些很酷的发动机的 3D 模型？这是一种可行的方法，使用一些非常基本的数学：一个简单的分解视图。为此，我们将使用 React-Three-Fiber，但它可以与原生 Three.js 配合使用（它与 r3f 生态系统没有深度绑定，只是对我来说迭代速度更快）。

除非你在过去几年一直躲在岩石下，否则你可能听说过“3D 建模”和“3D 渲染”这些术语。但为什么这项技术如此重要，尤其是对于产品制造公司而言？简而言之，它减少了项目时间和成本。这为制造商提供了更多的设计试验空间。未能利用 3D 建模技术的公司很快就会落后于竞争对手。多年来，消费者变得更加精通技术。因此，他们在产品选择上变得更加挑剔和挑剔。即使是最小的错误或混乱也会让潜在客户失去兴趣，并让他们转向你的竞争对手。这就是制造公司开始利用 3D 建模来展示其产品的原因。

从概念上讲，这是有道理的，因为PCB印制电路板上的走线从一个连接到下一个连接的路线基本上是平面的。然而，我们生活在一个 3 维世界中，能够以这种方式可视化电路以及相应的组件，对于设计过程很有帮助。本文将介绍KiCad中基本的3D查看功能，以及如何使用在线渲染3D电路板。

有没有想过如何在 3D Web 应用程序中模拟物理相机？在这篇博文中，我将向你展示如何使用 Three.js和 OpenCV 来完成此操作。我们将从模拟针孔相机模型开始，然后添加真实的镜头畸变。具体来说，我们将仔细研究 OpenCV 的两个失真模型，并使用后处理着色器复制它们。拥有逼真的模拟相机可以让你在真实相机捕获的图像上渲染 3D 场景。例如，这可以用于增强现实，也可以用于机器人和自动驾驶车辆。

作为一名独立游戏开发者，自己创建图形、配乐、动画和更多东西是相当具有挑战性的。创建资产所需的成本和时间有时是许多游戏开发商无法承受的。这就是他们选择在互联网上搜索免费内容的原因。现在，在浩瀚的内容海洋中获得如此免费的东西有点困难。本文列出了 10 个免费 3D 模型的绝佳网站，你可以在游戏中使用它们。

图片Demo 根据不同的设计器所需要的物料不同，分为了下面的 8 个场景：综合场景基础 fusion 组件基础 fusion 组件 + 单自定义组件基础 antd 组件自定义初始化引擎扩展节点操作项基于 next 实现的高级表单低代码物料antd 高级组件 + formily 表单组件可以点开不同的场景，看看他们使用的物料。图片仓库下每个 demo-xxx-xxx 目录都是一个可独立运行的 demo 工程，分别对应到刚刚介绍的场景。图片。

如何在线创建虚拟人？虚拟人，也称为数字化身、虚拟助理或虚拟代理，是一种可以通过各种在线平台与用户进行逼真交互的人工智能人。在线创建虚拟人变得越来越流行，因为它为个人和企业带来了许多好处。通过虚拟助理或代理，您可以以更具吸引力和个性化的方式与客户或受众进行沟通。虚拟人可以协助客户服务、营销甚至教育。它们还可以被编程为同时处理多个任务，使它们成为企业高效且经济高效的解决方案。本文将探讨在线创建虚拟人的好处，并提供有关最大化沟通效果的技巧。

Semi D2C 支持了通过转码插件实现自定义转码产物（为每个 Button 自动添加点击事件，角色权限 Authentication 校验；将文本自动做 i18n 适配；自动 fetch Data；为每个 Form Field 添加校验等等。在部分交互范式非常固定的场景下，用户借助该方案，可以自行往 GUI 层添加固定的业务逻辑后，是可以做到产物直接上线的。🎓 本质上，无论是 C2D 还是 D2C，都属于结构化信息的提取与转换。C2D Figma 组件绘制，