xiangzhihong8
著有《React Native移动开发实战》1,2,3版本、《Kotlin入门与实战》1,2版本、《Weex跨平台开发与实战》、《React Native开发进阶》和《Flutter跨平台开发实战》和《Android应用架构实战》和《鸿蒙应用开发与实战》、《Vue3 项目开发实战》即将出版
展开
-
Apifox,替代 Yapi 的最佳Mock工具平台
Yapi 曾经是 API 管理工具中的佼佼者,但由于停止维护,它现在已经不再适合大部分开发团队使用。相比之下,Apifox 不仅功能更强大,而且具备持续的更新和维护,完全可以成为 Yapi 的最佳替代品。对于那些追求高效、现代化开发流程的团队来说,选择 Apifox 不仅能解决当前问题,还能为未来的开发需求做好准备。原创 2024-09-20 08:55:29 · 65 阅读 · 0 评论 -
从Vuex 到 Pinia,Vue 状态管理的进化
Vue.js,一个轻量级且易于上手的 JavaScript 框架,已经在全球范围内获得了广泛的应用。Vue.js 的状态管理库 Vuex,也为开发者提供了一个统一的状态管理方案。然而,随著 Vue.js 的发展和进化,我们看到了一个新的状态管理库的诞生 — Pinia。在这篇文章中,我们将探讨 Vuex 和 Pinia 的差异,并了解 Pinia 如何成为 Vue.js 状态管理的新选择。原创 2024-08-27 22:37:34 · 717 阅读 · 1 评论 -
2024年,12个最值得关注的Vue开源 UI组件库
从2014年发布到今年,Vue正好走过了10年,这10年也正好是前端发展的巨变之年,各种新的技术、框架、UI库 都层出不穷,今天我们来盘点一下2024年有哪些值得关注的 vue UI组件库。原创 2024-08-10 18:08:12 · 167 阅读 · 0 评论 -
Parsing error: The keyword ‘interface‘ is reserved配置优化
这里面提到的standard也是一个代码风格检查工具,官网是:https://standardjs.com 看它的内容描述,这是一个类似eslint的东西,似乎比eslint更加简单。关键的内容就是其中的parserOptions.parser配置使用typescript语法插件的parser就可以正确识别项目中.vue文件的ts代码,根据eslint-plugin-vue官方的说明,我这里额外配置了一个vue-eslint-parser,因为我的项目需要配置下这个。然后在vue的函数中去使用它。原创 2024-08-06 11:08:04 · 247 阅读 · 0 评论 -
Axios使用详解
Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。axios有以下特性:从浏览器创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据。原创 2024-07-31 10:25:13 · 90 阅读 · 0 评论 -
Vue路由守卫详解及其应用场景分析
随着前端技术的不断发展,vue作为一款开发框架也越来越受到开发者们的欢迎。而vue的路由机制也是vue框架中不可或缺的一部分。路由系统能够帮助开发人员构建复杂的单页应用,同时也提供了一种灵活的方式来管理页面状态和用户导航。在这种情况下,vue路由守卫便成为一个必须要掌握的知识点。那么,什么是Vue路由守卫呢?在Vue.js中,路由守卫是用来控制页面之间跳转的一种机制,主要用于在页面导航过程中进行权限验证和状态管理等操作。Vue路由守卫主要分为全局路由守卫、路由独享守卫和组件级别守卫三种类型。原创 2024-07-23 17:36:36 · 135 阅读 · 0 评论 -
Vue 3中使用 Lottie 动画
Lottie是由Airbnb开源的面向Android、iOS、Web和Windows的动画库,开发者可以使用它在Web、iOS、Android等平台上实现高性能的体验丰富的矢量动画。在早期的前端开发中,Flash是网页动画之王,不过它的规范约束随意,造成很多时设计出来的产品都无法符合用户体验要求。随着Flash动画的消失,HTML网页开发的主流技术,成为前端开发的技术标准,不过在HTML网页上进行动画开发其成本也是相当高的。原创 2024-07-14 10:56:33 · 968 阅读 · 0 评论 -
前端requestAnimationFrame动画
题目:我们来实现一个最简单的需求,将一个元素从屏幕左边均匀地移动到屏幕右边。原创 2024-06-29 19:36:47 · 250 阅读 · 0 评论 -
MacOS系统搭建Appium自动化测试环境
APPium是一个开源测试自动化框架,适用于原生、混合或移动Web应用程序的自动化测试工具。APPium使用WebDriver协议驱动iOS、Android等应用程序。原创 2024-06-16 16:16:38 · 206 阅读 · 0 评论 -
Vue事件修饰符
在 Vue.js 中,事件修饰符是一种用于处理 DOM 事件的特殊指令,可以在事件处理程序中提供额外的控制或功能。Vue 中的事件修饰符是以 . 开头的指令后缀,常用的事件修饰符包括以下一些:.stop:阻止事件冒泡。.prevent:阻止事件的默认行为。.capture:使用事件捕获模式。.self:只当事件在该元素本身(比如不是子元素)触发时触发回调。.once:事件只触发一次。.passive:事件的默认行为立即执行,无需等待事件回调结束。原创 2024-06-11 11:01:12 · 120 阅读 · 0 评论 -
Webpack5 模块联邦
模块联邦允许Webpack构建之间的模块共享,它打开了一种新的方式来看待代码的复用和组合,尤其适合在微前端架构中使用。在微前端架构中,模块联邦使得每个微前端应用都可以暴露和共享自己的模块,供其他应用使用。这意味着你可以在一个微前端应用中定义一个组件或服务,然后在另一个微前端应用中直接使用它,而不需要复制代码或安装额外的依赖。代码拆分是动态加载的基础,它将应用的代码拆分成多个小的、独立的块(chunk),每个块可以独立地加载和执行。每个微前端应用都是独立的、可复用的,并且可以使用不同的技术栈进行开发。原创 2024-05-23 22:46:24 · 173 阅读 · 0 评论 -
Single-SPA微前端架构解析与实战
Single-SPA是一个用于构建微前端应用的JavaScript框架。它允许你将一个大型前端应用拆分成多个独立的、可复用的微应用,并且这些微应用可以使用不同的框架或库进行开发。Single-SPA通过定义一套简单的生命周期钩子和路由机制,实现了微应用之间的通信和协同工作。原创 2024-05-20 11:25:24 · 116 阅读 · 0 评论 -
Vue 3.x组件生命周期
但需要注意的是,在 Vue 3 的 Composition API 写法里,数据或函数如果需要在 中使用,就必须在 setup 里将其 return 出去,而仅在 里被调用的函数或变量,不需要渲染到模板则无需 return。Composition API 虽然也是一个步伐迈得比较大的改动,但其组件结构并没有特别大的变化,区别比较大的地方在于组件生命周期和响应式 API 的使用,只要掌握了这些核心功能,上手 Vue 3 非常容易。可以看到 Vue 3 的组件也是 + + 的三段式组合,上手非常简单。原创 2024-05-11 15:25:13 · 871 阅读 · 1 评论 -
Vue3 超前版发布,全面拥抱 JSX/TSX
我们都知道 Vue 一直主流是使用 template 模板来进行页面的编写。而就在最近,Vue3 的超前项目 Vue Macros 中,发布了 defineRender、setupComponent、setupSFC 这些新的 API,这代表了,以后 Vue3 有可能可以全面拥抱 JSX/TSX 了!!说这个新 API 之前,我们先来说说什么是 Vue Macros。原创 2024-04-24 23:42:24 · 121 阅读 · 0 评论 -
前端如何防止接口重复提交
接口重复提交指的是在网络通信中,同一个请求被客户端多次发送到服务器端的情况。这种情况可能由于多种原因导致,例如用户在等待期间多次点击提交按钮、网络超时后客户端重新发送请求、客户端发送的请求在网络传输过程中出现重复等。接口重复提交可能会导致多种问题,当服务器收到重复请求时,可能会多次处理相同的数据,导致数据重复操作或者产生不一致的结果。重复提交请求会增加服务器的负载和资源消耗,特别是在高并发情况下,可能会导致服务器压力过大,影响系统的性能和稳定性。原创 2024-04-18 23:03:13 · 360 阅读 · 0 评论 -
微前端框架主流方案剖析
微前端架构是为了在解决单体应用在一个相对长的时间跨度下,由于参与的人员、团队的增多、变迁,从一个普通应用演变成一个巨石应用(Frontend Monolith)后,随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。微前端框架内的各个应用都支持独立开发部署、不限技术框架、支持独立运行、应用状态隔离但也可共享等特征。本文会从框架的应用隔离实现方案、实战、优缺点三个方面探一探各个框架。帮助大家了解各个框架是如何使用,如何运行,从而能选出适合自己项目的微前端方案。原创 2024-04-14 10:00:33 · 529 阅读 · 0 评论 -
ArcGIS Pro中的3D建模
在本文中,我讲述了我最近一直在探索的在 ArcGIS Pro 中设计 3D 模型的过程。我的目标是尽可能避免与其他软件交互(即使是专门用于 3D 建模的软件),并利用 Pro 可以提供的可能性。这个短暂的旅程分为三个不同的阶段:准备、组装和照明。我们必须使用一些布局可能性以及一些地理处理工具来准备某些图层,然后继续设计局部场景。我不是 3D 专家,也不是 Blender 或其他类似软件的熟练用户。我只是在探索新的方法并与你分享,期望得到一些积极的反馈和改进建议。原创 2024-04-11 22:15:28 · 248 阅读 · 0 评论 -
H5动效开发之CSS3动画
定义一个名为「autoRotate」的关键帧动画,并将transition版本例子中显示立方体每一面的代码搬到@keyframes中去。原创 2024-04-10 22:44:44 · 158 阅读 · 0 评论 -
React 19即将发布,新增4个Hook函数
所有这些功能都可以在仅客户端的 React 应用程序中工作,例如在使用 Vite 打包的应用程序中。你不需要像 Next 或 Remix 这样的 SSR 框架就可以使用它们——尽管它们也可以与服务器集成的 React 应用程序一起工作。这些功能使得在 React 中实现数据获取和表单变得更加容易。然而,要创造出良好的用户体验,需要整合所有这些钩子,这可能会很复杂。或者,你可以使用像 react-admin 这样的框架,其中内置了带有乐观更新的用户友好表单。React 19 什么时候发布?原创 2024-02-20 21:58:11 · 998 阅读 · 0 评论 -
推荐10个最受欢迎的 Vue.js UI 库
在2024年,随着Vue.js的不断普及和发展,这个轻量级、易于学习的JavaScript框架在前端开发者中的受欢迎程度日益上升。Vue.js之所以受到青睐,很大一部分原因是其庞大的生态系统,特别是众多的UI库,这些库提供了预先构建的组件和工具,帮助开发者快速高效地构建出既美观又响应迅速的用户界面。让我们来看看2024年最受欢迎的10个Vue.js UI库,这些库将帮助你提高开发效率,打造出令人印象深刻的应用程序。原创 2024-02-15 10:50:09 · 109 阅读 · 0 评论 -
Electron实战之入门
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的技术框架。嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许开发者使用 JavaScript 代码来创建允许在Windows、macOS和Linux等平台。原创 2024-02-14 22:56:20 · 712 阅读 · 0 评论 -
Electron+Vue实现仿网易云音乐实战
这个项目是我跟着官方文档的那个Electron入门教程大致跑了一遍,了解了下Electron开发流程之后的实战项目,所以中间应该是会有很多写法不是很规范,安全性有可能也没考虑到,可实现的各种api也不是很了解,适合初学者。原创 2024-02-09 10:13:41 · 1406 阅读 · 0 评论 -
京东微前端框架MicroApp简介
在MicroApp开源后我们收到社区的一些反馈,其中一条关于性能的问题引起我们的重视。这不是MicroApp才存在的问题,而是微前端长久以来的难题,在社区有大量关于沙箱性能问题的讨论,却始终没有完美的解决方案。图片MicroApp采用的是和qiankun一样的proxy+with的沙箱方案,这也是目前js沙箱的主流方案。原创 2024-02-03 22:45:45 · 1635 阅读 · 0 评论 -
关于前端项目运行不兼容20.10.0的解决方法
如果逐个的进行升级,可能会比较麻烦,那我们可以使用如下的命令来忽略引擎的检查,命令如下。最近,安装了Node最新的版本20.10.0,在执行yarn安装依赖时爆了如下的错误。此时,再次执行yarn install命令安装以来包就没有任何的问题了。执行完上面的命令后,会看到如下的提示。原创 2024-01-17 11:41:27 · 161 阅读 · 0 评论 -
下一代 Vue3 Devtools 正式开源
本文主要和大家介绍 Vue DevTools, Vue DevTools 是一个旨在增强 Vue 开发人员体验的工具,它提供了一些功能来帮助开发者更好地了解 Vue 应用程序。因为篇幅问题,关于 Vue DevTools 只是做了一个简短的介绍。原创 2024-01-15 15:02:26 · 253 阅读 · 0 评论 -
基于Vue组合式API的实用工具集
今天,给大家分享一个很实用的工具库 VueUse,它是基于 Vue Composition Api,也就是组合式API。支持在Vue2和Vue3项目中进行使用,据说是目前世界上Star最高的同类型库之一。图片。原创 2024-01-10 10:41:50 · 529 阅读 · 0 评论 -
前端找工作真的很卷,一周面试全挂
这周又是面了一周,今天是周五了,目前还没有一个offer。好几家面试都是聊的很好,问题回答的自我感觉挺好(可能面试官没觉得好),然后就没有了后续。这周一共面试了6家公司,目前有2家过了2面。下周约了3面线下,可能工资不会给的太多。其中最遗憾的一家是bitget,二面面试官迟到了10分钟,然后面了半个小时不到,面试官匆匆结束面试,整个过程我也没觉得讲的多差,反正草草收场让我有点懵逼,我后来问HR说没有后续了,很可能我是被当成KPI了。原创 2024-01-09 11:41:26 · 416 阅读 · 0 评论 -
React Three Fiber动画
使用静态对象和形状构建 3D 场景非常酷,但是当你可以使用动画使场景栩栩如生时,它会更酷。在 3D 世界中,有一个称为角色装配的过程,它允许你创建称为骨架的特殊对象,其作用类似于骨骼和关节系统。这些骨架连接到一块 3D 几何体上,例如人、动物或其他任何物体,并允许你弯曲和移动关节以使连接的几何体变形。你可以使用此过程通过在骨架的不同姿势之间创建关键帧来创建动画。本教程不会教你如何创建这些装配角色之一,但会教你如何使用已在 React Three Fiber 中创建的角色。本教程由三个主要部分组成。原创 2024-01-07 20:59:20 · 1133 阅读 · 0 评论 -
Vite5 + Vue3 + Element Plus 前端框架搭建
为了开发一套高效使用的 Vite5 + Vue3 + Element Plus 前端框架,你可以按照以下步骤进行。可以使用 Vue3 的路由库、状态管理库(如 Vuex)等来组织和管理代码,并进行对应的架构升级。开发之前,确保你的电脑已经安装了 Node.js(建议使用最新稳定版 LTS),然后安装 Vite CLI。事实上,一个完美的前端项目,需要根据项目需求和团队技能进行适当的调整,以达到最佳效果。以下是使用Vite5+Vue+Element Plus开发的后台系统,效果如下图。原创 2024-01-04 16:53:10 · 1355 阅读 · 0 评论 -
Vue 3.4 正式版发布,带来多项更新
12 月 28 日,Vue 3.4 正式版发布,代号为“🏀 Slam Dunk”,即灌篮高手。据尤大接收,这个版本进行了许多重要的内部改进,其中最引人瞩目的是重写的模板解析器。新的解析器将速度提高了 2 倍,显著提升了整体性能。此外,响应性系统也经过了重构,使得 effect 触发更为精确和高效。为了提升开发体验,还进行了一些 API 改进,包括 defineModel 的稳定以及绑定props时的新的同名简写。下面是本次版本更新的内容说明。原创 2024-01-03 09:41:18 · 1692 阅读 · 0 评论 -
前端DApp开发利器,Ant Design Web3 正式发布 1.0
在介绍 Ant Design Web3 之前,先简单说说 Web3 DApp(去中心化应用)。DApp 可以说是除了 AI 应用外当下最受前端独立开发者青睐的应用了。当然,在 ChatGPT 还没有火的时候,Web3 DApp 才是最火的。但是我们如何开发一个 DApp 呢?对于一个前端开发者来说开发一个 DApp 简单吗?或者不会前端的开发如何可以更方便的构建一个 DApp 呢?原创 2023-12-29 12:20:08 · 1270 阅读 · 0 评论 -
20 个超棒的开源应用程序项目
这些项目几乎可以立即安装和使用,涉及各种编程语言:Python、Rust、JavaScript等等。原创 2023-12-19 21:14:20 · 778 阅读 · 0 评论 -
前端Vue必问面试题
Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术,专业术语叫 Dead code elimination。简单来讲,就是在保持代码运行结果不变的前提下,去除无用的代码。在Vue2中,无论我们使用什么功能,它们最终都会出现在生产代码中。主要原因是Vue实例在项目中是单例的,捆绑程序无法检测到该对象的哪些属性在代码中被使用到。而Vue3源码引入tree shaking特性,将全局 API 进行分块。如果您不使用其某些功能,它们将不会包含在您的基础包中。原创 2023-12-18 09:52:59 · 973 阅读 · 0 评论 -
Eslint 要被 Oxlint替换了吗
由于最近的rust在前端领域的崛起,基于rust的前端生态链遭到rust底层重构,最近又爆出OxLint,是一款基于Rust的linter工具。Oxlint在国外前端圈引起热烈讨论,很多大佬给出了高度评价。事实上,Oxlint 是 Oxc 项目旗下的一款产品,专为 JavaScript 和 TypeScript 创建一系列高性能工具。而 Oxc 正在构建一个解析器、linter、格式化程序、转译器、压缩器、解析器等等,而且全部用 Rust 编写,性能非常优秀。原创 2023-12-16 10:18:08 · 1217 阅读 · 0 评论 -
React Native面试题总结
计算属性(computed)是Vue中的一个属性,它是一个函数,根据响应式的数据进行计算返回结果。计算属性可以多次使用,并且当计算属性所依赖的响应式数据改变时会重新计算,避免了不必要的计算。而方法(methods)则需要手动调用,无法自动触发并且不能被缓存,所以当方法所依赖的数据需要更新时需要手动调用。Vuex是Vue的状态管理库,它将组件的共享状态抽取出来,以一个全局单例模式进行管理,使得多个组件可以共享同一状态。原创 2023-12-12 16:54:17 · 1433 阅读 · 0 评论 -
前端Vue面试题总结
计算属性(computed)是Vue中的一个属性,它是一个函数,根据响应式的数据进行计算返回结果。计算属性可以多次使用,并且当计算属性所依赖的响应式数据改变时会重新计算,避免了不必要的计算。而方法(methods)则需要手动调用,无法自动触发并且不能被缓存,所以当方法所依赖的数据需要更新时需要手动调用。Vuex是Vue的状态管理库,它将组件的共享状态抽取出来,以一个全局单例模式进行管理,使得多个组件可以共享同一状态。原创 2023-12-11 11:33:05 · 489 阅读 · 0 评论 -
前端React基础面试题
受控组件就是可以被 react 状态控制的组件。在 react 中,Input textarea 等组件默认是非受控组件(输入框内部的值是用户控制,和React无关)。但是也可以转化成受控组件,就是通过 onChange 事件获取当前输入内容,将当前输入内容作为 value 传入,此时就成为受控组件。方法1:通过受控组件,可以获取到state里面的值,获取修改结果,代码如下。state = {val:""//这是一个通用的写法,然后注意 name的值一定要与state定义的一直})原创 2023-12-05 09:21:24 · 1333 阅读 · 0 评论 -
Shopify 开源 WebAssembly 工具链 Ruvy
wasi-vfs创建了一个虚拟文件系统并嵌入到.wasm二进制文件中,它提供了一种机制,让 Ruby 源文件对ruby.wasm可读,但不允许在 WebAssembly 运行时访问主机文件系统。这个过程很简单,原则上,在安装了所有必需的依赖项,包括rustup、wasm32-wasi、cmake和 Rosetta 2(macOS)之后,只需运行make,然后像下面的示例一样执行 Ruvy 来从。Ruvy 基于ruby.wasm, 用 Rust 实现,提升了性能并简化了 Wasm 模块的执行。原创 2023-12-04 09:11:11 · 972 阅读 · 0 评论 -
Airbnb开源数据可视化工具Visx
visx 是用于 React 的富有表现力的底层可视化组件集合,结合了 d3 的强大功能来生成可视化,以及 React 更新 DOM 的诸多优势。在 Airbnb 内部,visx 的目标是统一整个公司的可视化堆栈,在此过程中,创建了 visx 项目,从而有效的将 D3 的强大功能与 React 结合在一起。目前,visx在 Github 上通过 MIT 协议开源,有超过 17.5k 的 star、0.7k 的 fork、2.2k 的项目依赖量、代码贡献者 150+,妥妥的前端优质开源项目。原创 2023-12-01 15:22:30 · 1210 阅读 · 1 评论 -
Blender动画导入Three.js
你是否在把 Blender 动画导入你的 ThreeJS 游戏(或项目)中工作时遇到问题?您的 .glb (glTF) 文件是否正在加载,但没有显示任何内容?你的骨骼没有正确克隆吗?如果是这样,请阅读我如何使用 SkeletonUtils.js 解决此问题。原创 2023-11-28 09:27:05 · 1094 阅读 · 0 评论