关于JSON转字符串后前端与python得到的结果不一致的问题,及对象按key排序 背景: 哈希码参数校验防参数篡改。前端下发接口时对参数按约定秘钥和逻辑进行加密,后端在获取到请求后对请求参数以同样的秘钥和逻辑加密计算得出哈希值,再与请求的哈希值对比,如果不一致则证明参数被篡改。前端代码: 对json对象进行了按key排序1 let dataTmp = this.deepClone(data);2 3 let dataStr:string4 ...
动态尺寸加载libpag文件白边问题解决方案 加载pag文件时,最理想的情况是canvas的宽高和pag资源文件的宽高一致,或比例一致。否则就会出现四周白边(页面底色),除非是按平铺的样式进行设置(源码暂未找到对应方法)。 而对于页面宽高不定的情况下,就无法保证pag文件能适配页面,如果pag文件底色和父级页面底色不一致,就会表现出来(所以底色改成一致也算是一种解决方案)。 那么在页面宽高不定(宽高不写死)的情况下,如果想达到内...
关于浏览器resize的一些问题 谷歌浏览器(当前版本是:版本 92.0.4515.159(正式版本) (64 位),目前最新版也一样有该问题)添加了resize监听时,在缩小窗口时,如果宽度和高度都发生了变化,就会触发两次,而放大时,不论是否宽度高度都改变,都只会触发一次。而如果在缩小时只调整了宽度或者高度中的一个,则只会触发一次。其他浏览器(火狐)是正常的,不论是否同时调整宽度高度,都只会触发一次。 看起来的现象是谷...
MutationObserver监听DOM结构变化 前面有IntersectionObserver观察器实现页面懒加载的功能,原理就是观察dom是否进入视口。那么如果不管是否可见或者要实现随时监听,则需要使用MutationObserver。示例代码: 1 filterObserve: function(_id) { 2 if ($("#"+_id+" form t-form-item").length<5) ret...
谷歌和火狐的浏览器表现差异(1) 作为主流浏览器的谷歌和火狐,其内核在一些问题处理上有一些差异,比如一些样式、事件。就事件来说,监听界面切换就是差异之一。就原因来分析,就是二者对于document和window的范围界定有差异,火狐认为浏览器tab就是window,所以在切换tab时可以触发到window的事件,而谷歌则认为tab对应的是ducument,可视区域才是window范围。具体示例:场景:监听页面切换,在切换回...
Angular监听页面resize import { fromEvent } from 'rxjs';this._event = formEvent(window, 'resize').subscribe((e)=>{})同理,可以作用在任意元素上,也可以作用在任意支持的事件上。可以在destroy的时候unsubscrib来取消订阅。...
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...
前端文件相关总结 先引用掘金上的一个总结,将前端会遇到的文件相关的知识点间的关系串联了起来。 前端技术提供了一些高效的解决方案:文件流操作和切片下载与上传。1. 文件基本操作1.1数据流和文件处理的基本概念数据流是指连续的数据序列,可以从一个源传输到另一个目的地。在前端开发中,文件可以被看作数据流的一种形式,可以通过数据流的方式进行处理。 文件处理涉及读取和写入文件的操作,包括读取文件的内容、写...
前端录制与回放 1. 背景 1.1 selenium等自动化测试工具 1.2 webRTC屏幕录制 1.3 rrweb+rrwebplayer2. 对比 selenium适用于自动化测试、自动运行脚本;webRTC适用于录制视频与上传分析;rrweb适用于后台录制与行为分析。都可用来排查问题、指导用户操作等场景。3. rrweb使用 3.1 引入 npm i来安装rrweb和rrwe...
时间切片 1.下次绘制交互 (INP) 下次绘制交互 (INP) 是一项新的指标,浏览器计划于 2024 年 3 月将其取代取代首次输入延迟 (FID) ,成为最新的Web Core Vitals(Web 核心性能指标)。2. 时间切片-scheduler.yield 背景:用户任务完成自动释放控制权给主线程。而如果任务耗时过长,则可能出现延迟导致主线程任务响应延迟。那么一种解决方法就是在主...
关于iframe的一些总结(2018) 在使用iframe的时候,会有很多莫名奇怪的问题。所有很少使用,但是有接手了一个项目,其中用了挺多的iframe问题1:iframe内部取不到外部的元素。表现:直接在控制台取可以取到,但是在js实际执行的时候取不到。控制台输入:$(".menu-title li a")[i].getAttribute("data-url")js中获取不到,需要使用如下:window.parent.w...
VUE路由(2018) 在当前的前端开发中,路由是一个很重要的概念,尤其是针对单页面app,因为通过路由可以实现不跳转加载刷新。比如angular应用,vue应用。 VUE路由语法:1.首先,安装方法和angular路由类似,可以单独安装,也可以直接使用VUE-cli集成使用。2.vue接收路由的渲染输出的标签是<router-view></router-view>,angular接...
Vue学习笔记一(2019) 1.VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。 1 const store = new Vuex.Store({ 2 stat...
前端埋点常用方法 1. 使用场景 主要用于数据采集,如:性能分析,用户行为分析,日常信息采集,测试信息采集等。指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。. 比如用户某个icon点击次数、观看某个视频的时长等等。2. 方法 常见的埋点上报方式有ajax,img,navigator.sendBeacon。这些都是需要发送到服务端的,也可以采用本地存储等方式保存到客户端,然后通过...
Angular FormControl value属性的一些事 背景:一个输入校验,允许输入多行,每一行是ip或网段。写了个校验,将其按行拆分后单独校验。1.FormControl无法深复制 使用JSON.parse(JSON.stringify(control))进行简单深复制报错,因为不是json类型;使用deepClone进行递归深复制,直接栈溢出。考虑到代码的健壮性,已经有单独校验的方法,所以不想再写个新的,也不想再把正则写一遍以至于需要...
笔记20230727 1. http2.0,概念就不说了,查看是否使用:network调试,查看请求的header-view source,可以查看http版本;后端,如nginx,配置,http2表示开启。后端开启、浏览器支持,则会自动切换到2.0.2.background-attachment: fixed;效果是背景相对界面绝对布局,但滚动时多个图片可实现视口图片相对固定的效果。3.一些喜欢的样式hov...
webworker/浏览器空闲状态/不引入单独js 想必大家都遇到过浏览器页面最小化、非当前聚焦页面(锁屏暂时没有尝试,按理是一样的)这些场景时,再次打开目标页面时,页面自动刷新了一下,或者重新加载了一次,明显可以看到卡顿了一下等等现象(不同浏览器策略有所不同)。体会最明显的就是比如我们写了一个时钟的页面,最小化等操作之前时间和机器时间是同步的,但是过了一会儿切回来的时候,时间就比机器时间慢了。 有很多大佬也都分析对比过具体的变化规律,比...
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; ...
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...
OrgChart树组件 源码和包下载地址:https://gitee.com/dabeng/OrgChart/tree/master官网:Getting Started - Docs | BALKAN OrgChartJS注意官网上下载的JS版本可能无法直接使用。使用: 1 $.mockjax({ 2 url: '/orgchart/initdata', 3 respons...