- 博客(178)
- 资源 (12)
- 收藏
- 关注
RSS订阅原创 使用 nvm 为多项目设置不同 Node.js 环境，被同事们集体点赞了 ！
nvm 是一个免费开源的命令行工具，允许在一台计算机上安装和切换多个 Node.js 版本。它支持 Linux、macOS 和 Windows 等操作系统，是许多开发者的首选工具。在多项目开发环境中，不同的项目可能依赖于 Node.js 的不同版本。例如，一个旧项目可能需要 Node.js v12 以确保兼容性，而新项目可能要求 v18 或更高版本以利用最新的特性和性能改进。在这种情况下，手动管理每个项目的 Node.js 版本变得既繁琐又容易出错。
2024-12-11 11:08:40
736
原创 前端小工具 FlyHttp 代码提示指南：让你的开发更高效
axios.ts文件中应该有以下代码，其主要作用是二次封装axios， 主要配置一些全局参数，请求拦截器和响应拦截器等，视项目情况而定，原则：简单、易用、适度即可！// 配置新建一个 axios 实例})// 添加请求拦截器// 添加响应拦截器// 构建一个 FlyHttp 实例// 导出FlyHttp内部模块提供了基础的Type定义，导入部分定义即可以实现基础的代码提示，以用户模块为例user.ts，看一下如何使用代码提示！
2024-12-11 11:03:08
424
原创 FlyHttp 的最佳实践：加速项目级 API 请求构建
FlyHttp 模块提供了两种构建模式，一种是直接使用我们已经二次封装的好的 http 实例，使用 http 实例有一些规则要求，主要参考 axios 设计，如果不支持这种方式，我也提供了另一种自定义函数的方式来兼容，总之可以兼容大部分请求形式！
2024-12-04 10:55:43
658
原创 FlyHttp 的使用：如何高效使用 FlyHttp，支持 JS、TS 项目
使用http实例，可能有时候会有一定的耦合性，极端情况下（可能有我没有用的请求库，请求格式不统一等）有可能会不符合要求，因此提供一个自定义函数的入口，可灵活使用！参考第2.2部分，在中使用，使用ajax的构建方案!// 1. 创建 ajax 实例data,headers,})// 2. 创建 FlyHttp 实例})t=O83ANPM 仓库地址https://www.npmjs.com/package/@anyup/flyit。
2024-12-04 10:32:29
344
原创 FlyHttp 的诞生：从认识各种网络请求开始
首先介绍一下，FlyHttp 是一个自动生成前端代码service层的工具，目的就是要解放你的双手，化繁为简，可降低代码量99%！在开发前端项目时，尤其是目前绝大多数的项目都是前后端分离式开发的形式，因此我们经常需要对接后端接口，进行前后端交互。而基于这些，就出现了琳琅满目的前端请求框架！从最初的到ajaxFetch API，再到axios，各种各样的搭配不同框架的网络请求库应运而生，它们服务于不同的前端框架，进行优秀的前后端数据交互，给我们前端开发者提供了便利性。
2024-11-28 17:22:15
864
原创 ECharts 地图合规整改，实现一个最基础的中国地图
ECharts 是一个基于 JavaScript 的开源可视化图表库，提供了丰富的图表类型和交互功能。其中，地图组件是 ECharts 中非常实用的一个功能，可以帮助我们快速搭建数字信息可视化页面。其中，在这些可视化组件中，地图组件是 ECharts 的一大亮点，使得在数据可视化中展示地理信息变得简单而直观。本文将重点介绍如何利用 ECharts 地图组件展示中国地图的开发方法，包括加载地图、自定义地图样式以及添加各种数据标记等操作。
2024-11-28 16:50:19
832
原创 uni-app 自定义平台如何进行 static 目录的条件编译
关于如何自定平台，由于官方不支持创建自定义平台下的 static 目录，例如以下方式，会被认为是一个普通文件夹，将会在所有平台被打包进去。┌─static│ └─c.png├─main.js├─App.vue因此，在这里提供一种思路，可以支持自定义平台的打包策略，可以利用分包实现。在pages.json中定义页面地址，配合使用条件编译实现。"pages": [],"pages": [// #endif因为编译器根据。
2024-11-27 09:51:23
967
原创 玩转 uni-app 静态资源 static 目录的条件编译
uni-app 可以同时支持编译到多个平台，如小程序、H5、移动端 App等。它的多端编译能力是 uni-app 的一大特点，让开发者可以使用同一套代码基于 Vue.js 的语法编写程序，然后通过 uni-app 的编译工具将代码转换成适用于不同平台的代码，极大地提高了开发效率和跨平台开发的便捷性。之前的文章让我们清晰的认识到 uni-app 的条件编译知识，以及如何进行自定义平台的条件编译。
2024-11-27 09:48:28
1403
原创 uni-app 玩转条件编译：自定义平台的条件编译实战详解
在开发 Web 时，可能有时候需要将同一套代码编译发布到不同的站点，比如多个不同的微信 h5 站，这些站点可能有不同的差异性处理。在开发小程序时，也经常有扩展小程序平台，比如同一套代码，我需要发布到多个小程序，可能这些小程序之间少许有些差异。因此，uni-app 通过在文件中增加 uni-app 扩展节点，可实现自定义条件编译平台。在我之前开发的实际项目中，同一套代码需要部署多个平台，大概有10个平台，而且这几个平台可能有90%以上的代码是相同的，因此我就没有必要重新开发一套代码了。
2024-11-22 10:55:10
1308
原创 uni-app 认识条件编译，了解多端部署
在使用 uni-app 进行跨平台开发的过程中，经常会遇到需要针对不同平台或不同环境进行条件编译的情况。条件编译是一种在编译过程中根据指定条件选择不同代码路径的技术，可以帮助我们在不同平台或环境下编写不同的代码，以适应不同的平台实现逻辑。在 uni-app 中，可以说条件编译是 uni-app 实现多端部署的核心思想，通过条件编译，我们可以根据当前的平台、环境或配置选项来控制代码的执行逻辑，从而实现定制化的开发需求。在我之前的开发项目中，不止需要已有平台的条件编译，还涉及到自定义平台条件编译。
2024-11-22 10:51:25
1223
原创 一文读懂 uni-app 中的尺寸单位 rpx
rpx 单位作为小程序开发中的一个相对长度单位，它是如何实现在不同屏幕密度下元素的自适应显示的呢？rpx 是可以根据屏幕宽度进行自适应的相对单位。规定屏幕宽为 750rpx。如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素。在小程序中，1rpx 代表屏幕宽度的 1/750，也就是屏幕宽度除以 750。屏幕宽度是指屏幕的物理宽度，单位是 px。
2024-11-13 09:39:02
1059
原创 关于 JavaScript 对象不变性，你了解吗？
本文简单介绍了几种可以用于使 JavaScript 不可变的方法。简而言之，Object.seal()方法会阻止更新、删除和向对象添加新属性，Object.seal()只会阻止添加和删除属性。除此之外，JavaScript 还提供了一个 Object.preventExtensions()方法，该方法可以让一个对象变的不可扩展，也就是永远不能再添加新的属性。name: "张三",age: 24,// {name: '张三', age: 24}不变性的优点减少副作用。
2024-11-13 09:38:19
1024
原创 uni-app 图标库整合最佳实践：使用 iconfont 构建属于自己的图标库
阿里巴巴矢量图标库是一种图标字体库，它将图标转换为字体的形式，并通过unicode编码进行引用。通过使用iconfont，开发者可以使用字体图标代替传统的图片图标，以提高网页加载速度和图标的灵活性。iconfont中的图标可以使用 CSS 进行样式控制，并且可以根据需要进行缩放、颜色调整等操作，非常方便。官方链接：iconfont - 阿里巴巴矢量图标库通过本篇文章，我们了解了在前端项目中使用 iconfont 自定义图标库的方法和步骤。
2024-11-06 10:18:06
1395
原创 前端性能优化 ｜ 响应式布局、响应式图片最全解析
直接切入正题，首先，什么是响应式？同一个页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就好了，缺点是CSS比较重。
2024-11-02 14:12:12
1109
原创 总结 JavaScript 中8种数组常用的操作 API，array.push,pop,shift,unshift,slice,splice,concat,join
JavaScript中数组是一个重要的数据结构，它相比于字符串有更多的方法，在一些算法题中我们经常需要将字符串转化为数组，使用数组里面的API进行操作。
2024-10-31 15:55:43
280
原创 window.print 实现简单浏览器打印功能
一般信息填写类的需求页面，都会增设「预览」和「打印」功能。我们会通过编写 DOM 及样式来绘制出预览视图，而打印则是基于预览来生成 PDF 文件。浏览器原生 API可以用于打印当前窗口（window.document）视图内容。调用此方法会产生一个打印预览弹框，用户可以根据具体设置来得到打印结果。接下来将从代码层面带领大家熟悉「打印」的使用。当需要自定义打印分页时机时，可通过如下方式将指定 DOM 设为分割点。1.在指定元素前添加分页符h1 {2.在指定元素后添加分页符h1 {
2024-10-31 15:50:03
999
原创 重学前端 File、Blob、FileReader 基础知识学习
JavaScript 提供了一些 API 来处理文件或原始文件数据，例如：File、Blob、FileReader、ArrayBuffer、base64 等。下面就来看看它们都是如何使用的，它们之间又有何区别和联系！以上，我们了解了几种在 JavaScript 中的一些 API 来处理文件或原始文件数据，包括：File、Blob、FileReader，当然还有其他的一些包括ArrayBuffer、base64等，接下来的文章也会对其他的 API 进行讲解，敬请关注！
2024-10-30 13:30:25
1208
原创 ES6 WeakMap 的使用场景和注意事项
WeakMap的基础知识请看上一篇文章：ES6 WeakMap 基础详解WeakMap 也有自己的使用场景和使用注意事项。在使用它的时候，我们需要理解它的局限性，并针对特定的使用场景做出正确的设计和使用。到这里，我们应该已经了解了 JavaScript 中的 WeakMap 数据结构的基本操作和注意事项。通过弱引用的特性，WeakMap 提供了一种私有性的数据存储方式，能够有效保护与键对象相关的私有数据。在使用 WeakMap 时，我们需要注意键必须是对象、无法迭代和获取长度等限制。
2024-10-30 10:47:24
1064
原创 JavaScript 二进制之间的格式转化，了解 Object URL 和 Base 64
Base64 编码普遍应用于需要通过被设计为处理文本数据的媒介上储存和传输二进制数据而需要编码该二进制数据的场景。Object URL（MDN定义名称）又称Blob URL（W3C定义名称），是HTML5中的新标准。其实 Blob URL/Object URL 是一种伪协议，允许将 Blob 和 File 对象用作图像、二进制数据下载链接等的 URL 源。可以将Blob/File对象转化为URL，通过这个URL 就可以实现文件下载或者图片显示等。方法创建将给出的对象的 URL。
2024-10-29 13:31:22
904
原创 10 个高效地操作 JavaScript 对象的开发技巧
本文总结了10 个开发技巧，通过以上的这些技巧，可以更加高效地操作和使用 JavaScript 对象。
2024-10-29 13:27:19
563
原创 JavaScript 类型转换：数字转换和 Symbol 类型转换
上面的例子中，可以清楚地看到一些意想不到的结果：将null转换为数字时返回了 0，而将undefined转换为数字返回了NaN。两个操作都应该返回NaN，因为这两种值类型显然都不是有效的数字，将空字符串转换为数字时也返回了 0。下面是 ECMAScript 规范中将数据类型转换为字符串的规则，清楚的解释了上面的异常现象：另外，在 ECMAScript 规范中，还提到一点：为空或仅包含空格的 StringNumericLiteral 将转换为 +0。这也就解释了为什么将空字符串转换为数字时也返回了 0。
2024-10-27 10:35:32
1001
原创 深入理解 CommonJS 规范：模块化之道
在 Web 开发中，模块化是一项重要的技术，它能够将复杂的代码拆分为可重用的模块，提高开发效率和代码管理。在 JavaScript 领域，CommonJS 是一种广泛使用的模块化规范，为 JavaScript 提供了一种模块化的方案。本文将介绍 CommonJS 的概念、特点以及在 JavaScript 开发中的重要性，帮助读者更好地理解和应用 CommonJS 规范。CommonJS 是一种 JavaScript 模块化的规范，旨在提供一种标准的方式来组织和管理 JavaScript 代码。
2024-10-27 10:31:46
810
原创 一文彻底理解 JavaScript 解构赋值
第一种（第 3 行）是对象解构的完整形式，对象的每个属性都将被分配一个变量，其中冒号前面的是源对象中的属性，冒号后面的是要赋值属性;这里需要注意，需要将赋值表达式使用括号括起来，如果省略，解构对象将被视为一个块语句，而块语句是不能放在赋值表达式左侧的。第二种（第 5 行）是对象解构的简写形式，对象的属性与要分配的属性一致时可以使用这种形式。对象解构又称为对象属性分配模式，它允许我们将对象的属性值分配给相应的变量。在数组的解构中，存储变量的数组中的每个变量都会映射到解构数组上相同索引处的相应项。
2024-10-26 21:07:20
888
原创 Promise、async、await 、异步生成器的错误处理方案
它和 Promise.all 类似，不过不会被短路，也就是说当 Promise 全部处理完成后，可以拿到每个 Promise 的状态, 而不管其是否处理成功。因为异步生成器是基于 Promise，所以同样适用 Promise 的错误处理规则，在异步生成器中，throw 会导致 Promise 拒绝，可以用 catch 拦截它。任何错误都可以从外部用 catch 拦截。如果这些 Promise 中的任何一个被拒绝，Promise.all 将拒绝并返回第一个被拒绝的 Promise 的错误。
2024-10-26 21:04:55
755
原创 JavaScript 的异步错误处理之定时器、事件、onerror、Promise
不过这样做并不是最佳的处理方式，与 setTimeout 一样，异步代码路径抛出的异常无法从外部捕获，并且会使程序崩溃。我们知道，try/catch 是同步的，所以没办法这样来处理异步中的错误。需要记住，任何传递给 then/catch/finally 的回调都是由微任务队列异步处理的。我们可以监听页面中任何 HTML 元素的事件，DOM 事件的错误处理机制遵循与任何异步 Web API 相同的方案。从技术上讲，这段代码中没有任何异步的内容，但它可以很好地说明 Promise 的错误处理机制。
2024-10-25 09:49:38
828
原创 深入解析 JavaScript 布尔操作符和比较操作符
逻辑与操作符是一种短路操作符，只要第一个操作数为 false，就不会继续执行运算符后面的表达式，直接返回 false。逻辑与操作符的两个操作数都为真时，最终结果才会返回真。在开发时，布尔操作符是很有用的，可以精简很多代码，干掉很多多余的 id-else 语句，下面来看看常见的三种布尔操作符。逻辑或操作符也是具有短路特性，如果第一个操作数为真，那么第二个操作数就不需要在进行判断了，会直接返回 true。需要注意，如果其中一个操作数是 NaN，相等运算符会返回 false，不相等运算符会返回 true。
2024-10-25 09:46:26
724
原创 一文理解 JavaScript 中常见的7种错误类型，以及创建自定义错误类型
在使用 JavaScript 进行开发过程中，错误是难以避免的。当我们编写的代码违反了语法规则、引用未定义的变量、错误地操作数据类型或超出有效范围时，JavaScript 会抛出各种错误。这些错误不仅会导致代码执行失败，还可能引起不可预料的问题，给开发者带来不便和困扰。了解 JavaScript 中常见的错误类型及相应的解决方法，对于快速定位和修复问题至关重要。本篇文章将介绍一些常见的 JavaScript 错误类型，帮助开发者更好地理解错误，进而更好的处理错误。
2024-10-24 10:33:16
975
原创 重学前端之认识 JavaScript 中的一元操作符和二元操作符
操作符可以根据他们期待的操作符个数来分类，多数的 JavaScript 操作符都是二元操作符，二元操作符可以将两个表达式合成一个更复杂的表达式。JavaScript 也支持一元操作符，这些操作符可以将一个表达式转化为另一个更复杂的表达式。同时，JavaScript 中也有一个三元操作符，就是条件操作符（?:），它用于将三个表达式组成一个表达式。
2024-10-24 10:28:52
1093
原创 总结几种 JavaScript 常见的字符串转换和布尔转换方式
ECMAScript 规范查看：https://262.ecma-international.org/5.1/#sec-9.8除了下面这些之外的所有其他值都是真值，包括对象、数组、日期等。甚至所有Symbol、空对象和数组都是真值。// false// false// false// false// false// false// 输出结果：[false, false, true, false, false, false]
2024-10-23 09:22:57
1260
原创 深入浅出 AMD 模块化使用
CommonJS 的缺点之一是它是同步的，AMD 旨在通过规范中定义的 API 异步加载模块及其依赖项来解决这个问题。AMD 全称为 Asynchronous Module Definition，即异步模块加载机制。它规定了如何定义模块，如何对外输出，如何引入依赖。AMD规范重要特性就是异步加载。所谓异步加载，就是指同时并发加载所依赖的模块，当所有依赖模块都加载完成之后，再执行当前模块的回调函数。这种加载方式和浏览器环境的性能需求刚好吻合。// 模块内容});
2024-10-23 09:17:04
622
原创 uni-app 扫码插件推荐：基于支付宝 mPaaS 扫码组件开发，支持 Android 和 iOS
mPaaS 扫码组件是支付宝的扫码组件，目的是可以让我们的 APP 拥有像支付宝一样的扫码体验，识别速度、识别率远超开源扫码。扫码组件完全免费提供使用，但是接入时需要在阿里云上进行注册开通并添加项目。
2024-10-22 11:37:27
2688
1
原创 前端模块化技术 IIFE、CMD、UMD
前文介绍了在 Web 开发中，模块化是一项重要的技术，比如：AMD、RequireJS、CommonJS、ES6 Module。模块化的贯彻执行离不开相应的约定，即规范。这是能够进行模块化工作的重中之重。实现模块化的规范有很多，比如除了之前介绍的以外：CMD、SeaJS、UMD、ES6 Module。还有，IIFE（立即执行函数）也是实现模块化的一种方案。本文将会对其他的几种模块化技术进行说明。
2024-10-22 10:54:49
951
原创 ES 模块的用法
模块化是一种将系统分离成独立功能部分的方法，可以将系统分割成独立的功能部分，严格定义模块接口，模块间具有透明性。通过将代码进行模块化分隔，每个文件彼此独立，开发者更容易开发和维护代码，模块之间又能够互相调用和通信，这就是现代化开发的基本模式。模块化的贯彻执行离不开相应的约定，即规范。这是能够进行模块化工作的重中之重。实现模块化的规范有很多，比如：AMD、RequireJS、CMD、SeaJS、UMD、CommonJS、ES6 Module。除此之外，IIFE（立即执行函数）也是实现模块化的一种方案。
2024-10-22 10:52:57
958
原创 理解 JavaScript 对象类型转换
当需要将对象转换为数字时，Javascript 首先使用 ToPrimitive 算法（Hints = “number”）将其转换为原始类型，然后将派生的原始类型转换为数字。当需要将对象转换为字符串时，Javascript 首先使用 ToPrimitive 算法（Hints = “string”）将其转换为原始类型，然后将派生的原始类型转换为字符串。但是，与对象到数字的转换不同，返回的原始值不会转换为数字（因为它们被比较并且不被使用）。时，都会先将对象转换为原始类型，然后将其转换为最终类型。
2024-10-21 09:53:54
710
原创 理解 JavaScript 的显示类型转换和隐式类型转换
Javascript 是一种弱类型语言，这意味着变量是没有明确类型的，而是由 JavaScript 引擎在编译时隐式完成。2 - "x"Javascript 使用严格相等（===）和宽松相等（==）来测试两个值的相等性，类型转换仅在使用宽松相等运算符时发生。在上面的代码中，10 和 10 都是数字并且是完全相等的，所以正如预期的那样返回了true，两个 NaN 永远不会相等。对于任何数据类型，无论是原始类型还是对象，都可以进行类型转换。字符串（string）、数字（number）、布尔值（boolean）
2024-10-21 09:51:27
555
原创 探索 Web Audio API 的奇妙世界
Web Audio API 是一组用于处理和生成音频的 JavaScript 接口。它提供了音频的输入、控制和输出功能，使我们能够在浏览器中创建出色的音频应用程序。无论是游戏音效、音乐播放器、语音识别还是实时音频处理，Web Audio API 都能助您一臂之力。Web Audio API 是一个非常强大且有趣的工具，它让我们能够在网页中探索音频的奇妙世界。无论您是想创建音乐应用、游戏效果还是实时音频处理，Web Audio API 都将是您的好帮手。开始利用它的强大功能，创造出令人惊叹的音频应用！
2024-10-20 10:16:06
1037
原创 7 分钟了解 flatMap 的使用及实现原理，并实现一个简易版的 flatMap
在 JavaScript 中，数组方法是开发中经常用到的工具之一，也是在面试中经常提到操作数组的方法，其中的flatMap方法是一个非常实用且强大的方法。flatMap方法可以在一个操作中同时对数组进行映射和展平，帮助简化代码并提高效率。flatMap方法可以让我们对数组进行一系列的操作，并返回一个新的扁平化数组。本篇文章将介绍flatMap的使用方法和原理解析，并且按照原理实现一个简易版的flatMap。了解flatMap方法的实现原理很关键。flatMap。
2024-10-20 09:46:53
2114
原创 文字跑马灯：实现文字自动滚动策略的原理分析
在本文中，我们详细分析了如何实现文字跑马灯效果，通过判断文字内容是否超出容器，进而实现自动滚动的功能，为网站添加了一个引人注目的动画效果。下面我来进行总结一下，实现文字滚动效果有以下几个要点：判断文字的宽度是否超出：使用API 获取文字的宽度，使用API 获取容器的宽度，当，触发文字滚动。实现文字滚动动画：使用transform动画实现文字滚动效果。文字跑马灯作为一种常见的动画效果，可以吸引用户的注意力。
2024-10-18 09:32:49
1308
Android Fragment嵌套ViewPager，ViewPager嵌套多个Fragment
2016-03-27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人