![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
笔记
文章平均质量分 64
海龟先生plus
星光不问赶路人
展开
-
2023了,前端实现AI电子秤思路分析
思路已经整明白了,再总结几个要素:1、算法—用于提取商品特征2、通信电子秤—需要以重量变化为媒介,触发AI识别以上两者是基本要素,笔者将会在下篇以具体代码逻辑实现对应业务。原创 2023-12-16 20:34:23 · 602 阅读 · 0 评论 -
今儿,小计一则开源模板 template_js 读后笔记
再回到template.js中,作者处理更为细致些,同时也额外提供一些api,可以自定义注入一些配置项,总之学习一些优秀的库,可以学到更规范更合理的开发规则和思路。原创 2023-04-05 18:17:47 · 312 阅读 · 0 评论 -
electron 桌面端通信 (三)
之前,我们知道了如何快速将一个转化为应用,同时也知道了针对某些行业如何添加副屏。不过,在有些场景下,可能需要通过获取一些桌面端(系统)信息,传递给网页,或者副屏需要需要接收主屏传过来的数据等等场景,此时,我们就需要通过解决。原创 2023-03-19 18:13:19 · 1275 阅读 · 3 评论 -
记一笔虚拟列表渲染理解
之前也有被问或者听说 如果给你一万条数据,你怎么渲染?,当时觉得为什么会这么问,不是有分页或者上拉加载吗?分页和上拉加载确实能解决这个问题,不过这和虚拟列表是两码事。解释: 不管是分页,还是上拉加载,有一万条数据其实就会渲染一万条dom,dom过多无疑对滚动的流畅性或性能都有一定的影响。区别: 虚拟列表在于,哪怕有一万条数据,列表中只会渲染一部分dom(通常是正常可见的部分dom)。相信看到这里应该就明白不同之处了吧!过程分析:如上图,这是一个正常列表的模型,当我们往上滑动时,dom就会不断加载原创 2022-03-21 22:56:03 · 855 阅读 · 0 评论 -
关于vue组合式api(setup)一些理解
记得vue刚推出 setup 时,也看过不少相关介绍,但始终没能get到那个点,时间一久,也就懵懂的那样过去了。最近又重新看起了vue3+突然对这个 组合式api 有了更新的认识,于是记录一笔吧!照例,来点需求吧!需求:给你一个输入框,用户输入时,同时把输入的信息转成base64(这个栗子可能不太好,没办法,刚好在看vueuse这个库,也正好看到useBase64这个hook,没办法就它了)大概就是下面这个样子可能在vue2的时候,我们采取的措施可能是利用 v-model 去双向绑定 input原创 2022-03-17 13:40:36 · 1487 阅读 · 0 评论 -
前端事件委托那些事儿
相信事件委托对于前端来说都不陌生,无非是对于一个列表ul中有很多li,而每一个li都有一个事件处理程序;如果数据量过大,绑定事件过多势必会影响性能,因此有了事件委托的概念。本意:将事件绑定在ul上,因为有事件冒泡,所以当点击li时,就会冒泡到ul上;这样只需判断下当前触发源是哪一个li,就可以处理对应的事件情况一:正常情况//这里就简单以vue渲染方式来处理<ul @click="onClick" > <li v-for="item in 10" :key="item" :dat原创 2022-03-14 17:07:30 · 399 阅读 · 0 评论 -
记录 二叉树之前序、中序、后序遍历
记录一下关于二叉树的三种遍历方式,开阔下思维前序遍历前序遍历规则是: 根—>左—>右,结合运用栈相关知识,思路应该为:先打印根节点,按照右,左节点顺序(因为栈是后进先出)依次进栈const stack = []const result = []stack.push(tree)while(stack.length && tree) { // 弹出最后一个 stack.pop() result.push(tree.value) // 按照 右、左依次进栈 if原创 2022-02-10 10:40:26 · 228 阅读 · 0 评论 -
用 canvas 画一个时钟
无意间在某篇博客中看到一个用canvas画的时钟,觉得有趣,便去找了源码学习下思路1、画时钟大概模型可分为几个步骤:画圆,画时间读数,以及每一个小刻度,这里会用到正切、余弦计算位置function drawBackground() { ctx.save(); ctx.translate(r, r); ctx.beginPath(); //每次开始前必须开始一条路径 //按比例输出边框宽度,width/200=x/10=rem; 即 x=10 *rem ctx.原创 2022-02-08 17:22:49 · 151 阅读 · 0 评论 -
数组分块思路 记一笔
当面临某些不需要考虑执行顺序、同步的且耗时较长的任务,可以考虑分块思路js 代码 const ul = document.getElementById("ul") //创建测试数组 function cerateArr(size) { let arr = [] for (let i = size; i > 0; i--) { arr.push(i)原创 2021-12-16 11:05:31 · 846 阅读 · 0 评论 -
移动端适配问题的理解
最近无意间再次接触了适配问题,虽然之前也一直在使用诸如rem类的方案,也研究过引入的适配代码,突然让自己说出其中原委,却模棱两可,真是尴了个大尬,说到底还是没有彻底弄清除。1、网络求助自己没弄懂,就只有寻求网络,但是查找了许多博客、笔记好像都写的有点不清晰,很多上来就是 1rem = 100px,看得我也是一头雾水,最后找到一篇文章,按照其理解貌似懂了。原文链接2、rem适配原理首先要知道rem是一个相对单位,相对于根节点大小来的,假设根节点大小为 50px,则1rem = 50px,2rem =原创 2021-12-07 15:34:14 · 622 阅读 · 0 评论 -
记录 30 seconds of code 项目个人觉得中有价值的片段或者小技巧(三)
G - I 系列获取元素距离顶部的距离const getVerticalOffset = el => { let offset = el.offsetTop, _el = el; while (_el.offsetParent) { _el = _el.offsetParent; offset += _el.offsetTop; } return offset;};offsetTop 是相对其父元素的距离,这里主要通过累加的方式来获取对于嵌套较深的原创 2021-09-24 11:33:27 · 93 阅读 · 0 评论 -
记录 30 seconds of code 项目个人觉得中有价值的片段或者小技巧 (一)
A - C 系列1、+ 号的隐式类型转换使用+[3] //3+[1,2,3].slice(-1) //将 [3] 转换为了32、日期的转换const addDaysToDate = (date, n) => { const d = new Date(date); d.setDate(d.getDate() + n); return d.toISOString().split('T')[0];};addDaysToDate('2020-10-15', 10); // '2原创 2021-08-06 14:00:00 · 315 阅读 · 0 评论 -
vue 实现一个有趣的围绕圆弧动画
前几天在好朋友楼上小黑的介绍下,看到了某个平台的官网,里面有一个人物介绍的模块,里面的动画感觉不错,于是就自己动手写了一个。1.0 原官网示例当然这里去掉了具体信息,原网站是里面圆圈中是人物的头像,旁边是介绍信息,每个人物就沿着圆弧移动到指定位置2.0 我们实现的结果当点击中间开始时,几个小球一次转动到固定角度3.0 简单分析下要让小圆在圆弧上动,我们只需要知道圆心在圆弧上的坐标(x,y)就行了所以当我们知道外圆的半径,小圆的半径,以及角度再利用三角函数就可以计算出 小圆在圆弧上定位的位原创 2021-07-09 14:32:21 · 1634 阅读 · 0 评论 -
从 生成器 到 promise+async
本文主要讲解js中关于生成器的相关概念和作用,以及到后面结合 promise 实现 es7中的 async 原理,你将学习到js中异步流程控制相关知识1、认识生成器思考如下代码: let x = 1 function foo() { x++ bar() console.log(x) // 3 } function bar() { x++ } foo()如上代码,我们确定知道,运行foo函数时,bar函数一定也会在 x++后执行,于是得到 x = 3,那原创 2021-06-22 16:22:58 · 138 阅读 · 1 评论 -
js 惰性载入函数( 能力检测 )
今天在做项目时,需要对地址栏参数做处理,于是便作了如下处理getUrlParam() { let params = {}; const url = window.location.href.replace(/#\//g,'').replace(/\?/g,'&'); url.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(m, key, value) { params[key] = value; }原创 2021-03-16 11:44:36 · 100 阅读 · 0 评论 -
js 面向对象的程序设计 ------小结
1、原由前段时间,看了红宝书第三版,尤其的中间 面向对象一节,由于水平过低吧,看的迷迷糊糊,基本不知到讲的是什么,今天突然再次看到,仿佛懂了不少,于是写写这篇笔记2、理解对象js中对象,原文中这样定义,一组没有特定顺序的值,也就无序属性的集合(不同于其他语言中对象的定义,这里不做探究,能理解就行)3、对象的属性、读取对象属性的特性简单来说,对象内部有几个属性,大概就是 该对象是否可读,可枚举…,了解Js的应该都知道,接下来就是读取对象属性的特性,在其内还有两个函数 getter和setter,这两原创 2020-12-08 00:27:30 · 114 阅读 · 0 评论 -
记录一些 常用的工具网站
1、css动画https://animista.net/,里面有很多现场的动画效果,也可在线编辑预览,完事 cv 到自己项目即可2、js工具类函数https://underscorejs.net/,这个是看一个组件库看到的,才发现里面有很多封装好的工具,什么节流防抖呀,数组的操作等等,翻阅源码套用即可3、web的文档https://developer.mozilla.org/zh-CN/,这个文档比较细致,阅读起点稍微高一点,不过很全面,我自己在做一些东西时,做兼容的方法都是在这个文档上直接 cv原创 2020-10-26 14:47:39 · 894 阅读 · 0 评论 -
有意思的 requestAnimationFrame html动画api
1、原由今天在看一个开源的Ui框架(vue)时,看到了一个返回顶部的自定义指令,也是随意一点,却发现,这个返回顶部页面滚动还带了动画,但是从f12确看不到动画的‘痕迹’,于是勾引了我的好奇心,不由去查看了该部分饿源码,却发现了 requestAnimationFrame这玩意2、requestAnimationFrame,浏览器请求动画的api,该api接收的一个回调,且已该浏览器刷新的帧数去执行,通常60hz(1000/60 16.7ms),也就是说,会以16.7ms的时间间隔去执行这个回调关于动原创 2020-10-24 23:46:07 · 212 阅读 · 0 评论 -
读 你不知道的javascript 笔记(一)
1、js的编译原理首先,js是一门编译型语言(动态、解释执行),可以简单理解为,运行时才编译,当然速度很快。作为语言,编译时会经历几个阶段:1、分词/词法分析2、解析/语法分析3、代码生成var a = 2对于一个 var a = 2编译阶段所做的事情就是1、将 var a = 2 分解成一些词法单元 var、a、=、2 2、将上诉转化为AST(抽象语法树)3、将 AST 转化为代码执行(分配内存 ,创建变量a ,储存a值)2、编译过程中该怎么做?做些什么?------作用域上面原创 2020-10-23 11:49:24 · 142 阅读 · 0 评论 -
vue 移动端适配 两种方案
vue中实现移动端的适配使用淘宝团队的 Flexible实现手淘H5页面的终端适配原文链接 添加链接描述1.首先将两个 (flexible.debug.js)(flexible_css.debug.js) js文件下载,导入项目2.运用,假设 设计稿是 750的,现在有一个div 宽 100px 高100px ,此时我们使用rem去做适配单位,使用vscode可以下载 css 转rem的插件 并设置转换的值,750的rem基准值是 75 (建议看链接),所以得到单位应该是 宽 100/75原创 2020-06-13 20:40:22 · 1855 阅读 · 0 评论 -
微信小程序 scroll-view 组件中 scroll-into-view属性
小程序中如何使用 scroll-into-view 滚动到对应位置上需求,需求很常见,如下图 (电商网站很常见),在pc端或者h5中就是一个锚点,当点击对应标题时,页面滚动到对应位置,注意不是选项卡效果。。。。。是页面滚动如果不能理解,可随便打开一个电商网站的商品详情页可明白**由于在小程序中,不能使用锚点,同时获取元素高度也挺麻烦的,这里采用 scroll-view 组件的 scroll-into-view属性,来实现 **文档可发现,我们需要设置 对应区域的id 即可完成 滚动到对应位原创 2020-06-02 00:06:14 · 12231 阅读 · 0 评论 -
微信小程序中音频播放
如何在小程序中实现音频播放需要注意几点由于现在官方不再维护 audio 组件 ,所以音频播放尽可能采取 wx.createInnerAudioContext() 接口 ( 若需要在后台播放,则采用 wx.getBackgroundAudioManager() )音频播放,只有在播放时才可以获取到音频长度(参考了多个带音频的小程序 qq音乐,百度网盘等,都是采取自动播放的方式,以获取...原创 2020-03-21 14:18:55 · 6487 阅读 · 6 评论 -
js变量提升
今天遇到一道js的面试题,知道是关于变量提升的问题,但是还是有点犹豫,赶紧复习了下,原谅自己太菜原题如下function say(){ console.log(a) //undefined console.log(b) //b is not defined var a='aaaa' let b=...原创 2020-03-20 00:04:17 · 114 阅读 · 0 评论 -
git 常用推送 分支合并操作
初次 使用时 需要配置下gitGit 全局设置:git config --global user.name "xxxx"git config --global user.email "xxxxx@xx.com"接下来就是初始化本地仓库git init---初始仓库git add .---提交所有git commit -m "first commit"---提交备注git ...原创 2020-03-05 11:40:41 · 1555 阅读 · 2 评论 -
CSS属性之visibility 再也不想见到了
分享一下,这个属性带给我的坑话说 这个属性在css里大家都知道,无非就是 只是把元素隐藏了,而不是消失,可是稍不注意就被它带进了深坑这个属性主流浏览器都支持,但是在ios上会有兼容问题,最好不用。今日在做小程序开发时,需要一个带输入功能的弹框,于是就去找了插件,然后改了改,缺没有注意一个组件用的是visibility属性来控制的,开发工具和安卓手机和ios x以上机型都没问题,唯一影响是,始...原创 2020-03-04 22:22:07 · 264 阅读 · 0 评论