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...
IntersectionObserver(自动监听元素是否进入了设备的可视区域之内) 示例： constio=newIntersectionObserver(callback,option); //获取元素 consttarget=document.getElementById("dom"); //开始观察 io.observe(target); //停止观察 io.unobserve(target); //关闭观察器 io.disconnect(); vue示例： constclassName='enterpage'; constdirectives={ viewport:{ in...
同步加载 阻塞模式，提高安全性 过多JS加载会影响页面效率 默认情况下，JS是同步加载，及优先加载外部JS，只有当JS文件加载完成，don和css才开始加载 <scriptsrc='index.js'></script> 异步加载 非阻塞加载 动态创建script defer延迟加载JS，等到HTML的DOM完全解析之后 asyncHTML的文档解析和脚本的获取同时进行 <scriptsrc='index.js'defer></script>defer <scriptsrc='index.js'async></...
函数柯里化 含义: 可以大概理解为:将fn(a,b,c)转换为fn(a)(b)(c) 原函数: functionsum(a,b){ returna+b } console.log(sum(1,2)) 柯里化后: functionsum(a){ returnfunction(b){ returna+b } } console.log(sum(1)(2)); ... 面试题 函数sum实现,接收参数为5个时即实现累加,满足以下几个要求：sum(1)(2)(3)(4)(5)//输出15sum(1)(2,3)(4)(5)//也输出15sum(1)(2,3,4)(5)//也输出15sum(1)(2...
前言 前端导出表格有很多种方案，但是表格样式一旦复杂了，那么就得用代码写excel的样式，还是比较麻烦的。每次样式不一样，就得重新写，这时使用表格模板的优势就体现出来了，想导出不同样式的表格直接修改表格模板即可。 方案 我找了两种方案：1、使用xlsx-template，利用模板语法在xlsx中占位填充后编辑导出。2、使用exceljs，读取模板后，利用行列坐标定位编辑后导出。两种我都尝试过，第一种方案类似我这篇文章(https://xiblogs.top/?id=27)中使用的docxtemplater，只不过是docx换成了xlsx，但xlsx-template在浏览器端的兼容不如docx...
一、实现一个光影墙 1. 根据自定义坐标点，输出一个光影墙 / 添加光影墙 / functionaddLightWall(){ constgeometry=newTHREE.BufferGeometry(); constvertices=newFloat32Array([ 5,0,2, 3,0,5, -2,0,5, -4,0,2, -4,5,2, -2,5,5, 3,5,5, 5,5,2 ]); constindices=newUint16Array([ 0,1,7, 1,6,7, 1,2,6, 2,5,6, 2,3,5, 3,4,5 ]) geometry.se...
1.PerformanceAPI的用处 PerformanceAPI是浏览器中内置的一组工具，用于测量和记录页面加载和执行过程中的各类性能指标。它的主要用处包括： 监控页面资源加载：跟踪页面中的资源（如CSS、JavaScript、图片）的加载时间。 分析页面加载时间：从导航到页面完全渲染的所有时间点。 衡量用户交互性能：测量用户点击、输入等操作的响应时间。 优化性能瓶颈：通过标记特定的代码片段和事件，精准定位性能瓶颈。 这些数据帮助开发者更好地理解页面表现，进而对性能进行优化和改进。 2.PerformanceAPI常用的API 在使用PerformanceAPI时，以下几个API是开发...
一、飞线效果 功能说明：支持设置点的个数，飞线速度、起始和终止颜色值、线宽、线的大小 原理： 1. 首先绘制一条与线长度相同的线，线中各点的大小逐渐变小 2. 如何让线动起来？假设点的个数总共为num个，传入的点的下标为a，通过变化的时间计算出移动的下标b，如果a+b>=num则代表，该点可见，否则不可见 3. 如何设置移动速度？传入的uTime变化在毫秒之间，通过乘以一个具体的数据，则可以将变化的时间放大，改变乘以的数据是移动速度的关键 4. 改变飞线大小？初始设置飞线的大小是整条线，通过控制飞线的结...
定义 堆是一棵完全二叉树。分为大顶堆和小顶堆大顶推：所有节点都大于等于它的两个子节点小顶堆：所有节点都小于等于它的两个子节点 伪代码 推排序步骤，以升序排列为例，用大顶堆。（降序排列，用小顶堆） 构建大顶推 把堆顶元素和堆尾元素交换，此时堆尾元素是最大的，堆的大小减一 堆顶元素下沉到指定位置 重复2-3步，直到堆的大小为1 关键在于如何构建一个大顶堆（对节点进行下沉）:从最后一个非叶子节点开始；逐个检查每个节点，如果一个节点的值小于其子节点的值，我们就将它与较大的子节点交换位置；交换后，这个交换后的节点可能导致不满足堆的特性，因此还需要继续下沉（Heapify) 举个例子 需要注意的是：...
当数组中存在空位时，遍历数组需要选择合适的方法，不同的方法可能返回不同的结果。 示例数组： 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...
JavaScript速查表 本手册绝大部分内容是从AirbnbJavaScriptStyleGuide精简整理，将开发者们都明确的操作去掉，目的为了就是更快的速查。此处为源地址。 译制：HaleNing 目录 基础知识 类型 引用 对象 数组 解构 字符串 变量 属性 测试 公共约束 注释 分号 命名规范 标准库 类与函数 函数 箭头函数 类与构造函数 模块 迭代器与生成器 提升 比较运算符与相等 事件 类型转换与强制转换 推荐资源 基础知识 类型 基本类型最新的ECMAScript标准定义了8种数据类型,分别是 string number bigint boolean...
一、解构 如图所示，手机浏览器的效果。代码就是简单的html语言加上一个JavaScript脚本，界面主要分3部分，功能实现主要分3个函数。 （一）显示样式 在头里定义了居中显示的CSS样式，将来在浏览器中居中显示倒计时X分XX秒。 <styletype="text/css"> .center{ position:absolute; top:50%; &n...
在Web开发中，我们经常需要区分用户是否通过刷新操作重新加载了页面。这一操作可能是由用户手动刷新（如按下F5键或点击浏览器刷新按钮）或通过浏览器自动重新加载。判断页面是否刷新有助于开发者优化用户体验，例如在使用vue的时候需要进行权限控制，就需要判断在刷新后根据登录者的权限去添加对应的路由。 本文将详细解析几种常见的判断页面是否刷新的技术方案，并探讨各自的适用场景、优缺点以及浏览器的兼容性。 1.使用window.name window.name是一个持久的窗口属性，它的值在页面刷新、甚至通过标签页导航到其他页面时也会保留，因此可以利用它来判断页面是否是通过刷新重新加载。 代码示例 windo...
PageVisibilityAPI 在做考试系统或者网课系统的时候，通常需要监测用户是否隐藏了当前标签页在看其它页面。 PageVisibilityAPI提供了一个事件和两个状态来监测页面可见性，可以用它来判断用户是否切屏。 visibilitychange 这个事件会在页面可见性变化时触发。（隐藏时、打开时） //使用addEventLisitener document.addEventListener('visibilitychange',(e)=>{ console.log('visibilityState:',document.visibilityState); }); //或...
1、使用Object.entries()和Object.fromEntries() //将对象转换为数组并转换回来，以便于操作 constperson={name:'jack',age:20}; constentries=Object.entries(person);//[['name','jack'],['age',20]] constnewPerson=Object.fromEntries(entries);//{name:'jack',age:20} 2、newSet()数组去重 constnumbers=[1,1,2,3,4,4,5]; constuniqueNumbers=[......
需求 “threejs中能不能给定几组三维坐标（或者CAD绘制的三维多段线），给一个断面形状，直接生成三维管道？” 例如原始CAD图如下： 要求用threejs获取线的三维坐标数据自动生成的三维管道效果图如下： 分析 如果直接对每条线用threejs中的THREE.TubeGeometry去绘制的话，会出现交岔口出现缝隙的情况，如下图所示： 如何解决交岔口出现缝隙的问题成为了难题。 上网一搜索，发现与之类似的问题，在能源行业，“矿井巷道三维自动建模“这个很热门的话题，很多硕士博士都在研究。 于是果断的在淘宝花了几块大洋买了90天下载文献的账号，开始了下载论文，拜读论文，研究...