javascript
slongzhang_
这个作者很懒,什么都没留下…
展开
-
js去抖和节流函数
debounce 与 throttle 是开发中常用的高阶函数,作用都是为了防止函数被高频调用,换句话说就是,用来控制某个函数在一定时间内执行多少次。使用场景比如绑定响应鼠标移动、窗口大小调整、滚屏等事件时,绑定的函数触发的频率会很频繁。若稍处理函数微复杂,需要较多的运算执行时间和资源,往往会出现延迟,甚至导致假死或者卡顿感。为了优化性能,这时就很有必要使用 debounce 或 throttle了...原创 2022-07-08 23:53:11 · 122 阅读 · 0 评论 -
nodejs 不支持 atob、btoa解决方案(Base64加解密、base64与uint8array转换)
nodejs 不支持 atob、btoa解决方案(Base64加解密、base64与uint8array转换)原创 2022-07-05 22:06:31 · 2858 阅读 · 0 评论 -
zhr 一个简易的fetch封装
一个简易的fetch封装原创 2022-06-13 00:23:18 · 267 阅读 · 0 评论 -
chrome插件开发之jquery-ajax下载文件转换为base64
插件开发过程中偶尔会碰到需要由用户才能下载的文件上传到我们服务端,这时候就需要数据流的处理,但查询许多资料都没看到可用的资料,只能自己调试摸索原创 2022-06-10 16:18:05 · 314 阅读 · 0 评论 -
js 图片转换base64 && base64转换为file对象
js图⽚转换base64 && base64转换为file, 在开发过程中经常遇到需要由前端处理的图片转载 2022-06-10 10:30:45 · 658 阅读 · 0 评论 -
js 异步循环使用递归
var loopAsync = function(taskArr, itemFn) { let len = taskArr.length; return new Promise((resolve, reject) => { let nextTask = function(index) { if (index >= len) { return resolve('全部遍历结束') // 执行结束原创 2022-05-28 11:59:03 · 1046 阅读 · 0 评论 -
vue-loader@13.7.3之vue-style-loader加载一堆换行问题
function applyToTag (styleElement, obj) { var css = obj.css // if (css && typeof css === 'string') { // css = css.replace(/(\r\n|\r|\n)+/g,'$1'); // } var media = obj.media var sourceMap = obj.sourceMap if (media) { styleElemen原创 2022-05-26 21:59:41 · 313 阅读 · 0 评论 -
jquery属性值选择器
https://www.cnblogs.com/nmxs/p/4888049.html原创 2022-05-17 14:57:52 · 293 阅读 · 0 评论 -
webpack3.6学习笔记
初始化项目npm init有空再完善详细步骤。。。webpack.config.jsconst path = require('path');const webpack = require('webpack');const htmlWebpackPlugin = require('html-webpack-plugin');const uglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');module.exports =原创 2022-05-06 21:47:27 · 312 阅读 · 0 评论 -
globalThis 对象
JavaScript 语言存在一个顶层对象,它提供全局环境(即全局作用域),所有代码都是在这个环境中运行。但是,顶层对象在各种实现里面是不统一的。浏览器里面,顶层对象是window,但 Node 和 Web Worker 没有window。浏览器和 Web Worker 里面,self也指向顶层对象,但是 Node 没有self。Node 里面,顶层对象是global,但其他环境都不支持。同一段代码为了能够在各种环境,都能取到顶层对象,现在一般是使用this关键字,但是有局限性。全局环境.原创 2022-04-20 10:39:08 · 155 阅读 · 0 评论 -
UI组件--element-ui--全部引入和按需引入
element-ui 按需引入和全部引入,主要就是一句话, 如果用到的组件少, 要按需引入, 如果用到的组件很多,就全部引入, 因为按需引入全部的, 和全部引入效果一样转载 2022-03-06 18:10:38 · 2314 阅读 · 0 评论 -
(转)15000字大章带你一步一步使用Vue3开发chrome浏览器插件
本文转自: https://guoqiankun.blog.csdn.net/article/details/112007833转载 2022-02-28 16:20:38 · 2953 阅读 · 3 评论 -
CHROME扩展开发文档之·MV2到MV3的background.js迁移文档(从后台页面迁移到服务人员)
在 Manifest V3 中,Chrome 扩展平台从后台页面转移到服务工作者。正如Service Workers: an Introduction中所述,“Service Worker 是您的浏览器在后台运行的脚本,与网页分开,为不需要网页或用户交互的功能打开了大门。” 这项技术可以实现类似原生的体验,例如推送通知、丰富的离线支持、后台同步和开放网络上的“添加到主屏幕”。Service Worker 的部分灵感来自 Chrome 扩展中的背景页面,但他们通过针对 Web 规模对其进行调整来迭代和改进此模翻译 2022-02-28 14:42:04 · 2121 阅读 · 0 评论 -
es6迭代器iterator案例理解
案例一var obj = {k1: '111', k2: '2222', k3: '333'};obj[Symbol.iterator] = function(){ let keys = Object.keys(this); let len = keys.length; let idx = -1; return { next: function(){ idx++; return { value: [idx, keys[idx]], done: idx>=le原创 2021-10-14 21:18:36 · 101 阅读 · 0 评论 -
jq轻量级动态渲染表格
直接上代码,js已提供压缩,css自己压缩<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数据转页面表格(动静态数据)</title><!-- <.原创 2021-09-30 22:35:23 · 1439 阅读 · 0 评论 -
HTML5无感加载新页面(下一页+非ajax+history.pushState)
一、修改url,页面不刷新案例1、设置锚点特性(以bootstrap中标签页的代码为例)利用锚点方式切换,页面刷新,也会定位至指定的页面,但是如果页面内容过长,出现滚动条时,锚点会定位至点击的a元素,页面不置顶了。<div> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a h转载 2021-09-24 23:25:00 · 584 阅读 · 0 评论 -
js 深度合并对象(Object.assign)
function deepAssign(...param) { let result = Object.assign({}, ...param); for (let item of param) { for (let [idx, val] of Object.entries(item)) { if (typeof val === 'object') { result[idx] = deepAssign(result[id原创 2021-09-20 14:23:20 · 1309 阅读 · 1 评论 -
js检测开发者工具Devtools是否打开防调试
之前写过一篇文章《Javascript检测开发者工具Devtools是否打开》,主要是讲如何通过js来检测开发者工具是否打开,防止别人恶意调试我们的代码,那段代码也是查了蛮多资料整理出来的,当时可以兼容chrome,firefox,ie,但是随着浏览器版本的更新,已经基本上没有作用了,最近我发现还是有蛮多人去浏览那篇文章,所以这里再放出一段代码,算是个升级版吧,之前的版本里在firefox上还有有限制的,下面提供的这个版本我测试过通杀现在的chrome 69,firefox,IE,也不存在之前firefox转载 2021-08-04 11:19:09 · 13208 阅读 · 1 评论 -
jQuery对checkbox的各种操作
//注意: 操作checkbox的checked,disabled属性时jquery1.6以前版本用attr,1.6以上(包含)建议用prop //1、根据id获取checkbox $("#cbCheckbox1"); //2、获取所有的checkbox $("input[type='checkbox']");//or $("input[name='cb']"); //3、获取所有选中的checkbox $("input:checkbox:转载 2021-07-21 16:19:20 · 7400 阅读 · 0 评论 -
ajax伪造请求头设置失败,以及浏览器插件解决方案(待完善)
w3c规定,当请求的header匹配以下不安全字符时,将被终止,具体参考如下:Accept-CharsetAccept-EncodingConnectionContent-LengthCookieCookie2Content-Transfer-EncodingDateExpectHostKeep-AliveRefererTETrailerTransfer-EncodingUpgradeUser-AgentVia插件解决方案chrome.webRequest.onBe原创 2021-07-15 16:42:57 · 971 阅读 · 0 评论 -
js 对象拷贝的三种方法,深拷贝函数。
js 对象拷贝的三种方法以下面数据格式obj 为主:const obj = { data: 1, un: undefined, info: { d: 2 }, fn: function() { console.log('Function') }, get c() { return info.d } }方法一、Object.assignconst ObjA = Object.assign({},转载 2021-07-11 22:31:50 · 4667 阅读 · 4 评论 -
SublimeText分号后自动提示问题(sublimeCodeInetel插件致命bug)
方法一:卸载sublimeCodeInetel方法二:一、打开Preferences -> Package Settings -> SublimeCodeIntel -> Key Bindings - User二、编译为如下图(如果为空则直接复制我的代码,有内容则追加上红色框框里的代码)如果是追加的需要注意JSON格式,不要漏掉逗号[ { "keys": [";"] ,"command": "run_macro_file"原创 2021-05-23 16:00:37 · 469 阅读 · 0 评论 -
CHROME扩展笔记之cookie多端登录
(function(){ var topCookies = [{"domain":"cn.tophatter.com","hostOnly":true,"httpOnly":false,"name":"uuid","path":"/seller/campaigns/200482","sameSite":"unspecified","secure":false,"session":true,"storeId":"0","value":"33122574"} //,... ];原创 2021-05-13 18:14:49 · 381 阅读 · 0 评论 -
CSV转数组、CSV转JSON(JS+PHP双版本)
一、csv转JSONfunction CSVToArray(strData, strDelimiter) { // Check to see if the delimiter is defined. If not, // then default to comma. strDelimiter = (strDelimiter || ","); // Create a regular expression to parse the CSV values. var obj原创 2021-04-07 15:54:44 · 44143 阅读 · 1 评论 -
PHP+JS(pako)前后端数据压缩,节省带宽方案(Uint8Array与Base64互转、gzip压缩、gzinflate、gzdeflate、zlib、大数据压缩)
前后端数据之间的交互,在数据量比较大的时候经常会有带宽占用高,数据传输慢,并且文件越大传输时间就越长,为了减少传输时间和优化网站提高用户体验;这时候我们就考虑一些压缩的方案了原创 2021-04-03 16:30:18 · 56997 阅读 · 0 评论 -
javascript 二进制转十进制 十进制转二进制
利用 toString() 方法 十进制转二进制var num = 10;console.log( num.toString("2") ) 转2进制: "1010"console.log( num.toString("8") ) 转8进制: "12"console.log( num.toString("16") ) 转16进制: "a"利用 parseInt() 方法,其它进制转十进制var num = 100var num2 = num.toString("2") // "转载 2021-03-29 17:32:36 · 194 阅读 · 0 评论 -
CHROME扩展笔记之图标设置(彩色和灰色的切换)
// 返回灰色画布function grey_img(src){ /*创建一个canvas*/ var canvas=document.createElement('canvas'); var ctx=canvas.getContext('2d'); var img=new Image(); img.src=src; canvas.height=img.height; canvas.width=img.width; ctx.drawImage(img,0,0); var imgdata原创 2021-03-12 14:21:28 · 71644 阅读 · 0 评论 -
js常用函数库(原生ajax、时间格式化、时间戳计算、随机数、随机字符串、正则密码验证+身份证号验证)
开发版/*** 常用函数封装* author: slongzhang* date: 2021-01-06*/(function(){class Zsl{ constructor(){ // // 正则转义符号 // this.escapeSymbol = ['$','(',')','*','+','.','[',']','?','\\','/','^','{','}']; } /** * 加载后才执行 * _fn function 一个可执行函数 */ read原创 2021-02-05 18:26:32 · 82149 阅读 · 1 评论 -
chrome监听cookie变化
/*** 监听cookie变化*/chrome.cookies.onChanged.addListener(function(changeInfo){ // cookies.onChanged监听的是所有的cookie,所以需要过滤只处理我们网站自己的cookie if(GhomepageDomain == changeInfo.cookie.domain){ var cookieNameReg = /[A-Z]/; var cookieInfo = changeInfo.cookie;原创 2021-01-22 16:33:46 · 84641 阅读 · 0 评论 -
浏览器插件开发-往百度注入layer报错(layer 报错 Cannot read property ‘extend‘ of undefined)
百度首页的jQuery是百度自己重构的,如果直接调用百度的jquery而没有注入完整的jquery会至这个情况,其次百度还有个模块化define也是重构的,也会导致报错;解决办法解压layer,修改入口调用移除红色这块的代码即可,或者复制我下面代码直接替换// 搜索该代码e.layui && layui.define ? (r.ready(), layui.define("jquery", function(t) { r.path = layui.cache.dir,原创 2021-01-20 23:11:27 · 82481 阅读 · 0 评论 -
如何使用JavaScript实现纯前端读取和导出excel文件
**转载自 小茗同学 的 如何使用JavaScript实现纯前端读取和导出excel文件 js-xlsx 介绍由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xlsx格式为例。官方github:https://github.com/SheetJS/js-xlsx本文配套demo在线演示地址:http://demo.haoj转载 2021-01-08 18:12:19 · 83289 阅读 · 0 评论 -
Chrome插件(扩展)开发全攻略
**转载自 小茗同学 的 【干货】Chrome插件(扩展)开发全攻略 写在前面我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的,所以转载务必保留出处。本文所有涉及到的大部分代码均在这个demo里面:https://github.com/sxei/chrome-plugin-demo ,大家可以直接下载下来运行。另外,本文图片较多,且图片服务器带宽有限,右下角的目录滚动监听必须等到图片全部加载完毕之后才会触发,所以请耐心等待加载完毕。转载 2021-01-08 18:08:01 · 92452 阅读 · 1 评论 -
SheetJS中文文档-js导出Excel脚本库
转载自 GITHUB用户rockboom 的翻译文档SheetJs下载: GITHUB地址 | CSDN下载地址SheetJS js-xlsxSheetJS是用于多种电子表格格式的解析器和编写器。通过官方规范、相关文档以及测试文件实现简洁的JS方法。SheetJS强调解析和编写的稳健,其跨格式的特点和统一的JS规范兼容,并且ES3/ES5浏览器向后兼容IE6。目前这个是社区版,我们也提供了性能增强的专业版,专业版提供样式和专业支持的附加功能。转载 2021-01-08 11:33:13 · 93422 阅读 · 5 评论 -
提取jQuery的ready方法
(function(){ document.ready = function(fn){ if(typeof !== 'function'){ throw 'Fn is not a function!'; } function completed() { document.removeEventListener( "DOMContentLoaded", completed ); wi原创 2021-01-06 14:42:19 · 82052 阅读 · 0 评论 -
JS将数字金额转换为大写人民币汉字
转载自 qubernet 博客 JS将数字金额转换为大写人民币汉字function convertCurrency(money) { //汉字的数字 var cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'); //基本单位 var cnIntRadice = new Array('', '拾', '佰', '仟'); //对应整数部分扩展单位 var cnIntUnits转载 2021-01-04 14:08:00 · 83144 阅读 · 0 评论 -
WebSocket断线自动重连javascript库(含心跳包)
ReconnectingWebSocket 是一个小型的 JavaScript 库,封装了 WebSocket API提供了在连接断开时自动重连的机制。// 只需要简单的将:var ws = new WebSocket('ws://....');// 替换成:var ws = new ReconnectingWebSocket('ws://....');原ReconnectingWebSocket的GITHUB下载地址下面是我从ReconnectingWebSocket源代码里根据我自身.原创 2021-01-03 21:30:44 · 84297 阅读 · 2 评论 -
js划词翻译、屏幕取词,取词位置获取(真正解决定位问题)
划词、鼠标选词、翻译这些都是很简单的事一般熟悉js鼠标事件都能搞定,而比较难的是怎么确定我们选中的词在哪个位置执行完翻译的结果该怎么定位,这个问题我在开发翻译插件时摸了个深坑,全网搜索不到可用方案,研究有道的划词翻译插件因它代码压缩也没发现他的解决方案,最终在火狐开发文档里找到了normalize才真正解决了定位问题;鼠标按下弹起和移动的事件这里就不贴代码了,懂的不需要我贴代码,不懂的去菜鸟或w3c那里讲得更详细获取鼠标选中的词var selectText = function(){ va.原创 2021-01-03 18:42:04 · 83788 阅读 · 0 评论 -
js监听dom变化(未完善)
var MO_options = { attributes: true, childList: true,subtree:false,attributeOldValue:true};//回调事件function MO_callback(mutationsList, observer) { console.log(mutationsList); console.log(observer); console.log('*******************************')原创 2020-12-21 10:17:36 · 82337 阅读 · 0 评论 -
js之生成并下载txt文件
转载自:博客园-莫小龙 的 js之生成并下载txt文件function downloadTxt(text, fileName){ let element = document.createElement('a') element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)) element.se转载 2020-12-18 15:59:07 · 83761 阅读 · 1 评论 -
es6对象class内的自我调用
class对象里的自我调用class A1{ constructor(num){ this.num = num; this.execSettimes(); } execSettimes(param){ let num = this.num--; console.log({num,param}); if(this.num>0){ setTimeout(this.execSe原创 2020-12-07 15:55:13 · 98012 阅读 · 0 评论