JavaScript中数组元素的数据类型是不固定的，number类型可以是整数也可以是浮点数。这种性质与其它常见语言中的定型数组很不一样，导致不同语言编写的程序在交换数据的时候，需要花费很多时间在数据转换上。 ECMAScript后来引入了定型数组TypedArray。TypedArray并不是一个实际存在的数据类型，而是一系列定型数组类型的统称，它包含了Int8Array、Uint8Array、Int16Array、Uint16Array、Float32Array等等。 这些定型数组只是一种“视图”，通过一种指定的方式解读内存中的二进制数据。 ArrayBuffer 在JavaScript中...
本文介绍了通过uniapp技术实现了一套栀子手作在线购物商城系统。包含首页、分类、我的等常用功能入口。 一、功能演示 首页：包含了商品介绍，领劵中心和商品列表区域。 商品分类：支持不同的商品分类和商品搜素。 商品详情：包含了商品详细的描述信息，透出了分享、首页、客服等入口。 我的：包含了账户的常见的个人操作信息，知乎此领劵，在线客服，钱包管理等入口。 H5端在线体验地址：https://wx.gaoredu.com/ 微信小程序：可以直接搜索“栀子手作”进入在线体验。 二、开发流程 2.1项目准备与搭建 1.环境搭建 首先，确保你已经安装了Node.js和HBuilderX，因为u...
前言 前端导出表格有很多种方案，但是表格样式一旦复杂了，那么就得用代码写excel的样式，还是比较麻烦的。每次样式不一样，就得重新写，这时使用表格模板的优势就体现出来了，想导出不同样式的表格直接修改表格模板即可。 方案 我找了两种方案：1、使用xlsx-template，利用模板语法在xlsx中占位填充后编辑导出。2、使用exceljs，读取模板后，利用行列坐标定位编辑后导出。两种我都尝试过，第一种方案类似我这篇文章(https://xiblogs.top/?id=27)中使用的docxtemplater，只不过是docx换成了xlsx，但xlsx-template在浏览器端的兼容不如docx...
首页样式图 以下是关于装修的选择 博客侧边栏公告 <scripttype="text/javascript"> window.cnblogsConfig={ GhVersions:'v1.3.3',//版本 blogUser:"Mr.小扎仙森",//用户名 blogAvatar:"https://pic.cnblogs.com/avatar/2544042/20210913145657.png",//用户头像 blogStartDate:"2021-09-13",//入园时间，年-月-日。入园时间查看方法：鼠标停留园龄时间上，会显示入园时间 //menuUserInf...
当我们点击树节点的时候我们常常只能获得树的id，那么我么如何获快速定位到树节点的内容呢，除此之外，当树已经存在时，但是缺少我们想要的内容时，我们想在树节点上添加我们需要的额外的内容时该怎么办，那么就是用以下方法可以快速定位到我们需要的节点并可以快速添加内容 / @params data：树节点 key：需要传的id（具体就是树节点唯一值就可以具体对于树而言） callback：更新节点的状态,收集特定类型的节点信息,修改节点的数据属性等。 node：当前节点的所有数据 i：这个索引帮助我们理解 data：这个参数提供了当前层级所有节点的信息，可以用于上下文相关的操作。当前节点在其兄弟节点中的相...
Vite是一个前端构建工具，它以其快速的开发服务器和生产优化的打包器而闻名前端界，今天的内容，必须得唠唠Vite的关键能力，以下是Vite的核心组件分析，以及使用案例： 原理分析： Vite利用了现代浏览器对ESModule语法的支持，在开发环境中不进行打包编译，而是通过启动本地devServer来提供服务，从而显著提高了启动速度。 在开发过程中，Vite按需加载页面所需的模块，而不是一次性编译整个项目。 Vite使用esbuild进行依赖预构建，将多种模块化规范转换为ESM，并减少网络请求。 Vite通过HTTP缓存和文件系统缓存优化性能，利用es-module-lexer和magic-...
JavaScript应用程序通常依赖于许多外部库，这些依赖项通常通过包管理器来管理。默认情况下，Node.js使用NPM作为包管理器。 由于早期的NPM存在各种不足，社区后来开发了Yarn和pnpm作为替代品。 如果要使用Yarn和pnpm，则需要先通过NPM进行安装。 早期NPM的不足 依赖树过深在NPM3.0之前，NPM使用了嵌套依赖树的结构。这意味着如果一个项目的多个依赖项需要同一个包的不同版本，NPM会在每个依赖项的目录中重复安装该包。这种结构会导致node_modules目录非常深，特别是在Windows系统中，这可能导致路径长度限制的问题。 重复安装和磁盘空间浪费每次安装包时都...
定义 堆是一棵完全二叉树。分为大顶堆和小顶堆大顶推：所有节点都大于等于它的两个子节点小顶堆：所有节点都小于等于它的两个子节点 伪代码 推排序步骤，以升序排列为例，用大顶堆。（降序排列，用小顶堆） 构建大顶推 把堆顶元素和堆尾元素交换，此时堆尾元素是最大的，堆的大小减一 堆顶元素下沉到指定位置 重复2-3步，直到堆的大小为1 关键在于如何构建一个大顶堆（对节点进行下沉）:从最后一个非叶子节点开始；逐个检查每个节点，如果一个节点的值小于其子节点的值，我们就将它与较大的子节点交换位置；交换后，这个交换后的节点可能导致不满足堆的特性，因此还需要继续下沉（Heapify) 举个例子 需要注意的是：...
本文主要内容： screenX和screenY， clientX和clientY/x和y pageX和pageY layerX和layerY 在处理鼠标事件（MouseEvent）时，了解不同的坐标系是非常重要的。常见的坐标系包括屏幕坐标（screen）、客户端坐标（client）、页面坐标（page）、图层坐标（layer），以及偏移坐标（offset）。这些坐标系各自有不同的用途，理解它们的区别有助于我们更精确地处理用户交互事件。本文将深入探讨这些坐标系的含义及其应用场景。 1.屏幕坐标（ScreenCoordinates） 屏幕坐标表示鼠标相对于整个屏幕的位置。无论网页在浏览器窗口中...
当数组中存在空位时，遍历数组需要选择合适的方法，不同的方法可能返回不同的结果。 示例数组： constarr=[1,2,,3,4]; 数组空位不会影响数组长度，arr的长度是5。 for循环 最朴素的for循环会遍历到数组的每一位，对于空位，访问时返回undefined。 for(leti=0;i<arr.length;i){ console.log(arr[i]); } 输出： 1 2 undefined 4 5 forEach方法 forEach方法会跳过空位，所以这里只遍历到了4个数。 arr.forEach(el=>{ console.log(el); }); 输出...
我不是换hexo了吗，一直是使用SpckEditor写文章，每次写好文章都要push一次，非常麻烦，最近在群友那了解到有GithubAction自动化部署，可以写好文章自动部署到githubpages，而且github的编辑器也是非常好用的，写好提交就能自动发送，–怎么有点像SSR了–，于是我就开始了这一个半小时的折腾…没有电脑，使用安卓设备折腾！ 如果你没有Hexo博客，那么请看这里，如果有那就请跳过本节 新建一个Hexo博客，这里使用ZeroTermux操作。打开ZeroTermux，运行： pkginstallnodejs 安装完成之后使用 node-v npm-v 结果如下或类似即...
ECharts是一款由百度开源的数据可视化工具，它提供了丰富的图表类型，如折线图、柱状图、饼图、散点图、雷达图、地图、K线图、热力图、仪表盘等，以及丰富的交互功能。ECharts组件的核心功能实现原理主要包括以下几个方面： 数据驱动：ECharts采用数据驱动的设计理念，图表的生成和更新都是基于数据的。用户通过设置option对象来描述图表的配置，包括数据、坐标轴、系列类型、图例等信息。 Canvas或SVG渲染：ECharts支持使用Canvas或SVG作为底层渲染引擎。Canvas适合动态或实时的图表渲染，而SVG适合静态或交互较多的图表。ECharts默认使用Canvas渲染。 响应式...
公司项目一般都是使用集团封装好的脚手架，脚手架内部实现咱看不到也摸不着，好不容易组内推行新的UI框架，需要自行定义webpack配置，这可是个绝佳的好机会，我对配置过程进行了梳理，把商业项目的成熟配置小跑着送上。 初始化 首先新建一个空文件夹，执行npminit初始化生成package.json文件。 创建src文件夹，项目的业务代码都放在这里，再创建index.js，这是项目的入口文件，待会使用webpack来打包项目，就从index.js文件开始。 大家都知道，webpack在开发和生产时部分配置是不同的，比如在开发时，我们希望代码能够即改即生效，能够立马在页面中看到效果，需要devSer...
什么是WebComponent WebComponent是一套Web浏览器的技术和规范，能够让开发者定制自己的HTML元素 来自MDN的描述： WebComponent是一套不同的技术，允许你创建可重用的定制元素（它们的功能封装在你的代码之外）并且在你的web应用中使用它们。 WebComponent由三项技术组成： Customelement（自定义元素）：创建一个自定义元素，并自定义其行为。 ShadowDOM（影子DOM）：将若干元素封装成独立的DOM，并且与主文档DOM分开呈现，互不影响。 HTMLtemplate（HTML模板）：用于定义可重用的HTML，在HTML中使用类似于...
在做项目的时候，Web端需要适配移动端，且部分参数需要判断对应系统或浏览器。 在IOS中，因为高版本的系统Safari浏览器采用了Mac的内核，所以导致普通的判断无法识别到对应系统。(userAgent.match(/(Macintosh)/)&&navigator.maxTouchPoints>1)能有效识别是apple产品，且是触屏的，通过此方法能识别高版本的IOS_Safari。 Navigator 接口的 maxTouchPoints 只读属性返回当前设备支持的最大同时触摸接触点数。 if(navigator.maxTouchPoin...
官网提供的按需引入方法为全量按需引入，在打包分离中，仍旧存在使用不到的图表被打包进去。 例如：组件A使用了折线图、柱状图，组件B只用到了折线图，但是打包组件B的时候，柱状图也会被打包进去。 本文提供一种动态按需引入的思路，使得只用到折线图的组件B，打包的时候只打包折线图，不会将组件A用到的柱状图也打包进去。 目录结构： Index.ts如下： //引入echarts核心模块，核心模块提供了echarts使用必须要的接口。 importasECHARTSfrom"echarts/core"; importtype{ComposeOption}from"echart...
内存管理简介 内存管理是控制和协调软件应用程序访问计算机内存的方式的过程。 当一个程序运行在某个操作系统上时，进程需要拥有对RAM的访问权限，以实现： 载入程序需要执行的字节码； 存储正在执行的程序所使用的数据值和数据结构； 载入程序执行所需的任何运行时系统。 一个进程在启动时，会向操作系统申请内存空间。一个进程的内存空间被分为多个区域，其中最主要的两个区分别是栈区和堆区。 栈区 栈区的内存分配符合栈先进后出这一特性，并且栈区的大小通常是固定的。 与堆区不同，栈区的变量查询比较简单，且通常只在栈顶进行数据的存储和读取，只需要维护一个栈指针即可，读写操作非常快； 存储在栈中的数据必须在编译...
PageVisibilityAPI 在做考试系统或者网课系统的时候，通常需要监测用户是否隐藏了当前标签页在看其它页面。 PageVisibilityAPI提供了一个事件和两个状态来监测页面可见性，可以用它来判断用户是否切屏。 visibilitychange 这个事件会在页面可见性变化时触发。（隐藏时、打开时） //使用addEventLisitener document.addEventListener('visibilitychange',(e)=>{ console.log('visibilityState:',document.visibilityState); }); //或...
前言 在现代Web开发中，WebAssembly(WASM)已成为一种强大的工具。它使得开发者可以在浏览器中运行高性能的代码，跨越传统的JavaScript性能限制。Rust语言因其高效性和内存安全性，成为了编写WASM模块的热门选择。本文将介绍如何将Rust代码编译为WebAssembly，并在Web项目中使用。 1.创建Rust项目 首先，我们需要创建一个新的Rust项目。由于我们要生成一个可以被其它语言或工具调用的模块，因此选择创建一个库项目，而不是可执行程序。使用cargo命令可以轻松完成： cargonewlib_wasm--lib 这个命令会生成一个名为lib_wasm的项目，其...
需求 “threejs中能不能给定几组三维坐标（或者CAD绘制的三维多段线），给一个断面形状，直接生成三维管道？” 例如原始CAD图如下： 要求用threejs获取线的三维坐标数据自动生成的三维管道效果图如下： 分析 如果直接对每条线用threejs中的THREE.TubeGeometry去绘制的话，会出现交岔口出现缝隙的情况，如下图所示： 如何解决交岔口出现缝隙的问题成为了难题。 上网一搜索，发现与之类似的问题，在能源行业，“矿井巷道三维自动建模“这个很热门的话题，很多硕士博士都在研究。 于是果断的在淘宝花了几块大洋买了90天下载文献的账号，开始了下载论文，拜读论文，研究...