安耀奇博客

前端对接电子秤、扫码枪设备serialPort 串口使用教程因为最近工作项目中用到了电子秤，需要对接电子秤设备。以前也没有对接过这种设备，当时也是一脸懵逼，脑袋空空。后来就去网上搜了一下前端怎么对接，然后就发现了SerialPort串口。 Serialport 官网地址：https://serialport.io/ Github：https://github.com/serialport/node-serialport 官方描述：使用 JavaScript 访问串行端口。Linux、OSX 和 Windows。 SerialPort是什么？ SerialPort 是一个用于在 Node.js 环境中进行串口通信的库。它允许开发者通过 JavaScript 或 TypeScript 代码与计算机上的串口设备进行交互。SerialPort 库提供了丰富的 API，使得在串口通信中能够方便地进行设置、监听和发送数据。 一般我们的设备(电子秤/扫码枪)会有一根线插入到电脑的USB口或者其他口，电脑上的这些插口就是叫****串口。设备上的数据会通过这根线传输到电脑里面，比如电子秤 ...

MVVM的理解Model 模型， View 视图，ViewModel 视图模型 v-show和v-if的区别v-show控制样式display隐藏显示 v-if控制是否渲染dom for循环中key的作用** 循环项增加指针，提高性能** watch、computed、methods区别watch是监控某个数据的变量，当数据变化的时候执行其他的操作。 **immediate**添加属性可以在第一次调用时执行，deep进行深度监听 computed 是根据依赖的数据变化，让本身的数据发生变化 methods 是定义的方法，可以在执行的时机执行 Vue生命周期 beforeCreate 不能访问this created 有this 请求数据 如果有涉及dom的操作要放到nextTick中 beforeMounte mounted 操作dom beforeUpdate updated beforeDestory （Vue3:unMounte） Destoryed （Vue3:unMounted） deactivated（keep-alive离开） activated ...

浏览器输入一个URL到页面过程中发生了什么 DNS解析，将url解析为网站的IP 建立TCP连接 发起HTTP请求 服务器返回请求结果 关闭TCP连接 客户端渲染页面 客户端渲染页面的过程是怎样的 解析服务器返回的内容 建立DOM树 构建CSS树 构建render树， 构建CSSOM树，将DOM和CSS进行结合 布局—layout：计算出节点在页面中的位置 绘制—Painting：绘制节点到页面上 回流和重绘的区别回流Layout：当渲染树中元素的尺寸、位置发生变化时会重新构建，重建构建时会影响布局，这个过程就称为回流 重绘Painting：当渲染树中元素的颜色或其他属性变化时会重新构建，构建时不影响布局，这个过程就是重绘 区别： 回流肯定会引起重绘，重绘一定不会引起回流 回流会导致页面重新排列，会影响性能 回流会影响性能，那么如何避免回流？不要修改元素的尺寸、位置这些会影响布局的属性，尽量使用transform TCP 传输的三次握手、四次挥手策略三次握手 第一次握手：客户端 请求 服务端 第二次握手：服务端 回复 客户端 第三次握手：客户端 回复 服务端 四次挥手 第 ...

JavaScript堆和栈的区别 栈内存：基本类型会存放在栈内存中，存取方式为先进后出。 堆内存：引用类型会存放在堆内存中 数据类型判断方式 **typeof ** instanceof Object.prototype.toString.call(obj) 什么是闭包？如何实现闭包闭包就是在函数外部访问函数内部的变量 在函数内部返回另一个函数，返回的函数中将函数内的变量返回 什么是原型和原型链 原型：每个实例对象都有自己的原型，也就是构建自己的原型对象 原型链：当查找某个属性的时候会先在对象本身查找，没有再从原型上找 什么是深拷贝和浅拷贝，如何实现？ 浅拷贝：将对象或数组赋值给新对象时，赋值引用关系，修改新对象原来对象也会跟着变 深拷贝：将对象或数组赋值给新对象时，是创建一个新的对象，和之前的没有引用关系，修改新对象原来对象不会变。 事件循环机制（微任务、宏任务） JS是单线程的 先执行同步代码，然后执行微任务，再渲染dom，最后执行宏任务。 微任务：Promise 宏任务：setTimeout、setInterval This指向 this指向的是调用者 没有调用者的时候 ...

本周读了《钝感力》这本书，刚开始看到这个书名的时候感觉不太吸引我，我看在当当热卖榜排名很高所以也想看看，在网上看了几页以后觉得很好，感觉说的跟自己很像，然后就决定买了这本书来读。现在已经看了一半，把看的时候心中的想法写一下，就当是个笔记吧。 所谓’钝感力’，即’迟钝之力’，亦即从容面对生活中的挫折伤痛，而不要过分敏感。 心生活中当我们遇到被别人指责、批评和谩骂的时候，我们会感觉到难过或者生气，特别是自己在乎的人，自尊心越强的人就会感觉越难过。钝感力就是可以对那些声音保持一种顿感，也就是不要有太强的自尊心，等于给自己的心加了一个盾牌，这样就会越挫越勇。 企业家在创业的路上总会听到各种各样的声音，如果他们轻易因为别人的一句话就被影响了那肯定也不会成功。明星也经常会听到网友的指指点点，如果明星因为其他人的指指点点就整天怀疑自己也明星也做长久不了。 再没有比有点才华但自尊心过强的人更难伺候的了。 有一个场景非常能说明钝感力的好处，就是考驾照。在练车的时候一出错驾校教练就会劈头盖脸的骂你，甚至有的骂的特别凶，无论你是小女生还是大老爷们都是一顿骂。我就是那种自尊心比较强的人，以前考驾照的时 ...

react跨域安装Http-proxy-middleware报错：proxy is not a function查看了http-proxy-middleware的官方文档，发现最新的1.0.0版本已经对模块的引用作了明确的要求 0.x.x版本的引用方式 const proxy = require('http-proxy-middleware'); 1.0.0版本的引用方式 const { createProxyMiddleware } = require('http-proxy-middleware');

​ 今天在群里看到群友问了一个这样的问题，就是如何更改placeholder属性中文字的颜色，以前用过这属性，却是没更改过颜色，于是便试了试，中途遇到些问题，查找资料后特来总结一下。 　　熟悉HTML5的人应该都知道，placeholder这个属性是HTML5中增加的属性，该属性的作用是规定可描述输入字段预期值的简短的提示信息，该提示会在用户输入之前显示在输入字段中，会在用户输入字段后消失，有些浏览器则是获得焦点后该提示便消失（如Safari、IE） 适用范围：placeholder 属性适用于下面的 input 类型：text、search、url、tel、email 和 password。 因为是HTML5中新增的属性，所以会存在兼容性问题。下面说说浏览器的支持情况： IE10+、Firefox、Opera、Chrome 和 Safari 均支持 placeholder 属性。IE9及以下版本不支持input的placeholder属性。 placeholder的用法，举例： <input type="text" placeholder="请输入您要搜索的内容！"> 效 ...

Vue3状态管理工具-Pinia快速入门学习 什么是Pinia？ pinia是vue3官方的状态管理工具，当然vue2也可以用。vue2中的状态管理工具是vuex，vue3中不再使用vuex，推荐使用的是pinia, 和vuex差不多，但比vuex更方便、更强、更好。所以你也可以把pinia理解为vuex的升级版。 Pinia官网链接：https://pinia.vuejs.org/ Pinia模块 State Getters Actions Plugins 用过Vuex的人可能会觉得我少写了一个Mutations，我没写错，pinia确实是没有Mutains和modules的。 以前vuex中是有mutains主要是用户不可以直接修改state，但在pinia中是可以对state直接修改的，所以也就不需要mutains。 在线示例点击查看vue3+pinia示例 下载GitHub地址：https://github.com/vuejs/pinia vue3 npm install pinia 如果你使用的是vue2除了下载上面的pinia还需要下载一个@vue/comp ...

数据类型js数据类型有哪些？ 基本数据类型：Number、Boolean、String、Null、Undefined、Symbol(ES6)、bigInt 引用数据类型：Object、Array、Function、RegExp、Date 闭包什么是闭包 ​ 闭包就是在函数内可以访问其他函数内的变量​ 可以通过在函数内返回函数实现 ​ 缺点：比较耗费内存、使用不当会造成内存溢出的问题 作用域局部作用域、全局作用域的区别 、 局部作用域就是大括号内的区域，在此区域内可以访问定义的变量。​ 全局作用域就是在任何地方都可以访问的区域，例如使用var定义的变量 堆栈对栈和堆的理解 ​ 栈内存：存储基本类型，Boolean、Number、String、Undefined、Null。变量赋值时，赋值的是变量本身。​ 堆内存：存储引用类型，Function，Array，Object，将变量赋值时，赋值的是指针，不是变量本身。 原型、原型链、继承对原型、原型链的理解 ​ 任何一个普通函数、类的身上都有prototype属性，prototype指向的就是该对象的原型。 ​ 当访问一个对象的属性时，首 ...

防抖防抖：防止连续多次触发，n秒内连续触发则只触发最后一次。目的：只执行一次原理：触发之前判断是否已经触发，已经触发就取消执行上一次的事件，然后执行本次事件。 // 防抖函数 function debounce(fn, delay = 200) { let timer = 0 return function() { // 如果这个函数已经被触发了 if(timer){ clearTimeout(timer) } timer = setTimeout(() => { fn.apply(this, arguments); // 透传 this和参数 timer = 0 },delay) } } 节流节流：防止连续多次触发，n秒内连续多次触发则n秒内执行一次。目的：减少执行次数 原理：触发之前判断是否已经触发，已经触发就取消当前本次执行事件，继续执行上一个事件。 // 节流函数 function throttle(fn, d ...