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

脚手架一、要实现什么希望像@vue/cli一样的方式1.安装我的脚手架包，基于@vue/cli2.能全局使用我的命令来创建项目，能提示并根据用户输入的参数来创建3.创建的项目是写好的脚手架模板，集成了所需的组件和工具和配置4.cd进新创建的项目5.执行npm install，执行完npm install后自动执行一个脚本，来安装本地组件库，减少了手动操作，像patch-package6.执行npm run dev，自动启动项目，并自动打开浏览器 二、需要怎么做1.要是一个npm包的形式2.安装后要能全局使用命令，来下载模板项目3.开发模板项目，上传到git 1.新建文件夹新建目录，cd进mycli目录，开发mycli的npm包 2.执行npm init生成package.json 3.打开package.json以下为常用字段说明： 3.1 name: 包名称3.2 version: 版本号3.3 description: 描述3.4 main: 入口文件3.5 scripts: 脚本3.6 author: 作者3.7 license: 许可证3.8 keyword ...

AI了解本篇文章就是用AI生成后整理的 一、人工智能概述人工智能是一门研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的新技术科学。其最终目标是让机器能够像人一样思考、学习、推理和解决问题。 AI 的研究领域通常被划分为以下几个子领域： 机器学习：让计算机无需显式编程即可从数据中学习。 深度学习：机器学习的一个子集，使用包含多层（深度）结构的神经网络模型。 计算机视觉：让计算机能够“看到”和理解图像和视频。 自然语言处理：让计算机能够理解、解释和生成人类语言。 机器人技术：将感知、决策和行动结合，使机器能够在物理世界中执行任务。 二、发展历程 1950s-60s： 诞生与黄金时代 达特茅斯会议（1956）： AI诞生。 早期乐观： 出现了简单的定理证明程序和聊天机器人ELIZA。 1970s-80s： 第一次AI寒冬 由于计算能力有限、数据匮乏，早期承诺无法实现，政府和企业的资助大幅减少。 1980s： 专家系统兴起 基于规则的系统在特定领域（如医疗诊断）取得成功，但知识获取和维护成本高。 1990s-2000s： 统计学习方法与第二次AI复兴 机器 ...

背景做物联网智能家居场景的时候，有个需求，类似全景看房，房内有我们智能家居设备的展示 前端实现参考链接：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 ...