UIOTOS可以了解下，uiotos.net，通过连线来代替脚本逻辑开发，复杂的交互界面，通过页面嵌套轻松解决，是个很新颖的思路，前端零代码！ 蓝图连线尤其是独创的页面嵌套和属性继承技术，好家伙相当于把vue的组件化、增量式面向对象开发，直接搬到前端拖拽工具上，无代码编程了。 总的来说，这上面的理念，看到是用连线代替脚本开发，复杂连线和界面，通过页面嵌套可以轻松解决。 官网给的介绍： 一款拥有独创技术的前端零代码工具，专注于解决前端界面开发定制难题，原型即应用！ 具有页面嵌套、属性继承、节点连线等全新特性，学习门槛低，功能极为灵活。 用户无需懂任何前端开发技术，简单了解使用规...
Web存储技术 1.localStorage 特点：长期存储，除非手动删除否则会一直保存在浏览器中，清除缓存或卸载浏览器后消失。 存储语法：window.localStorage.setItem(名字,值) 获取语法：window.localStorage.getItem(名字) 删除语法：window.localStorage.removeItem(名字) 作用：删除localStorage中的数据。 限制：只能保存字符串类型的数据。 应用场景：适用于存储不需要跨会话访问的数据，如用户偏好设置、游戏进度等。 2.sessionStorage 特点：会话存储，浏览器关闭后数据消失，可以跨...
之前已经出了一篇关于loading动画的随笔《博客园美化：给网页加上loading动画》，但是每次加载都必须等loading动画加载完成才能进行下一步点击，很浪费时间，所以pass掉了...... 这次做了一个顶部的loading进度条，加载的同时不影响浏览点击网页，并且进度条颜色十分酷炫（ 非主流 ）的那种。 话不多说，先上效果图： 酷炫吧......😄 页首HTML代码附上： 1<scriptsrc="/Scripts/jquery-1.10.2.min.js"type="text/javascript"></script...
背景 20天前,发布了一篇文章讲述我自己写的浏览器插件,帮助自己在阅读微信读书网页端的时候解放双手的故事.主要核心点就是自动阅读.本次发布做了很多更新,先睹为快! 当时我就是写着玩的,一个非常小众场景的小众需求,却没有想到使用的人还挺多的.期间有2个人让我印象非常深刻. 这个世界不只有程序员 路人甲 一个类似花开富贵头像的老哥+了我好友,说是无法安装插件.于是就有了以下对话. 到这我真愣住了.这是啥意思?让我写个微信读书app吗?于是我就追问 原来他不懂技术啊.我以为是同行呢.随后我就遇到了第二个路人 路人乙 我发布插件没几天就有人到了项目仓库给我提issue 都会提issue了,这总...
写在前面 tips：点赞+收藏=学会！ 我们已经介绍了radash的相关信息和部分Array相关方法，详情可前往主页查看。 本篇我们继续介绍radash中Array的相关方法的剩余方法。 本期文章发布后，作者也会同步整理出Array方法的使用目录，包括文章说明和脑图说明。 因为方法较多，后续将专门发布一篇Array篇总结文档，方便大家查阅使用。 replace：查找指定项，并用传入的去替换； 使用说明 参数：对象数组1、用于替换的对象、条件函数。 返回值：替换目标项后的原始素组副本（新数组）。 使用代码示例import{replace}from'radash' constfis...
一、是什么 事件代理，俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素 前面讲到，事件流的都会经过三个阶段：捕获阶段->目标阶段->冒泡阶段，而事件委托就是在冒泡阶段完成 事件委托，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，而不是目标元素 当事件响应到目标元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数 下面举个例子： 比如一个宿舍的同学同时快递到了，一种笨方法就是他们一个个去领取 较优方法就是把这件事情委托给宿舍长，让一个人出去拿好所有快递，然后再根...
目录 TypeScript入门介绍 什么是TypeScript？ 发展历史 优缺点 应用场景 开发工具 环境依赖 编程IDE vs调试 构建工具/工程化 步骤汇总 第一个项目 TypeScript入门介绍 什么是TypeScript？ 1.1TypeScript是由微软开发的一种开源的编程语言。它是JavaScript的一个超集，通过为JavaScript提供静态类型检查，增加了代码的可读性和可维护性 发展历史 1.2TypeScript的历史和发展 TypeScript最初由AndersHejlsberg在微软开发，并于2012年首次发布。它的发展一直得到社区的积...
什么是接口重复提交？ 接口重复提交指的是在网络通信中，同一个请求被客户端多次发送到服务器端的情况。这种情况可能由于多种原因导致，例如用户在等待期间多次点击提交按钮、网络超时后客户端重新发送请求、客户端发送的请求在网络传输过程中出现重复等。 接口重复提交可能会导致多种问题，当服务器收到重复请求时，可能会多次处理相同的数据，导致数据重复操作或者产生不一致的结果。重复提交请求会增加服务器的负载和资源消耗，特别是在高并发情况下，可能会导致服务器压力过大，影响系统的性能和稳定性。有些请求是具有副作用的，例如支付、提交订单等，重复提交可能导致用户被重复扣款或者重复生成订单，从而导致业务异常或者用户不满。 ...
写在前面 tips：点赞+收藏=学会！ 主页有更多其他篇章的方法，欢迎访问查看。 本篇我们继续介绍radash中函数柯里化和Number相关的方法使用和源码解析。 函数柯里化 chain：创建一个函数链并依次执行 使用说明 功能描述：用于创建一个函数链，该链依次执行一系列函数，每个函数的输出都是下一个函数的输入。这种模式常见于函数式编程，特别是在数据转换和流水线处理中。 参数：函数数组（或者说任意数量的函数）。 返回值：返回一个新的函数。 使用代码示例import{chain}from'radash' constadd=(y:number)=>(x:number)=>...
写在前面 tips：点赞+收藏=学会！ 本文包含radash中数组相关的所有方法说明+使用示例+思维导图查看 这边会整理出一份数组相关方法的使用大纲（不含源码解析），方便大家查阅使用； 作者会按照大类进行整理分享，本次也会同步给出Array所有方法的思维导图； 所有方法整理完毕后，作者会整理出一份Radash库相关的所有方法的思维导图，方便大家查看使用。 本文会把每个方法做标题展示，也方便大家直接在本文中阅读对应方法内容。 数组方法汇总思维导图 xmind文件链接可访问作者的github地址下载； github上还有作者之前学习前端的一些笔记，大家感兴趣可以查看。 访问外网不方便...
一、执行上下文 简单的来说，执行上下文是一种对Javascript代码执行环境的抽象概念，也就是说只要有Javascript代码运行，那么它就一定是运行在执行上下文中 执行上下文的类型分为三种： 全局执行上下文：只有一个，浏览器中的全局对象就是 window对象，this 指向这个全局对象 函数执行上下文：存在无数个，只有在函数被调用的时候才会被创建，每次调用函数都会创建一个新的执行上下文 Eval函数执行上下文：指的是运行在 eval 函数中的代码，很少用而且不建议使用 下面给出全局上下文和函数上下文的例子： 紫色框住的部分为全局上下文，蓝色和...
拖放功能，即将一个元素从一个区域，通过拖拽，放置到另一个区域。常见的应用是将文件或图片从一个区域，拖放到另一个区域。中文常常把这表述成拖拽，实际上拖拽的描述并不准确，应该叫拖放，因为drag事件和drop事件是成对使用的，即拖拽和放置。 drag在拖拽动作发生时触发，携带被拖拽元素的信息，drop在放置元素时触发，接收传递的拖拽元素的信息。 由于常常表述成拖拽，所以有些人在实现拖动功能时以为会触发drag事件，比如侧边栏拖拽。实际上drag是为拖放功能...
最近项目中需要用到js库来渲染pdf文件，调研后发现无论是reach-pdf.js或者是svelte-pdf.js都是在pdf.js基础上做了些许精简，反而功能还不如原始的pdf.js来得全面。但是原始的库几乎没有像样的代码示例，而能搜索到的大多数代码不少都是十几年前的了，在这个过程中踩了不少坑，做个记录，希望对看到的人有所帮助。 使用npm安装pdfjs-dist库（也可以直接下载源码并引入） npminstallpdfjs-dist 导入库 //网上很多代码都是importxxxfrom'pdfjs-dist'; //而xxx一般都是过期或者不存在的，直接把所有导出为pdfjslib即可...
ECMAScript2024新特性 ECMAScript2024,the15thedition,addedfacilitiesforresizingandtransferringArrayBuffersandSharedArrayBuffers;addedanewRegExp/vflagforcreatingRegExpswithmoreadvancedfeaturesforworkingwithsetsofstrings;andintroducedthePromise.withResolversconveniencemethodforconstructingPromises,theObje...
在JavaScript中，实现深拷贝的方式有很多种，每种方式都有其优点和缺点。今天介绍一种原生JavaScript提供的structuredClone实现深拷贝。 下面列举一些常见的方式，以及它们的代码示例和优缺点： 1.使用JSON.parse(JSON.stringify(obj)) 代码示例： functiondeepClone(obj){ returnJSON.parse(JSON.stringify(obj)); } 优点：简单易行，对于大多数对象类型有效。 缺点：不能复制原型链，对于包含循环引用的对象可能出现问题。比如以下代码： constcalendarEvent={ da...
一、事件与事件流 javascript中的事件，可以理解就是在HTML文档或者浏览器中发生的一种交互操作，使得网页具备互动性，常见的有加载事件、鼠标事件、自定义事件等 由于DOM是一个树结构，如果在父子节点绑定事件时候，当触发子节点的时候，就存在一个顺序问题，这就涉及到了事件流的概念 事件流都会经历三个阶段： 事件捕获阶段(capturephase) 处于目标阶段(targetphase) 事件冒泡阶段(bubblingphase) 事件冒泡是一种从下往上的传播方式，由最具体的元素（触发节点）然后逐渐向上传播到最不具体的那个节点，也就是DOM中最高层的父节点 <!DOCTYPE...
在前端开发过程中，调试的时候，我们会使用console.log等方式查看数据。但对于图片来说，仅靠展示的数据与结构，是无法想象出图片最终呈现的样子的。 虽然我们可以把图片数据通过img标签展示到页面上，或将图片下载下来进行预览。但这样的调试过程实在是复杂，何不实现一个console.image()呢？ 先上演示案例： 在线演示https://bi.cool/bi/W1P1cyq （chrome浏览器上演示效果） 实现console.image()： 参考Github上已实现的库https://github.com/adriancooney/console.imageStar1.8k(本文发布前...
有时候，我们需要在网页判断用户是否处与非活跃状态，如果用户长时间没有在页面上进行任何操作，我们则判定该用户是非活跃的。在javascript中我们可以通过监听某些鼠标或键盘相关的事件来判定用户是否在活跃中。 案例演示 在线演示使用JS判断用户是否处于活跃状态 实现代码 案例演示了如何获取用户活跃状态，时间阈值定为5秒，超出该阈值没有操作表示非活跃，否则属于正在活跃中 html <pid="userState"></p> js //活跃状态，true活跃中，false非活跃 letstate=false; //定时器 lettimer=null; //非活跃判定阈值...
DevTools非常强大除了常用的查看元素，进行断点调试或许还有些你不知道的小技巧，小功能。如可以快速的重新发送请求，快速选择元素，在控制台中使用npm库等，让你能够更加高效的进行开发。不定时更新 打开开发者工具的快捷键 使用快捷键能快速打开DevTools，但不同的快捷键可以打开不同的tab: 系统 元素 控制台 网络 Windows或Linux Ctrl+Shift+C Ctrl+Shift+J Ctrl+Shift+I Mac Cmd+Option+C Cmd+Option+J Cmd+Option+I 重新发送请求 有时在调试的使用仅想对某个接口重新请求，但又不...
项目结构 在开发Chrome插件时，以下几个文件的作用如下： manifest.json：这是Chrome插件的清单文件，用于配置插件的基本信息、权限、页面跳转等。其中包括插件的名称、版本号、图标、后台脚本、浏览器动作等信息。 background.js：这是Chrome插件的后台脚本文件，用于处理插件的后台逻辑。可以监听事件、与浏览器进行交互、执行一些后台任务等。在manifest.json中指定了background脚本后，它会在插件加载时自动运行。 popup.html：这是Chrome插件点击后弹出的界面的HTML文件。可以定义插件弹出页面的结构、样式和交互逻辑。 popup.js：...