数据大屏
不同屏幕兼容注意点：不能滚动，宽100%，高度100%宽度容易处理。高度上也要保证没有滚动条，高度上用vh，每一个单元的高度按设计图的比例换算为vh，保证高度上不会出现滚动条对于每一个单元格内的样式和文字图像的正确显示，采用rem，根元素的字体大小按高度来计算，保证不同vh情况下rem是正好合适的
12const fontSize = (window.innerHeight / 919) * 20 + 'px'document.querySelector('html').style.fontSize = fontSize
退出登录问题对于无操作的展示性的大屏，需有定时刷新保证不会退出登录
qiankun微前端
背景需要将多个已有业务系统集成到云平台，统一登录统一身份认证, 。不涉及前端依赖共用。
基本使用，基于vue2主应用安装qiankun12npm i qiankun -s 或者yarn add qiankun
主应用引入qiankun，注册子应用，启动qiankun。main.js中
1234567891011121314import { registerMicroApps, start } from 'qiankun'const apps = [{ name: 'maintain_index', entry: 'http://192.168.1.8:8084', // 子应用地址 container: '#yw-maintain-index-container', // 子应用挂载在主应用的元素 activeRule: '/maintain_index', // 进入子应用的路由标识 props: { container: & ...
水印
背景为了保护版权，常常需要为页面添加水印，常见的有以下几种方法：
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, // ...