Javascript
文章平均质量分 62
carcarrot
这个作者很懒,什么都没留下…
展开
-
前端防抖、节流封装
/ 防抖函数:当一个事件触发后的n秒内执行,当n秒内再次触发事件,重新开始计算计时器,当n秒内重新反复触发,回调永远不会执行.函数节流,当事件被触发的n秒内只执行一次事件处理函数.转载: 看的B站大佬视频, up号:前端小野森森。转载 2024-08-01 18:57:16 · 31 阅读 · 0 评论 -
Surely Vue Table(S-Table)——一款针对大数据量的多功能前端表格组件
团队旗下的“高端”组件之一,该组件致力于解决大数据渲染、图表集成等复杂高频问题。使用该组件可以流畅滚动 10 万行、10 万列的数据,你不必担心页面卡顿。该组件4.0 及以上版本组件底层默认依赖 Ant Design Vue 4.x 版本组件库,但当然这并不影响你使用其它组件库。如题, Surely Vue Table(S-Table)是一款针对大数据量的多功能前端表格组件, 请了解!Surely Vue Table 是。转载 2024-08-01 18:41:26 · 262 阅读 · 0 评论 -
技术分享| 前端性能优化——虚拟滚动(Virtual Scroll)
前端遇到大量数据(尤其是大数据表)的DOM 渲染时,通常会卡顿,需要考虑优化性能问题,这里针对DOM 渲染引出“虚拟滚动”方案原创 2024-08-01 18:32:42 · 690 阅读 · 0 评论 -
CodeMirror 在线代码编辑器 简介
CodeMirror 是一款 “Online Source Editor”,基于 Javascript,短小精悍,实时在线代码高亮显示,他不是某个富文本编辑器的附属产品,他是许多大名鼎鼎的在线代码编辑器的基础库。转载 2024-05-09 15:13:28 · 567 阅读 · 0 评论 -
jquery-viewer(Viewer.js)—— 一个 jQuery 图片展示插件
HTMLElement类型,可以是img元素或包含img的元素。原创 2024-03-12 17:58:35 · 1273 阅读 · 0 评论 -
html2canvas库——前端实现基于DOM的截图
html2canvas原创 2023-12-14 19:37:53 · 174 阅读 · 0 评论 -
JavaScript创建枚举
相比直接写数字与字符串值,用枚举表示预定义范围的常量值有很多优点,这里就不做赘述了,但目前为止javascript并没有提供原生的enum类型(typescript当然就支持),通常javascript会借助对象类型来等效实现enum类型,实现方式有多种,这里介绍基于代理的枚举实现方式:(其它实现方式及优缺点详见: https://zhuanlan.zhihu.com/p/629573201在JavaScript中4种创建枚举方式)代理枚举是一种有趣的实现方式。一个代理对象是一个特殊的对象,它包装另一个对象原创 2023-11-27 17:50:58 · 567 阅读 · 0 评论 -
【多属性对象“{a:1,b:2}”】与【单属性对象的数组“[{a:1},{b:2}]”】的相互转换
【代码】【多属性对象“{a:1,b:2}”】与【单属性对象的数组“[{a:1},{b:2}]”】的相互转换。原创 2023-11-27 16:00:06 · 279 阅读 · 0 评论 -
Vue网页中使用PDF.js弹窗显示pdf文档所有内容
本文中使用的PDF.js组件版本为3.11.174(最新版使用上会有所不同),引入文件如下:首先页面定义一个隐藏的弹窗块(此处用ElementUI的Dialog组件)原创 2023-11-20 14:02:37 · 1612 阅读 · 0 评论 -
前后端中Url编码方法的一点小区别(encodeURI与HttpUtility.UrlEncodeUnicode、encodeURIComponent与HttpUtility.UrlEncode)
前端与后端的Url编码方法,尽管很多时候通用,但编码后的值并不完全相同,因为前端编码方法会排除对某些字符进行编码(各方法不编码的字符不尽相同), 而相应的后端编码方法并不针对相应这些字符都排除编码,并且得到的编码后的十六进制字符为小写字符(前端为相应的十六进制大写字母)原创 2023-11-13 19:49:35 · 827 阅读 · 0 评论 -
自动生成Form表单提交在苹果浏览器中的注意事项
该问题实际是Safari浏览器针对自动弹窗提交数据的安全机制造成的,如果 form.target改用“_self” 或者 在HTML页面表单以type="submit"按钮人为手动单击提交,应该不存在该问题;然而我们是希望不改变原页面的情况下自动生成表单提交,因此不可在本页中用“_self”,如果单纯想提交数据非必须弹新窗口,可以结合利用 iframe ,创建一个隐藏的iframe在其中以target为_self提交Form,即可解决问题,或者就只是使用Ajax也可以提交FormData。原创 2023-11-13 11:57:04 · 321 阅读 · 0 评论 -
为element-ui对话框组件(el-dialog)添加弹窗拖拽支持
【代码】为element-ui对话框组件(el-dialog)添加弹窗拖拽支持。原创 2023-10-10 16:29:15 · 499 阅读 · 0 评论 -
点击iframe中的链接时,使用历史记录pushState更改父窗口的URL
我有一个页面,该页面的标题和侧边栏带有正确的内容面板(即iframe)。在加载到右侧内容面板的页面中,我试图单击链接将父窗口中的浏览器URL更新为加载到iframe中的新页面的URL。我不希望实际的父窗口重新加载URL,而只是更新地址栏中的URL。是否可以通过iframe使用?onmessage通过使用从子Iframe窗口向父级发送新URL并在侦听此事件的父窗口上,我可以使用history.pushState完成地址栏中的父窗口URL更新。当父级收到子级iframe。转载 2023-09-11 15:53:51 · 278 阅读 · 0 评论 -
javascritp如何判断是从刷新(重新加载)、正常打开(或链接打开)、还是从浏览器回退进入页面的?同时介绍iframe子页面切换时控制是否在浏览器中增加历史回退记录
javascritp如何判断是从刷新(重新加载)、正常打开(或链接打开)、还是从浏览器回退进入页面的?同时介绍iframe子页面切换时控制是否在浏览器中增加历史回退记录原创 2023-09-08 17:39:35 · 318 阅读 · 0 评论 -
JS小知识点:在定义对象的时候,用变量值作为对象属性名
有没有一种情况,在定义一个对象时,对象的属性名由一个变量的值来决定的?而且是一步到位,简单实现的?答案当然可以的,直接在定义对象时将属性名以“括号括住变量名”作为属性即可原创 2023-08-31 15:15:05 · 1150 阅读 · 0 评论 -
el-upload调用内部方法删除文件
从Element UI 的官方文档中,Upload 上传组组件提供了on-remove和before-remove的文件删除的钩子属性(回调方法名),但如何调用组件删除方法(让该方法删除本地上传文件列表以及触发这两个钩子)并无相关说明, 实际可以用以下方法:$refs.upload_attach.$refs['upload-inner'].onRemove(file);$refs.upload_attach.handleRemove(file)原创 2023-08-28 13:36:40 · 7319 阅读 · 2 评论 -
JSON.stringify循环引用问题, structuredClone 深拷贝简介
前端使用到对象的深度复制通常会简单的使用JSON.parse(JSON.stringify(obj))实现 (浅表复制会用Array.from、Object.assign、Object.create静态方法实现),但在对象存在循环引用的情况下(比如:树结构中子对象存在parent属性存放父对象引用的情况)只是使用JSON.stringify(obj)会导致 “TypeError: Converting circular structure to JSON” 的错误原创 2023-08-09 19:52:49 · 1066 阅读 · 0 评论 -
JavaScript fetch() 方法
用于向服务器请求并加载网页中的信息。请求可以是返回 JSON 或 XML 格式数据的任何 API。此方法返回一个Promise。注意:如果没有选项,Fetch 将始终充当获取请求。JavaScript 中的。转载 2023-07-31 20:29:53 · 170 阅读 · 0 评论 -
Vue2计算属性如何传参
Vue2官网并没解释计算属性应该怎么传值,但是呢,通过闭包的方式实际上是可以给计算属性传参的原创 2023-07-19 19:35:03 · 2545 阅读 · 0 评论 -
JavaScript定时器setInterval如何做到在定义时先执行一遍(可用setTimeout实现同样目的)
有,只要定义一个返回“定时执行函数”(如“waitUploadThenSave”)的“执行过程”, 将“定时执行函数”保存并调用一次,并且执行过程中返回该“定时执行函数”,将该“执行过程”的主体作为定时器要定时执行的function即可。JavaScript中的定时器setInterval是计时到才会开始执行,有没有办法再定义的时候就先调用一遍,然后再定时执行呢?原创 2023-07-18 19:34:01 · 1639 阅读 · 0 评论 -
jQuery模板引擎: jQuery-tmpl 和 JsRender 使用介绍
jQuery模板引擎: jQuery-tmpl 和 JsRender 使用介绍原创 2023-05-30 19:59:38 · 1189 阅读 · 0 评论 -
预防XSS——后端HttpUtility.HtmlEncode,AntiXssEncoder.HtmlEncode方法;前端htmlencode,htmldecode,JavaScriptEncode
HtmlEncode和JavaScriptEncode(预防XSS)【转】https://www.cnblogs.com/lovesong/p/5211667.html在数据添加到DOM时候,我们可以需要对内容进行HtmlEncode或JavaScriptEncode,以预防XSS攻击。JavaScriptEncode使用“\”对特殊字符进行转义,除数字字母之外,小于127的字符编码使用16进制“\xHH”的方式进行编码,大于用unicode(非常严格模式)。复制代码//使用“\”对特殊字符进行转义,除原创 2021-10-19 19:27:44 · 1608 阅读 · 1 评论 -
CSS 添加上标(用CSS伪类解决js无法赋值实现诸如单位平方的2上标)
有些时候我们需要通过javascript给某个对象(比如elementUI表格列标题)赋值,这时无法按写像HTML代码一样直接用<sup>实现上标等效果,类似这种情况其实我们可以利用CSS伪类来实现我们的目的。添加上标有两种方式:(关于“伪类”的教程)一、添加上标元素1、使用<sup>元素 1.1、HTML代码:<span>好好学习,天天向上<sup>热</sup></span> ...转载 2020-11-20 11:01:00 · 1559 阅读 · 0 评论 -
js获取图片的base64编码、js压缩图片
案例1:js获取图片的base64编码<!DOCTYPE html><html> <head> <meta charset="gbk"> <title></title> </head> <body> <input accept="image/*" name="upimage" id="upload_file" type="fil转载 2020-11-17 11:32:24 · 599 阅读 · 0 评论 -
修改HTML Form required验证的样式与提示文字
先看下网上提供的方案:https://blog.csdn.net/web_xiaoling_notes/article/details/45920549如果只是最简单的非空验证,如下代码可以解决:<input type="text" name="user_name" required oninvalid="setCustomValidity('不能为空')" oninput="setCustomValidity('')" />如果想更为复杂,更多逻辑判断,js代码不写到html原创 2020-11-17 10:58:55 · 2267 阅读 · 0 评论 -
Ajax Post提交参数的值中带有html标签不能提交到后端的解决办法(ASP.NET)
我们在做Web开发的时候,在MVC中当前端通过Ajax提交数据到后端时,当数据的值中带有HTML标签时,可以是出于安全性方面,在后端的Controller的Action方法中是不会接收到这个Ajax请求的。解决方法:可以在前端提交数据时先将带有HTML标签的数据用encodeURI或Base64(比如atob函数)编码,提交后在后端进行HttpUtility.UrlDecode或Base64(比如Convert.FromBase64String函数)解码再处理。Load数据到页面的时候无需处理。.原创 2020-11-13 17:36:39 · 2151 阅读 · 1 评论 -
js将图片转为base64编码,以字符串传到后台存入数据库
(前台在中approve_edit.html中,后台不变)链接参考:http://www.cnblogs.com/Strom-HYL/p/6782176.html该链接文中并没有用到easyUI的相关样式,也没有将图片的缩略图展示出来现用一个新建页面进行显示,先看一下效果图:HTML:<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type"转载 2020-11-10 16:43:18 · 2687 阅读 · 3 评论 -
累记HTML一些不常用的标签属性
<input> autocomplete 属性 <input autocomplete="on/off"> (HTML 5新特性)网页中不使用浏览器记住密码大部分浏览器都是根据表单域的type="password"来判断密码域的,所以针对这种情况可以采取“动态设置密码域”的方法:<input type="text" name="password" onfocus="this.type='password'" />解释:当这个文档框获取焦点时才将其...原创 2020-10-29 10:22:05 · 153 阅读 · 0 评论 -
二进制数据、读写文件流、Base64编码
最近有个项目,是通过Selenium WebDriver驱动Chrome浏览报表生成截图,并把截图文件字节流以Base64编码成字符串写入DB的varchar(max)表字段,先看相关代码段:......var ss = webDriver.GetScreenshot();imgString = ss.AsBase64EncodedString;webDriver.ExecuteScript(string.Format("saveSnapshot('{0}','{1}')", jobId, im原创 2020-10-21 16:59:50 · 2207 阅读 · 0 评论 -
Ajax上传文件并显示进度条
举例说明(主要使用$.ajax的xhr执行回调)xhr 用于创建 XMLHttpRequest 对象的函数。 前端框架:jQuery+Bootstrap+LayerHTML页面里的表单:<form class="form-horizontal" id="vform" action=""> <div class="form-group"> <label class="col-sm-3 control-label">资源名.转载 2020-10-21 09:52:09 · 617 阅读 · 0 评论 -
用js代码修改checkbox的checked属性值不会触发onchange事件
问题描述vue中,我用v-model将 checkbox 绑定到变量flag上,但是,当我用 js 去修改 flag 的值时,却没有触发 checkbox 的change事件。同样的,在angular中用ng-model将 checkbox 绑定到变量flag2上,用程序修改flag2的值也没有触发 checkbox 的change事件。事实上,这不是vue和angular的问题,而是在原生的js和html上。解决方法1. 在vue及angular框架中我们可以通过...原创 2020-10-16 10:28:00 · 3502 阅读 · 0 评论 -
【算法】不用变量反转一个字符串
用js代码实现该算法//不用申请变量反转一个字符串:function revertString(s){ if (s.length==1){ return s; }else{ return s.charAt(s.length-1)+revertString(s.substring(0,s.length-1)); }} //Test:revertString("abcdefg");测试结果:...原创 2020-10-12 11:50:22 · 106 阅读 · 0 评论 -
【转】彻底理解Promise对象——用es5语法实现一个自己的Promise(上篇)
众所周知javascript语言的一大特色就是异步,这既是它的优点,同时在某些情况下也带来了一些的问题。最大的问题之一,就是异步操作过多的时候,代码内会充斥着众多回调函数,乃至形成回调金字塔。为了解决回调函数带来的问题,Promise作为一种更优雅的异步解决方案被提出,最初只是一种实现接口规范,而到了es6,则是在语言层面就原生支持了Promise对象。最初接触Promise的时候,我觉得它是比较抽象并且令人困惑的,相信很多人也有同样的感觉。但是在后来的熟悉过程中,我慢慢体会到了它的优雅,并开始思考Pr转载 2020-09-21 16:37:33 · 339 阅读 · 0 评论 -
自己写一个Promise
自己造轮子——在 ECMAScript5中自定义一个Promise,实现与ES6原生Promise一致的基本功能(测试中使用的箭头函数“=>”属于ES6标准)原创 2020-09-17 17:38:36 · 276 阅读 · 0 评论 -
单线程的JavaScript以及伪多线程的setTimeout
首先看个例子var ms=0,el=0;function test(){ console.log('main start'); ms=new Date().getTime(); setTimeout(()=>{ el=new Date().getTime()-ms; console.info('setTimeout0 executed! actually '+el+'ms elapsed') },0); var i=999999999; ...原创 2020-09-15 14:46:31 · 192 阅读 · 0 评论 -
(回顾)JS中call和apply和bind这三个函数区别、原生JS实现bind()方法、arguments含义
call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象,第二个参数差别就来了:(https://www.runoob.com/w3cnote/js-call-apply-bind.html)call 的参数是直接放进去的,第二到第n个参数全都用逗号分隔,直接放到后面obj.myFun.call(db,'成都', ... ,'string' )。 apply 的所有参数都必须放在一个数组里面传进去obj.myFun.apply(db,['成都', ..., 'str..转载 2020-09-10 16:31:19 · 197 阅读 · 0 评论 -
一款前端可编辑电子表格——Handsontable
Handsontable是一款像电子表格的JavaScript数据网格插件。可用于纯JavaScript、React、Angular和Vue。运行效果如下图:以下是官方样例图:原创 2020-09-09 16:31:17 · 2472 阅读 · 0 评论 -
IE11中Array的find()方法、String的repeat()方法 等兼容性问题
最近有个在Chrome浏览器正常运行的项目,客户需要用IE浏览,发现在IE11及以下版本浏览异常,有两个原因:1.IE11不支持箭头函式表达式=>,改成function匿名函数解决;2. IE11中Array没有此项目中使用到的find方法,也没有String.prototype.repeat方法,因此兼容的写一个【需放在引用的地方之前,比如在“$(document).ready(function(){})”中】原创 2020-09-08 17:08:28 · 1023 阅读 · 0 评论 -
Web前端操作文件
在web应用程序中使用文件通过使用在 HTML5 中加入到 DOM 的 File API,使在web内容中让用户选择本地文件然后读取这些文件的内容成为可能。用户可以通过HTML中的<input type="file">元素或者是通过拖拽来选择本地文件。如果你想通过扩展或者其它的chrome源码浏览器(browser chrome code)使用DOM File API,是可行的;然而,需要注意有一些附加特性。详细请见Using the DOM File API in chrome ...转载 2020-08-25 10:40:39 · 1275 阅读 · 0 评论 -
JavaScript 存储对象:localStorage、sessionStorage
Web 存储 API属性 描述 window.localStorage 在浏览器中存储 key/value 对。没有过期时间。 window.sessionStorage 在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。 Asp.Net Core Web项目的登录认证、Asp.Net Core WebApi基于JWT的认证授权: https://www.cnblogs.com/ibeisha/p/jwt-webapi.h...原创 2020-08-04 14:41:33 · 103 阅读 · 0 评论