Hello World!写博客主要是梳理知识脉络，加强理解，当作快速查找和提升效率的文档，也希望能帮助到学习路上的每个人。当然此博客初衷是自己看，所以有些未注明的转载，有些因为自己理解而写的不够详细的地方（如果您正在学习这些内容却遇到了此情况请移驾其他优秀博客网站）由于某平台部署需要离谱的审核，所以迁移到github。

背景做物联网智能家居场景的时候，有个需求，类似全景看房，房内有我们智能家居设备的展示 前端实现参考链接：https://www.cnblogs.com/dragonir/p/17301683.html参考链接：https://www.zhihu.com/tardis/bd/art/692857119?source_id=1001 实现原理示意图如下所示，页面总共将创建 3 个场景，origin 表示当前场景，destination 表示目标场景，利用当前场景和目标场景合成用于展示过渡效果的 transition 过渡场景，当点击切换房间按钮时，三个场景的加载顺便分别为 origin -> transition -> destiontion，由此在视觉上形成从上个房间切换到下个房间并且伴随渐变过渡的场景漫游效果。 1.渲染一个场景12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364const ...

背景公司要做3D大屏和3D组态，首先要做几个3D大屏对外演示 基本使用以下记录我的工作中需求的基本实现，方便以后使用。官方的代码中有示例，大部分效果都能在示例中找到。 安装工程项目引入可以使用npm，html文件使用，直接下载官方提供的代码即可。这里使用0.148.0版本，threejs官方更新频繁，注意版本，160的版本按148的语法，材质反光就不一样，具体未深入研究。 12345678<script type="importmap"> { "imports": { "three": "./node_modules/three/build/three.module.js", "three/addons/": "./node_modules/three/examples/jsm/" }}</script> 123456789101112131415161718192021222324&l ...

前置vue2的响应式原理它只能监听指定对象的、指定属性的 getter 和 setter。所以当对象或数组新增属性时，vue2无法为新增的属性增加响应性。 1234Object.defineProperty(target, key, { set(newVal) {}, get(key) {}}) vue3的响应式系统reactive简单实现reactive，核心有几部分 effect：响应式的依赖收集和触发的机制的体现 reactive函数：提供出去要使用的函数 track：收集/追踪依赖 trigger：触发依赖 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253// effect，接收一个回调函数，执行let activeEffect = nullclass reactiveEffect { constructor(fn) { thi ...

weakMap是什么前置垃圾回收机制：垃圾回收机制会释放对象所占用的内存，但是垃圾回收机制的时机是不可控的 弱引用：即使有这个引用，垃圾回收机制在执行回收的时机也会将其回收 强引用：如果程序中有对一个对象的强引用，那么垃圾回收机制不会将其回收，我们手动将引用置为null，才可删除这个强引用 12var obj = new Object();obj = null; // 取消了对对象的强引用 以下是Map的使用，key = null 不会导致 key 的原引用对象被回收，因为这只解除了key对array对象的引用，但是map.set形成了map对array对象的强引用 12345678let map = new Map();let key = new Array(5 * 1024 * 1024); // 建立map 对 key 所引用对象的强引用map.set(key, 1); // key = null 不会导致 key 的原引用对象被回收key = null;// 需要再解除map对key的引用才能使原引用对象被回收map.delete(key); 定义ES6的一个新特 ...

vue3核心学习官方仓库https://github.com/vuejs/core 目录结构需要关注的，主要的目录就两个package：源码都放在这里scripts：脚本文件，配置文件，编译和打包用 核心模块 reactivity，响应式模块。主要职责：监听响应式数据，进行响应式操作 compiler，编译时模块。主要职责：编译，将template模版编译成render函数 runtime，运行时模块。主要职责：渲染，将虚拟dom渲染到真实dom上 源码调试package.json中的脚本命令，主要关注，dev和build。1.dev：实时编译，修改vue源码会实时编译2.build：打包到dist下 执行pnpm run build在package/vue目录下生成dist文件夹，针对不同模块打包成不同的文件 此时我们就可以编写测试文件。在packages/vue/example目录为vue提供了很多示例页面, 每个页面都引入Vue构建后的文件./packages/vue/dist/vue.global.js。这 ...

参考链接：https://blog.csdn.net/ORANGE_3iING/article/details/140819324 什么是websocket？全双工通信的协议。与 HTTP 协议不同的是，WebSocket 允许服务器和客户端在连接建立后能够在不需要重新请求的情况下，相互发送数据。即浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接， 并进行双向数据传输。 使用场景实时通讯的场景如：即时聊天应用、多人在线游戏、股票行情及天气预报等实时数据更新、在线白板工具、协同开发平台、在线协同绘图工具、设计协作平台等 工作原理握手过程WebSocket 连接的建立始于客户端的 HTTP 请求。服务器接收到请求后，会进行确认 并切换为 WebSocket 协议，从而建立连接。握手成功后，HTTP 连接切换为 WebSocket 连接，此时客户端和服务器之间可以进行全双工通信。 数据传输一旦 WebSocket 连接建立，客户端和服务器之间就可以进行双向的数据传输。 连接关闭WebSocket 连接可以由客户端或服务器任意一方发起关闭。包括以下步骤：发送关闭帧：一方发送 ...

什么是contenteditable允许用户编辑元素中的内容，如div、span等 使用下面记录几个工作中用过的功能 12345678910<div id="editor" class="editor content" contenteditable spellcheck="false" placeholder="请输入内容，点击回车即可发送!" onkeydown="keydown()" onkeyup="keyup()" onpaste="listenPaste()"></div> 开启可编辑1<div contenteditable="true"></div> 获取数据123const dom = document.getElementById('editor')const allData = dom.innerHTML ...

不同屏幕兼容注意点：不能滚动，宽100%，高度100%宽度容易处理。高度上也要保证没有滚动条，高度上用vh，每一个单元的高度按设计图的比例换算为vh，保证高度上不会出现滚动条对于每一个单元格内的样式和文字图像的正确显示，采用rem，根元素的字体大小按高度来计算，保证不同vh情况下rem是正好合适的 12const fontSize = (window.innerHeight / 919) * 20 + 'px'document.querySelector('html').style.fontSize = fontSize 退出登录问题对于无操作的展示性的大屏，需有定时刷新保证不会退出登录

背景需要将多个已有业务系统集成到云平台，统一登录统一身份认证, 。不涉及前端依赖共用。 基本使用，基于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: & ...