其他概念
VsCode
工作区
- 单文件夹工作区
- 多根工作区
- 将多个项目/git仓库 集中在同一个vscode窗口中管理使用
json
// 新建 xxx.code-workspace 工作区配置文件
{
// 多根工作区所包含的文件夹,name 为文件夹名称，path 为文件夹路径[相对路径/绝对路径]
"folders": [
{"name": "main","path": "./apps/main" },
{"name": "crm","path": "./apps/crm"},
{"name": "srm","path": "./apps/srm"},
{"name": "tms","path": "./apps/tms"},
{"name": "system","path": "./apps/system"},
],
// 设置配置
"settings": {
// /.vscode/settings.json 中的内容
},
// 插件推荐
"extensions": {
// /.vscode/extensions.json 中的内容
},
// 调试配置
"launch": {
"version": "0.2.0",
"configurations": []
},
// 任务配置
"tasks": {
"version": "2.0.0",
"tasks": []
}
}概念
同步|异步
- 同步 sync：按顺序执行，前面的内容执行结束后，才会执行后面的部分
- 例：js 代码阻塞运行
- 异步：不需要等待某一部分执行，可以同时执行
- 例：有回调函数(事件、定时器)、Ajax
框架与库
框架(framework)：
框架规定了自己的编程方式，是一套完整的解决方案，
大部分的逻辑在框架内部已经被确定，
使用时：需要根据规则填充自己的内容，具有一定的限制，但很强大（类似完形填空）
- 例子：Vue.js
库(Library)：
提供了一系列方法的集合，可以调用方法且程序逻辑由自己掌握，而并不是在库中定好的。
本质：一些函数的集合，每次调用函数实现一个特定的功能，只是一个工具
使用时：更自由，可以随意调用或不调用
- 例子：jQuery
数据代理
概念：通过一个对象代理对另一个对象中属性的操作（读/写）
- js
// vue2: 借助Object.defineProperty为对象追加属性 let obj = { x:100 } let obj2 = { y:200 } //通过obj2中的x对obj中的x进行读写操作 Object.defineProperty( obj2,'x'{ get(){ return obj.x }, set(value){ obj.x = value } })
防抖节流
为了限制 JS 频繁的执行一段代码
例：scroll 事件，只是轻微滚动一下滚动条就触发多次事件，由于过于频繁地 DOM 操作和资源加载，严重影响了网页性能，甚至会造成浏览器崩溃
此时：用 debounce（防抖）和 throttle（节流）的方式来减少调用频率，同时又不影响实际效果
防抖：
- 连续的多次触发，固定的时间间隔内，存在新的触发，就清除之前的重新记时，满足时间执行一次——最新一次触发（只保留 新事件）
- 手段 1：通过设置 setTimeout 定时器的方式延迟执行，当快速多次点击的时候，每一次都会重置定时器，只有你一段时间都不点击时定时器才能到达条件并执行事件函数。即如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。
- 模拟一个表单提交的例子，多次快速点击提交后只会执行一次
节流（节流阀）：
连续的多次触发，每一段固定的时间间隔内，我们只去执行一次——固定频率触发（忽略新产生的同类事件）
确保某个事件，在同一时间只能有一个
如果已经存在，就保留原来的，不再触发
与防抖最大的区别就是，无论事件触发多么频繁，都可以保证在规定时间内可以执行一次执行函数
例：用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据
js 锁机制
JavaScript 可以通过 resolve/reject 函数来实现锁，在没有调用 resolve/reject 函数时，promise 会看起来相当于一直阻塞（其实和 Java 的阻塞不一样，这里只是没有执行后续的函数）。
js
// 示例
`<body>
<input onclick="clickMe()" type="button" value="点我">
</body>`;
async function clickMe() {
const env = await getEnv();
console.log(env);
}
let localEnv, p;
const queue = [];
let loading = false;
async function getEnv() {
return new Promise((resolve, reject) => {
if (localEnv) {
resolve(localEnv);
}
// 进入这个if的Promise没有调用resolve()，会一直阻塞
if (loading) {
// 把resolve存入数组，待请求返回后执行resolve
queue.push({ resolve, reject });
}
if (!loading && !localEnv) {
loading = true;
console.log("questing env......");
setTimeout(() => {
localEnv = {
platform: "141001",
appid: "aoshdakhpa8fkdng",
};
loading = false;
resolve(localEnv);
// 异步请求结束，调用所有正在阻塞的Promise的resolve函数，返回结果，解除阻塞
while ((p = queue.shift())) {
p.resolve(localEnv);
}
}, 2000);
}
});
}重排(回流)、重绘
DOM 性能 浏览器的性能大部分都是被这两个问题所消耗
- 重绘不一定需要回流（比如颜色的改变），回流必然导致重绘（比如改变网页位置）
- 重绘：元素中的背景、透明度、颜色发生变化后，浏览器针对某一元素进行单独的渲染
- 重排（回流/重构）：DOM 位置、大小或结构、定位发生变化；导致浏览器重新渲染整个 DOM 树、非常耗性能
- 添加、删除可见的 dom
- 元素的位置改变
- 元素的尺寸改变(外边距、内边距、边框厚度、宽高、等几何属性)
- 页面渲染初始化
- 浏览器窗口尺寸改变
- 获取某些属性：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。在多次使用这些值时应进行缓存
- 优化：
- 不要一条一条地修改 DOM 的样式，可以先定义好 css 的 class，然后修改 DOM 的 className
- 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
- 获取浏览器重排 DOM 节点的属性值，存储到变量中
- 避免使用 table 布局，很小的改动会造成整个 table 的重新布局
微任务/宏任务
- JavaScript 中分为同步任务和异步任务，而异步任务中又分为宏任务和微任务两种；先执行同步任务，再执行异步任务；
- 微任务永远比宏任务先执行；同层级先微任务后宏任务的顺序
- 在执行微任务过程中产生的新的微任务并不会推迟到下个宏任务中执行，而是在当前的宏任务中继续执行。
- 微任务：Promise 相关任务,Mutation Observer 等等
- 宏任务：定时器,用户交互事件等
SPA 单页应用
单页面应用指：只有一个 web 页面的应用。
- 特点：浏览器一开始直接加载必须的 HTML、CSS、JS，所有的操作都在这一个页面上完成，有 JavaScript 控制交互和局部刷新
- 优点：
- 有利于前后端分离
- 良好的用户体验，不刷新界面，显示更流畅
- 减轻服务器压力，不需要频繁请求界面
- 缺点：
- 初次加载比较耗时
- 不利于 SEO 优化
内存泄露与内存溢出
事件委托
- addEventListener 事件绑定第三个参数默认为 false 事件冒泡阶段
- 优点：
- 提高性能：每个函数都会占用内存空间，只添加一个事件处理程序，所占用的内存空间更少
- 动态监听：使用委托可监听“未来”的元素
原生事件机制
- 到目前为止,一共出现多少种事件机制?
- 一共存在 3 种
- 事件捕获机制
- 事件冒泡机制
- 标准事件机制
- 标准事件机制,一共分为几个阶段?
- 捕获阶段
- 从最外层的 document 元素开始向内逐层传递,触发同类型事件,直到找到目标元素为止
- 目标阶段
- 捕获阶段结束之后,将目标元素身上所有的同类型事件全部触发
- 冒泡阶段
- 目标阶段结束之后,从目标元素开始向外逐层传递,触发同类型事件,直到最外层 document 元素为止
- 捕获阶段
- 如何绑定事件监听?
- 举例:现在需要给 div 节点,绑定 click 事件监听
- div.onclick=function(){}
- 本质:是对 div 对象的 onclick 属性进行赋值
- 该方法对于每个节点的每个事件,都只能绑定一个回调函数,后绑定的会覆盖之前绑定的
- 该方法只能绑定冒泡事件
- div.addEventListener('click',function(){})
- 本质:是调用 div 对象身上的 addEventListener 方法,并传入事件回调函数
- 该方法对于每个节点的每个事件,都可以绑定多个回调函数
- 第三个实参:
- 数据类型:
- 布尔值
- true->将当前事件存放于捕获阶段触发
- false->将当前事件存放于冒泡阶段触发
- 对象
- capture 属性
- true->将当前事件存放于捕获阶段触发
- false->将当前事件存放于冒泡阶段触发
- passive 属性
- 前言:部分浏览器存在调用 event.preventDefault()方法默认无效的情况
- true->事件回调函数中的 event.preventDefault()方法生效
- false->事件回调函数中的 event.preventDefault()方法不生效
- capture 属性
- 布尔值
- 数据类型:
- 如何阻止事件冒泡?
- event.stopPropagation();
- event.cancelBubble=true;
- 扩展:如何阻止事件捕获?
- event.stopPropagation 方法在冒泡阶段事件中使用,就是阻止冒泡,捕获阶段事件中使用就是阻止捕获
- 问题:请问我们绑定的是事件还是事件的回调函数?
- 简单说法:给 div 绑定 click 事件
- 完整说法:给 div 绑定 click 事件的回调函数
- 绑定的是事件的回调函数,不是事件,每个标签具有什么事件都是由 W3C 规范制定的,不是我们绑定的
常识
软链接
软链接：相当于快捷方式，不占用内存空间
硬链接
相当于复制一份文件，但文件内容是同步的，
端口
- 端口范围：0~65535
- 知名端口：0~1024
- 常见端口：80、Mysql3306、mongodb27017
加密
- md5 加密
- JSEncrypt 加密解密
云服务器使用：
服务器管理软件：宝塔、LNMP、海外版(aapanel)、1Panel
- 在终端中输入连接命令
ssh root@111.67.199.222（公网 ip） - 使用 linux 命令 / vim 命令 操作系统
1Panel - 现代化开源 Linux 服务器运维面板
- 安装：在线安装 - 1Panel 文档
- .... 更多支持可通过首页联系方式找我帮助！
宝塔面板
常用软件：
- pm2 node 包管理器
- mysql
- sh
# ubuntu 中安装宝塔面板 wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh 安装：
yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh查看公网登录地址
bt default- 外网面板地址: http://8.142.208.202:8888/a3e99629 内网面板地址: http://172.18.218.46:8888/a3e99629
ssh 登录报错
- 原因：第一次 SSH 连接时，生成的认证储存在客户端（也就是用 SSH 连线其他电脑的那个，自己操作的那个）中的 known_hosts，
- 但是如果服务器验证过了，认证资讯当然也会更改，服务器端与客户端不同时，就会跳出错误
- 因此，只要把电脑中的认证资讯删除，连线时重新生成，就一切完美啦～要删除很简单，
- 只要在客户端输入一个指令
ssh-keygen -R 服务器ip地址
sh
PS C:\Users\wzt> ssh root@8.142.208.202
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@ WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY!
Someone could be eavesdropping on you right now (man-in-the-middle attack)!
It is also possible that a host key has just been changed.
The fingerprint for the ED25519 key sent by the remote host is
SHA256:/y9BDVH04wKb/ouMYigQuyAuyn5yCnxLAQ/S6xMpTB8.
Please contact your system administrator.
Add correct host key in C:\\Users\\wzt/.ssh/known_hosts to get rid of this message.
Offending ECDSA key in C:\\Users\\wzt/.ssh/known_hosts:3
Host key for 8.142.208.202 has changed and you have requested strict checking.
Host key verification failed.开放服务器端口
- 配置安全组规则，打开对应端口，否则无法使用
- 远程连接实例所需的 22、3389 端口在创建安全组时默认为开启状态
- 您需要确认安全组的入方向已开放这些端口。如果未开放，请手动配置
- mysql 数据库端口：3306
断开 ssh 连接后继续运行程序
- 使用 screen 运行
- 安装命令执行任务 CentOS
yum install screen - 创建 screen 窗口
screen -S name//name 用于标注 screen 窗口的用途,自由命名 - 执行 screen -S name 之后系统会跳进一个新窗口，我们创建的新进程来执行
- 在这里面启动程序即可
- 离开 screen 窗口并保留程序在后台运行
ctrl + a + d - 查看 screen 进程
screen -ls - 进入进程
- 仅有一个进程时：
screen -r -d - 当有多个进程：
screen -r -d pid//pid 是进程的编号
- 仅有一个进程时：
- 在窗口中
ctrl + a再按下 d 键，就可以退出 ssh 登录，实现后台运行！ - 删除进程
screen -S PID -X quit//PID 是进程号
- 安装命令执行任务 CentOS
- 使用 nohup 执行
- 使用管理终端执行
本地与服务器的文件传输
- linux 的根目录
/ - 管理员用户的位置
/root相当于~
使用 scp 命令
- 需要提供服务服务器的开机密码
本机--服务器
- 把本机的文件传给目标服务器
scp 本机文件路径 root@192.168.1.147:服务器目标路径//ip 地址为目标服务器地址
- 把本机的文件夹传给目标服务器
scp -r 本机文件夹路径 root@192.168.1.145:服务器目标路径
服务器---本机
- 把远端服务器文件拷贝到本地
scp root@192.168.1.147:服务器的文件路径 本地文件存放路径//ip 地址为目标服务器地址
基础环境
配置
node.js环境- 使用二进制文件安装。
- 下载文件
wget https://nodejs.org/dist/v6.9.5/node-v6.9.5-linux-x64.tar.xz - 解压之后，在 bin 文件夹中就已存在 node 和 npm，无需重复编译。
- 解压文件
tar xvf node-v6.9.5-linux-x64.tar.xz - 创建软链接，您就可以在任意目录下直接使用 node 和 npm 命令。
ln -s /root/node-v6.9.5-linux-x64/bin/node /usr/local/bin/node ln -s /root/node-v6.9.5-linux-x64/bin/npm /usr/local/bin/npm
安装 git 工具
yum -y install git安装 git
安装 mysql
- 具体步骤看阿里云服务器官网
安装 MongoDB 数据库（教程：Linux 系统安装 MongoDB 数据库）
- 从官网下载安装包 并上传到服务器
tar -zxvf mongodb-linux-x86_64-rhel70-5.0.4.tgz对压缩包进行解压- 将解压后的文件移动到指定目录下
mv mongodb-linux-x86_64-rhel70-5.0.4 /usr/local/mongodb5 - MongoDB 的可执行文件位于 bin 目录下，所以可以将其添加到 环境变量PATH路径中：
export PATH=/usr/local/mongodb5/bin:$PATH，其中/usr/local/mongodb5/bin表示 mongodb 可执行文件的绝对路径。 - 执行
mongo --version命令查看 mongodb 版本如果成功表示配置成功。 - 创建配置文件
- 创建数据库文件夹，在 mongodb 的安装目录下创建
data/db文件夹，这里/usr/local/mongodb5就是我系统上的安装目录。 - 创建日志文件，在 mongodb 的安装目录下创建
logs文件夹。 - 创建配置文件夹，在 mongodb 的安装目录下创建
etc文件。 - 创建配置文件，在上一步创建的
etc目录下使用vi mongodb.conf命令创建配置文件，并且写入如下内容
- 创建数据库文件夹，在 mongodb 的安装目录下创建
sh# 数据存储路径 dbpath=/usr/local/mongodb5/data/db # 日志文件路径 logpath=/usr/local/mongodb5/logs/mongodb.log # 端口号 port=27017 fork=true journal=false storageEngine=wiredTiger启动 mongodb
- cd 到 mongodb 目录下的 bin 文件夹，执行如下命令：
./mongod --config /usr/local/mongodb5/etc/mongodb.conf - 启动后，在任意目录下输入
mongo命令就可以使用 mongodb 数据库了。
- cd 到 mongodb 目录下的 bin 文件夹，执行如下命令：
其他问题
Apache 重定向配置
[apache 服务器配置,H5 路由刷新问题](https://blog.csdn.net/xuxiaoping1989/article/details/84071458#:~:text=刷新页面时访问的资源在服务端找不到，因为react-router设置的路径不是真实存在的路径。 如上的 404 现象，是因为在 apache 配置的根目录下面压根没有 userinfo 这个真实资源存在，这些访问资源都是在 js 里渲染的。 三、解决方案,1：进入 apache 目录的 conf 目录 2：打开 httpd.conf 3：找到%23LoadModule rewrite_module modules%2Fmod_rewrite.so 然后把前面的%23 去掉 4：找到所有的 AllowOverride 配置项，把所有的 None 都修改为 All)
html
<!-- 1.在网站根目录下面新建一个 .htaccess 文件,写入： -->
<IfModule mod_rewrite.c>
RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond
%{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule .
/index.html [L]
</IfModule>
<!--
2.进入apache目录的conf目录 \ 打开httpd.conf
找到 #LoadModule rewrite_module modules/mod_rewrite.so 去掉前面的#
找到所有的AllowOverride配置项，把所有的None都修改为All
-->
<!-- 3. 重载apache配置 -->关于 CDN
域名解析指向 -> CDN 解析指向 -> 真实服务器+端口 -> 根据本地代理等指向真实文件
域名解析、cdn 解析、本地服务搭建；三个节点都可以进行 ssl 加密证书的部署
HbuilderX 网页打包原生 app
- 新建 web app 项目
- 进行配置
- 云打包
- over
自建RustDesk 远控
sh
# 1.获取镜像 rustdesk/rustdesk-server
docker image pull rustdesk/rustdesk-server
# 2.配置端口号
开放 21115 21116 21117 21118 21119 的TPC端口 21116的UDP
# 3.运行RustDesk服务端 指定的key用于后续控制时配置【不配置key可能无法正常使用】 :指定的端口号可以不写
sudo docker run --name hbbs -p 21115:21115 -p 21116:21116 -p 21116:21116/udp -p 21118:21118 -v pwd:/root -td rustdesk/rustdesk-server hbbs -r 当前服务器的外网IP:指定的端口号 -k 指定的key
sudo docker run --name hbbr -p 21117:21117 -p 21119:21119 -v pwd:/root -td rustdesk/rustdesk-server hbbr -k 指定的key
# 4.在客户端中配置 ID/中继服务器选项
...