水印
背景为了保护版权，常常需要为页面添加水印，常见的有以下几种方法：
css伪元素canvas背景图svg
防篡改添加水印比较简单，难点在于如何最大程度的防止篡改和删除页面的水印。
原理：监听水印元素的变化，出现变化把水印元素清除，再重新生成一个，清除变动记录，继续监听
我是水印
1234567891011#wm { width: 100%; height: 100%; position: fixed; top: 0; left: 0; pointer-events: none; text-align: center; margin-top: 200px; font-size: 30px;}
12345678910111213141516171819202122232425262728293031323334353637const mutationObserver = new MutationObserver((mutationsList, observer) => { // mutationsList mutationRecor ...
token无感刷新
背景Token 通常用于用户认证和权限管理，当 Token 过期时一般会重定向到登录页，用户的操作会受到影响，因此需要无感刷新。以下用双token实现。
原理每次发起请求时，检查访问令牌的有效性。如果访问令牌过期，暂停当前请求并使用刷新令牌获取新的访问令牌。使用新的访问令牌重新发起之前被暂停的请求。更新应用中的 Token 信息。
以上原理是其他博客里看到的描述，但是在他们的代码里，都没有暂停请求，只是存储了失败的请求。
vue+axios场景下实现无感刷新// 创建axios实例1234const service = Axios.create({ baseURL, timeout: 30000})
// 新增请求拦截器，主要用于请求前带上token1234567891011service.interceptors.request.use( async config => { // 设置token config.headers['token'] = getStorage( ...
apicloud的ble模块思路
背景使用hybrid框架apicloud，开发物联网领域的蓝牙交互功能时，使用了apicloud的官方ble插件，本文记录了使用逻辑和一些注意点。
可用于第三方蓝牙设备交互，必须要支持蓝牙 4.0。iOS上：硬件至少是 iphone4s，系统至少是 iOS6。android上：系统版本至少是 android4.3。
蓝牙 4.0 以低功耗著称，一般也叫 BLE（BluetoothLowEnergy）。目前应用比较多的案例：运动手坏、嵌入式设备、智能家居
蓝牙通讯原理概述 在蓝牙通讯中有两个主要的部分,Central 和 Peripheral，有一点类似Client Server。一般手机是客户端， 设备（比如手环）是服务器，因为是手机去连接手环这个服务器。以下称两个部分为手机和设备。
服务和特征 设备可以广播数据、提供服务，手机可以扫描附近的设备，一旦建立连接，就可以交换数据。 特征是与外界交互的最小单位。蓝牙4.0设备通过服务（Service）、特征（Characteristics）和描述符（Descriptor）来形容自己，同一台设备可能包含一个或多个服务，每个服务下面又包含 ...
vue-异步更新和nexttick
this.$nextTick(cb)
一、简化图
二、异步更新Vue 的异步更新机制的核心是利用了浏览器的异步任务队列来实现的，首选微任务队列，宏任务队列次之。
当响应式数据更新后，会调用 dep.notify 方法，通知 dep 中收集的 watcher 去执行 update 方法，watcher.update 将 watcher 自己放入一个 watcher 队列（全局的 queue 数组）。如果同一个watcher被多次触发，只会被推入到队列中一次。
然后通过 nextTick 方法将一个刷新 watcher 队列的方法（flushSchedulerQueue）放入一个全局的 callbacks 数组中。
如果此时浏览器的异步任务队列中没有一个叫 flushCallbacks 的函数，则执行 timerFunc 函数，将 flushCallbacks 函数放入异步任务队列。如果异步任务队列中已经存在 flushCallbacks 函数，等待其执行完成以后再放入下一个 flushCallbacks 函数。
flushCallbacks 函数负责执行 callbacks 数组中的 ...
vue-cli搭建项目的webpack配置
简介经历过vue-cli2的时代，优化过项目打包配置，趁最近面试整理一下。分为默认配置介绍和自定义配置方法。
webpack可靠文档地址：https://webpack.docschina.org/configuration/optimization/
vue-cli官方文档：https://cli.vuejs.org/zh/config/
一、默认配置1、vue-cli4电脑上当前vue-cli是4.5.7版本，查看项目webpack版本为4.46.0
vue-cli对webpack配置进行了抽象，不能直接查看，但是vue-cli-service暴露了inspect命令用于查看webpack配置
命令：vue inspect > webpconfig.js
生成一个webpconfig.js文件（默认配置共1300+行，这里删除了一些细节，保留了整体结构，具体可通过以上命令自行查看）
这里对选项加了注释：
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748 ...
js-大量数据渲染性能优化2
工作中解决过如题的问题，4万条数据需要瞬间渲染到页面上，趁最近需要，重新整理一遍
第一次优化采用了数据分组分多次渲染的方法，能迅速渲染上一组数据，达到很好的初始视觉效果，但是总的dom元素数量还是一样庞大，当渲染完所有dom，滑动时还是会卡顿。
所以在更高要求下还是要用虚拟滚动，就是只渲染当前视口及附近的数据，通过滚动位置和每条高度来计算当前视口应该展示哪些数据，这样渲染的数据量小，不会因dom数量大而卡顿。当时没找到现成合适的插件，需要自己写，这个方案需要处理的细节很多，此demo处理了核心逻辑，开发时需要注意细节。
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102<!DOCTYPE html><html lang=&quo ...
js-大量数据渲染性能优化1
工作中解决过如题的问题，4万条数据需要瞬间渲染到页面上，趁最近需要，重新整理一遍
第一次优化采用了数据分组分多次渲染的方法，能迅速渲染上一组数据，达到很好的初始视觉效果，但是总的dom元素数量还是一样庞大，当渲染完所有dom，滑动时还是会卡顿。
所以在更高要求下还是要用虚拟滚动，写在了下一篇。本篇就把分组简单的附上代码
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic ...
vue-生命周期
简介vue生命周期
一、vue2和vue3对比
123456789101112131415161718192021// vue3和vue2对比生命周期const changePoint = { beforeCreate: setup(), // 实例初始化后，数据和方法等配置之前调用 created: setup(), // 数据和方法等配置好后 beforeMount: onBeforeMount, // 挂载前 mounted: onMounted, // 有了$el并挂载后 beforeUpdate: onBeforeUpdate, // 数据更新后，重新渲染前 updated: onUpdated, // 虚拟dom重渲染后，这里可以执行依赖dom的操作 beforeDestroy: onBeforeUnmount, // 销毁前 destroyed: onUnmounted, // 销毁 activated: onActivated, // keep-alive 组件激活时调用。 deactivated: onDeactivated, // ...
js-基础
简介js基础
先放个简单笔记，有时间再细写
js引擎解析过程简单了解js代码经过解析器解析成ast语法树，再通过解释器解释称字节码，字节码可直接执行，也可再编译成机器代码执行。
热点函数：字节码执行中，经过优化器，会提出一些经常使用的函数作为热点函数，再调用时直接调用机器代码，提升性能。如果参数类型突然变了，机器代码接收到参数不认识，就会反编译成字节码，再执行。
hexo\typora搭建维护博客
简介hexo搭建博客，从gitee迁移过来，重新梳理记录一下
一、准备好nodes, npm, hero1. 安装hexo12npm install hexo-cli -g// 安装完，hexo -v查看版本号
2. 初始化12hexo init blog(项目名字)// 初始化完，会有个blog文件夹，可能是新版本在init中执行了npm install，cd blog进入，此时已经有了node_modules
此处可能的问题：
初始化失败报错no such file可能是github被墙了
3. 清除部署目录-public文件夹1sudo hexo clean
4. 重新将md生成html1sudo hexo g
5. 启动本地服务1sudo hexo s
6. 部署1sudo hexo d
此处可能的问题：
1.remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead
原因：github ...