- 博客(110)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 关于JSON转字符串后前端与python得到的结果不一致的问题，及对象按key排序
背景： 哈希码参数校验防参数篡改。前端下发接口时对参数按约定秘钥和逻辑进行加密，后端在获取到请求后对请求参数以同样的秘钥和逻辑加密计算得出哈希值，再与请求的哈希值对比，如果不一致则证明参数被篡改。前端代码： 对json对象进行了按key排序1 let dataTmp = this.deepClone(data);2 3 let dataStr:string4 ...
2024-04-30 14:20:00
307
原创 动态尺寸加载libpag文件白边问题解决方案
加载pag文件时，最理想的情况是canvas的宽高和pag资源文件的宽高一致，或比例一致。否则就会出现四周白边(页面底色)，除非是按平铺的样式进行设置(源码暂未找到对应方法)。 而对于页面宽高不定的情况下，就无法保证pag文件能适配页面，如果pag文件底色和父级页面底色不一致，就会表现出来(所以底色改成一致也算是一种解决方案)。 那么在页面宽高不定(宽高不写死)的情况下，如果想达到内...
2024-03-25 15:36:00
283
原创 关于浏览器resize的一些问题
谷歌浏览器(当前版本是：版本 92.0.4515.159(正式版本) (64 位)，目前最新版也一样有该问题)添加了resize监听时，在缩小窗口时，如果宽度和高度都发生了变化，就会触发两次，而放大时，不论是否宽度高度都改变，都只会触发一次。而如果在缩小时只调整了宽度或者高度中的一个，则只会触发一次。其他浏览器(火狐)是正常的，不论是否同时调整宽度高度，都只会触发一次。 看起来的现象是谷...
2024-03-25 15:15:00
321
原创 MutationObserver监听DOM结构变化
前面有IntersectionObserver观察器实现页面懒加载的功能，原理就是观察dom是否进入视口。那么如果不管是否可见或者要实现随时监听，则需要使用MutationObserver。示例代码： 1 filterObserve: function(_id) { 2 if ($("#"+_id+" form t-form-item").length<5) ret...
2024-02-29 19:56:00
429
原创 谷歌和火狐的浏览器表现差异（1）
作为主流浏览器的谷歌和火狐，其内核在一些问题处理上有一些差异，比如一些样式、事件。就事件来说，监听界面切换就是差异之一。就原因来分析，就是二者对于document和window的范围界定有差异，火狐认为浏览器tab就是window，所以在切换tab时可以触发到window的事件，而谷歌则认为tab对应的是ducument，可视区域才是window范围。具体示例：场景：监听页面切换，在切换回...
2023-11-08 17:58:00
215
原创 Angular监听页面resize
import { fromEvent } from 'rxjs';this._event = formEvent(window, 'resize').subscribe((e)=>{})同理，可以作用在任意元素上，也可以作用在任意支持的事件上。可以在destroy的时候unsubscrib来取消订阅。...
2023-09-26 16:25:00
102
原创 vue常见问题汇总
来源：https://www.fly63.com/Q1：安装超时(install timeout)方案有这么些:cnpm : 国内对npm的镜像版本/*cnpm website: https://npm.taobao.org/*/npm install -g cnpm --registry=https://registry.npm.taobao.org// cnpm 的大多命令跟 np...
2023-08-30 16:39:00
965
原创 前端文件相关总结
先引用掘金上的一个总结，将前端会遇到的文件相关的知识点间的关系串联了起来。 前端技术提供了一些高效的解决方案：文件流操作和切片下载与上传。1. 文件基本操作1.1数据流和文件处理的基本概念数据流是指连续的数据序列，可以从一个源传输到另一个目的地。在前端开发中，文件可以被看作数据流的一种形式，可以通过数据流的方式进行处理。 文件处理涉及读取和写入文件的操作，包括读取文件的内容、写...
2023-08-30 16:36:00
319
原创 前端录制与回放
1. 背景 1.1 selenium等自动化测试工具 1.2 webRTC屏幕录制 1.3 rrweb+rrwebplayer2. 对比 selenium适用于自动化测试、自动运行脚本；webRTC适用于录制视频与上传分析；rrweb适用于后台录制与行为分析。都可用来排查问题、指导用户操作等场景。3. rrweb使用 3.1 引入 npm i来安装rrweb和rrwe...
2023-08-30 15:25:00
256
原创 时间切片
1.下次绘制交互 (INP) 下次绘制交互 (INP) 是一项新的指标，浏览器计划于 2024 年 3 月将其取代取代首次输入延迟 (FID) ，成为最新的Web Core Vitals(Web 核心性能指标)。2. 时间切片-scheduler.yield 背景：用户任务完成自动释放控制权给主线程。而如果任务耗时过长，则可能出现延迟导致主线程任务响应延迟。那么一种解决方法就是在主...
2023-08-30 14:54:00
199
原创 关于iframe的一些总结（2018）
在使用iframe的时候，会有很多莫名奇怪的问题。所有很少使用，但是有接手了一个项目，其中用了挺多的iframe问题1：iframe内部取不到外部的元素。表现：直接在控制台取可以取到，但是在js实际执行的时候取不到。控制台输入：$(".menu-title li a")[i].getAttribute("data-url")js中获取不到，需要使用如下：window.parent.w...
2023-08-30 14:12:00
36
原创 VUE路由（2018）
在当前的前端开发中，路由是一个很重要的概念，尤其是针对单页面app，因为通过路由可以实现不跳转加载刷新。比如angular应用，vue应用。 VUE路由语法：1.首先，安装方法和angular路由类似，可以单独安装，也可以直接使用VUE-cli集成使用。2.vue接收路由的渲染输出的标签是<router-view></router-view>，angular接...
2023-08-30 14:11:00
517
原创 Vue学习笔记一（2019）
1.VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。 1 const store = new Vuex.Store({ 2 stat...
2023-08-30 14:11:00
274
原创 前端埋点常用方法
1. 使用场景 主要用于数据采集，如：性能分析，用户行为分析，日常信息采集，测试信息采集等。指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。. 比如用户某个icon点击次数、观看某个视频的时长等等。2. 方法 常见的埋点上报方式有ajax，img，navigator.sendBeacon。这些都是需要发送到服务端的，也可以采用本地存储等方式保存到客户端，然后通过...
2023-08-18 11:54:00
215
原创 Angular FormControl value属性的一些事
背景：一个输入校验，允许输入多行，每一行是ip或网段。写了个校验，将其按行拆分后单独校验。1.FormControl无法深复制 使用JSON.parse(JSON.stringify(control))进行简单深复制报错，因为不是json类型；使用deepClone进行递归深复制，直接栈溢出。考虑到代码的健壮性，已经有单独校验的方法，所以不想再写个新的，也不想再把正则写一遍以至于需要...
2023-08-09 16:21:00
231
原创 笔记20230727
1. http2.0，概念就不说了，查看是否使用：network调试，查看请求的header-view source，可以查看http版本；后端，如nginx，配置，http2表示开启。后端开启、浏览器支持，则会自动切换到2.0.2.background-attachment: fixed;效果是背景相对界面绝对布局，但滚动时多个图片可实现视口图片相对固定的效果。3.一些喜欢的样式hov...
2023-07-27 14:45:00
455
原创 webworker/浏览器空闲状态/不引入单独js
想必大家都遇到过浏览器页面最小化、非当前聚焦页面(锁屏暂时没有尝试，按理是一样的)这些场景时，再次打开目标页面时，页面自动刷新了一下，或者重新加载了一次，明显可以看到卡顿了一下等等现象(不同浏览器策略有所不同)。体会最明显的就是比如我们写了一个时钟的页面，最小化等操作之前时间和机器时间是同步的，但是过了一会儿切回来的时候，时间就比机器时间慢了。 有很多大佬也都分析对比过具体的变化规律，比...
2023-07-10 16:22:00
115
原创 css便签样式
摘自网络： 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>live preview</title> 6 <style> 7 body { 8 background: #f5f5f5; ...
2022-11-07 14:29:00
136
原创 css对号样式
最近回顾了一下几年前的项目，对一些常用小功能做一下总结：对号样式(利用border)：1 width: 5px;2 height: 10px;3 border-color: #009933;4 border-style: solid;5 border-width: 0 2px 3px 0;6 transform: rotate(45...
2022-11-07 14:28:00
36
原创 OrgChart树组件
源码和包下载地址：https://gitee.com/dabeng/OrgChart/tree/master官网：Getting Started - Docs | BALKAN OrgChartJS注意官网上下载的JS版本可能无法直接使用。使用： 1 $.mockjax({ 2 url: '/orgchart/initdata', 3 respons...
2022-11-06 10:56:00
38
原创 axure原型图查看
以谷歌浏览器为例。首先axure导出的原型页面可以单个页面打开来查看，不过会有部分功能如页面菜单无法看到。其次可以下载谷歌的axure插件安装后打开index.html查看。最后如果无法找到插件或者插件安装失败，可以在导出文件的resources/chrome文件夹下，找到axure-chrome-extension.crx文件，重命名将后缀crx改成zip等压缩文件格式，然后解压到同名文...
2022-11-06 10:51:00
263
原创 浏览器切出后定时器过几分钟停止问题
1.原因浏览器为了节约资源，会停止不是当前窗口下的定时器2.解决办法2.1window的bulr和focus当浏览器失去焦点后清除定时器，聚焦后重新开始定时器，或者失去焦点不管，重新聚集后重新刷新计时window.onblur = function () { document.title = "退出页面";}window.onfocus = function () {...
2022-03-30 16:16:00
88
原创 Nginx使用笔记1
1.启动时报错[emerg]: getpwnam(“nginx”) failed没有创建Nginx用户导致，解决办法useradd -s /sbin/nologin -M nginxid nginx2.启动/usr/local/nginx/sbin/nginx3.停止/usr/local/nginx/sbin/nginx -s stop4.重新加载配置文件nginx.confi...
2022-01-26 15:17:00
26
原创 TypeScript总结（二）
1.函数this，重载，推断类型，可选参数(?号标识)，默认参数(=) 1 function buildName(firstName: string, lastName?: string) { 2 if (lastName) 3 return firstName + " " + lastName; 4 else 5 return f...
2021-09-08 14:22:00
28
原创 剪切板和上传文件内容获取
1.获取剪切板内容场景：在粘贴时将粘贴内容按换行粘贴到不同输入框，类似粘贴注册码之类的多个输入框一次粘贴功能。主要技术：input元素onpaste方法，入参是event，也可以直接获取event，内容在event.clipboardData中，items属性可以看具体内容对象，使用getData("text")方法可以获取到内容，参数还可以是Text，text/plain等。扩展：富文本...
2021-08-31 15:27:00
57
原创 CSS, LESS, SCSS, SASS总结
1.CSSCascading Style Sheets，层叠样式表。具体内容不再赘述。2.LESScss的预处理器，为了解决一些css的弊端，和扩展一些更强大的功能，以及提高效率减少重复。3.SCSS同less，只不过功能更多些。(通常说的用的sass，其实是scss)4.SASS同scss，只是语法表达式稍有不同，以及仍旧是采用的scss后缀文件名；sass用缩减代替{}，切不用...
2021-08-26 18:46:00
28
原创 计算机笔记210824
1.修改注册表报错这里可能是直接报错，也可能是报的别的错误，按照指引进行修改权限时报的这个错。中间步骤是运行-regedit，或者直接找到注册表编辑器exe，或者通过计算机-管理等入口进来，找到对应的路径，右键-权限。解决办法：高级-所有者-更改，改成Administrator(改成当前用户应该也可以，暂未尝试)。之后再修改权限，就可以保存了。原因分析：被当做子角色修改父角色(Ever...
2021-08-24 10:53:00
16
原创 算法总结（一）
1.两个链表相加总的来说类似于数学运算，思路就是依次将链表的值取出，然后进行按位相加，必须的变量有一个进位，最后返回链表时需要一个节点，运算方法除了相加还需要进行取模取余，最后由于计算是从低位到高位，所以还需要取节点时进行头部插入。代码如下。但使用特别特别长的链表时，有时会报超时，需继续优化(TODO) 1 // 假设链表中每一个节点的值都在 0 - 9 之间，那么链表整体就可以代表一...
2021-08-18 22:59:00
17
原创 cookie、正则笔记
1.cookie原生操作的方式是直接操作document.cookie2.$.cookiejquery的源码其实也是直接操作document.cookie。不过$.cookie的参数需要整理一下(1)key,(2)value,(3)其他参数对象如果只传key则是获取。关于(3)，主要有path(默认当前页面路径)、expires(默认会话持续时间，可以填数字天数、时间字符串、-1表示永...
2021-08-18 17:53:00
20
原创 TypeScript总结（一）
一、数据类型boolean、number、string、数组(number[]、Array<number>)、元组Tuple(限定元素数量和类型的数组)(let x: [string, number])、枚举(enum Color {Red = 1, Green, Blue})、Any(let notSure: any = 4)、Void(function warnUser(): ...
2021-08-17 21:08:00
21
原创 202107月笔记
1.V8引擎window有默认的status属性；2.字符串类型的变量，是否无法修改其变量类型？(直接通过=不行？)；3.心形符号：\ud83d\udc974.css,一级子元素选择符(>)：eg：a>b...
2021-07-31 17:43:00
16
原创 JS判断元素在视口可见区域
该方法的主要原理是getBoundingClientRect，之前也曾多次遇到相关场景。这里是优化框架时想到的，总结一下，代码如下： 1 // 判断元素在视口 2 function isInViewport(element) { 3 var rect = element.getBoundingClientRect(); 4 var html = document.doc...
2021-02-24 15:03:00
28
原创 图片靠右对齐与塌陷问题
图片设置float:right;后，图片未横向铺满的情况下，后边的元素会挤到图片左边。解决办法，后边元素clear:both;如果使用display: flex; flex-direction: row-reverse;来实现图片靠右，则不需要clear...
2021-01-22 00:14:00
24
原创 20201222笔记
1.中文按拼音排序localeCompare1 var a = ['哦','啊']2 a.sort((_a,_b)=>{return _a.localeCompare(_b,'zh')})2.查看电脑支持最大内存命令行：wmic memphysical get maxcapacity3.查看电脑内存命令行：wmic memorychip4.字符串的length属性表示...
2020-12-22 22:25:00
17
原创 手动触发resize兼容写法
1 if(document.createEvent) {2 var event = document.createEvent("HTMLEvents");3 event.initEvent("resize", true, true);4 window.dispatchEvent(event);5 ...
2020-12-10 11:02:00
36
原创 20200909svn钩子脚本
这里主要是为了在代码提交时进行一些代码规范校验。现在很多时候都会采用eslint等工具进行辅助开发的代码规范，这里不再细说；而一般的svnhook又是服务端的脚本，即svn仓库管理来进行设置的，对于没有这些权限的人来说不太友好。其具体原理和实现与接下来要说的客户端脚本基本一致，主要使用的是svnlook工具，有兴趣的可以搜索一下，你会发现，搜索结果百分之120都是服务端的钩子脚本。所以我把客户端...
2020-09-09 15:13:00
26
原创 20200909python笔记
1.字符串操作1.1去空格strip，lstrip，rstrip，分别是去除左右空格，去除开头空格，去除结尾空格1.2字符串包含substr in str此外find()/rfind()、index()/rindex()也可以实现，并获取到相应的indexstr.count(sub, start= 0,end=len(string))，可以获取出现的次数1.3字符串替换repla...
2020-09-09 15:00:00
24
原创 202008月笔记
7.271.区分是否中文escape(str)包含%u8.51.excel提取文档名称公式——定义名称(XXX,=GET.WORKBOOK(1))——=INDEX(XXX,ROW(A1))——下拉2.=INFO("numfile")或定义名称(XXX，=GET.WORKBOOK(4))——XXX8.131.多行注释的正则(忽略注释)'aa/*aaa*/a'.replace(/\/\*(.|...
2020-09-01 16:57:00
16
原创 css clip-path
1.背景clip-path是由clip演化而来的样式属性，表示裁剪元素的一部分来显示，其余部分隐藏。顾名思义clip-path着重于path路径。2.使用场景最先想到的场景就是登录某平台后显示的头像框，比如圆形的，就是将方形的头像裁剪出圆形来显示。其次就是用于绘制图形，比如一个红色的正方形等。或者绘制不规则图形，以及显示图形的不规则的一部分。通常用法就是结合背景色或背景图片，来进行裁剪...
2020-04-02 23:39:00
57
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人