- 博客(22)
- 收藏
- 关注
RSS订阅原创 阿里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
448
原创 记录一次内存泄漏页面卡死的情况
2.再使用performance记录一段时间的性能，可以看到页面在用户完全无交互的情况下执行了这么多密密麻麻的函数栈，我们随便选取一个最底部的发现是setInterval方法，在往上面找一步发现其业务代码。点卡发现函数组件每次setState并未对更新前的setInterval取消，函数更新后又新增一个setInerval,这些新增的setInterval都未取消越来越多，最终随着时间的推移页面越来越卡。写了一个项目，一开始打开页面性能还可以 ，页面放的越久就越卡cpu和内存占用就越多。
2024-03-11 14:36:06
313
原创 通过script标签引入代码混淆后的umd模块文件，开始sourcemap调试源代码
这个umd文件的代码都混淆了，（我为什么不直接配置不让代码混淆，因为用的一个个人封装的脚手架没有使用文档，源码也太长懒得看，暂时还未找到配置入口，哈哈哈）3.将项目跑起来，并在浏览器上搜索sourcemap对应的文件源码 打上断点即可调式。2.在打包后的文件里面引入sourcemap，这里使用磁盘上的绝对路径。1.打包开启sourcemap 属性生成sourcemap文件。由于代码都压缩混淆了，我想开启sourcemap调试源码。通过script标签引入一个umd文件。
2024-03-06 22:02:34
272
转载 前端组件库本地开发调试的自动化流程实现
本地开发调试阶段在 library 侧，进入 library 所在目录启动监听器（nodemon），并附上 watch 变化后重新构建和推送新包的脚本命令（Makefile）；在项目侧，注册对本地 library 的依赖并安装（yalc add @package），并启动本地开发服务（webpack-dev-server），负责调试服务和热更新等内容；在发布流程前在 library 侧，关闭监听器并编译打包（npm run build），发布新版本至 npm；
2024-02-17 19:34:58
148
1
原创 echarts折线图区域颜色使用areaStyle绘制某个折线范围值数据中间有空点显示解决方案
首先范围线段想采用两条开启stack属性堆叠折线图然后上划线加areaStyle属性进行绘制，但是后台返回的数据节点有空点而且间隔随机，即便开启了connectNulls:true只能保证线段不间断，但对于折线范围null数据节点依然会导致堆叠效果异常。让其区域areaStyle颜色遮住上划线空节点的areaStyle颜色间接达到效果，但是这会出现一个问题就是zlevel区域颜色areaStyle提升了会遮住坐标轴和两外两条线段。两条线都好绘制主要是那个范围线段出了点问题。
2023-11-15 10:59:06
803
1
转载 深入了解浏览器异步原理
什么是进程与线程（包括进程与线程的区别）浏览器中的进程，各个进程的职责浏览器中渲染进程的线程，各个线程的职责js单线程的执行机制js单线程存在的问题，解决方案js线程和GUI线程的关系js线程解析执行js时，与其他线程的关系 ***宏任务与微任务1. 什么是进程和线程进程：进程是系统中正在运行的一个程序，程序一旦运行就是进程。进程可以看成程序执行的一个实例，可以视作为浏览器打开了多个tab页，每个tab页相当于独立的进程。进程是系统资源分配的独立实体，每个进程都拥有独立的地址空间。一个进程无法访问另一个进程
2022-04-16 22:35:13
1153
1
原创 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
1059
转载 Vue源码之响应式原理
前言computed 在 vue 中是很常用的属性配置，它能够随着依赖属性的变化而变化，为我们带来很大便利。那么本文就来带大家全面理解 computed 的内部原理以及工作流程。在这之前，希望你能够对响应式原理有一些理解，因为 computed 是基于响应式原理进行工作。如果你对响应式原理还不是很了解，可以阅读我的上一篇文章：手摸手带你理解Vue响应式原理 computed 用法想要理解原理，最基本就是要知道如何使用，
2021-12-20 14:24:27
386
原创 leetcode算法常见解题思路--二叉树篇
1.填充二叉树节点的右侧指针二叉树的问题难点在于，如何把题目的要求细化成每个节点需要做的事情，但是如果只依赖一个节点的话，肯定是没办法连接「跨父节点」的两个相邻节点的，那么，我们的做法就是增加函数参数，一个节点做不到，我们就给他安排两个节点，「将每一层二叉树节点连接起来」可以细化成「将每两个相邻节点都连接起来]。//主函数Nodeconnect(Noderoot){if(root==null)returnnull;connectTwoNode(root....
2021-12-17 11:37:53
500
转载 vue中如何监测数组的变化
一、数组监听与对象监听的不同对象的监听是直接递归使用Object.defineProperty重新定义数组的每个属性，而数据是改写数组的7个数组方法：push，pop，shift，unshift，sort，splice，reverse二、实现原理vue在数据初始化时调用initData方法，然后通过new Observer对数据进行监测，然后对数据进行判断，如果是数组并且支持原型链就会执行protoAugment让目标原型链指向arrayMethods，arrayMethods用来改写数组的原型
2021-12-14 11:09:58
5140
原创 vue源码分析之异步组件
一、工厂函数1当组件执行_render函数转换成虚拟VNode时遇到组件时会执行createComponent()函数，如下:function createComponent ( //第4184行 创建组件Vnode Ctor, //Ctor:组件的构造函数 data, //data:数组 context,
2021-12-14 10:32:45
1147
原创 理解JS的作用域
一、作用域作用域是指程序源代码中定义变量的区域，作用域规定了如何查找变量，也就是确定当前执行代码对变量的访问权限。二、作用域链当一个块或函数嵌套在另一个块或函数中时，就发生了作用域的嵌套首先，JS引擎从当前的执行作用域开始查找变量。 然后，如果找不到，引擎会在外层嵌套的作用域中继续查找。 最后，直到找到该变量，或抵达最外层的全局作用域为止三、词法作用域词法作用域就是定义在词法阶段的作用域，简单说就是函数的作用域在函数定义的时候就决定了，而与词法作用域相对的是动态作用域，函数的.
2021-12-13 17:05:07
2168
原创 leetcode算法常见解题思路--链表篇
一、合并有序链表1.需要一个虚拟节点做合并新列表的头节点2.如果合并的链表条数不止两条的话，可以 建立一个 优先级队列（可以使用数组配合sort建立）,放各个链表的头节点。二、单链表的倒数第K个节点可以使用双指针，让一个指针先走k步，然后再让另一个指针开始走，同时第一个指针也继续走，当第一个指针走到结尾，第二个指针指向的就是倒数第k个节点。三、 单链表的中点可以采用快慢指针，核心思路就是一个指针走一步，另一个指针走两步，当其中一个指针走到链表尾部时，另一个指针指向的就是链表中点
2021-11-08 17:16:58
433
原创 易久批商城技术设计文档
1.易久批商城项目官网，用于做商品展示---C端,(后期从性能的角度来讲考虑做ssr)2.运营人员使用--商城管理系统---B端用于官网商品信息的编辑3.平台管理员使用的管理系统----后台主要用于官网模块的管理以及购买和浏览数据的统计。
2021-11-02 16:44:15
225
转载 es6之class原理
目录 一、概述二、class的实现1. 基本原理2. class语法规范(1). 取值函数（getter）和存值函数（setter）(2). 属性表达式(3). class表达式(4). this的指向 三、class的继承1. 继承的概念2. 继承的基本原理3. ...
2021-10-18 14:49:03
956
原创 关于audio标签设置currentTime属性无效，currentTime变为0
1.进度条的控制主要分为监听鼠标的mousedown和mousemove事件点击跳转进度条 主要是mousedown.e.currentTarget.getBoundingClientRect（应为事件绑定在父元素上，事件的触发为子元素冒泡触发，不能用target）获取进度条离页面左边的距离，e.clientX获取实际点击的坐标，两者相减得到真实的点击在进度条里面的坐标，拖拽的的原理同上，只是说拖拽是个不断触发的过程而已2.音频文件的显示数字的设置主要是监听audio标签的loadedd
2021-10-17 18:41:49
4625
3
原创 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
759
原创 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
223
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人