前端开发
1、 DOMContentLoaded在 JavaScript 中，DOMContentLoaded 是一个事件，用于表示当网页的 DOM（文档对象模型） 已经完全加载并且解析完成时触发的事件。简单来说，它标志着网页的 HTML 结构已经可以通过 JavaScript 来访问和操作。
当浏览器加载一个网页时，它会逐步解析 HTML 代码并构建 DOM 树，这是表示网页结构和内容的内部数据结构。有时，您可能希望在 DOM 完全加载后执行一些 JavaScript 代码，以确保您操作的元素和内容已经存在于 DOM 中。这就是使用DOMContentLoaded事件的情况。
例如，如果您在DOMContentLoaded事件的处理程序中放置了一些修改 DOM 的代码，那么您可以确保这些修改不会在 DOM 还没有加载完成时执行，从而避免出现错误。
总之，DOMContentLoaded事件在网页加载过程中的一个关键时间点，它表示网页的结构已经准备好进行 JavaScript 操作。
注意：DOMContentLoaded 只监听 html 结构
对于监控 CSS 结构加载完成并且浏览器已经绘制 ...
前端开发
参考链接
::-webkit-scrollbar——整个滚动条。::-webkit-scrollbar-button——滚动条上的按钮（上下箭头）。::-webkit-scrollbar-thumb——滚动条上的滚动滑块。::-webkit-scrollbar-track——滚动条轨道。::-webkit-scrollbar-track-piece——滚动条没有滑块的轨道部分。::-webkit-scrollbar-corner——当同时有垂直滚动条和水平滚动条时交汇的部分。通常是浏览器窗口的右下角。::-webkit-resizer——出现在某些元素底角的可拖动调整大小的滑块。
.look-more-content {
overflow-y: scroll;
}
.look-more-content::-webkit-scrollbar {
width: 5px;
}
.look-more-content::-webkit-scrollbar-thumb {
background-color: #888;
border-r ...
前端开发
本文适用于使用cnpm下载的live-server，使用npm或者其他方式下载的安装包未做测试
与http-server比，live-server是一种自动热更新的工具包。
但是在启动http-server的时候，会自动启动127.0.0.1与本机ip地址两个链接以供访问，
这就使得内网内的设备都能访问。
但是live-server默认只会启动127.0.0.1（在没有修改包文件内index.js的时候）
导致每次想换启动地址时都需要去修改index.js文件，导致非常麻烦。
目前本机安装的live-server版本，可以通过在命令行内直接使用命令指定的方式修改端口和链接。
修改端口
live-server --port='8081'
修改地址
live-server --host='192.168.1.1'
注意host内应该是本机的内网ip地址，这样在同一个内网下，不同的设备才能访问我们开放的页面
前端开发
本文只涉及到颜色主题和icon更换
1、颜色更换通过class解决，包含字体、字号、字体颜色、背景颜色等，css控制
2、icon 更换2.1 通过 css background 控制配置多个css文件，通过覆盖的方式进行控制
//默认黑夜主题
.icon-delete {
background: url("../../static/images/backup.png");
}
//更改为白天主题
.themeDay {
.icon-delete {
background: url("../../static/images/Outlined.png") !important;
}
}
//只需要给非默认主题更高的优先级即可，其他非默认主题同理。因为一时间只能展示一个主题，不会出现多个非默认主题之间的覆盖（只需要保证覆盖掉默认主题即可）
//假如再多一个粉色主题
.themePink {
.icon-delete {
background: url("../../static/ima ...
移动端开发
使用 Cordova 打包 HTML 文件为 APK
npm install -g cordova
cordova create MyApp
cd MyApp
cordova platform add android
将你已有的 HTML 文件复制到 www 目录中，确保 www 目录下有一个 index.html 文件，这是应用的入口文件
cordova build android
构建完成后，你会在 platforms/android/app/build/outputs/apk/debug/ 目录下找到生成的 APK 文件如果因为gradle环境问题，使用命令
cordova prepare android
gradle -b platforms/android/build.gradle build
前端开发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF.js Drawing Example</title>
<style>
canvas {
border: 1px solid black;
display: block;
margin: 20px 0;
}
.canvasWrapper {
position: relative;
}
.button-container {
margin: 20px 0;
...
网络与协议
1、缓存1.1 为什么需要缓存服务器需要处理 http 的请求，并且 http 去传输数据，需要带宽。而我们缓存，就是为了让服务器不去处理这个请求，客户端也可以拿到数据。
1.2 什么资源需要缓存
我们的缓存主要是针对 html,css,img 等静态资源，常规情况下，我们不会去缓存一些动态资源，因为缓存动态资源的话，数据的实时性就不会不太好，所以我们一般都只会去缓存一些不太容易被改变的静态资源。
1.3 缓存优缺点优点
减少不必要的网络传输，节约宽带
更快的加载页面
减少服务器负载，避免服务器过载的情况出现
缺点
占内存
2、Http 缓存
2.1 强制缓存（简称强缓存）从强制缓存的角度出发，判断浏览器请求的目标资源是否有效命中，如果命中，则可以直接从内存（硬盘）中读取目标资源，无需与服务器做任何通讯。
2.1.1 基于 Expires 字段实现的强缓存Expires 可以设置资源的过期时间（本地时间），如果请求在资源有效期内，直接从本地读取，反之，则重新在服务器拉取。
比如说将某一资源设置响应头为:Expires:new Date(“2022-7-30 23:59: ...
前端开发
1、el-upload formDat 上传header根据项目需求有所不同，本项目采用的是Cookie，另外，该封装内没有判断文件类型
import Cookies from "_js-cookie@2.2.1@js-cookie";
import axios from "_axios@0.19.2@axios";
function uploadFile_(file) {
let uploadData = new FormData();
uploadData.append("file", file.file);
let headers = {
"Content-Type": "multipart/form-data",
"Accept-Language": Cookies.get("language") || "zh-CN",
token: Cookies.get("tenant_token") || this.$store.state.user.token,
tenant_code: Cookies.get("ten ...
前端开发
1、浏览器基础1、从输入 url 到页面显示经历的过程
1、浏览器接收 url，开启线程对 URL 使用的协议进行判断2、分析加载 URL3、DNS 解析、获取 IP、连同浏览器信息进行 get 请求（对 IP 发起）4、http 会话、发送报文5、web 服务器处理请求6、服务器处理逻辑（查询数据库或缓存等）7、服务器返回报文（304 或 200）8、浏览器下载 HTML 文档9、浏览器解析 HTML，建立 DOM 树10、解析渲染 DOM、css 树、读取缓存、js 事件操作等
2、前端应用开发模式演变
1、静态页面2、服务器组装数据3、后端为主的 mvc4、前后端分离5、纯前端的 mv*6、前端 vvirtual DOM
3、浏览器组成结构
4、浏览器渲染
1、解析 HTML、构建 DOM2、构建渲染树3、渲染树布局4、绘制渲染树
注意重排和重绘：重排是dom发生变化，会在布局阶段开始重新渲染；重绘是只改变样式，不改变dom，是在绘制阶段由于重排是在布局阶段，所以重排后一定会发生重绘
5、HTML 解析
6、CSS 解析
网络与协议
开启线程处理请求，分析url，根据协议处理
调用引擎对应的方法（例如：loadUrl），分析并加载url地址
通过DNS解析获取对应的ip地址，查询后连同cookie、userAgent等信息向ip发出get请求
进行http会话，浏览器发送报文到服务器
服务器处理请求
服务器进入应用程序，找到相应逻辑进行处理（读取缓存或者查询数据等）
服务器返回报文（如果有缓存返回304，否则查询返回200或404）
浏览器开始处理（200或304）
浏览器解析dom，同时设置缓存
渲染dom
前端开发
本文代码以图片作为示例，进行文件批量下载
安装 axios，FileSaver，JSZip 三个插件初始化 new JSZip获取所有图片链接，并根据链接利用 axios 进行数据获取，blob 格式每条数据获取成功后，利用 zip.file 保存起来，参数是文件名、文件数据，数据格式所有数据都获取成功后，利用 zip.generateAsync 生成最终数据数据生成成功后，利用 FileSaver.saveAs 保存数据，并设置压缩包名称
import axios from 'axios'
import FileSaver from 'file-saver'
import JSZip from 'jszip'
downAll: function () {
let that = this
const promises = []
let zip = new JSZip();
let downLinkArr = document.querySelectorAll('.downLi ...
工具与效率
Homebrew是一款Mac OS平台下的软件包管理工具，拥有安装、卸载、更新、查看、搜索等很多实用的功能。简单的一条指令，就可以实现包管理，而不用你关心各种依赖和文件路径的情况，十分方便快捷。
官方安装方式(https://brew.sh/index_zh-cn)/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
官方安装方法在国内很多时候都是无法直接安装问题的，因为网络问题，解决方法也有很多，这里就不一一介绍了，这里就介绍最简单的方法
国内快速安装这里只推荐安装最全的方式，我一般选中科大的源
/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homeb ...
