zqwang888-优快云博客

传统的前端开发主要关注于页面布局、样式设计及响应式处理等视觉表现层面。然而，随着用户对应用功能需求的增加，仅靠前端的传统技能已经难以满足市场的需求。AI技术的引入，不仅改变了前端开发的技术栈，还极大提升了用户的体验，推动了多种行业的创新发展。比如人机交互、图像识别、情感分析、跨学科融合等。前端最近卷的非常厉害，分享几个人工智能库供大家继续卷～

2024-12-17 09:53:43 1918

跨域是指在 Web 开发中，当一个网页的源（origin）与另一个网页的源不同时，就会发生跨域。源由协议、域名和端口号组成。如果两个 URL 的协议、域名和端口号中任何一个不同，就被认为是跨域。跨域限制是由浏览器实施的安全策略，它防止一个网页的脚本通过在其他网页的上下文中执行来窃取敏感信息或执行恶意操作。浏览器会限制跨域请求，例如通过 XMLHttpRequest 或 Fetch API 发送的跨域 HTTP 请求通常会被拒绝，除非目标服务器明确允许这样的请求。跨域的主要解决方案Jsonp主要是借助了。

2024-12-16 10:31:33 1074

原创 TypeScript高级用法

TypeScript使用起来很麻烦，但是效果却很香！我们在定义组件属性时既可以使用type也可以使用interface。由于同名接口会自动合并，而同名类型别名会冲突，我推荐使用interface定义组件属性。这样，使用者可以通过语句自由扩展组件属性，增强了代码的灵活性和可扩展性。const userInfo: UserInfo = { name: "张三", age: 23 };做项目还是建议使用js，效率高。做产品推荐使用ts，精打细磨。

2024-12-13 09:42:36 814

原创前端大屏开发3种适配方案

实现方式：按照设计稿的尺寸，将px按比例计算转为vw和vh优点：1.可以动态计算图表的宽高，字体等，灵活性较高 2.当屏幕比例跟 ui 稿不一致时，不会出现两边留白情况缺点：每个图表都需要单独做字体、间距、位移的适配，比较麻烦实现方式：通过scale属性，根据屏幕大小，对图表进行整体的等比缩放优点：1.代码量少，适配简单 2.一次处理后不需要在各个图表中再去单独适配。

2024-12-12 09:54:21 3756

原创 Object.assign 是深拷贝还是浅拷贝？

浅拷贝‌：只复制对象的指针，新旧指针均指向同一堆内存对象。如果使用新指针对对象进行操作，会影响原对象‌深拷贝‌：会在堆内存中另外复制存储一个一模一样的对象，新指针指向的是新对象而非旧对象。使用新指针对对象进行操作不会影响原对象‌Object.assign用于将一个或多个源对象的属性复制到目标对象中。它执行的是浅拷贝，而不是深拷贝。

2024-12-11 09:52:05 726

原创 CSS选择器 :is()、:where()、:not()、:has()

is():where():not():has():is()以上选择器有浏览器的版本兼容要求，请谨慎使用！

2024-12-10 10:22:08 1221

原创 URL构造器

在前端开发中，我们经常需要处理URL，例如在发起HTTP请求时构建API端点，或在页面导航时构建动态链接、拼接动态参数。过去，我们习惯于使用模板语法和字符串拼接来构建这些URL，现在在代码中依然可以看到新的代码还在使用这种方法。但这种方法不仅容易出错，而且在维护和阅读代码时也不够直观。本文将介绍更现代和更安全的URL构建方法，并展示如何在实际项目中应用它们。以上简单的介绍了一种方法处理来拼接url，欢迎大家一起讨论！

2024-12-09 09:26:20 727

原创详解localhost和127.0.0.1

前端开发的同学，在本地调试的时候，执行 npm run 就能在浏览器中打开你的页面窗口，地址栏显示的就是这个 'http://localhost:8088/index.html'。大家只是用，也没有去想过这个问题。localhost是本机域名，127.0.0.1是本机IP地址，localhost通过host文件会自动解析到127.0.0.1。

2024-12-05 16:34:50 4809

原创几种常见的javascript设计模式

最近开发HarmonyOSApp，使用的Arkts语言，此语言类似后端C#语言风格，同时兼顾写后端接口的我突然想总结一下近8年前端开发中无意中使用的设计模式，我们用到了却不知属于哪些，下面和大家分享一下。前端的设计模式，其实就是一种可以在多处地方重复使用的代码设计方案，只是不同的设计模式所能应用的场景有所不同。通过这种设计模式可以帮助我们提高代码的可读性、可维护性与可扩展性。以上示例不是实际项目代码，只是为了方便理解设计模式而写的简单示例。

2024-12-03 09:44:09 1256

原创前端开发遇到的一些权限控制问题

在前端开发中，权限控制是一个重要的功能，确保不同用户根据其权限访问不同的资源或功能。但是前端只能做一些基础的权限控制，想做到万无一失的权限访问控制必须后端进行配合，下面和大家分享一下自己在项目中用到的权限控制方式，开发语言使用Vue。前端权限控制不仅仅是页面和路由的访问权限，还包括按钮、操作权限的细粒度控制。它与后端的权限体系相辅相成，前端负责用户体验的优化与增强，而后端则负责核心的权限认证与校验。

2024-12-02 09:45:17 1032

原创 Javascript 图片懒加载

最近公司和第三方材料供应商对接开发了物资集采平台，其中有个功能需求需要展示数百张材料信息图片，有时页面会出现卡顿的情况，并使用了图片懒加载的方式进行了优化。下面把方法分享给大家一起学习。图片懒加载是一项简单而有效的前端性能优化技术，欢迎大家一起讨论其他更好的方法。

2024-11-29 09:46:18 816

原创 vue3 hook的使用

vue3 中的 hooks就是函数的一种写法，就是将文件的一些单独功能的js代码进行抽离出来，放到单独的js文件中，或者说是一些可以复用的公共方法/功能。其实hooks 和 vue2 中的 mixin 有点类似，但是相对 mixins 而言， hooks 更清楚复用功能代码的来源, 更清晰易懂。日常开发任务中的一次案例分享。

2024-11-28 10:04:14 480

原创一文搞懂＞＞＞、/deep/、::v-deep、::v-deep()和:deep() 的区别与用法

在Vue项目中，尤其是在使用组件化开发时，我们某些时候需要对组件内部的某些样式优化，但Vue的样式封装特性scoped）会阻止外部样式直接作用于组件内部。为了应对这一挑战，Vue社区引入了深度选择器（也称为穿透选择器或阴影穿透选择器），让我们能够跨越组件的封装边界，对内部元素进行样式定制。

2024-11-27 09:30:30 3975

原创推荐八个小而美的前端库

前端有很多小而美的库，接入成本很低又能满足日常开发需求，同时无论是 npm 方式引入还是直接复制到本地使用都可以。radash实用的工具库，相比与 lodash，更加面向现代，提供更多新功能（tryit，retry 等函数），源码可读性高，如果不想安装它，大部分函数可以直接复制到本地使用。React Hook Debouce 库，让你不再为使用防抖烦恼。库的特点：体积小 < 1 Kb、与 underscore / lodash impl 兼容 - 一次学习，随处使用、服务器渲染友好。timeago.js。

2024-11-26 10:09:49 414

原创前端适配：常用的几种方案

其核心原理就是rem,我们需要做的就是根据不同屏幕计算出不同的fontsize，而页面中元素都是用rem做单位，据此实现了自适应。为12px，那么1rem即12px，大家可以在网上寻找单位换算工具进行换算（从设计稿的px到rem）或是下载相关插件例如。与em不同，rem会根据html的根节点字体大小进行变换，例如1rem就是一个字体大小那么大，比如根大小。通过查询不同的宽度来执行不同的css代码，最终以达到界面的配置。查询来检测屏幕宽度。，这样在不同分辨率，不同缩放比的电脑下都能够轻松应对了。

2024-11-26 09:59:30 711

原创 Vue3编码规范

可读性高的代码,能减少代码理解的难度,在团队开发过程中,能有效的提高代码的可维护性,减少屎山代码.太过随意的代码,往往最容易形成屎山.

2024-11-25 15:29:31 1436

原创 TypeScript 必须改掉的 10 个坏习惯

随着 TypeScript 生态系统的进一步成熟，有些你以前觉得合理的做法，现在可能不太合理。接下来，我将分享10 个常见的 TypeScript 坏习惯，并告诉你如何改进它们，确保你的代码更健壮、性能更高、并且更加易于维护。依赖隐式类型检查而非明确的类型保护，可能导致你错过一些重要的类型问题。

2024-11-25 09:36:52 1033

原创前端通过插件实现office文件的在线预览

OnlyOffice是一个开源办公套件，包括用于文本文档、电子表格、演示文稿和可填写表单的编辑器。创建、编辑和查看文本文档、电子表格、演示文稿和可填写的表单;与其他团队成员实时协作处理文件。ONLYOFFICE Docs 还支持WOPI 协议，该协议用于将您的应用程序与在线办公室集成。

2024-11-25 09:16:22 1444

原创 iframe遇到过的“坑”（vue实例）

如果你是做web前端，那么不可避免早晚都会用到iframe的。其实博主很久前用过，但最近又要有项目用了，由于年代久远对iframe的注意事项都有点忘记了，然后想着总结一下比较需要注意的几个重点事项，除了便于高效工作还能分享给有需要用到iframe的小伙伴。

2024-11-22 09:58:13 1605

原创微信的消息订阅

文档里面都有现成的代码。

2024-11-22 09:29:13 660

原创鸿蒙开发：代码片段记录

包的是组件，而且只会在第一次打开时触发组件的。事件里做事件触发（可以使用emitter）的子组件中做一些事情，我们可以使用。@Entry修饰的页面的生命周期。@Entry修饰的页面的生命周期。，页面销毁时同时触发所有Tab的。来调用子组件的事件或访问其属性。使组件自适应沾满剩余空间。

2024-11-21 10:03:23 475

原创 File 和 Blob两个对象到底有什么不同

JavaScript 在处理文件、二进制数据和数据转换时，提供了一系列的 API 和对象，比如 File、Blob、FileReader、ArrayBuffer、Base64、Object URL 和 DataURL。每个概念在不同场景中都有重要作用。下面的内容我们将会详细学习每个概念及其在实际应用中的用法。Blob 是纯粹的二进制数据，它可以存储任何类型的数据，但不具有文件的元数据（如文件名、最后修改时间等）。

2024-11-21 09:46:21 1052

原创 vue3的宏到底是什么东西？

从vue3开始vue引入了宏，比如等。我们每天写vue代码时都会使用到这些宏，但是你有没有思考过vue中的宏到底是什么？为什么这些宏不需要手动从vue中import？为什么只能在setup顶层中使用这些宏？vue中的宏到底是什么？vue3的宏是一种特殊的代码，在编译时会将这些特殊的代码转换为浏览器能够直接运行的指定代码，根据宏的功能不同，转换后的代码也不同。为什么这些宏不需要手动从vue中import？

2024-11-20 11:21:45 1323

原创 Nginx 前端必会

这篇文章是关于 Nginx 的介绍，包括其在项目部署中的作用，如反向代理、负载均衡等。还介绍了 Nginx 的特点、下载安装、常用命令、实际应用中的配置，如设置不同端口和文件夹，解决跨域、缓存、https 等问题，最后给出了一个全面的配置示例，并总结了带小白学习 Nginx 的主要内容。

2024-11-19 09:36:41 1075

原创 Vue3 属性穿透

Vue3 属性穿透包括自动穿透和属性绑定两种自动穿透如果子组件只有一个根节点，父组件上的属性（class，id，style，事件，属性）就会向下流转到子组件的根节点上。属性绑定如果子组件有多个根节点，父组件上的属性流转到子组件时，不确定绑定到哪个根节点上，这时就需要手动绑定属性到节点。Vue3中，属性穿透让父组件的非props属性自动传递给子组件根元素。通过设置可禁用此功能以实现更精细控制。禁用后，利用$attrs手动绑定未声明的属性至所需位置，确保了属性传递的灵活性与可控性。

2024-11-18 10:30:29 922

原创 Vue3.5正式上线，父传子props用法更丝滑简洁

Vue3.5在2024-09-03正式上线，目前在Vue官网显最新版本已经是Vue3.5，其中主要包含了几个小改动，我留意到日常最常用的改动就是props了，肯定是用Vue3的人必用的，所以针对性说一下props的两个小改动使我们日常使用更加灵活。这次更新其实props的本质功能并没有改变，但写法确实变的更加丝滑好用了，props使用非常高频感觉还是有必要跟进这种更简洁的写法。

2024-11-15 11:08:00 1041

原创 Javascript 金额高精度处理

想必大家在用js 处理数字的加减乘除的时候，或许都有遇到过精度不够的问题，还有那些经典的面试题 0.2+0.1!== 0.3，至于原因，那就是 js 计算底层用的是 IEEE 754 ，精度上有限制，那么Decimal.js就是帮助我们解决 js中的精度失准的问题。精度丢失用例。

2024-11-14 10:13:51 668

原创值得一看的前端代码片段

在日常的开发过程中，我们都会有一些常用的代码片段，这些代码片段可以直接复制到各个项目中使用，非常方便。如果你有接手过别人的项目，就可以很明显感受到几个项目一般都会有一些相同的工具类方法，这些方法就是之前开发者的常用代码片段。现在前端社区相当完善，有许多好用质量又有保证的库，如 lodash、dayjs、classnames、js-cookie 等，这些库基本能满足你开发中对数组、日期、类名、cookie 等的处理。

2024-11-13 10:41:16 768

原创 Vue3.5新增的useId到底有啥用？

Vue 3.5中新增的useId函数主要用于生成唯一的ID，这个ID在同一个Vue应用中是唯一的，并且每次调用useId都会生成不同的ID。这个功能在处理列表渲染、表单元素和无障碍属性时非常有用，因为它可以确保每个元素都有一个唯一的标识符。useId的实现原理相对简单。它通过访问Vue实例的ids属性来生成ID，这个属性是一个数组，其中包含了用于生成ID的前缀和自增数字。每次调用useId时，都会取出当前的数字值，然后进行自增操作。

2024-11-11 10:11:24 1712

原创鸿蒙Banner图适配不同屏幕

随着终端设备形态日益多样化，分布式技术逐渐打破单一硬件边界，一个应用或服务，可以在不同的硬件设备之间随意调用、互助共享，让用户享受无缝的全场景体验。而作为应用开发者，广泛的设备类型也能为应用带来广大的潜在用户群体。但是如果一个应用需要在多个设备上提供同样的内容，则需要适配不同的屏幕尺寸和硬件，开发成本较高。HarmonyOS系统面向多终端提供了“一次开发，多端部署”的能力，让开发者可以基于一种设计，高效构建多端可运行的应用。

2024-11-07 09:31:38 263

原创鸿蒙 Context

Context是应用中对象的上下文，其提供了应用的一些基础信息，例如resourceManager（资源管理）、applicationInfo（当前应用信息）、dir（应用文件路径）、area（文件分区）等，以及应用的一些基本方法，例如createBundleContext()、getApplicationContext()等。UIAbility组件和各种ExtensionAbility派生类组件都有各自不同的Context类。

2024-11-06 10:28:46 505

原创 HarmonyOS 处理启动页跳转到首页问题

在使用Navigation时时，你是否遇到了这样一个问题，Navigation加载启动页为入口，在启动页replace到首页，使首页替换换启动页，结果发现不生效，启动页依然存在。这种方式虽然也可以，但总觉得还要手动通过if来切换页面，不是那么的优雅。为什么不能统一用NavPathStack来切换页面呢？

2024-11-05 09:17:18 642

Vue核心技术 Vue+Vue-Router+Vuex+SSR实战精讲

JavaScript玩转机器学习-Tensorflow.js项目实战

空空如也