- 博客(25)
- 收藏
- 关注
原创 基于共享cookie的单点登录
2.在业务平台加载页面时候使用共享的cookie登录信息发起验证网络请求,验证成功则进入登录页面,验证失败跳转到登录页面平台。1.目前主流的单点登录方式有两种一种基于共享cookie,一种基于token(跳转sso认证中心网站验证)1.在专门的登录平台或者具备共享cookie登录信息的网站进行登录, 登录成功后服务端返回响应头中。记录下基于共享cookie系统的基本实现(没太多经历写了,就记录下关键点了)这样在所有业务系统为xxx.mydomian.com域名的都能共享登录信息。
2025-03-19 14:19:55
158
原创 选中文本后,页面聚焦到输入框时,保持文本的选中状态不取消
css方面就记得给模拟选中条的容器层(highlight_layer)加上 point-event:none让鼠标事件穿透,不然容器highlight_layer盖住了文本区会导致文本没法进行选中。这几天在写一个通过AI,生成markdown文章的需求,涉及到给markdown文章选中片段提修改点,但选中片段后 弹出输入框聚焦输入 选中文本片段会取消,尝试了网上文章常用的阻止事件冒泡等都无效。实在没办法参考了开源项目专门模拟选中效果了进行控制了。
2024-12-04 23:35:44
228
原创 鸿蒙next 蓝牙连接穿戴设备数据交互流程
连接之前为app开启后台长时任务防止app在后台被挂起或者冻结,导致收不到设备指令。获取apptokenId,然后判断蓝牙的可接近权限。我们以正常同步数据为例一般是为蓝牙设备写入特征码值。监听蓝牙特征码改变用于手表与手机之间同步数据。获取权限后若系统蓝牙未开启要进行开启。手动开启蓝牙扫描并监听蓝牙扫描结果。1.检查app是否有授予蓝牙权限。解析数据,以同步数据为例。
2024-10-26 13:35:15
649
原创 阿里lowcode低码引擎源码(一)解析基础流程
注册插件->初始化插件为sketen添加配置->根据配置信息对应用的Area添加配置->Area调用自己的container进行配置添加->WidgetContainer添加配置的不同为自己创建不同的item->Area对象以属性的形式传入UI组件->UI组件遍历Area中WidgetContainer的items进行渲染。接下来就是 skeleton.add ->this.xxxArea.add->WidgetContainer.add解析配置->调用来自Area的handle方法。
2024-06-21 15:46:23
1005
原创 记录一次内存泄漏页面卡死的情况
2.再使用performance记录一段时间的性能,可以看到页面在用户完全无交互的情况下执行了这么多密密麻麻的函数栈,我们随便选取一个最底部的发现是setInterval方法,在往上面找一步发现其业务代码。点卡发现函数组件每次setState并未对更新前的setInterval取消,函数更新后又新增一个setInerval,这些新增的setInterval都未取消越来越多,最终随着时间的推移页面越来越卡。写了一个项目,一开始打开页面性能还可以 ,页面放的越久就越卡cpu和内存占用就越多。
2024-03-11 14:36:06
564
原创 通过script标签引入代码混淆后的umd模块文件,开始sourcemap调试源代码
这个umd文件的代码都混淆了,(我为什么不直接配置不让代码混淆,因为用的一个个人封装的脚手架没有使用文档,源码也太长懒得看,暂时还未找到配置入口,哈哈哈)3.将项目跑起来,并在浏览器上搜索sourcemap对应的文件源码 打上断点即可调式。2.在打包后的文件里面引入sourcemap,这里使用磁盘上的绝对路径。1.打包开启sourcemap 属性生成sourcemap文件。由于代码都压缩混淆了,我想开启sourcemap调试源码。通过script标签引入一个umd文件。
2024-03-06 22:02:34
416
转载 前端组件库本地开发调试的自动化流程实现
本地开发调试阶段在 library 侧,进入 library 所在目录启动监听器(nodemon),并附上 watch 变化后重新构建和推送新包的脚本命令(Makefile);在项目侧,注册对本地 library 的依赖并安装(yalc add @package),并启动本地开发服务(webpack-dev-server),负责调试服务和热更新等内容;在发布流程前在 library 侧,关闭监听器并编译打包(npm run build),发布新版本至 npm;
2024-02-17 19:34:58
250
1
原创 echarts折线图区域颜色使用areaStyle绘制某个折线范围值数据中间有空点显示解决方案
首先范围线段想采用两条开启stack属性堆叠折线图然后上划线加areaStyle属性进行绘制,但是后台返回的数据节点有空点而且间隔随机,即便开启了connectNulls:true只能保证线段不间断,但对于折线范围null数据节点依然会导致堆叠效果异常。让其区域areaStyle颜色遮住上划线空节点的areaStyle颜色间接达到效果,但是这会出现一个问题就是zlevel区域颜色areaStyle提升了会遮住坐标轴和两外两条线段。两条线都好绘制主要是那个范围线段出了点问题。
2023-11-15 10:59:06
1335
1
转载 深入了解浏览器异步原理
什么是进程与线程(包括进程与线程的区别)浏览器中的进程,各个进程的职责浏览器中渲染进程的线程,各个线程的职责js单线程的执行机制js单线程存在的问题,解决方案js线程和GUI线程的关系js线程解析执行js时,与其他线程的关系 ***宏任务与微任务1. 什么是进程和线程进程:进程是系统中正在运行的一个程序,程序一旦运行就是进程。进程可以看成程序执行的一个实例,可以视作为浏览器打开了多个tab页,每个tab页相当于独立的进程。进程是系统资源分配的独立实体,每个进程都拥有独立的地址空间。一个进程无法访问另一个进程
2022-04-16 22:35:13
1237
2
原创 Vue实例methods中的方法this指针,在eventBus和addListener中的指向问题
首先说结论,Vue中的methods方法this在源码中全部被bind到当前Vue组件实例,上源码可以看出vue里面的方法都被bind强制绑定了this上下文,也就是当前Vue组件实例functionnativeBind(fn,ctx){returnfn.bind(ctx)}varbind=Function.prototype.bind?nativeBind:polyfillBind;functioninitMethods(vm,methods){/...
2022-01-16 14:19:05
1131
转载 Vue源码之响应式原理
前言computed 在 vue 中是很常用的属性配置,它能够随着依赖属性的变化而变化,为我们带来很大便利。那么本文就来带大家全面理解 computed 的内部原理以及工作流程。在这之前,希望你能够对响应式原理有一些理解,因为 computed 是基于响应式原理进行工作。如果你对响应式原理还不是很了解,可以阅读我的上一篇文章:手摸手带你理解Vue响应式原理 computed 用法想要理解原理,最基本就是要知道如何使用,
2021-12-20 14:24:27
444
原创 leetcode算法常见解题思路--二叉树篇
1.填充二叉树节点的右侧指针二叉树的问题难点在于,如何把题目的要求细化成每个节点需要做的事情,但是如果只依赖一个节点的话,肯定是没办法连接「跨父节点」的两个相邻节点的,那么,我们的做法就是增加函数参数,一个节点做不到,我们就给他安排两个节点,「将每一层二叉树节点连接起来」可以细化成「将每两个相邻节点都连接起来]。//主函数Nodeconnect(Noderoot){if(root==null)returnnull;connectTwoNode(root....
2021-12-17 11:37:53
632
转载 vue中如何监测数组的变化
一、数组监听与对象监听的不同对象的监听是直接递归使用Object.defineProperty重新定义数组的每个属性,而数据是改写数组的7个数组方法:push,pop,shift,unshift,sort,splice,reverse二、实现原理vue在数据初始化时调用initData方法,然后通过new Observer对数据进行监测,然后对数据进行判断,如果是数组并且支持原型链就会执行protoAugment让目标原型链指向arrayMethods,arrayMethods用来改写数组的原型
2021-12-14 11:09:58
5226
原创 vue源码分析之异步组件
去构造子组件的基础构造函数,此时会在构造函数上新增一个cid属性(在4789行),所以我们这里通过cid来判断该组件是否为一个函数。resolveAsyncComponent内部会定义一个resolve和reject函数,然后执行factory()函数,factory()就是我们在main.js里给HelloWorld组件定义的函数,函数内会执行require函数,由于require()是个异步操作,所以resolveAsyncComponent就会返回undefined。
2021-12-14 10:32:45
1233
原创 理解JS的作用域
一、作用域作用域是指程序源代码中定义变量的区域,作用域规定了如何查找变量,也就是确定当前执行代码对变量的访问权限。二、作用域链当一个块或函数嵌套在另一个块或函数中时,就发生了作用域的嵌套首先,JS引擎从当前的执行作用域开始查找变量。 然后,如果找不到,引擎会在外层嵌套的作用域中继续查找。 最后,直到找到该变量,或抵达最外层的全局作用域为止三、词法作用域词法作用域就是定义在词法阶段的作用域,简单说就是函数的作用域在函数定义的时候就决定了,而与词法作用域相对的是动态作用域,函数的.
2021-12-13 17:05:07
2213
原创 leetcode算法常见解题思路--链表篇
一、合并有序链表1.需要一个虚拟节点做合并新列表的头节点2.如果合并的链表条数不止两条的话,可以 建立一个 优先级队列(可以使用数组配合sort建立),放各个链表的头节点。二、单链表的倒数第K个节点可以使用双指针,让一个指针先走k步,然后再让另一个指针开始走,同时第一个指针也继续走,当第一个指针走到结尾,第二个指针指向的就是倒数第k个节点。三、 单链表的中点可以采用快慢指针,核心思路就是一个指针走一步,另一个指针走两步,当其中一个指针走到链表尾部时,另一个指针指向的就是链表中点
2021-11-08 17:16:58
482
原创 易久批商城技术设计文档
1.易久批商城项目官网,用于做商品展示---C端,(后期从性能的角度来讲考虑做ssr)2.运营人员使用--商城管理系统---B端用于官网商品信息的编辑3.平台管理员使用的管理系统----后台主要用于官网模块的管理以及购买和浏览数据的统计。
2021-11-02 16:44:15
313
转载 es6之class原理
目录 一、概述二、class的实现1. 基本原理2. class语法规范(1). 取值函数(getter)和存值函数(setter)(2). 属性表达式(3). class表达式(4). this的指向 三、class的继承1. 继承的概念2. 继承的基本原理3. ...
2021-10-18 14:49:03
1035
原创 关于audio标签设置currentTime属性无效,currentTime变为0
1.进度条的控制主要分为监听鼠标的mousedown和mousemove事件点击跳转进度条 主要是mousedown.e.currentTarget.getBoundingClientRect(应为事件绑定在父元素上,事件的触发为子元素冒泡触发,不能用target)获取进度条离页面左边的距离,e.clientX获取实际点击的坐标,两者相减得到真实的点击在进度条里面的坐标,拖拽的的原理同上,只是说拖拽是个不断触发的过程而已2.音频文件的显示数字的设置主要是监听audio标签的loadedd
2021-10-17 18:41:49
5317
4
原创 js关于base64转换file类型
//将base64转换为blob dataURLtoBlob: function (dataurl) { var arr = dataurl.split(","), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { ...
2021-10-14 10:01:03
799
原创 npm install npm ERR! cb() never called! npm ERR! This is an error with npm itself. Please report th
再网上找了好多方法1.清楚缓存的2.卸载node重装的3.卸载删除本地node_module和package_lock.json的重新安装的但都不行后来想了一下是不是淘宝镜像的问题然后切换了下npm仓库到原始镜像npm config set registry https://registry.npmjs.org删除本地node_module和package_lock.json的重新安装,问题解决...
2021-06-27 18:28:17
258
【软件开发与调试】常见技术问题汇总及解决方案:涵盖网络连接、缓存处理、单点登录、前端开发等多方面内容,这是将文档
2025-04-11
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人