- 博客(60)
- 收藏
- 关注
RSS订阅原创 requestAnimationFrame 请求动画帧（帧循环）
浏览器自带的防抖节流requestAnimationFrame 请求动画帧（帧循环）
2023-04-09 20:23:59
565
原创 有一段html，展示标签里的内容
v-html应尽量避免使用，会带来xss攻击 跨站脚本攻击，一般只在可信任内容上使用，永不在用户提交的内容上。1、v-html 将其当html标签解析后输出，有样式什么的话会渲染出来。2、v-text 输出的纯文本，浏览器不会对其再进行html解析。3、正则 把html标签过滤出来只留下里面的内容。比如item.text为这样一段html。
2023-04-09 17:20:09
318
原创 pointer-events: none；
Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持这个CSS3属性，IE6/7/8/9都不支持，Opera在SVG中支持该属性但是HTML中不支持。input标签可以用disabled属性禁用鼠标事件，但是其他标签禁用可以设置这个css。pointer-events: none去掉鼠标事件。pointer-events: auto恢复鼠标事件。只显示样式不会触发鼠标事件。看的见摸不着，点击穿透。
2023-04-09 16:55:49
226
1
原创 Element.getBoundingClientRect返回元素的大小及其相对视口的位置
在工作的项目中使用的递归的方式获取当前元素的父元素的offsetTop（为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离。）进行累加所得到当前元素相对于视口的高度。偶然发现js有个原生方法就是获取当前元素相对于相对于视口的位置即Element.getBoundingClientRect()，元素的尺寸等于width/height + padding + border-width的总和。，元素的的尺寸等于 width/height。
2023-03-26 16:55:47
648
原创 element-resize-detector监听元素宽高变化
具体可看切换左侧菜单展示效果时，右侧内容会对应宽度，但此时的echarts不能执行自适应效果。切换菜单展示效果不能触发window.onresize 可以用element-resize-detector。
2023-03-26 16:06:35
480
原创 浏览器进程及主要的渲染进程里的线程
当JS引擎执行代码块如setTimeOut（也可来自浏览器内核的其他线程，如鼠标点击，ajax异步请求等）会将对应任务添加到事件线程中，当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理。辅助JS引擎，控制事件轮询，鼠标点击，ajax请求等对应的任务添加到该线程，符合触发条件时，事件添加到任务队列队尾，等待js引擎处理。注：GUI渲染贤臣与JS引擎线程互斥，如果JS执行时间过长，会造成页面渲染不连贯，导致页面渲染加载阻塞。界面显示，用户交互，进程管理，存储功能等。
2023-03-26 16:06:07
276
原创 mqtt协议
MQTT（消息队列遥测传输协议）是基于Publish/Subscribe（发布订阅）模式的物联网通信协议。该协议构建于TCP/IP协议上。优点：以极少的代码和有限的带宽，为远程连接设备提过实时可靠的消息服务，作为一种低开销，低带宽占用的即时通讯协议，使在物联网，小型设备，移动应用等方面有较广泛应用。特点：简单易实现，支持Qos（服务质量），报文小，MQTT协议构建于TCP/IP协议之上，提供有序，无损，双向连接。
2023-03-26 14:45:14
411
原创 浮点数计算精度问题decimal.js
js计算会转为二进制进行计算，采用IEEE 754标准双精度浮点（64）,64位中1位浮点数中符号，11位存储指数，52位存储浮点数的有效数字，从53位开始会舍入（舍入规则：0舍1入）计算结果得到的是一个Decimal对象，需要转换为number（toNumber()）或string（toString()）x.toFixed(2,Decimal.ROUND_DOWN) //3.45（舍入模式 向上0 向下1 四舍五入）保留多少位有效位数（小数位不会补0 计算有效位数）y.sd() //3有效位数。
2022-11-22 18:23:49
789
原创 v8实现原理
如果有一段第一次执行的字节码，解释器lgnition会逐条解释执行，在lgnition执行字节码过程中，如果发现有热点代码（HotSpot）如一段代码被重复执行多次，这种就时热点代码，那么后台的编译器TurboFan会把该段热点的字节码编译为高效的机器码，当再次执行这段被优化的代码时，只需执行编译后的机器码即可。js执行的环境不固定，可能是Windows，Mac，Linux，Node.js，不同环境中有不同CPU，不同CPU有不同CPU架构，不同架构能执行的机器指令不一样。
2022-10-10 11:06:02
372
原创 vue重置data数据
是vue组件当前的数据对象，vue实例观察的数据对象，vue实例代理了对其data对象property访问。想要初始化某个数据除了一个一个赋空值还可以用以下写法。重置data数据中某个对象数据。是vue组件初始化时的data。是vue实例的初始化选项。重置整个data数据。...
2022-08-08 16:20:37
2965
原创 使用print.js实现打印
打印获取dom节点需要使用ref，如果直接通过id或class获取，webpack打包部署后打印内容为空。下载后，放在utils路径下。main.js文件中引入。
2022-07-30 11:34:54
3984
原创 实现不对齐的表格table-layout:fixed；
html正常写table，用colspan，rowspan合并表格。表格主要是这个样子。主要是一个table的一个属性。css给table加。
2022-07-28 19:43:27
305
原创 vue项目搭建，配置webpack，包优化
具体可见https://cloud.tencent.com/developer/article/1485228
2022-07-15 10:30:48
330
转载 js判断日期据今天有几天
如果数字为负数，-1表示今天比传入的日期少一天，及今天起还有1天到传入的日期。正数，1表示今天比传入的日期多1天转载于:https://www.cnblogs.com/qiuxiaojian/p/9403215.html
2022-07-11 16:02:56
626
原创 日历看板 element日历组件
日历看板需求日历展示分为两个维度月，日。在日历上每一天显示该天待办事项，点击事项跳转到该事项详细页面。可以查看上一月，下一月，上一天，下一天。难点：以日维度的展示，element日历组件没有展示每一天的，需要仿照element日历组件自己实现。页面大概功能实现了，具体对接口取数据，细节样式之后在加效果具体实现贴下大概功能实现的代码月 没什么特别的，element日历组件自定义内容日实现的时候也是骚操作，本来想着用element日历中自定义范围数组直接设置为一天，后来发现最短范围也要一周。
2022-07-08 10:40:57
2259
原创 常见首屏优化
gzip压缩静态文件。gzip可以压缩到30%。gzip编码是HTTP协议上改进web应用程序性能的技术。web服务器和客户端（浏览器）必须共同支持，使用时需要在服务器上配置。插件webpack-bundle-analyzer分析包依赖。知道各个依赖是否用到，之后可以删除掉没有用到的依赖，减少打包工具生成的包大小。路由懒加载。按照页面或组件懒加载。使用到该组件该模块时，才向服务器请求文件，请求一次后缓存下来，再次使用到该组件，不用发送请求直接使用缓存。在vue-router添加配置。webpac
2022-06-27 17:25:50
299
原创 echarts使用及遇到的问题
下载echarts引入echarts插件到html页面创建有大小的div作为dom容器<div id="main" style="width:500px;height:500px;"></div>初始化echarts实例对象let myChart = echarts.init(document.getElementById('main'));指定配置项和数据（option）let option = { title:{ //标题 }, xAxis:{ //x
2022-06-17 11:10:53
1254
原创 CI/CD自动化部署
前端gitlab-ci实现自动化部署比较详细的一篇https://segmentfault.com/a/1190000021092024目前与gitlab持续集成比较流行的方法有jenkins和gitlab-cigitlab-cigitlab8.0开始，GitLab CI已经集成在gitlab中，我们只需在项目中添加一个.gitlab-ci.yml文件，添加一个Runner，即可持续集成。利用git版本管理push本地代码到你的gitlab.com上，gitlab会通知你的服务器（runner服务
2022-06-13 11:04:26
1209
原创 vue xlsx插件导入
首先安装xlsx插件安装时候就有一个坑。版本问题第一次安装没有指定版本直接，安装的最新版本0.18多，会报XLSX没有read方法（读取Excel表格对象的方法）具体代码需求导入的Excel表格模板是这样格式的可以发现第7行才是真正的表头。Excel中测量n列（是动态的），对应的项目表格中的样本数列。需要根据Excel表中项目和项目中项目编号对应上，确定是哪一行的数据，然后把测量和样本对应上。其中一种写法，写的有点麻烦，有时间用传入的tabs这种格式处理这种方法在写一遍...
2022-06-10 16:41:48
8725
4
原创 二叉树，各种树
应用场景常用二叉树 ：AVL树，红黑树，B+树，Trie（字典）树AVL树：最早平衡二叉树之一，Windows对进程地址空间管理用到了红黑树：平衡二叉树，广泛用于c++的STL中。如map，set，Linux文件管理是用红黑树实现B+树：磁盘文件组织 数据索引，数据库索引Trie（字典）树：统计排序大量字符串。如自动机，M数据库索引......
2022-06-10 10:05:52
160
原创 webpack性能优化
https://zhuanlan.zhihu.com/p/118398645https://zhuanlan.zhihu.com/p/403182979https://blog.csdn.net/weixin_45820444/article/details/108845845https://www.cnblogs.com/wplinux/articles/15029568.htmlwebpack性能优化主要有两方面：构建速度优化，产出速度优化对生产环境产出代码合理分包，不重复加载，使其体积更小，
2022-05-27 10:52:24
2587
原创 table表格动态添加列，并根据行中某个字段值判断有几个输入框
定量项目有大项，小项。小项挂载大项下面即根据表格中样本数判断检验小项中有几个样本，有几个样本则加几列样本列，内容为输入框，可输入数值，对数值进行判断是否符合规格标准，有几个不符合标准的不合格数为几。...
2022-05-10 19:27:20
438
原创 移动端app开发问题及理解
框架使用的是vant跟web端不太一样的是事件有点不同web端事件有onload 页面中所有标签，文档，图片等资源加载完毕后触发onclick 鼠标单击事件ondbclick 鼠标双击事件onmousedown 鼠标按下onmouseup 鼠标按键抬起onmouseover 鼠标进入某个元素onmousemove 鼠标移动到元素onmouseout 鼠标离开元素onfocus 元素得到焦点onblur 元素失去焦点onchange 用户改变文本域内容oninput 实时监听输入框
2022-03-04 16:46:29
522
1
原创 js获取当前日期的前后一个月方法
引入moment格式化时间插件import moment from 'moment'//获取前一个月 queryMonth () { let currentDate = new Date() let search_month = currentDate.getMonth(); search_month = search_month - 1; //如果获取后一个月就search_month + 1 if (search_month > 11)
2022-03-01 17:36:33
2066
原创 打印 条码 CodeSoft JsBarCode
项目中关于打印的有两种：标签条码打印，流程卡打印标签打印（主要条码）CodeSoft打印条码软件使用软件需要先配置项目环境修改WpfCodeSoftPrint.exe.config文件流程卡打印（A4纸整页）电脑连接打印机页面的排布布局自己用html，css写死（和正常画页面一样）注意：打印的时候在电脑屏幕上样式显示正常，但打印出来样式有问题。所以一定要选择打印看一下样式。...
2022-02-11 10:47:42
494
原创 发布现场，上线
项目打包yarn buildxshell连接现场环境第一次发布需要填写配置连接环境。新建会话。之后可以直接双击连接。备份cd进入到项目所在文件目录，对项目进行备份。一定要备份，很容易炸掉。命令：cd 目录地址 //进入文件地址ll //查看所有文件cp -r 源文件 目标文件（一般命名源文件+日期） //复制文件xftp发布进入到项目所在文件目录，左边是本地文件，右边是线上文件左边找到打包的dist文件夹下js文件夹和index.html 把右边替换掉。一般是
2022-01-24 10:11:30
55
原创 获取dom元素及坑点，setAttribute的坑点
获取dom元素两个方法，区别以及注意点前段时间操作dom元素时使用这些方法被坑了几把，记录下querySelectorAll 返回NodeList对象。！！！注意。返回的是静态的，不随文档更新而变化。getElementsByName方法返回NodeList对象，！！！注意。是动态的。document.getElementsByClassName返回HTMLCollection对象。！！！注意。是动态的，可以跟随文档对象动态变化的。主要可以看下这篇。当时是看完这篇找到原因的https://www
2022-01-10 18:00:11
546
原创 图论算法汇总
主要内容图的表示图的遍历广度优先无权图的最短路径深度优先连通性路径二分图检测环的检测floodfill图的算法欧拉路径哈密尔顿路径状态压缩桥割点有向图算法DAG环检测拓补排序强连通分量最小生成树kruskalPrim最短路径DijkstraFloyedBellman-Ford网络流最大流-最小割Ford-Fulkerson图的表示图的遍历广度优先无权图的最短路径深度优先连通性路径二分图检测环的检测floodfill泛洪算法使用图论对问题建模图的算法欧拉路径哈密尔顿路径状态压缩
2021-11-08 11:25:27
1446
原创 跨域项目中实现
首先看下这俩跨域解决方案https://blog.csdn.net/weixin_33938733/article/details/91456883重点很全面https://www.jb51.net/article/124002.htm做的项目中使用的是第二个链接中八下2node+webpack-dev-server实际项目中是这样配置的在vue.config.js中const webpack = require('webpack')const path = require('path')
2021-10-12 10:14:52
77
原创 vue element 一些写法
表格页面初始化默认展示第一条数据<el-table ref="table" v-loading="listLoading" :data="tableList" highlight-current-row @current-change="handleCurrentChange"></el-table>this.$nextTick(() => { this.$refs.table.setCurrentRow(this.tableL
2021-10-12 10:09:39
117
原创 前端使用命令部署发布如何配置yarn deploy
不使用命令发版的话主要使用xshell和xftp两个软件xshell登录ssh连接上服务器环境，然后使用xftp左边进入本地该项目中，右边进入服务器上该项目，省事的话直接左边文件拖到右边也简单主要使用插件ssh2-sftp-client1、在package.json中配置发布的命令 "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "build:test": "vu
2021-10-11 11:21:42
941
原创 vue权限控制到按钮级别
vue加标识符依赖注入然后判断这个按钮的标识eleType在角色信息里面有没有返回一个boolean值v-if条件渲染1、给按钮加标识符，如果按钮的标识符设置的一样的（比如新增都设置为add啥的）可以加上按钮的路由信息保证按钮标识符是唯一的。2、方法可以单拎出来写然后使用依赖注入provide / inject传递。provide就相当于加强版父组件prop。inject就相当于加强版子组件的props 。以上两者可以在父组件与子组件、孙子组件、曾孙子…组件数据交互，也就是说不仅限于pr
2021-09-24 17:48:48
581
原创 vue常见bug
vue中事件调用时机场景：页面中打开一个弹框a，弹框a中点击确定打开弹框b，弹框b打开时调接口解决：理解钩子函数调用时机刚开始写在created里，但是只要页面打开就会调用，而且只调用一次，等到打开弹框b的时候根本不会调用然后看了下updated这个钩子函数，更新这个时机肯定对了。结果确实是在打开弹框b之后调用的，但是会一直调用。原因是我对updated钩子函数理解有点错误，我以为的是弹框这个组件 更新的时候调用，但实际调用时机是只要该弹框中任意一个数据啊组件啊内容啊啥的有变动都会调用updated
2021-09-06 19:38:22
1403
原创 函数实际参数转成数组
三种方法1、var args = Array.prototype.slice.call(arguments);能将有length属性的对象转换为数组（该对象必须有length属性。但IE下的节点集合不能转换）2、var args = [].slice.call(arguments);3、function getArray(arguments) { var args = []; for(let i = 0; i < arguments.length; i++) { args.push(
2021-07-26 15:35:49
412
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人