一、浏览器之相关名词url|工作流程|进程|服务端渲染|客户端渲染
来源，https://zhuanlan.zhihu.com/p/646231693
来源，https://www.cnblogs.com/zhazhanitian/p/13064274.html
来源，https://blog.csdn.net/q1003675852/article/details/134753298
来源，https://www.wenjiangs.com/doc/vlf1m6xwg8mu
1、浏览器相关名词
（1）进程与线程
A、进程（Process）是计算机程序中关于某数据集合上的一次运行活动，是系统进行资源分配和调度的基本单位，是操作系统结构的基础
B、线程（Thread）是操作系统能够进行运算调度的最小单位。它被包含在进程之中，是进程中的实际运作单位
C、单线程（主线程）不包含新线程（defer）、子线程（worker）
D、同步、异步的加载、执行时机各不相同，比如，推迟加载defer、异步加载async，预加载preload、预提取prefetch
（2）与浏览器渲染相关的缩写
A、IPC，进程间通信，全称Inter Process Communication
B、TCP，传输控制协议，全称Transmission Control Protocol
C、TLS，传输层安全，全称Transport Layer Security
D、GPU，图形处理器，全称Graphics Processing Unit
E、GUI，图形用户界面，全称Graphical User Interface
（3）uri与url的区别
A、uri（Uniform Resource Identifier）：统一资源标识符，用字符串标识某一资源的位置，示例如下
urn:issn:1535-3613：用于标识出版物的唯一标识号
tag:example.com,2008:3：用于标识博客文章的特定版本
外站类型、应用id、频道id、页面id
B、url（Uniform Resource Locator）：统一资源定位符，它是一种特殊类型的uri，标识了资源的具体位置，示例如下
http://www.example.com/path/file.html：用于标识特定的网络资源。
ftp://user:password@ftp.example.com/pub/file.txt：用于标识通过FTP协议访问的资源。
C、uri与url的关系，
uri是一个广义的定义，它可以标识任何资源；
url则是一种具体的uri，提供了一种标识资源的方式，特别是那些基于HTTP、HTTPS等协议可以通过浏览器进行访问的资源
2、浏览器的工作流程，分布在4个进程中
（1）DNS解析、寻址、找到服务器。DNS(Domain Name System,域名系统)
（2）浏览器发出HTTP请求
（3）三次握手，建立TCP连接
（4）服务器响应HTTP请求
（5）数据传输完毕
（6）四次挥手，断开TCP连接
（7）浏览器拿到响应内容，渲染页面。来源百度“浏览器加载原理”
A、加载和解析HTML，建立DOM树
B、开启新线程加载执行（defer）js。（不会阻塞document解析）
C、触发document.DOMContentLoaded
D、加载和解析<link>建立CSSOM树（<link href="js文件" rel="preload" as="script">引入和执行js文件，不会阻塞document解析）
E、生成渲染树（自悟，“CSSOM树”拆解到DOM树中）
F、加载和执行JavaScript
G、浏览器把渲染树布局和绘制到屏幕上
H、资源缓存与异步加载，如图片、脚本
I、window.onload，当html及其依赖资源，如样式表、图片、子框架，加载完成后，该事件触发
（8）交互
（9）怎样查看客户端首次渲染
A、浏览器输入http://localhost:8000
B、enter
C、打开控制台console
D、刷新浏览器
3、浏览器的四个进程
（1）浏览器进程(Browser Process)，负责资源加载、界面显示、用户交互、子进程管理、存储
（2）插件进程(Plugin Process)，负责控制网页使用到的插件，chrome://extensions/
（3）渲染进程(Renderer Process)，负责一个标签页的显示
（4）GPU进程(GPU Process)：负责3D、动画、图片等渲染
4、渲染进程的五个线程
（1）GUI渲染线程，负责解析、渲染html、css到浏览器界面，主要任务如下
A、解析HTML页面，构建DOM树
B、解析CSS，构建CSSOM树，//CSS，英文全称：Cascading Style Sheets，层叠样式表
C、把DOM和CSSOM组合成渲染树(render tree)。自悟，应当是样式树拆解到DOM树中
D、布局(layout)、绘制(paint)渲染树到屏幕上
E、重排(reflow)、重绘(repaint)渲染树到屏幕上
附、GUI线程渲染的结果不会立刻呈现在屏幕上，等屏幕刷新时才会呈现出来，屏幕刷新频率一般60HZ，即16.6ms刷新一次屏幕
（2）JS引擎线程（V8），主线程，负责解析执行JS脚本程序
（3）定时器线程，
A、会由浏览器内核的timer模块来进行延时处理
B、当时间到达的时候，才会将回调函数添加到任务队列中
（4）事件线程，
A、onclick 由浏览器内核的 DOM Binding 模块来处理
B、当事件触发的时候，回调函数会立即添加到任务队列中
（5）ajax请求线程，
A、由浏览器内核的 network 模块来处理，
B、在网络请求完成返回之后，才将回调添加到任务队列中
（6）其它线程，defer（推迟线程）、worker（子线程）、EventSource（服务器线程）、WebSocket（双工通信线程）
5、主线程的五个概念
（1）执行栈，主线程上执行任务的地方。别称有，调用栈、控制栈、运行时栈、机器栈
（2）任务队列，主线程上异步任务等候执行的地方，分为“宏/微任务队列”
（3）同步任务，在主线程排队立即执行的任务
（4）异步任务，先在其它线程挂起（暂停执行），后适时推送到“宏/微任务队列”里，等候执行的任务
A、微任务，发起者JS引擎，Promise.then()、async/await
B、宏任务，发起者宿主（Node、浏览器），setTimeout()、setInterval()、requestAnimationFrame
（5）事件循环
A、主线程把“所有的”同步任务推入执行栈执行，
B、主线程把微任务队列里“所有的”微任务回调推入执行栈执行
在执行的过程中，可能产生宏任务，比如在Promise.then()里执行setInterval
C、主线程把宏任务队列里“第1个”宏任务的回调推入执行栈执行
在执行的过程中，可能产生微任务，比如在setInterval里执行Promise.then()
D、如此轮询执行b、c，直到“宏/微任务队列”都为空，称为“事件循环”
个人理解，宏任务执行1个后，微任务执行1轮
E、同一个任务中，微任务优于宏任务执行；不同的任务中，宏任务优于微任务执行
（6）示例，宏任务和微任务的执行顺序
说明、第1个宏任务执行所有的同步、所有的微任务、所有的再生微任务
第2个宏任务执行所有的同步、所有的微任务
第3个宏任务执行再生宏任务
setTimeout(function() {
new Promise(function(resolve) {
/* setTimeout(function() { */
resolve()
/* }) */
}).then(function() {
new Promise(function(resolve) {
console.log('宏1-1-微任务------------------');
resolve()
}).then(function() {
console.log('宏1-2-微任务再生------------------');
})
})
new Promise(function(resolve) {
resolve()
}).then(function() {
new Promise(function(resolve) {
console.log('宏2-1-微任务================');
resolve()
}).then(function() {
console.log('宏2-2-微任务再生================');
})
})
})
setTimeout(function() {
new Promise(function(resolve) {
console.log('宏3-1-同步1');
resolve()
}).then(function() {
console.log('宏3-2-微任务1');
})
new Promise(function(resolve) {
console.log('宏4-1-同步2');
resolve()
}).then(function() {
console.log('宏4-2-微任务2');
})
})
new Promise(function(resolve) {
console.log('宏0-同步1');
resolve()
}).then(function() {
console.log('宏0-微任务2');
})
console.log('宏0-同步3');
6、服务端渲染，SSR，Server-Side-Render，服务器收到请求后，把数据拼接到html里，发送给浏览器渲染。
（1）优势
初始页面加载速度快
利于SEO
（2）劣势
公共部分重复加载
不擅长网站交互
7、客户端渲染，CSR，Client-Side-Render，服务器收到请求后，发送数据给浏览器，浏览器用js把数据拼接到html里，然后渲染。
附、又叫单页面应用，SPA，Single-Page-Application
（1）优势
公共部分不重复加载
擅长网站交互
初始加载后，页面加载速度更快
（2）劣势
初始加载需要更长的时间
不利于SEO
二、前端性能检测与分析
1、前端性能检测工具-Chrome-performance
来源，https://blog.csdn.net/qq_42231156/article/details/124617782
（1）Summary，环状图，各类行为耗时，不排序
Loading，网络通信和html解析
Scripting，JavaScript执行
Rendering，样式计算和布局
Painting，重绘
System，系统事件
Idle，空闲时间
（2）Bottom-Up，表格，各项行为耗时，根据首列Self Time从高到底
（3）Call Tree，表格，各项行为耗时，根据次列Total Time从高到底
（4）Event Log，表格，各项行为耗时，根据首列Start Time从先到后
（5）Timings
FP（First Paint），渲染出第一个像素点。FP一般在HTML解析完成或者解析一部分时候触发。
FCP（First Contentful Paint），渲染出第一个内容。这里的“内容”可以是文本、图片、canvas。
LCP（largest contentful Paint），渲染出最大内容。
DCL（DOMContentLoaded），DOM解析完毕。
L（Onload Event），页面中依赖的所有资源加载完的事件。
已废，FMP（First Meaningful Paint），首次渲染有意义的内容的时间，“有意义”没有一个标准的定义，FMP的计算方法也很复杂。
2、前端性能分析工具-Chrome-LightHouse
来源，https://www.cnblogs.com/ypSharing/p/15793767.html
（1）Lighthouse 已经直接集成到 Chrome60+ 的调试工具
（2）生命周期Lighthouse 运行测评的过程有一套完整的生命周期，可以划分成三个主要流程：
Collecting，收集数据
Auditing，分析数据
Report，生成报告
（3）生成报告，在当前页面-F12-Lighthouse-勾选检测项-Analyze page load
（4）报告指标（metrics）
Performance，性能
Accessibility，访问无障碍，
Best Practice，最佳实践（优化）
SEO，搜索引擎优化
PWA，渐进式(接近原生app的)web app，Progressive Web App
3、其他相关
（1）recorder：录制性能测试脚本
（2）snapshot：快照
（3）Performance insights：性能见解
（4）Simulation Information：模拟信息
（5）APLUS_CNA：在网站上登记用户行为的统计数据。用于网站运营商的内部分析
三、前端优化方案与存储
概要：
（1）压缩静态资源
（2）减少请求
（3）异步加载
（4）销毁前页请求
（5）请求动画帧
（6）懒加载
（7）缓存
A、manifest缓存
B、http缓存
（8）HTTP协议是无状态协议（短连接），其局限的解决方案，8项
A、cookie缓存
B、session缓存
C、sessionStorage存储
D、localStorage存储
E、WebSqlDatabase存储
F、indexedDB存储
G、vuex存储
H、长连接（worker、EventSource、Socket）
1、压缩静态资源，gzip压缩
来源，https://blog.csdn.net/weixin_47516343/article/details/125392505
（1）gzip压缩css、js，前端携带Accept-Encoding:gzip、后端返回Content-Encoding:gzip，
（2）服务器端根据接口路径，读取自身的原始的、未经压缩的静态资源，然后在内存中对其进行“Gzip压缩”，并将压缩后的结果放在响应体中返回给浏览器
（3）已经被Webpack和compression-webpack-plugin进行“Gzip压缩”的静态资源，直接将其放在响应体中返回给浏览器
2、减少请求
附、HTTP教程，https://www.runoob.com/http/http-tutorial.html
（1）减少http同步请求（html页面，表单action），
（2）减少http异步请求（ajax请求，即XMLHttpRequest）
（3）减少图片请求，使用雪碧图(多张小图片合并成一张大图；sprite，精灵，雪碧)
附、骨架屏(初始化时，定义样式类如.header、.nav、.footer的背景色；在window.onload里，把背景色改为背景图片)
3、异步加载。推迟加载defer、异步加载async，预加载preload、预提取prefetch，CDN引入第三方类库，as="script"
（1）async和defer，script标签的异步加载属性，该属性过时了。
script标签同时拥有src和该属性时，该属性有作用，其它情况等同于内嵌脚本，脚本同步执行
来源，https://blog.csdn.net/z9061/article/details/83011175
来源，https://blog.csdn.net/weixin_45792953/article/details/112168794
defer，推迟，新线程“推迟”加载；DOM树构建完成时“执行”，多个defer顺序执行，接着DOMContentLoaded执行；
async，异步，本线程“异步”加载；下载完毕，立即“执行”，多个async无序执行，是“HTML5的新增属性”，优先级高；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>执行顺序</title>
</head>
<body>
<div>执行顺序</div>
</body>
</html>
<script>
document.onreadystatechange = function () { //interactive，〈计〉交互的
console.log('document.readyState 的值为' + document.readyState);
//1、loading：解析HTML结构，加载并解析外部脚本
//2、interactive：页面解析完成，“DOM树”构建完成，document.readyState改为此值；
// 然后，执行defer；执行DOMContentLoaded事件；开始加载图片、样式表文件等外部文件，用以构建“渲染树”
//3、complete：页面加载完成，document.readyState改为此值；然后，执行load事件
}
document.addEventListener("DOMContentLoaded", function (event) {
console.log("DOMContentLoaded 已执行");
});
window.onload = function () {
console.log("onload 已执行");
}
window.onbeforeunload = function () {
console.log("onbeforeunload 已执行");
}
window.onunload = function () {
console.log("onunload 已执行");
}
// 以上打印结果为：
// document.readyState 的值为interactive
// DOMContentLoaded 已执行
// document.readyState 的值为complete
// onload 已执行
// onbeforeunload 已执行
// onunload 已执行
</script>
（2）preload、prefetch、preconnect、prerender，link标签的预加载属性，览器加载机制，可预加载js、css文件
来源，https://cloud.tencent.com/developer/article/1880213
来源，https://www.wenjiangs.com/doc/vlf1m6xwg8mu
preload，预加载，尽早加载，按需执行
prefetch，预提取，空闲加载，按需执行
dns-prefetch，dns预提取，跨域时使用，在请求资源之前解析域名
rel，即relate，关联
A、preload和prefetch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" href="favicon.ico">
<title>phone-cctv</title>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<link href="css/about.6e313ccb.css" rel="prefetch">
<link href="js/about.f2ea88a2.js" rel="prefetch">
<link href="css/app.1bd5cdf2.css" rel="preload" as="style">
<link href="css/chunk-vendors.598a6ee1.css" rel="preload" as="style">
<link href="js/app.9ecd9d37.js" rel="preload" as="script">
<link href="js/chunk-vendors.f223f1fe.js" rel="preload" as="script">
<link href="css/chunk-vendors.598a6ee1.css" rel="stylesheet">
<link href="css/app.1bd5cdf2.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script src="js/chunk-vendors.f223f1fe.js"></script>
<script src="js/app.9ecd9d37.js"></script>
</body>
</html>
B、dns-prefetch
来源，https://developer.mozilla.org/zh-CN/docs/Web/Performance/dns-prefetch
<html>
<head>
<link rel="dns-prefetch" href="https://fonts.gstatic.com/">
<!-- and all other head elements -->
</head>
<body>
<!-- your page content -->
</body>
</html>
C、样式预加载之.css
@import url('');
@font-face{
font-family: myFirstFont;
src: url('https://fonts.gstatic.com/fonts/Sansation_Light.ttf');
}
div{
font-family: myFirstFont;
}
D、样式预加载之style
<style>
@import url('');
</style>
4、销毁前页请求，router.beforeEach
export default new Vuex.Store({
state: {},
getters: {},
mutations: {
pushToken(state, cancel) {
state.cancelTokenArr.push(cancel);两个方法
},
clearToken(state) {
state.cancelTokenArr.forEach(function(cancel){
if (cancel) {
cancel();
}
});
}
}
})
router.beforeEach(function(to, from, next) {
store.commit("clearToken");
next();
});
axios.interceptors.request.use(
function(config){
config.cancelToken = new axios.CancelToken(function(cancel) {
store.commit("pushToken", cancel);
});
return config;
},
);
5、请求动画帧，requestAnimationFrame，
（1）是“HTML5的新增API”
（2）其回调函数的执行频率与浏览器的刷新频率一致，在页面销毁或隐藏时，自动停止执行，完全避免了setInterval的缺点
（3）示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>请求动画帧</title>
<style>
#divUp {
width: 200px;
height: 100px;
line-height: 100px;
background: rgb(131, 128, 128);
border-radius: 60px;
text-align: center;
font-size: 20px;
color: #000;
position: absolute;
}
</style>
</head>
<body>
<div id="divUp">请求动画帧</div>
</body>
</html>
<script>
window.onload = function () {
//以下公共部分
var time = 1;
var element = document.getElementById("divUp")
var initMillseconds = new Date().getTime();
//以下情形1，requestAnimationFrame
function animate() {
var nowMillseconds = new Date().getTime();
var between = (nowMillseconds - initMillseconds);
initMillseconds = nowMillseconds;
if (time < 100) {
time++;
element.style.transform = 'translate(' + time * 10 + 'px)';
console.log( time, between, element );
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);
//以下情形2，setInterval
/* var interval = setInterval(function(){
var nowMillseconds = new Date().getTime();
var between = (nowMillseconds - initMillseconds);
initMillseconds = nowMillseconds;
if (time < 100) {
time++;
element.style.transform = 'translate(' + time * 10 + 'px)';
console.log( time, between, element );
}else{
clearInterval(interval)
}
},33) */
}
</script>
6、懒加载。级联选择器，组件，组件库，见附2
（1）级联选择器
来源1，https://blog.csdn.net/Christina0109/article/details/127572569
来源2，https://element.eleme.cn/#/zh-CN/component/cascader
<el-cascader
class="cascader"
ref="myCascader"
v-model="areaCode"
clearable
placeholder="请选择查询区域"
:props="caprops"
@change="handleChange"
:show-all-levels="false"
>
</el-cascader>
export default {
data () {
return {
caprops: {
value:'code', // 点击获取的值的字段名
checkStrictly: true,
lazy: true,
lazyLoad: this.layzesss
}
}
},
methods: {
async layzesss(node,resolve) {
let level = node.level // 当前层级 三层的为 0，1，2
let result = []
switch (level) {
case 0:
// 这里是由于后端返回的所有的数据，对返回的数据进行了筛选this.firstLevel 是第一层数据，也可换成相关接口
result = this.firstLevel
break;
case 1:
// 取出当前选择的节点的value值
let firstParams = node.value
result = this._.filter(this.secondLevel,['parentcode', firstParams]) // this.secondLevel 是第二层数据
break;
case 2:
let secondParams = node.value
result = this._.filter(this.thirdLevel,['parentcode', secondParams ]) //this.thirdLevel 第三层数据
break;
default:
result= []
break;
}
resolve(result);
},
}
（2）组件
A、懒加载
const routes = [
{
path: '/',
name: 'Index',
component: () => import('../views/Index.vue'),
meta: {title: '游戏活动'}
}
]
B、非懒加载
import Index from "../views/Index.vue"
const routes = [
{
path: '/',
name: 'Index',
component: Index,
meta: {title: '游戏活动'}
}
]
（3）组件库
来源，https://blog.csdn.net/sinat_35538827/article/details/101447333
A、安装插件 npm i babel-plugin-component -D
B、配置 babel.config.js
module.exports = {
presets: [
'@vue/app',
['@babel/preset-env', // 添加 babel-preset-env 配置
{
'modules': false
}
]
],
plugins: [
[
'component',
{
'libraryName': 'element-ui', // 按需引入的组件库
'styleLibraryName': 'theme-chalk' // 按需引入的样式
}
]
]
}
C、main.js
import { Button, Select } from 'element-ui'
// 此时的样式不需要引入了，样式自动按需来引入
// import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Button)
Vue.use(Select)
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
7、manifest缓存，
（1）前端引入Application Cache文件，manifest.appcache，如下：
<html manifest="manifest.appcache">//属于http请求；cache缓存；Apache阿帕奇，是世界使用排名第一的Web服务器软件
...
</html>
（2）在第一次访问时，浏览器加载完HTML文档后，会加载并缓存manifest文档及文档所列资源
（3）之后访问，浏览器首先会查看manifest文件是否被修改（无论是内容还是注释）
A、如果被修改，将当做第一次访问，重新根据manifest文件内容进行缓存
B、如果没有被修改，浏览器直接从缓存中加载文档和资源，不会访问网络
（4）在缓存多个资源文件时，浏览器下载资源文件会先放在一个临时的缓存中，
A、如果有任何一个资源文件下载失败，浏览器将停止其他缓存资源的下载，并清除临时缓存
B、如果所有资源文件都被成功下载，浏览器将会把这些资源文件以及引用manifest文件的HTML文档移动到永久离线缓存中
（5）后端配置Application Cache文件，manifest.appcache，如下：
//以下头部信息
CACHE MANIFEST
# version xx.xx.xx
//以下哪些资源文件需要被缓存
CACHE:
needBeCached.png
needBeCached2.js
//以下哪些文件不需要缓存
NETWORK:
notNeedBeCached.html
notNeedBeCached2.css
//以下后备页面，当资源无法访问时，浏览器会使用该页面
FALLBACK:
/404.html
8、http缓存
附、HTTP教程，https://www.runoob.com/http/http-tutorial.html
（1）特征，在第一次的响应报文中，服务器返回了cache-control、Last-Modified、Expires、etag字段，那么在后续请求时，才带上这些字段
（2）作用，Web应用程序使用HTTP协议传输数据
（3）使用流程
A、前端向后台发送请求
B、后台通过返回304让前端使用缓存（此处的疑问，如果此时缓存已经失效了，怎么办？正常情况下，返回304就是缓存还没有失效）
C、前端可以通过问号传参绕开缓存
（4）以下是缓存限制
A、Cache-Control，响应头，常见的取值有private、no-cache、max-age、must-revalidate等，默认为private
来源https://baike.baidu.com/item/Cache-control/1885913?fr=aladdin
public，所有内容都将被缓存(客户端和代理服务器都可缓存)
private，内容只缓存到私有缓存中(仅客户端可以缓存，代理服务器不可缓存)
no-cache，必须先与服务器确认返回的响应是否被更改
no-store，所有内容都不会被缓存到缓存或Internet临时文件中
must-revalidation/proxy-revalidation，如果缓存的内容失效，请求必须发送到服务器/代理以进行重新验证
max-age=xxx，xxx为数字，缓存在xxx秒后失效
B、Expires，响应头，其value为日期时间，该日期时间后缓存失效
C、Last-Modified 和 If-Modified-Since
Last-Modified，响应头，其value为日期时间，服务器最后修改该文件的日期时间
If-Modified-Since，请求头，如果Last-Modified后，内容没有变化，服务器则返回304，客户端直接从本地加载页面
D、Etag和If-None-Match，被请求变量的实体值
来源https://baike.baidu.com/item/ETag/4419019
ETag，响应头，验证令牌，如"50b1c1d4f775c61:df3"
If-None-Match，请求头，如果Etag和服务器计算出来的Etag匹配，为False，返回304
使用场景，不希望客户端知道文件被修改；If-Modified-Since无法判断1秒内的多次修改；某些服务器不能精确得到文件的最后修改时间
（5）局限，HTTP协议是无状态协议（短连接），其特征是
A、一旦数据交换完毕，客户端与服务器端的连接就会关闭
B、服务器无法从连接上跟踪会话
C、再次交换数据需要建立新的连接
（6）局限的解决方案，8项
A、cookie缓存
B、session缓存
C、sessionStorage存储
D、localStorage存储
E、WebSqlDatabase存储
F、indexedDB存储
G、vuex存储
H、长连接（worker、EventSource、Socket）
9、cookie缓存
（1）特征，大小一般为4K，内容可能包含登录信息、失效时间
（2）作用，服务器通过给客户端颁发cookie来确认用户的身份，解决HTTP无状态协议不能识别请求者身份、失效时间等问题
（3）使用流程
A、客户端第1次发送请求
B、服务器接收到请求-->创建cookie对象-->存储到响应头-->发送到客户端
C、客户端自动解析保存cookie-->客户端再次发送请求时自动携带（可能已被用户修改的）cookie
D、服务器解析cookie
（4）注意事项
A、前后端应当通过获取、解析、赋值对cookie进行增减，否则会抹掉此前的改动与存储
B、前端js不能跨域读取cookie
C、浏览者可以通过Application-Storage-Cookies-网址，查看该网站cookie的每一个键值对
（5）写法
document.cookie='myname=牛马;expires=1111'
document.cookie = 'username=name';
document.cookie = `username=${encodeURIComponent('用户名')}`;
document.cookie = `username=name; expires=${new Date( '2023-1-01 00:00:00' )}`;
document.cookie = 'username=name; max-age=5';
document.cookie = `username=name; max-age=${24 * 3600 }`;
document.cookie = 'username=name; domain=www.xxxxx.com';
document.cookie = 'username=name; path=/home';内层可以访问外层作用域
console.log(document.cookie);
（5）解析为对象的方法
function cookieToObject(cookie){
var object = {};
var array = cookie.split("; ");
for (var item of array){
var arrayIn = item.split("=");
object[arrayIn[0]] = arrayIn[1];
};
return object
}
console.log( cookieToObject(document.cookie).userSeqId );
（6）Cookies.js//供前端修改cookie的插件
A、增，Cookies.set('name', 'value', { expires: 7, path: '' })//为当前页创建有效期7天的cookie
B、删，Cookies.remove('name'); Cookies.remove('name', { path: '' });
C、改，Cookies.set('name', 'value1', { expires: 8, path: '../' })//为当前页创建有效期7天的cookie
D、查，
字符串，new Cookie().cookie_string;
对象，new Cookie().cookie_obj;
map，new Cookie().cookies;
单个，Cookies.get('name'); Cookies.get(); // => 'value' ；// => { name: 'value' }
E、引入，import Cookies from 'js-cookie'
10、session缓存，
（1）后端缓存，存储在后端
（2）客户端请求服务器，服务器可以把用户状态以session的方式记录在服务器上，
（3）当浏览器再请求该网站时，服务器根据cookie确定该用户的身份后，只需要从该session中查找该用户的状态就可以了
11、sessionStorage存储和localStorage存储
（1）localStorage和sessionStorage相同点
A、增
localStorage['name'] = 'Lucy';
localStorage.name = 'Lucy';
localStorage.setItem('name','Lucy');
B、删
delete localStorage['name'];
delete localStorage.name;
localStorage.removeItem('name');
localStorage.clear(); //清除所有的值
C、改
localStorage['name'] = 'Lucy';
localStorage.name = 'Lucy';
localStorage.setItem('name','Lucy');
D、查
localStorage["name"];
localStorage.name;
localStorage.getItem('name');
localStorage.hasOwnProperty('name'); //true 或 false
localStorage.valueOf(); //取出所有值
E、存储大小，都是5MB
F、只能存储字符串类型，其它类型先用JSON.stringfy转成字符串存储，后用JSON.parse转成对象取用
（2）localStorage和sessionStorage不同点，百度“LocalStorage和sessionStorage的区别”
A、localStorage的数据是持久化的，可以在同源的不同页面之间共享
B、sessionStorage的数据则是临时的，只能在“本浏览器本窗口（同一浏览器窗口内）”的“不同标签页之间”共享，关闭本窗口，则数据清除
C、“本浏览器本窗口”，不包含“点击本浏览器图标，打开一个新窗口”
12、WebSqlDatabase存储
（1）基本认知
A、SQL(Structured Query Language)，结构化查询语言
B、Web SQL Database，是“HTML5的新增API”，是一种在客户端使用SQL语句操作数据库的技术
C、WebKit浏览器，包括Safari和Chrome支持WebSQL存储，
D、缺乏标准化和跨浏览器支持，不推荐使用，推荐使用IndexedDB
E、创建或打开一个名为 "myDB" 的数据库
var db = openDatabase('myDB', '1.0', 'My Database', 2*1024*1024);
//参数含义：数据库名称、版本号、描述文本、数据库大小、创建回调（会在创建数据库后被调用）
（2）增删改查
A、增加/插入数据，向"users"表中插入一条数据
db.transaction(function(tx) {//事务
tx.executeSql('INSERT INTO users (id, name) VALUES (?, ?)', [1, 'John Doe']);
});
B、删除数据，删除"users"表中id为1的记录
db.transaction(function(tx) {
tx.executeSql('DELETE FROM users WHERE id = ?', [1]);
});
C、改变/更新数据，更新"users"表中id为1的记录的name字段为"Jane Doe"
db.transaction(function(tx) {
tx.executeSql('UPDATE users SET name = ? WHERE id = ?', ['Jane Doe', 1]);
});
D、查询数据查询"users"表中的所有记录
db.transaction(function(tx) {
tx.executeSql('SELECT * FROM users', [], function(tx, results) {
var len = results.rows.length;
for (var i = 0; i < len; i++) {
console.log(results.rows.item(i));
}
});
});
13、indexedDB存储
来源，https://blog.csdn.net/weixin_42333548/article/details/128851189
来源，https://blog.csdn.net/xuewenjie0217/article/details/123879283
来源，https://wangdoc.com/javascript/bom/indexeddb
（1）特点
A、储存键值对
B、储存支持二进制，不仅可以储存字符串，还可以储存二进制数据
C、储存空间大，一般来说不少于250MB，甚至没有上限
D、支持事务，transaction，一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况
E、异步进行，不会锁死浏览器
F、同源限制，网页只能访问自身域名下的数据库
（2）基本概念
A、数据库，一系列相关数据的容器，通过升级数据库版本“修改数据库结构”，如创建对象仓库（含主键、索引）
B、对象仓库，每个数据库包含若干个对象仓库（object store），通过监听数据库的打开，完成对象仓库的创建，类似于关系型数据库的表格
C、数据记录，每个对象仓库包含若干条数据记录，类似于关系型数据库的行，数据记录分为主键（key）和数据体两部分，
如{ id: 1, text: 'foo' }、{ foo: { bar: 'baz' }, text: 'foo' }
D、主键，默认建立索引的属性，必须是不同的，可以是数据记录里面的一个属性，也可以指定为一个递增的整数编号，上面的id、foo.bar属性可以当作主键
E、数据体，任意数据类型
F、索引，默认为数据记录的主键，也可以用objectStore.createIndex给数据记录建立属性索引，以加速数据的检索
G、事务，数据库通过事务（数据库-事务-对象仓库）来读写和删改数据记录，事务对象有error、abort和complete三个事件，监听操作结果
（3）打开数据库是异步操作，有可能触发4种事件
A、blocked，上一次的数据库连接还未关闭
B、upgradeneeded，第一次打开该数据库，或者数据库版本发生变化
C、success，打开成功
D、error，打开失败
（4）基本操作（增删改查）
示例、
var db;//indexedDB对象
var person = [{
id: 1,
name: "张三",
email: "email1",
},{
id: 2,
name: "李四",
email: "email2",
},{
id: 3,
name: "张三",
email: "email3",
}];
// 1、open，创建或者打开数据库，有2个参数
// 第1个参数，字符串，表示数据库的名字，数据库不存在，就会新建数据库，
// 第2个参数，整数，表示数据库的版本，如省略，则表示新建数据库的版本为1，或者打开当前版本的数据库
// 2、createObjectStore，创建对象仓库，有2个参数
// 第1个参数，对象仓库名
// 第2个参数，js对象(可选)，其中keyPath相当于数据库表中id为主键，autoIncrement为false，表示主键值不自增，添加数据时需指定主键值
// 3、createIndex，创建对象索引，有3个参数，分别为，索引名称、索引所在的属性、配置对象
// 4、transaction，创建一个事务，有3个参数
// 第1个参数，对象仓库名
// 第2个参数，读写方式，默认为readonly，表示只读，readwrite，表示可以写入
// 第3个参数，可选
// 5、objectStore，获取对象仓库，有1个参数，对象仓库名
A、创建或者打开数据库，并创建对象仓库
var request = window.indexedDB.open('dbName',1);
request.onupgradeneeded = function(event) {//需要升级时(直译)，触发时机为，第一次打开数据库，或者数据库版本发生变化
db = event.target.result;//通过event.target.result的属性，拿到数据库
if (!db.objectStoreNames.contains('person')) {
var objectStore = db.createObjectStore('person', { keyPath: 'id' });//创建对象仓库、主键
objectStore.createIndex('name', 'name', { unique: false });//创建索引
objectStore.createIndex('email', 'email', { unique: true });//该属性是否包含重复的值
}else{
//告知已创建
}
}
request.success = function (event) {
db = request.result;//通过request对象的result属性拿到数据库
};
request.onerror = function (event) {
db.close();
};
B、删除数据库
var deRequest = window.indexedDB.deleteDatabase('dbName');
deRequest.onerror = function (event) {};
deRequest.onsuccess = function (event) {};
C、新增数据-增
function add() {
var request = db.transaction(['person'], 'readwrite').objectStore('person')
.add({ id: 1, name: '张三', age: 24, email: 'zhangsan@example.com' });
request.onsuccess = function (event) {
console.log('数据写入成功');
};
request.onerror = function (event) {
console.log('数据写入失败');
}
}
D、删除数据-删
//删除对象仓库的1条数据记录
function remove() {
var request = db.transaction(['person'], 'readwrite').objectStore('person').delete(1);
request.onsuccess = function (event) {
console.log('数据删除成功');
};
}
//清空对象仓库的所有数据记录
db.transaction(['person'], 'readwrite').objectStore('person').clear();
//删除指定的对象仓库
db.deleteObjectStore('person');
E、更新数据-改
function update() {
var request = db.transaction(['person'], 'readwrite').objectStore('person')
.put({ id: 1, name: '李四', age: 35, email: 'lisi@example.com' });
request.onsuccess = function (event) {
console.log('数据更新成功');
};
request.onerror = function (event) {
console.log('数据更新失败');
}
}
F、读取数据-查
普通读取
function read() {
var request = db.transaction(['person']).objectStore('person').get(1);
request.onerror = function(event) {
console.log('事务失败');
};
request.onsuccess = function( event) {
if (request.result) {
console.log('Name: ' + request.result.name);
} else {
console.log('未获得数据记录');
}
};
}
属性索引读取。没有属性索引，只能通过主键拿到数据记录，有了属性索引，可以从任意字段拿到数据记录
var request = db.transaction(['person'], 'readonly').objectStore('person').index('name').get('李四');
request.onsuccess = function (event) {
console.log('数据读取成功');
};
G、遍历数据
function readAll() {
var request = db.transaction('person').objectStore('person').openCursor();
request.onsuccess = function (event) {
var cursor = event.target.result;
if (cursor) {
console.log('Id: ' + cursor.key);
cursor.continue();
} else {
console.log('没有更多数据了！');
}
};
}
14、vuex存储
四、长连接
概要：“短连接”解决方案
（1）web worker，主要用于前端内部传输数据
（2）Web EventSource，与http一样，用超文本传输协议，单向传输数据，从服务端向web端
（3）Web Socket，用tcp传输控制协议，双向传输数据
1、web worker
来源，https://www.jianshu.com/p/cb067aee767d
来源，https://zhuanlan.zhihu.com/p/613979481
（1）介绍，能向后台发送数据
A、WebWorker是“HTML5的新增API”，解决js单线程、长时间阻塞的问题
B、能在Web页面中创建“后台线程”、子线程
C、js主线程与Worker子线程能够同时运行，互不阻塞，互相通信
D、Worker可以用XMLHttpRequest发送异步请求
（2）使用限制
A、同源限制，必须和主线程同源
B、通信限制，Worker单独运行在一个子线程，和主线程的通信，只能通过发布、订阅完成
C、全局对象限制，Worker的全局对象是self，无法访问window的属性和方法，不能操作DOM/BOM，只能进行纯数据处理，但可以访问Navigator和Location
（3）示例
A、主线程main.js
const numInput = document.getElementById('num');
const calculateButton = document.getElementById('calculate');
const resultElement = document.getElementById('result');
const myWorker = new Worker('worker.js'); //创建子进程实例
myWorker.addEventListener('message', function(e) { //监听来自子线程的消息
resultElement.textContent = '结果：' + e.data;
});
calculateButton.addEventListener('click', function() { //处理点击事件
const num = Number(numInput.value);
myWorker.postMessage(num); //向子线程发送消息
});
B、子线程worker.js，//new Worker('worker.js')，通过它与主进程关联
self.addEventListener('message', function(e) { //监听来自主线程的消息
const num = e.data + 1;
self.postMessage(num); //向主线程发送消息
});
2、Web EventSource
来源，https://developer.mozilla.org/zh-CN/docs/Web/API/EventSource
来源，https://segmentfault.com/a/1190000044180076
（1）介绍，能接收后台发送的数据
A、EventSource是“HTML5的新增API”，能接收服务端“通过http协议”主动推送的数据
B、在web获取实例的方式为，new EventSource('http://localhost:8080/sse/events')
C、EventSource实例会对HTTP服务器开启一个持久化的http连接
D、数据只能从服务端发送到客户端
（2）如果接收消息中有一个event字段，触发的事件与event字段的值相同
A、服务端部分示例代码
stream.write(`event: custom\ndata: ${song[index]}\n\n`) //此处定义了event字段，名称为custom
B、前端部分代码
const eventSource = new EventSource("sse.php");
const eventList = document.querySelector("ul");
eventSource.addEventListener('custom', (data) => {
const newElement = document.createElement("li");
newElement.textContent = `message: ${e.data}`;
eventList.appendChild(newElement);
console.log(data.data)
})
（3）如果不存在event字段，则将触发通用的message事件
A、服务端部分示例代码
stream.write(`data: ${song[index]}\n\n`)
B、前端部分代码
const eventSource = new EventSource("sse.php");
const eventList = document.querySelector("ul");
eventSource.onmessage = (event) => {
const newElement = document.createElement("li");
newElement.textContent = `message: ${e.data}`;
eventList.appendChild(newElement);
console.log(data.data)
}
（4）前端关闭EventSource事件
eventSource.close()
（5）实际使用，示例
A、AbortController，是一个控制器对象，允许中止一个或多个Web请求
来源，https://developer.mozilla.org/zh-CN/docs/Web/API/AbortController
B、依赖,
"dependencies": {
"@microsoft/fetch-event-source": "^2.0.1",
}
C、封装sse，“Server-Sent Events”这个api有个构造函数EventSource
import { fetchEventSource } from '@microsoft/fetch-event-source';
var baseUrl = import.meta.env.VITE_APP_BASE_API
var defaultOption = {
url:'',
method:'POST',
headers: {
'Content-Type': 'application/json',
},
data:{},
onerror:function(error) {
console.log(error)
},
onclose:function(error) {
},
callback:function(error) {
console.log(error)
},
}
export default function(option){
let opt = Object.assign(defaultOption,option)
let abortController = new AbortController()
fetchEventSource(baseUrl + opt.url, {
method: opt.method,
headers: opt.headers,
body: JSON.stringify(opt.data),
signal: abortController.signal,
openWhenHidden:true,
onmessage(event) {
opt.callback(event.data);
},
onopen: function() {
console.log('联通:'+baseUrl + opt.url)
},
onerror(error) {
abortController.abort()
opt.onerror(error)
},
onclose(){
opt.onclose()
},
})
return abortController
}
D、使用sse
import sse from '@/utils/sse';
export function titleGenerate(data, callback, close) {
sse({
url: 'api/llm/gc/titleGenerate',
data,
callback,
onclose: close,
});
}
3、Web Socket
来源，https://blog.csdn.net/BT_LEO/article/details/121652219
（1）介绍，双向发送数据
A、WebSocket是“HTML5的新增API”，一种在单个TCP连接上进行“全双工通讯”的协议，位于七层模型的应用层
B、在web获取实例的方式为，new WebSocket('ws://localhost:8888')
C、通过WebSocket实例，浏览器和服务器只需要完成一次握手，就可以创建持久性的tcp连接
D、数据能够双向传输，即在单个TCP连接上进行全双工通信
（2）优点
A、在客户端和服务器之间保有一个持有的连接，两边可以随时给对方发送数据，有很强的实时性;EventSource只能从服务端发送到客户端
B、属于应用层协议，基于TCP传输协议，并且握手阶段采用HTTP 协议，因此握手时不容易屏蔽，能通过各种HTTP代理服务器;
C、可以发送文本，也可以支持二进制数据的传输;
D、数据格式比较轻量，性能开销小，通信高效;
E、没有同源限制，客户端可以与任意服务器通信;
F、协议标识符是ws(如果加密，则为wss)，服务器网址就是URL;
（3）实现
A、客户端实现
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<div id="clock"></div>
</body>
<script>
let socket = new WebSocket('ws://localhost:8888')
socket.onopen = function () {
console.log('1. 客户端连接上了服务器', new Date().getTime());
socket.send('3. 你好')
}
socket.onmessage = function (e) {
console.log('6',e.data);
}
</script>
</html>
B、服务端实现
var app = express();
let WebSocket = require('ws')
let wss = new WebSocket.Server({port:8888})
wss.on('connection', function(ws) {
console.log('2.服务器监听到了客户端的连接', new Date().getTime());
ws.on('message',function(data){
console.log('4.客户端发来的消息',data);
ws.send('5.服务端说：你也好')
})
})
module.exports = app;
五、BOM对象（含DOM）
说明，从BOM（浏览器对象模型）到DOM
window（浏览器中打开的窗口，BOM的表现形式之一）-
window.document-
window.document.getElementById("demo")（DOM，文档对象模型）-
window.document.getElementById("demo").attributes-
window.document.getElementById("demo").attributes[0].isId
来源，https://www.runoob.com/jsref/obj-window.html
1、window的属性
（1）closed，返回窗口是否已被关闭。
（2）defaultStatus，设置或返回窗口状态栏中的默认文本。
（3）document，HTML文档的根节点，详情见“4、window.document”，console.log(window.document.getElementsByTagName('div'))
（4）frames，返回窗口中所有命名的框架。该集合是 window 对象的数组，每个 window 对象在窗口中含有一个框架。
（5）history，对象包含用户访问过的URL，详情见“3、window.history”
（6）innerHeight，返回窗口的文档显示区的高度。
（7）innerWidth，返回窗口的文档显示区的宽度。
（8）localStorage，在浏览器中存储 key/value 对。没有过期时间。
（9）length，设置或返回窗口中的框架数量。
（10）location，浏览器所加载的当前页面的URL的详细信息
来源，https://www.runoob.com/jsref/obj-location.html
A、hash，返回一个URL的锚部分
B、host，返回一个URL的主机名和端口
C、hostname，返回URL的主机名
D、href，返回完整的URL
E、pathname，返回的URL路径名
F、port，返回一个URL服务器使用的端口号
G、protocol，返回一个URL协议
H、search，返回一个URL的查询部分
I、assign()，载入一个新的文档
J、reload()，重新载入当前文档
K、replace()，用新的文档替换当前文档
（11）name，设置或返回窗口的名称。
（12）navigator，描述了正在使用的浏览器
来源，https://www.runoob.com/jsref/obj-navigator.html
A、appCodeName，返回浏览器的代码名
B、appName，返回浏览器的名称
C、appVersion，返回浏览器的平台和版本信息
D、cookieEnabled，返回指明浏览器中是否启用 cookie 的布尔值
E、platform，返回运行浏览器的操作系统平台
F、userAgent，返回由客户机发送服务器的user-agent 头部的值
G、geolocation，返回浏览器的地理位置信息
H、language，返回浏览器使用的语言
I、onLine，返回浏览器是否在线，在线返回 ture，否则返回 false
J、product，返回浏览器使用的引擎（产品）
K、javaEnabled()，指定是否在浏览器中启用Java
L、taintEnabled()，规定浏览器是否启用数据污点(data tainting)
M、sendBeacon()，方法可用于通过HTTP将少量数据异步传输到Web服务器，navigator.sendBeacon(url, data)
（13）opener，返回对创建此窗口的窗口的引用。
（14）outerHeight，返回窗口的外部高度，包含工具条与滚动条。
（15）outerWidth，返回窗口的外部宽度，包含工具条与滚动条。
（16）pageXOffset，设置或返回当前页面相对于窗口显示区左上角的 X 位置。
（17）pageYOffset，设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
（18）parent，返回父窗口。
（19）screen，：包含客户计算机显示器显示能力的信息
来源，https://www.runoob.com/jsref/obj-screen.html
A、availHeight，返回屏幕的高度（不包括windows任务栏）
B、availWidth，返回屏幕的宽度（不包括windows任务栏）
C、colorDepth，返回目标设备或缓冲器上的调色板的比特深度
D、height，返回屏幕的总高度
E、pixelDepth，返回屏幕的颜色分辨率（每象素的位数）
F、width，返回屏幕的总宽度
（20）screenLeft，返回相对于屏幕窗口的x坐标
（21）screenTop，返回相对于屏幕窗口的y坐标
（22）screenX，返回相对于屏幕窗口的x坐标
（23）sessionStorage，在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。
（24）screenY，返回相对于屏幕窗口的y坐标
（25）self，返回对当前窗口的引用。等价于 window 属性。
（26）status，设置窗口状态栏的文本
（27）top，返回最顶层的父窗口
附、console.log(window.devicePixelRatio)，物理像素比，也叫设备像素比，物理像素/逻辑像素，含义是几个物理像素显示1个逻辑像素
2、window的方法
（1）alert()，显示带有一段消息和一个确认按钮的警告框。
（2）atob()，解码一个 base-64 编码的字符串。
（3）btoa()，创建一个 base-64 编码的字符串。
（4）blur()，把键盘焦点从顶层窗口移开。
（5）clearInterval()，取消由 setInterval() 设置的 timeout。
（6）clearTimeout()，取消由 setTimeout() 方法设置的 timeout。
（7）close()，关闭浏览器窗口。
（8）confirm()，显示带有一段消息以及确认按钮和取消按钮的对话框。
（9）createPopup()，创建一个 pop-up 窗口。
（10）focus()，把键盘焦点给予一个窗口。
（11）getSelection()，返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。
（12）getComputedStyle()，获取指定元素的 CSS 样式。
（13）matchMedia()，该方法用来检查 media query 语句，它返回一个 MediaQueryList对象。
（14）moveBy()，可相对窗口的当前坐标把它移动指定的像素。
（15）moveTo()，把窗口的左上角移动到一个指定的坐标。
（16）open()，打开一个新的浏览器窗口或查找一个已命名的窗口。
（17）print()，打印当前窗口的内容。
（18）prompt()，显示可提示用户输入的对话框。
（19）resizeBy()，按照指定的像素调整窗口的大小。
（20）resizeTo()，把窗口的大小调整到指定的宽度和高度。
（21）scroll()，已废弃。 该方法已经使用了 scrollTo() 方法来替代。
（22）scrollBy()，按照指定的像素值来滚动内容。
（23）scrollTo()，把内容滚动到指定的坐标。
（24）setInterval()，按照指定的周期（以毫秒计）来调用函数或计算表达式。
（25）setTimeout()，在指定的毫秒数后调用函数或计算表达式。
（26）stop()，停止页面载入。
（27）postMessage()，安全地实现跨源通信。
（28）加载
A、$(document).ready
先执行，DOM结构加载完毕就执行
示例，$(document).ready(function(){})，$(function(){})
原理，标准浏览器监听DOMContentLoaded，非标准浏览器监听document.onreadystatechange或者doScroll
B、window.onload
后执行，页面内包括图片的所有元素加载完毕后才能执行
示例，window.onload = function () {};
3、window.history的属性与方法
来源，https://www.runoob.com/jsref/obj-history.html
来源，https://www.python100.com/html/ENZ8IC6776G4.html
来源，https://developer.mozilla.org/zh-CN/docs/Web/API/History_API
来源，https://developer.mozilla.org/zh-CN/docs/Web/API/Window/popstate_event
（1）length，返回历史列表中的网址数
（2）back()，加载history列表中的左一个URL，等同于history.go(-1)
（3）forward()，加载history列表中的右一个URL，等同于history.go(1)
（4）go()，加载history列表中的某个具体页面，history.go(0)，location.reload()，刷新当前
（5）pushState(state,title,url)，向浏览器的会话历史栈增加一个条目，如
history.pushState({page: 1}, "title 1", "/page1");
A、参数state，对象，比如state={key:obj};在其它页面可以通过history.key来获取
B、参数title，字符串，浏览器用它显示页面标题
C、参数url，字符串，当前浏览器地址
D、优势与应用场景，
不会重新加载整个页面，实现无刷新前端路由
跨页面传递数据，实现页面状态的记录
E、缺点，
不会触发页面加载事件及其他事件的处理函数
无法阻止用户使用“后退”按钮
可能导致404错误
问题描述，点击谷歌浏览器左上方的圆箭头刷新，会出错404
问题解决，在服务器端进行相应的nginx配置，这种情况让他返回index.html
（6）replaceState(state,title,url)，修改当前的历史记录条目，
history.replaceState({page: 2}, "title 2", "/page2");
（7）五种操作的作用，激活“浏览器同一页签中不同的历史记录”，以下是五种操作
A、浏览器的后退（向左）
B、浏览器的前进（向右）
C、history.back（向左）
D、history.forward（向右）
E、history.go（负左，正右，0当前）
（8）pushState、replaceState、五种操作，三者之间的关系
A、与前两者无关的五种操作，会触发http请求，会跳转页面
B、与前两者相关的五种操作，会触发window.onpopstate(event)事件，
event.state包含了(state,title,url)中的state，
vue-router没利用这个特性，
pop移除数组最后一项
C、与前两者相关的五种操作、前两者自身，不会触发http请求，不会跳转页面，
vue-router利用了这个特性，把单页面伪装成多页面，
同时后端用nginx处理“由点击浏览器左上方圆箭头而触发的”刷新，
//name和params组合传参，页面刷新、数据丢失，从 vue-router4.1.4 (2022-08-22)开始，弃用此种传参方式，
<script setup>
import { useRouter } from "vue-router"
const router = useRouter()
var clickImage = function(item){
router.push({
name: 'set', //path: '/profile/set',
state: {//起用
key1:'value1',
key2:'value2'
}
})
}
</script>
<script setup>
import { onMounted } from 'vue'
onMounted(function() {
console.log(history.state);
});
</script>
（9）六种方法混用示例：back、forward、go；pushState、replaceState；onpopstate
window.onpopstate = function(event) { //这是异步函数
console.log( 'onpopstate' );
};
setTimeout(function(){
console.log( '1--以下--生成-并-立即-前往-状态1，不会触发window.onpopstate' );
history.pushState({page: 1}, "title 1", "/page1");
},1000)
setTimeout(function(){
console.log( '2--以下--生成-并-立即-前往-状态2（废），不会触发window.onpopstate' );
history.pushState({page: 3}, "title 3", "/page3");
},2000)
setTimeout(function(){
console.log( '3--以下--修改-并-立即-前往-状态2（新），不会触发window.onpopstate' );
history.replaceState({page: 2}, "title 2", "/page2");
},3000)
setTimeout(function(){
console.log( '4--以下--回退到--状态1，会触发window.onpopstate' );
history.back();
},4000)
setTimeout(function(){
console.log( '5--以下--回退到--状态0，会触发window.onpopstate' );
history.back();
},5000)
setTimeout(function(){
console.log( '6--以下--前往--状态1，会触发window.onpopstate' );
history.forward();
},6000)
setTimeout(function(){
console.log( '7--以下--前往--状态2（新），会触发window.onpopstate' );
history.forward();
},7000)
setTimeout(function(){
console.log( '8--以下--回退到--状态1，会触发window.onpopstate' );
history.back();
},8000)
setTimeout(function(){
console.log( '9--以下--回退到--状态0，会触发window.onpopstate' );
history.back();
},9000)
setTimeout(function(){
console.log( '10--以下--前往--状态2（新），会触发window.onpopstate' );
history.go(2);
},10000)
4、window.document，文档对象，是“1、window的属性（3）”的详情
来源，https://www.runoob.com/jsref/dom-obj-document.html
（1）document.activeElement，返回当前获取焦点元素
（2）document.addEventListener()，向文档添加句柄
（3）document.adoptNode(node)，从另外一个文档返回adapded节点到当前文档
（4）document.anchors，返回对文档中所有Anchor对象的引用
（5）document.applets，返回对文档中所有Applet对象的引用。注意: HTML5已不支持<applet>元素
（6）document.baseURI，返回文档的绝对基础URI
（7）document.body，返回文档的body元素
（8）document.close()，关闭用document.open()方法打开的输出流，并显示选定的数据
（9）document.cookie，设置或返回与当前文档有关的所有 cookie
（10）document.createAttribute()，创建一个属性节点
（11）document.createComment()，createComment()方法可创建注释节点
（12）document.createDocumentFragment()，创建空的DocumentFragment对象，并返回此对象
（13）document.createElement()，创建元素节点
（14）document.createTextNode()，创建文本节点
（15）document.doctype，返回与文档相关的文档类型声明(DTD)
（16）document.documentElement，返回文档的根节点
（17）document.documentMode，返回用于通过浏览器渲染文档的模式
（18）document.documentURI，设置或返回文档的位置
（19）document.domain，返回当前文档的域名
（20）document.domConfig，已废弃。返回normalizeDocument()被调用时所使用的配置
（21）document.embeds，返回文档中所有嵌入的内容（embed）集合
（22）document.forms，返回对文档中所有Form对象引用
（23）document.getElementsByClassName()，返回文档中所有指定类名的元素集合，作为NodeList对象========
（24）document.getElementById()，返回对拥有指定id的第一个对象的引用==========
（25）document.getElementsByName()，返回带有指定名称的对象集合==========
（26）document.getElementsByTagName()，返回带有指定标签名的对象集合==========
（27）document.images，返回对文档中所有Image对象引用
（28）document.implementation，返回处理该文档的DOMImplementation对象
（29）document.importNode()，把一个节点从另一个文档复制到该文档以便应用
（30）document.inputEncoding，返回用于文档的编码方式（在解析时）
（31）document.lastModified，返回文档被最后修改的日期和时间
（32）document.links，返回对文档中所有Area和Link对象引用
（33）document.normalize()，删除空文本节点，并连接相邻节点
（34）document.normalizeDocument()，删除空文本节点，并连接相邻节点的
（35）document.open()，打开一个流，以收集来自任何document.write()或document.writeln()方法的输出
（36）document.querySelector()，返回文档中匹配指定的CSS选择器的第一元素===========
（37）document.querySelectorAll()，HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表============
（38）document.readyState，返回文档状态 (载入中……)
（39）document.referrer，返回当前页面的来源页面的URL
（40）document.removeEventListener()，移除文档中的事件句柄(由addEventListener()方法添加)
（41）document.renameNode()，重命名元素或者属性节点
（42）document.scripts，返回页面中所有脚本的集合
（43）document.strictErrorChecking，设置或返回是否强制进行错误检查
（44）document.title，返回当前文档的标题
（45）document.URL，返回文档完整的URL
（46）document.write()，向文档写HTML表达式或JavaScript代码
（47）document.writeln()，等同于write()方法，不同的是在每个表达式之后写一个换行符
（48）document.styleSheets
setTimeout(function(){
var all = document.getElementsByClassName('isInitShow')
for(var i = 0; i<all.length; i++){
if(all[i].clientHeight > 50) {
document.styleSheets[0].insertRule(//在文档的第1个样式表中插入样式规则
"@keyframes moveDown" + i +
"{" +
"from { height: 40px; }" +
"to { height: " + all[i].clientHeight + "px; }" +
"}"
)
document.styleSheets[0].insertRule(
".divDown" + i +
"{" +
"animation: moveDown" + i + " 2s ease 0s 1 normal;" + /* 非常重要：2s前面有空格 */
"}"
)
}
}
});
（49）document.oncontextmenu
document.oncontextmenu = function(){
return false;//取消鼠标右键
}
5、DOM，文档对象模型，Document Object Model
（1）获取方法，通过“4、window.document”的下列方法
A、document.getElementById('id')
B、document.getElementsByClassName('class')
C、document.getElementsByTagName('tag')
D、document.querySelector('.class')
E、document.querySelectorAll('.class')
F、document.getElementsByName('name')[0]
（2）增删改查
A、增加：appendChild、insertBefore、setAttribute
element.appendChild(outerNode);//外节点附在最后子节点的后面
const element = document.createElement("li");
const textnode = document.createTextNode("Water");
element.appendChild(textnode);
document.getElementById("container").appendChild(element);
element.insertBefore(outerNode, sonNode);//外节点或子节点插到某个子节点前面
element.setAttribute(name, value);//给属性名设置属性值
B、删除：remove、removeChild
element.remove();//删除自身，返回值无
element.removeChild(sonNode);//删除自身的某个子节点，返回值为子节点
C、改变：replaceChild
element.replaceChild(outerNode, sonNode);//用外节点替换某个子节点
D、查找：getElementById、getElementsByTagName、getElementsByClassName、querySelector、querySelectorAll
参数不再指定元素属性，getElementById、getElementsByTagName、getElementsByClassName，如document.getElementsByClassName("example")
参数需要指定元素属性，querySelector、querySelectorAll，如document.querySelectorAll(".example")，document.querySelectorAll("h2, div, span")
E、克隆：node.cloneNode(true)//默认浅克隆，true为深克隆
（3）属性
来源，https://www.runoob.com/jsref/dom-obj-all.html
（3-01）element.accessKey，设置或返回accesskey一个元素
（3-02）element.addEventListener()，向指定元素添加事件句柄
（3-03）element.appendChild()，为元素添加一个新的子元素
（3-04）element.attributes，返回一个元素的属性数组
var attr = document.getElementById("demo").attributes[0].isId;
A、attr.isId，如果属性是 ID 类型，则 isId 属性返回 true，否则返回 false
B、attr.name，返回属性名称，document.getElementsByTagName("button")[0].attributes[0].name;//onclick
C、attr.value，设置或者返回属性值
D、attr.specified，如果属性被指定返回 true ，否则返回 false
E、nodemap.getNamedItem()，从节点列表中返回的指定属性节点。
var btn=document.getElementsByTagName("BUTTON")[0];
btn.attributes.getNamedItem("onclick").textContent;//myfunction()
nodemap.item()，返回节点列表中处于指定索引号的节点
nodemap.length，返回节点列表的节点数目
nodemap.removeNamedItem()，删除指定属性节点
nodemap.setNamedItem()，设置指定属性节点(通过名称)
（3-05）element.childNodes，返回元素的一个子节点的数组
（3-06）element.children，返回元素的子元素的集合
（3-07）element.classList，返回元素的类名，作为 DOMTokenList 对象
（3-08）element.className，设置或返回元素的class属性
（3-09）element.clientTop，表示一个元素的顶部边框的宽度，以像素表示
（3-10）element.clientLeft，表示一个元素的左边框的宽度，以像素表示
（3-11）element.clientHeight，在页面上返回内容的可视高度（高度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条）
（3-12）element.clientWidth，在页面上返回内容的可视宽度（宽度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条）
（3-13）element.cloneNode()，克隆某个元素
（3-14）element.compareDocumentPosition()，比较两个元素的文档位置
（3-15）element.contentEditable，设置或返回元素的内容是否可编辑
（3-16）element.dir，设置或返回一个元素中的文本方向
（3-17）element.firstElementChild，返回元素的第一个子元素
（3-18）element.firstChild，返回元素的第一个子节点
（3-19）element.focus()，设置文档或元素获取焦点
（3-20）element.getAttribute()，返回指定元素的属性值
（3-21）element.getAttributeNode()，返回指定属性节点
（3-22）element.getElementsByTagName()，返回指定标签名的所有子元素集合
（3-23）element. getElementsByClassName()，返回文档中所有指定类名的元素集合，作为 NodeList 对象
（3-24）element.getFeature()，返回指定特征的执行APIs对象
（3-25）element.getUserData()，返回一个元素中关联键值的对象
（3-26）element.hasAttribute()，如果元素中存在指定的属性返回 true，否则返回false
（3-27）element.hasAttributes()，如果元素有任何属性返回true，否则返回false
（3-28）element.hasChildNodes()，返回一个元素是否具有任何子元素
（3-29）element.hasFocus()，返回布尔值，检测文档或元素是否获取焦点
（3-30）element.id，设置或者返回元素的 id
（3-31）element.innerHTML，设置或者返回元素的内容
（3-32）element.insertBefore()，现有的子元素之前插入一个新的子元素
（3-33）element.isContentEditable，如果元素内容可编辑返回 true，否则返回false
（3-34）element.isDefaultNamespace()，如果指定了namespaceURI 返回 true，否则返回 false
（3-35）element.isEqualNode()，检查两个元素是否相等
（3-36）element.isSameNode()，检查两个元素所有有相同节点
（3-37）element.isSupported()，如果在元素中支持指定特征返回 true
（3-38）element.lang，设置或者返回一个元素的语言
（3-39）element.lastChild，返回最后一个子节点
（3-40）element.lastElementChild，返回指定元素的最后一个子元素
（3-41）element.matches()，如果元素匹配指定的 CSS 选择器，matches() 方法就返回 true，否则返回 false
（3-42）element.namespaceURI，返回命名空间的 URI
（3-43）element.nextSibling，返回该元素紧跟的一个节点
（3-44）element.nextElementSibling，返回指定元素之后的下一个兄弟元素（相同节点树层中的下一个元素节点）
（3-45）element.nodeName，返回元素的标记名（大写）
（3-46）element.nodeType，返回元素的节点类型
（3-47）element.nodeValue，返回元素的节点值
（3-48）element.normalize()，使得此成为一个"normal"的形式，其中只有结构（如元素，注释，处理指令，CDATA节和实体引用）隔开Text节点，
即元素（包括属性）下面的所有文本节点，既没有相邻的文本节点也没有空的文本节点
（3-49）element.offsetHeight，返回任何一个元素的高度包括边框（border）和内边距（padding），但不包含外边距（margin）
（3-50）element.offsetWidth，返回元素的宽度，包括边框（border）和内边距（padding），但不包含外边距（margin）
（3-51）element.offsetLeft，返回当前元素的相对水平偏移位置的偏移容器
（3-52）element.offsetParent，返回元素的偏移容器
（3-53）element.offsetTop，返回当前元素的相对垂直偏移位置的偏移容器
（3-54）element.ownerDocument，返回元素的根元素（文档对象）
（3-55）element.parentNode，返回元素的父节点
（3-56）element.previousSibling，返回某个元素紧接之前元素
（3-57）element.previousElementSibling，返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）
（3-58）element.querySelector()，返回匹配指定 CSS 选择器元素的第一个子元素
（3-59）document.querySelectorAll()，返回匹配指定 CSS 选择器元素的所有子元素节点列表
（3-60）element.removeAttribute()，从元素中删除指定的属性
（3-61）element.removeAttributeNode()，删除指定属性节点并返回移除后的节点
（3-62）element.removeChild()，删除一个子元素
（3-63）element.removeEventListener()，移除由 addEventListener() 方法添加的事件句柄
（3-64）element.replaceChild()，替换一个子元素
（3-65）element.scrollHeight，返回整个元素的高度（包括带滚动条的隐蔽的地方）
（3-66）element.scrollLeft，返回当前视图中的实际元素的左边缘和左边缘之间的距离
（3-67）element.scrollTop，返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离
（3-68）element.scrollWidth，返回元素的整个宽度（包括带滚动条的隐蔽的地方）
（3-69）element.setAttribute()，设置或者改变指定属性并指定值
（3-70）element.setAttributeNode()，设置或者改变指定属性节点
（3-71）element.setUserData()，在元素中为指定键值关联对象
（3-72）element.style，设置或返回元素的样式属性
（3-73）element.tabIndex，设置或返回元素的标签顺序
（3-74）element.tagName，作为一个字符串返回某个元素的标记名（大写）
（3-75）element.textContent，设置或返回一个节点和它的文本内容
（3-76）element.title，设置或返回元素的title属性
（3-77）element.toString()，一个元素转换成字符串
（3-78）nodelist.item()，返回某个元素基于文档树的索引
（3-79）nodelist.length，返回节点列表的节点数目
（4）事件
附、示例
<html>
<head></head>
<body>
<button id="button">button</button>
</body>
</html>
<script>
var element = document.getElementById('button');
element.addEventListener('click', function() {
console.log('监听点击1');
});
element.onclick = function() {
console.log('监听点击2');
};
setTimeout(function(){
console.log('以下，JS触发点击==');
element.click();
console.log('以上，JS触发点击==');
})
</script>
A、鼠标事件
a、鼠标移入移出-1/2
element.onmouseenter，鼠标移动到元素时触发，只执行1次
element.onmouseleave，鼠标离开元素时触发，不冒泡
b、鼠标移入移出-2/2
element.onmouseover，鼠标移动到元素时触发，每停止、移动1次，就执行1次
element.onmouseout，鼠标离开元素或进入其子元素时触发，冒泡
c、鼠标按下、移动、松开
element.onmousedown，鼠标按钮被按下
element.onmousemove，鼠标移动时触发
element.onmouseup，鼠标按键被松开
d、按下键盘上的某个键
element.onkeydown，按下键盘上的某个键时，触发鼠标聚焦元素如input的onkeydown事件
e、点击
element.onclick，当用户点击某个对象时调用的事件句柄
element.ondblclick，当用户双击某个对象时调用的事件句柄
f、右键打开菜单
element.oncontextmenu，在用户点击鼠标右键打开上下文菜单时触发
B、键盘事件
// <input type="text" onkeydown="myFunction()">
// object.onkeydown=function(){SomeJavaScriptCode};
onkeydown，某个键盘按键被按下
onkeypress，某个键盘按键被按下并松开
onkeyup，某个键盘按键被松开
C、框架/对象（Frame/Object）事件
// <img src="image_w3default.gif" onabort="myFunction()">
// object.onabort=function(){myScript};
// object.addEventListener("abort", myScript);
onabort，图像的加载被中断 ( <object>)
onerror，在加载文档或图像时发生错误 ( <object>, <body>和 <frameset>)，
onload，一张页面或一幅图像完成加载
onbeforeunload，该事件在即将离开页面（刷新或关闭）时触发
onunload，用户退出页面 ( <body> 和 <frameset>)
onpageshow，该事件在用户访问页面时触发，
onpagehide，该事件在用户离开当前网页跳转到另外一个页面
onresize，窗口或框架被重新调整大小
onscroll，当文档被滚动时发生的事件
onhashchange，该事件在当前URL的锚部分发生修改时触发时触发
D、表单事件
// <element onblur="SomeJavaScriptCode">
// object.onblur=function(){SomeJavaScriptCode};
onblur，元素失去焦点时触发
onchange，该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)
onfocus，元素获取焦点时触发
onfocusin，元素即将获取焦点时触发
onfocusout，元素即将失去焦点时触发
oninput，元素获取用户输入时触发，3
onreset，表单重置时触发
onsearch，用户向搜索域输入文本时触发 ( <input="search">)
onselect，用户选取文本时触发 ( <input> 和 <textarea>)
onsubmit，表单提交时触发
E、剪贴板事件
// <element oncopy="myScript">
// object.oncopy=function(){myScript};
// object.addEventListener("copy", myScript);
oncopy，该事件在用户拷贝元素内容时触发，
oncut，该事件在用户剪切元素内容时触发，
onpaste，该事件在用户粘贴元素内容时触发，
F、打印事件
// <element onafterprint="myScript">
// object.onafterprint=function(){myScript};
// object.addEventListener("afterprint", myScript);
onafterprint，该事件在页面已经开始打印，或者打印窗口已经关闭时触发
onbeforeprint，该事件在页面即将开始打印时触发，
G、拖动事件
// <element ondrag="myScript">
// object.ondrag=function(){myScript};尝试一下
// object.addEventListener("drag", myScript);
ondrag，该事件在元素正在拖动时触发，
ondragend，该事件在用户完成元素的拖动时触发，
ondragenter，该事件在拖动的元素进入放置目标时触发，
ondragleave，该事件在拖动元素离开放置目标时触发，
ondragover，该事件在拖动元素在放置目标上时触发，
ondragstart，该事件在用户开始拖动元素时触发，
ondrop，该事件在拖动元素放置在目标区域时触发，
H、多媒体（Media）事件
onabort，事件在视频/音频（audio/video）终止加载时触发
oncanplay，事件在用户可以开始播放视频/音频（audio/video）时触发
oncanplaythrough，事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发
ondurationchange，事件在视频/音频（audio/video）的时长发生变化时触发
onemptied，当期播放列表为空时触发，
onended，事件在视频/音频（audio/video）播放结束时触发
onerror，事件在视频/音频（audio/video）数据加载期间发生错误时触发
onloadeddata，事件在浏览器加载视频/音频（audio/video）当前帧时触发触发
onloadedmetadata，事件在指定视频/音频（audio/video）的元数据加载后触发
onloadstart，事件在浏览器开始寻找指定视频/音频（audio/video）触发
onpause，事件在视频/音频（audio/video）暂停时触发
onplay，事件在视频/音频（audio/video）开始播放时触发
onplaying，事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发
onprogress，事件在浏览器下载指定的视频/音频（audio/video）时触发
onratechange，事件在视频/音频（audio/video）的播放速度发送改变时触发
onseeked，事件在用户重新定位视频/音频（audio/video）的播放位置后触发
onseeking，事件在用户开始重新定位视频/音频（audio/video）时触发
onstalled，事件在浏览器获取媒体数据，但媒体数据不可用时触发
onsuspend，事件在浏览器读取媒体数据中止时触发
ontimeupdate，事件在当前的播放位置发送改变时触发
onvolumechange，事件在音量发生改变时触发
onwaiting，事件在视频由于要播放下一帧而需要缓冲时触发
I、动画事件
animationend，该事件在 CSS 动画结束播放时触发，
animationiteration，该事件在 CSS 动画重复播放时触发，
animationstart，该事件在 CSS 动画开始播放时触发，
J、过渡事件
transitionend，该事件在 CSS 完成过渡后触发
K、其他事件
onmessage，该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发，
onmousewheel，已废弃。 使用 onwheel 事件替代，
ononline，该事件在浏览器开始在线工作时触发
onoffline，该事件在浏览器开始离线工作时触发
onpopstate，该事件在窗口的浏览历史（history 对象）发生改变时触发
onshow，该事件当 <menu> 元素在上下文菜单显示时触发，
onstorage，该事件在 Web Storage(HTML 5 Web 存储)更新时触发，
ontoggle，该事件在用户打开或关闭 <details> 元素时触发，
onwheel，该事件在鼠标滚轮在元素上下滚动时触发，
L、事件对象
常量
CAPTURING-PHASE，当前事件阶段为捕获阶段(1)
AT-TARGET，当前事件是目标阶段,在评估目标事件(1)
BUBBLING-PHASE，当前的事件为冒泡阶段 (3)
属性
bubbles，返回布尔值，指示事件是否是起泡事件类型
cancelable，返回布尔值，指示事件是否可拥可取消的默认动作
currentTarget，返回其事件监听器触发该事件的元素
eventPhase，返回事件传播的当前阶段
target，返回触发此事件的元素（事件的目标节点）
timeStamp，返回事件生成的日期和时间
type，返回当前 Event 对象表示的事件的名称
方法
initEvent()，初始化新创建的 Event 对象的属性
preventDefault()，通知浏览器不要执行与事件关联的默认动作
stopPropagation()，不再派发事件
M、目标事件对象
addEventListener()，允许在目标事件中注册监听事件(IE8 = attachEvent())
dispatchEvent()，允许发送事件到监听器上 (IE8 = fireEvent())
removeEventListener()，运行一次注册在事件目标上的监听事件(IE8 = detachEvent())
N、事件监听对象
handleEvent()，把任意对象注册为事件处理程序
O、文档事件对象
createEvent()，
P、鼠标/键盘事件对象
属性
altKey，返回当事件被触发时，"ALT" 是否被按下
button，返回当事件被触发时，哪个鼠标按钮被点击
clientX，返回当事件被触发时，鼠标指针的水平坐标
clientY，返回当事件被触发时，鼠标指针的垂直坐标
ctrlKey，返回当事件被触发时，"CTRL" 键是否被按下
Location，返回按键在设备上的位置，3
charCode，返回onkeypress事件触发键值的字母代码
key，在按下按键时返回按键的标识符3
keyCode，返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码
which，返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码
metaKey，返回当事件被触发时，"meta" 键是否被按下
relatedTarget，返回与事件的目标节点相关的节点
screenX，返回当某个事件被触发时，鼠标指针的水平坐标
screenY，返回当某个事件被触发时，鼠标指针的垂直坐标
shiftKey，返回当事件被触发时，"SHIFT" 键是否被按下
方法
initMouseEvent()，初始化鼠标事件对象的值
initKeyboardEvent()，初始化键盘事件对象的值
（5）二级事件
A、事件对象：e=e||window.event
B、事件类型：e.type
C、事件源：e.target=e.target||e.srcElement;
D、阻止默认事件：e.preventDefault?e.preventDefault():e.returnValue=false;
E、阻止冒泡：e.stopPropagation?e.stopPropagation():e.cancelBubble=true;
F、DOM加载完成：
a、标准：DOMContentLoaded；
b、IE：document.onreadystatechange
G、事件监听：
a、标准：addEventlistener(“click”,function(){},false)；
b、IE：Attachment(“onclick”,function(){})
H、this：
a、标准：this为当前元素；
b、IE：this为window
I、方法绑定与执行：
a、标准：同一事件的相同方法不能重复绑定，按顺序执行；
b、IE：同一事件的相同方法能重复绑定，随机执行；
J、DOM二级事件绑定原理
a、标准与IE都会给元素默认开辟一个事件池，把所有方法都依次存到事件池中；
b、可以给当前某一元素绑定多个方法
K、事件流：
a、捕获：从外向内；
b、事件源：发生事件的元素；
c、冒泡：从里向外
附、Console对象
A、assert()，如果断言为 false，则在信息到控制台输出错误信息
B、clear()，清除控制台上的信息
C、count()，记录 count() 调用次数，一般用于计数
D、error()，输出错误信息到控制台
E、group()，在控制台创建一个信息分组 一个完整的信息分组以 console.group() 开始，console.groupEnd() 结束
F、groupCollapsed()，在控制台创建一个信息分组。 类似 console.group() ，但它默认是折叠的
G、groupEnd()，设置当前信息分组结束
H、info()，控制台输出一条信息
I、log()，控制台输出一条信息
J、table()，以表格形式显示数据
K、time()，计时器，开始计时间，与 timeEnd() 联合使用，用于算出一个操作所花费的准确时间
L、timeEnd()，计时结束
M、trace()，显示当前执行的代码在堆栈中的调用路径
N、warn()，输出警告信息，信息最前面加一个黄色三角，表示警告
六、九宫格之位置交换与塌陷递补（发布/订阅模式，观察者模式）
注意：发布/订阅模式中，发布者只要做好消息的发布，而不关心消息有没有订阅者订阅。而观察者模式则要求两端同时存在
1、类模式-九宫格之位置交换与塌陷递补-实用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>九宫格之位置交换与塌陷递补-实用</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
}
#whole {
width: 550px;
height: 550px;
padding: 5px;
background: #CFC;
position: relative;
margin: 100px auto;
}
#whole .dragClass {
width: 150px;
height: 150px;
margin: 5px;
cursor: move;
user-select: none;
background: #FF9;
overflow: hidden;
float: left;
}
#whole .dragClass img {
width: 100%;
height: 100%;
border: none;
}
.detail{
color:red;
font-size: 20px;
}
</style>
</head>
<body>
<div class="detail">实际项目中</div>
<div class="detail">1、页面初始化时，向后台请求图片</div>
<div class="detail">2、根据设计稿将图片插入页面的对应位置</div>
<div class="detail">3、将拖拽内容导入拖拽插件</div>
<div class="detail">4、每次拖拽结束后，前端会告诉后台，被拖拽图片的新旧位置</div>
<div class="detail">5、后台更新数据并返给前端</div>
<div class="detail">6、前端更新数据并将拖拽内容导入拖拽插件</div>
<div class="detail">7、拖拽结果分为，位置互换、塌陷递补，实用</div>
<div id="whole">
<div class="dragClass">1</div>
<div class="dragClass">2</div>
<div class="dragClass">3</div>
<div class="dragClass">4</div>
<div class="dragClass">5</div>
<div class="dragClass">6</div>
<div class="dragClass">7</div>
<div class="dragClass">8</div>
<div class="dragClass">9</div>
</div>
</body>
</html>
<script>
function initDrag(id,callbackObject,type,isPutLast){
//type，为"exchange"时，位置互换，为"collapse"时，塌陷递补
//isPutLast，为true时，放在所有交叉元素的最后一个后面，为false时，放在所有交叉元素中，交叉面积最大那个的后面，
type = type || "exchange" || "collapse";//位置互换||塌陷递补
function Drag(item,items,callbackObject) {
this.minX = null;
this.minY = null;
this.maxX = null;
this.maxY = null;
this.ele = item;
this.items = items;
this.callbackObject = callbackObject||{};
this.down = this.down.bind(this);
this.move = this.move.bind(this);
this.up = this.up.bind(this);
this.on(this.ele, "mousedown", this.down);//给-按下鼠标-绑定事件
}
if(type === "collapse"){
Drag.flag = true;
Drag.sortArray = [];
}
//以下按下鼠标，主动者即将移动
Drag.prototype.down = function (event) {
this.minX = this.ele.offsetLeft;
this.minY = this.ele.offsetTop;
this.maxX = event.pageX;
this.maxY = event.pageY;
this.allCover = [];
if (this.ele.setCapture) {
this.ele.setCapture();
this.on(this.ele, "mousemove", this.move);
this.on(this.ele, "mouseup", this.up);
} else {
this.on(document, "mousemove", this.move);
this.on(document, "mouseup", this.up);
}
event.preventDefault();
for(var i = 0; i < this.items.length; i++){
this.items[i].style.zIndex = 2;
}
this.ele.style.zIndex = 3;
if(this.callbackObject.down){
this.callbackObject.down(this.ele.index, event)
}
if(Drag.flag){
Drag.flag = false ;
for(var i=0; i<this.items.length; i++ ){
var position = {
left: this.items[i].left,
top: this.items[i].top,
}
Drag.sortArray.push(position)
}
}
};
//以下移动鼠标，主动者移动
Drag.prototype.move = function (event) {
this.ele.style.left = this.minX + (event.pageX - this.maxX) + "px";
this.ele.style.top = this.minY + (event.pageY - this.maxY) + "px";
var ele = this.ele;
for (var i = 0; i < this.items.length; i++) {
var item = this.items[i];
if (item == ele)continue;
//以下检测item是否在this.ele的右、下、左、上方
var isRight = item.offsetLeft > ele.offsetLeft + ele.offsetWidth;
var isBottom = item.offsetTop > ele.offsetTop + ele.offsetHeight;
var isLeft = ele.offsetLeft > item.offsetLeft + item.offsetWidth;
var isTop = ele.offsetTop > item.offsetTop + item.offsetHeight;
if (isRight || isBottom || isLeft || isTop) {
item.style.backgroundColor = "";
} else {
this.allCover.push(item);
item.style.backgroundColor = "red";
}
}
if(this.callbackObject.move){
this.callbackObject.move()
}
};
//以下松开鼠标，主动者继续移动，被动者移动
Drag.prototype.up = function (event) {
if (this.ele.releaseCapture) {
this.ele.releaseCapture();
this.off(this.ele, "mousemove", this.move);
this.off(this.ele, "mouseup", this.up);
} else {
this.off(document, "mousemove", this.move);
this.off(document, "mouseup", this.up);
}
var shortest;
var lastIndex = 0;
var shortIndex = 0;
var allCover = this.allCover;
var allCoverLastItem = allCover[allCover.length-1];
for (var i = 0; i < this.items.length; i++) {
if(this.items[i] === allCoverLastItem) lastIndex = i;
}
if (allCover && allCover.length) {
for (var i = 0; i < allCover.length; i++) {
var item = allCover[i];
//计算被拖拽的元素和撞上的元素“左上角”之间的距离，并且保存到distance属性上，距离越小，重叠面积越大
item.distance = Math.sqrt(
Math.pow(this.ele.offsetLeft - item.offsetLeft, 2) +
Math.pow(this.ele.offsetTop - item.offsetTop, 2)
);
item.style.backgroundColor = "";
}
allCover.sort(function (one, two) {
return one.distance - two.distance
});
shortest = allCover[0];
shortest.style.zIndex = 1;
shortest.style.backgroundColor = "orange";
this.ele.style.backgroundColor = "orange";
if(type === "exchange"){//位置互换
var left = this.ele.left;
var top = this.ele.top;
this.animate(shortest, {left: left, top: top}, 700);//被动者移动
this.animate(this.ele, {left: shortest.left, top: shortest.top}, 700);//主动者移动
this.ele.left = shortest.left;
this.ele.top = shortest.top;
shortest.left = left;
shortest.top = top;
}
if(type === "collapse"){//塌陷递补
//document.getElementById(id).insertBefore(this.ele, shortest); // 这是方案1，以下7行为方案2
var whole = document.getElementById(id);
for (var i = 0; i < this.items.length; i++) {
if(this.items[i] === shortest) shortIndex = i;
}
var index = isPutLast? lastIndex: shortIndex;
var ele = whole.removeChild(this.ele);
whole.insertBefore(ele, this.items[index]);
for(var i=0; i<this.items.length; i++ ){
var position = {
left: Drag.sortArray[i].left,
top: Drag.sortArray[i].top
}
this.animate(this.items[i], position, 700);
}
}
} else {//如果没有撞上的元素，则返回原始位置
if(type === "exchange"){//位置互换
var position = {
left: this.ele.left,
top: this.ele.top,
}
this.animate(this.ele, position, 700);//主动者移动
}
if(type === "collapse"){//塌陷递补
for(var i=0; i<this.items.length; i++ ){
if(this.items[i] === this.ele){
var position = {
left: Drag.sortArray[i].left,
top: Drag.sortArray[i].top,
}
this.animate(this.ele, position, 700)
}
}
}
}
if(this.callbackObject.up){
this.callbackObject.up(this.ele.index, shortest && shortest.index || 1, event)
}
};
//以下给主动者-绑定事件
Drag.prototype.on = function (ele, type, fn) {
if(ele.addEventListener){
ele.addEventListener(type, fn, false);
}else if(/^cust/.test(type)) {
if (!ele["cust" + type]) {
ele["cust" + type] = [];
}
var single = ele["cust" + type];
for (var i = 0; i < single.length; i++) {
if (single[i] == fn) return;
}
single.push(fn);
}
};
//以下给主动者-解绑事件
Drag.prototype.off = function(ele, type, fn) {
if (ele.removeEventListener) {
ele.removeEventListener(type, fn, false);
} else {
var single = ele["onEvent" + type];
if (single && single.length) {
for (var i = 0; i < single.length; i++) {
if (single[i] == fn) {
single[i] = null;
return;
}
}
}
}
};
//以下双方移动
Drag.prototype.animate = function(ele, obj, duration) {
var that = this;
var allBegin = {};//用来保存多个方向begin；
var allChange = {};//用来保存多个方向的change;
var flag = 0;//用来记录各个方向的距离是否有效
for (var attr in obj) {
var target = obj[attr]
var begin = this.getCss(ele, attr);
var change = target - begin;
if (change) {//判断一下此方向的运动距离有效，不为0
allBegin[attr] = begin;
allChange[attr] = change;
flag++;
}
}
if (!flag) return; //如果各个方向的运动距离都是0，则结束动画的执行
var interval = 15;
var times = 0;
if(ele.timer) clearInterval(ele.timer);
ele.timer = setInterval(function() {
times += interval;
if (times < duration) {
for (var attr in allChange) {
var change = allChange[attr];
var begin = allBegin[attr];
var val=times/duration*change+begin;
that.setCss(ele, attr, val);
}
} else {
for (var attr in allChange) {
var target = obj[attr];
that.setCss(ele, attr, target);
}
clearInterval(ele.timer);
}
}, interval);
}
//以下双方移动-辅助工具
Drag.prototype.getCss = function(ele, attr) {
if (window.getComputedStyle) {
return parseFloat(window.getComputedStyle(ele, null)[attr]);
} else {
if (attr == "opacity") {
//opacity:0.5;
//filter:Alpha(opacity=50);
var filter = ele.currentStyle.filter;
var reg = /alpha\(opacity=(\d+(?:\.\d+)?)\)/;
if (reg.test(filter)) {// IE8 以及更早的浏览器
return RegExp.$1 / 100;
} else {
return 1;//如果没有给不透明度赋值，则应该把默认值1返回
}
} else {
return parseFloat(ele.currentStyle[attr]);
}
}
}
//以下双方移动-辅助工具
Drag.prototype.setCss = function(ele, attr, val) {
if (attr == "opacity") {
ele.style.opacity = val;
ele.style.filter = "alpha(opacity=" + val * 100 + ")";
} else {
ele.style[attr] = val + "px";
}
}
//以下给各个盒子绑定拖拽事件
var items = document.getElementById(id).children;
for (var i = items.length - 1; i >= 0; i--) {
//从后往前逐个定位。
//如果从前往后逐个定位，随着前面的脱离文档流，后面的会移动到前面的位置，最终都叠加到第一张图片的上面。
var item = items[i];
item.top = item.offsetTop;
item.left = item.offsetLeft;
item.index = i;
item.style.top = item.offsetTop + "px";
item.style.left = item.offsetLeft + "px";
item.style.zIndex = 2;
item.style.position = "absolute";
new Drag(item,items,callbackObject)
}
}
</script>
<script>
var longth = +new Date();
var callbackObject = {
down:function(fromIndex, event){
//console.log(fromIndex,"前端通过这个索引，可以获取始发数据")
},
index:+new Date(),
move:function(){
setTimeout(function(){
var longthIn = +new Date();
if (longthIn - longth > 500) {
longth = longthIn;
//console.log("此处写入移动逻辑")
}
})
},
up:function(fromIndex, toIndex, event){
//console.log(fromIndex, toIndex,"前端通过这两个索引，可以获取始发数据和目的数据")
//console.log(document.getElementById("whole"));//把这个拖拽结果发给后台，收到后台的反馈后再刷新页面
//也可以在多次拖拽结束后，点击（加在）图片下方的按钮，把最终结果告诉后台，不必像上面那样，拖拽一次告诉后台一次
},
}
initDrag("whole",callbackObject,"collapse",true)
</script>
2、发布订阅/观察者模式-九宫格之位置交换-不实用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>九宫格之位置交换-不实用</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
}
#whole {
width: 480px;
height: 480px;
padding: 5px;
background: #CFC;
position: relative;
margin: 100px auto;
}
#whole .classDrag {
width: 150px;
height: 150px;
margin: 5px;
cursor: move;
user-select: none;
background: #FF9;
overflow: hidden;
float: left;
}
#whole .classDrag img {
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<div id="whole">
<div class="classDrag">0</div>
<div class="classDrag">1</div>
<div class="classDrag">2</div>
<div class="classDrag">3</div>
<div class="classDrag">4</div>
<div class="classDrag">5</div>
<div class="classDrag">6</div>
<div class="classDrag">7</div>
<div class="classDrag">8</div>
</div>
</body>
</html>
<script>
/*第一步：准备拖拽的类，给主动者用*/
function processThis(fn, context) {
return function (event) {
fn.call(context, event);
};
}
function Drag(ele,items) {
this.minX = null;
this.minY = null;
this.maxX = null;
this.maxY = null;
this.items = items;
this.ele = ele;
this.selfDown = processThis(this.down, this);
this.selfMove = processThis(this.move, this);
this.selfUp = processThis(this.up, this);
on(this.ele, "mousedown", this.selfDown);
}
Drag.prototype.on = function (type, fn) {//把方法订阅给实例
if (!this["custom" + type]) {
this["custom" + type] = [];
}
var single = this["custom" + type];
for (var i = 0; i < single.length; i++) {
if (single[i] == fn)return this;
}
single.push(fn);
return this;
};
Drag.prototype.down = function (event) {
this.minX = this.ele.offsetLeft;
this.minY = this.ele.offsetTop;
this.maxX = event.pageX;
this.maxY = event.pageY;
if (this.ele.setCapture) {
this.ele.setCapture();
on(this.ele, "mousemove", this.selfMove);
on(this.ele, "mouseup", this.selfUp);
} else {
on(document, "mousemove", this.selfMove);
on(document, "mouseup", this.selfUp);
}
event.preventDefault();
run(this,"custDown", event);
};
Drag.prototype.move = function (event) {
this.ele.style.left = this.minX + (event.pageX - this.maxX) + "px";
this.ele.style.top = this.minY + (event.pageY - this.maxY) + "px";
run(this,"custMove", event);
};
Drag.prototype.up = function (event) {
if (this.ele.releaseCapture) {
this.ele.releaseCapture();
off(this.ele, "mousemove", this.selfMove);
off(this.ele, "mouseup", this.selfUp);
} else {
off(document, "mousemove", this.selfMove);
off(document, "mouseup", this.selfUp);
}
run(this, "custUp", event);
};
/*第二步：准备（订阅、解除订阅、发布）方法，给主动者用*/
function on(ele, type, fn) {//把方法订阅给实例或文档
if (ele.addEventListener) {
ele.addEventListener(type, fn, false);
} else {
if (!ele["onEvent" + type]) {
ele["onEvent" + type] = [];
ele.attachEvent("on" + type, function () {
run.call(ele)
});
}
var single = ele["onEvent" + type];
for (var i = 0; i < single.length; i++) {
if (single[i] == fn)return;
}
single.push(fn);
}
}
function off(ele, type, fn) {
if (ele.removeEventListener) {
ele.removeEventListener(type, fn, false);
} else {
var single = ele["onEvent" + type];
if (single && single.length) {
for (var i = 0; i < single.length; i++) {
if (single[i] == fn) {
single[i] = null;
return;
}
}
}
}
}
function run(ele, type, event) {
var single = ele["custom" + type];
if (single && single.length) {
for (var i = 0; i < single.length; i++) {
if (typeof single[i] == "function") {
single[i].call(ele, event);
} else {
single.splice(i, 1);
i--;
}
}
}
};
/*第三步：准备与动画相关的方法，给双方用*/
function animate(ele, obj, duration) {
var allBegin = {};//用来保存多个方向begin；
var allChange = {};//用来保存多个方向的change;
var flag = 0;//用来记录各个方向的距离是否有效
for (var attr in obj) {
var target = obj[attr]
var begin = getCss(ele, attr);
var change = target - begin;
if (change) {//判断一下此方向的运动距离有效，不为0
allBegin[attr] = begin;
allChange[attr] = change;
flag++;
}
}
if (!flag) return; //如果各个方向的运动距离都是0，则结束动画的执行
var interval = 15;
var times = 0;
clearInterval(ele.timer);
function step() {
times += interval;
if (times < duration) {
for (var attr in allChange) {
var change = allChange[attr];
var begin = allBegin[attr];
var val=times/duration*change+begin;
setCss(ele, attr, val);
}
} else {
for (var attr in allChange) {
var target = obj[attr];
setCss(ele, attr, target);
}
clearInterval(ele.timer);
}
}
ele.timer = setInterval(step, interval);
}
function getCss(ele, attr) {
if (window.getComputedStyle) {
return parseFloat(window.getComputedStyle(ele, null)[attr]);
} else {
if (attr == "opacity") {
//opacity:0.5;
//filter:Alpha(opacity=50);
var filter = ele.currentStyle.filter;
var reg = /alpha\(opacity=(\d+(?:\.\d+)?)\)/;
if (reg.test(filter)) {// IE8 以及更早的浏览器
return RegExp.$1 / 100;
} else {
return 1;//如果没有给不透明度赋值，则应该把默认值1返回
}
} else {
return parseFloat(ele.currentStyle[attr]);
}
}
}
function setCss(ele, attr, val) {
if (attr == "opacity") {
ele.style.opacity = val;
ele.style.filter = "alpha(opacity=" + val * 100 + ")";
} else {
ele.style[attr] = val + "px";
}
}
/*第四步：准备订阅事件，给双方用*/
function custDown() {
this.allCover = [];
for(var i = 0; i < this.items.length; i++){
this.items[i].style.zIndex = 2;
}
this.ele.style.zIndex = 3;
}
function custMove() {
var ele = this.ele;
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (item == ele)continue;
//以下检测item是否在this.ele的右、下、左、上方
var isRight = item.offsetLeft > ele.offsetLeft + ele.offsetWidth;
var isBottom = item.offsetTop > ele.offsetTop + ele.offsetHeight;
var isLeft = ele.offsetLeft > item.offsetLeft + item.offsetWidth;
var isTop = ele.offsetTop > item.offsetTop + item.offsetHeight;
if (isRight || isBottom || isLeft || isTop) {
item.style.backgroundColor = "";
} else {
this.allCover.push(item);
item.style.backgroundColor = "red";
}
}
}
function custUp() {
var allCover = this.allCover;
if (allCover && allCover.length) {
for (var i = 0; i < allCover.length; i++) {
var item = allCover[i];
//计算被拖拽的元素和撞上的元素之间的距离，并且把距离保存到distance属性上
//可以先找一个距离四周图片都相等的位置，然后再移动、看效果
item.distance = Math.sqrt(Math.pow(this.ele.offsetLeft - item.offsetLeft, 2)
+ Math.pow(this.ele.offsetTop - item.offsetTop, 2));
item.style.backgroundColor = "";
}
//排序，找出和被拖拽元素距离最短（重合面积最大）的那个元素
allCover.sort(function (one, two) {
return one.distance - two.distance
});
var shortest = allCover[0];
shortest.style.zIndex = 1;
shortest.style.backgroundColor = "orange";
this.ele.style.backgroundColor = "orange";
//交换位置
animate(shortest, {left: this.ele.left, top: this.ele.top}, 700);
animate(this.ele, {left: shortest.left, top: shortest.top}, 700);
var left = this.ele.left;
var top = this.ele.top;
this.ele.left = shortest.left;
this.ele.top = shortest.top;
shortest.left = left;
shortest.top = top;
} else {//如果没有撞上的元素，则返回原始位置
animate(this.ele, {left: this.ele.left, top: this.ele.top}, 700);
}
}
/*第五步：给各个拖拽盒子订阅事件*/
var index = 0;
var items = document.getElementById("whole").children;
for (var i = items.length - 1; i >= 0; i--) {
//从后往前逐个定位。
//如果从前往后逐个定位，随着前面的脱离文档流，后面的会移动到前面的位置，最终都叠加到第一张图片的上面。
var item = items[i];
item.style.zIndex = 2;
item.style.left = (item.left = item.offsetLeft) + "px";
item.style.top = (item.top = item.offsetTop) + "px";
item.style.position = "absolute";
new Drag(item,items).on("custDown", custDown).on("custMove", custMove).on("custUp", custUp);
}
</script>
七、瀑布流
所谓瀑布流图片，就是随着鼠标往下拉，图片无穷无尽，但又不是死循环。因为这次拉到底后，后面的才显示出来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
list-style: none;
font-size: 50px;
color: white;
}
div{
width: 1050px;
margin:0 auto;
}
div ul{
width: 200px;
float: left;
margin: 0 5px;
}
div ul li{
width: 100%;
background: url("http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=5c2ddf7c938c5a6ae54f0b1ab390b9fe") no-repeat center #e1e1e1;
margin-bottom: 10px;
}
div ul li img{
display: block;
width: 100%;
}
</style>
</head>
<body>
<div>
<ul><!--<li><img realImg="1.jpg" alt=""/></li>--></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
<script>
var oDiv=document.getElementsByTagName('div')[0];
var aUl=oDiv.getElementsByTagName('ul');
var aLi=oDiv.getElementsByTagName('li');
var aImg=oDiv.getElementsByTagName('img');
//此处是自己造的假数据
var data=[
{"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517838828_mthumb.jpg"},
{"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517841171_mthumb.jpg"},
{"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517843343_mthumb.jpg"},
{"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517845828_mthumb.jpg"},
{"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517848093_mthumb.jpg"},
{"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517850750_mthumb.jpg"},
{"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517853171_mthumb.jpg"},
{"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517855671_mthumb.jpg"},
{"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517857750_mthumb.jpg"},
{"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517860171_mthumb.jpg"},
{"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518058703_mthumb.jpg"},
{"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518060703_mthumb.jpg"}
];
function rnd(n,m){
return Math.round(Math.random()*(m-n)+n);
}
function makeArray(arg){
var ary=[];
if('getComputedStyle' in window){
ary=Array.prototype.slice.call(arg);
}else{
for(var i=0; i<arg.length; i++){
ary.push(arg[i])
}
}
return ary;
}
function win(attr){
return document.documentElement[attr]||document.body[attr];
}
//1.动态创建1个li,li的宽度不管，高度随机，内容是img；
function createLi(){
var oLi=document.createElement('li');
oLi.style.height=rnd(100,300)+'px';
oLi.innerHTML='<img realImg="'+data[rnd(0,9)].src+'" alt=""/>';
return oLi;
}
//2.创建50个li，每次都插入最短的ul
function li50(){
for(var i=0; i<50; i++){
var oLi=createLi();
var ary=makeArray(aUl);
ary.sort(function(a,b){
return a.offsetHeight- b.offsetHeight;
});
ary[0].appendChild(oLi);
}
}
li50();
showImg();
window.onscroll=function(){
var scrollBottom=win('scrollTop')+win('clientHeight');
showImg();//延迟加载图片，只要图片进入可视区，才显示图片
if(scrollBottom>=win("scrollHeight")){
li50();//不管是否进入可视区，只要满足条件，都会动态创建50个；
}
};
function showImg(){
var scrollBottom=win('scrollTop')+win('clientHeight');
for(var i=0; i<aLi.length; i++){
var imgPos=aLi[i].offsetTop+aLi[i].offsetHeight;
if(imgPos<scrollBottom){
aImg[i].src=aImg[i].getAttribute('realImg');
aImg[i].parentNode.style.height='auto';
}
}
}
</script>
</body>
</html>
八、跑马灯效果
实现原理：将图片复制一份放到第一份图片后面；第一份图片从显示区左边界跑出多少、第二份图片就从显示区右边界跑入多少；第一份图片完全跑出显示区时，第二份图片则完全跑入显示区。此时瞬间切换至轮播开始时的状态。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
list-style: none;
}
div{
position: relative;
width: 800px;
height: 200px;
border: 5px solid lightgreen;
margin:10px auto;
overflow: hidden;
}
div ul{
position: absolute;
left:0;
top:0;
}
div ul li{
width: 200px;
height: 200px;
float: left;
}
div ul li img{
width:100%;
height: 100%;
}
</style>
</head>
<body>
<div id="div1">
<ul>
<li><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517838828_mthumb.jpg" alt=""/></li>
<li><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517841171_mthumb.jpg" alt=""/></li>
<li><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517843343_mthumb.jpg" alt=""/></li>
<li><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517845828_mthumb.jpg" alt=""/></li>
</ul>
</div>
<script>
var oUl=document.getElementsByTagName('ul')[0];
var lis=oUl.getElementsByTagName('li');
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=lis.length*lis[0].offsetWidth+'px';
var left=null;
var timer=setInterval(function(){
left-=3;
if(left<-oUl.offsetWidth/2){
left=0;
}
oUl.style.left=left+'px'
},20)
</script>
</body>
</html>
九、卷轴展开效果
注意：前端网关闭，存在上面的图片丢失，此效果已经不可预览
实现原理：（1）利用绝对定位固定好起始位置；（2）利用遮罩将右轴右侧的部分遮住；（3）让右轴和遮罩同时同速度向右运动！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>诏书</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#animate {
margin: 40px auto;
width: 1100px;
height: 500px;
position: relative;
overflow: hidden;
}
#back {
width: 1100px;
height: 500px;
position: absolute;
left: 40px;
top: 95px;
}
#leftAxis {
position: absolute;
left: 0;
}
#rightAxis {
position: absolute;
left: 16px;
}
#rightWhiteMark {
position: absolute;
left: 70px;
top:95px;
}
</style>
</head>
<body>
<div id="animate">
<div id="back"><img src="https://cdn.files.qdfuns.com/article/content/picture/201806/09/145027pf0jh29z4nhlljr5.png"/></div>
<div id="leftAxis"><img src="https://cdn.files.qdfuns.com/article/content/picture/201806/09/145336cd8g5iq7r78qsk8z.png"/></div>
<div id="rightWhiteMark"><img src="https://cdn.files.qdfuns.com/article/content/picture/201806/26/193935vzzlvazlrkgcxxv6.png"/></div>
<div id="rightAxis"><img src="https://cdn.files.qdfuns.com/article/content/picture/201806/09/145336cd8g5iq7r78qsk8z.png"/></div>
</div>
</body>
<script>
var animate=document.getElementById("animate");
var rightAxis = document.getElementById("rightAxis");
var rightWhiteMark = document.getElementById("rightWhiteMark");
var timer = setInterval(function () {
var rightAxisLeft=getComputedStyle(rightAxis).left;
var rightWhiteMarkLeft=getComputedStyle(rightWhiteMark).left;
if(parseFloat(rightAxisLeft)>=923){
rightAxisLeft=923+"px";
clearInterval(timer);
}
rightAxis.style.left=(parseFloat(rightAxisLeft)+10)+"px";
rightWhiteMark.style.left=(parseFloat(rightWhiteMarkLeft)+10)+"px";
}, 20)
</script>
</html>
十、“几”字形选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width:612px;
border:2px red solid;
margin: 0 auto;
}
ul{
overflow: hidden;
}
li{
list-style: none;
background:red;
float: left;
width: 200px;
height: 30px;
line-height: 30px;
text-align: center;
border: 2px solid orange;
}
li.on{
background: green;
border-bottom: none;/*让该卡头的下边框为“none”*/
height: 32px;/*卡头的内容高度设置为：原内容的高度+卡头下边框的宽度。*/
}
.box div{
background:green;
display: none;
width:612px;
height:200px;
font-size: 30px;
border-top: none;/*在开始写样式时，就把展示区上边框设置成“none”*/
}
.box div.on{
display: block;
}
</style>
</head>
<body>
<div class="box" id="box">
<ul>
<li>中国</li>
<li class="on">日本</li>
<li>韩国</li>
</ul>
<div>中国是老大</div>
<div class="on">日本是老二</div>
<div>韩国是老三</div>
</div>
<script>
var box = document.getElementById('box');
var ul = document.getElementsByTagName('ul')[0];
var lis = box.getElementsByTagName('li');
var divs = box.getElementsByTagName('div');
for(var i=0;i<lis.length;i++){
lis[i].qiancheng = i;
lis[i].onmouseover = function(){
for(var j=0;j<lis.length;j++){
lis[j].className = '';
divs[j].className = '';
}
this.className = 'on';
divs[this.qiancheng].className = 'on';
}
}
ul.onmouseout=function () {
for(var j=0;j<lis.length;j++){
if(j===1){
lis[j].className = 'on';
divs[lis[j].qiancheng].className = 'on';
continue;
}
lis[j].className = '';
divs[j].className = '';
}
}
</script>
</body>
</html>
十一、胶卷式动画放映
图片像电影的胶卷一样，一帧帧地放映，且可以任意删减图片帧数，不会影响放映效果
所用技术为：CSS3动画和原生JavaScript
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>胶卷式动画放映</title>
<style type="text/css" id="style1">
* {
margin: 0;
padding: 0;
font-family:"楷体"
}
body{
background: black;
}
#wrap {
width: 150px;
height: 120px;
margin: 200px auto;
perspective: 2000px;
}
#wrap ul {
width: 100%;
height: 100%;
transform-style: preserve-3d;
animation:move 12s 3.2s infinite ;
}
#wrap ul li {
top: 0;
left: 0;
position: absolute;
width: 148px;
height: 118px;
line-height: 118px;
text-align: center;
font-size: 118px;
background: grey;
border: 1px solid #ccc;
box-shadow: 1px 1px 3px rgba(255, 255, 255, 0.2);
border-radius: 5px;
overflow: hidden;
}
.shadow{
width: 1200px;
height: 1200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -600px;
margin-top: -600px;
background: radial-gradient(600px 600px at center,rgba(50,50,50,0.8),rgba(0,0,0,0));
transform: rotateX(90deg) translateZ(-150px);
}
</style>
</head>
<body>
<div id="wrap">
<ul>
<li>！</li>
<li>师</li>
<li>程</li>
<li>工</li>
<li>端</li>
<li>前</li>
<li>的</li>
<li>秀</li>
<li>优</li>
<li>最</li>
<li>上</li>
<li>史</li>
<li>历</li>
<li>类</li>
<li>人</li>
<li>是</li>
<li>成</li>
<li>钱</li>
</ul>
<div class="shadow"></div>
</div>
</body>
</html>
<script>
var oLis = document.querySelectorAll("#wrap li");
var oStyle = document.querySelector("#style1");
var len = oLis.length;
var aaa = null;
for (var i = 1; i <= len; i++) {
(function (i) {
window.setTimeout(function () {
oStyle.innerHTML +=
"#wrap ul li:nth-child("+i+"){"+
"transform: rotateY("+(len-i)*(360/len)+"deg) translateZ(500px);"+
"transition:0.7s;"+
"transition-delay:"+i*0.1+"s"+
"}"
}, 100);
})(i);
}
for (i = 0; i <= len; i++) {
aaa += (100 / len) * i + "%{transform: rotateY(" + (-360 / len) * i + "deg);}";
}
oStyle.innerHTML += "@keyframes move {" + aaa + "}";
</script>
<script>
var oLis = document.querySelectorAll("#wrap li");
var oStyle = document.getElementsByTagName("style")[0];
var len = oLis.length;
var aaa = null;
for (var i = 1; i <= len; i++) {
(function (i) {
window.setTimeout(function () {
document.styleSheets[0].insertRule(
"#wrap ul li:nth-child("+i+"){"+
"transform: rotateY("+(len-i)*(360/len)+"deg) translateZ(500px);"+
"transition: 0.7s;"+
"transition-delay:"+i*0.1+"s"+
"}"
)
}, 100);
})(i);
}
for (i = 0; i <= len; i++) {
aaa += (100 / len) * i + "%{transform: rotateY(" + (-360 / len) * i + "deg);}";
}
oStyle.innerHTML += "@keyframes move {" + aaa + "}";
</script>
十二、放大镜
原理：左边阴影在左边图片上从左到右移动的时候，右边大框也在右边大图片上从左到右移动（尽管在视觉、原理和代码上是相反的）；所谓放大，其实就是一张原本就很小的图对应一张原本就很大的图。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
.small{
width: 400px;
height: 400px;
position: relative;
background: url(http://cdn.attach.qdfuns.com/notes/pics/201702/11/214206pk76vdieu5co7uwi.jpg) no-repeat center;
border: 1px solid #ccc;
}
.small .inner{
width: 100px;
height: 100px;
background: yellow;
opacity: 0.5;
filter: alpha(opacity=50);
position: absolute;
left:0;
top:0;
display: none;
}
.big{
width: 400px;
height: 400px;
position: absolute;
left:410px;
top:0;
overflow: hidden;
border: 1px solid #ccc;
display: none;
}
.big img{
width: 200%;
height: 200%;
position: absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<div id="small" class="small">
<div class="inner"></div>
</div>
<div id="big" class="big">
<img src="http://cdn.attach.qdfuns.com/notes/pics/201702/11/214213x2oh86wpuuuzcuuc.jpg" alt=""/>
</div>
<script>
var small = document.getElementById("small");
var inner = small.getElementsByTagName("div")[0];
var big = document.getElementById("big");
var img = big.getElementsByTagName("img")[0];
//当鼠标移入small的时候，inner和big显示
small.onmouseover = function () {
big.style.display = "block";
inner.style.display = "block";
};
//当鼠标在small移动的时候：1）鼠标在inner的中间 2）inner跟随鼠标移动
small.onmousemove = function (e) {
e = e || window.event;
var left = e.clientX - this.offsetLeft - inner.offsetWidth / 2;
var top = e.clientY - this.offsetTop - inner.offsetHeight / 2;
if (left <= 0) {
left = 0;
} else if (left >= this.offsetWidth - inner.offsetWidth) {
left = this.offsetWidth - inner.offsetWidth;
}
if (top <= 0) {
top = 0;
} else if (top >= this.offsetHeight - inner.offsetHeight) {
top = this.offsetHeight - inner.offsetHeight;
}
inner.style.left = left + "px";
inner.style.top = top + "px";
//当inner移动的时候，大图跟着一起移动，并且，大图和inner移动的方向相反；
//或者理解为：左边阴影在图片上从左到右移动的时候，右边大框也在大图片上从左到右移动（尽管视觉上是相反的）。
img.style.left =
(left / (small.offsetWidth - inner.offsetWidth)) *
(big.offsetWidth - img.offsetWidth) +
"px";
img.style.top =
(top / (small.offsetHeight - inner.offsetHeight)) *
(big.offsetHeight - img.offsetHeight) +
"px";
};
//当鼠标移出的时候，inner和big隐藏；
small.onmouseout = function () {
big.style.display = "none";
inner.style.display = "none";
};
</script>
</body>
</html>
十三、git
附、Git常用命令大全http://cd.itheima.com/news/20211214/144207.html
附、github是什么
（1）github是2008年出现的专业的代码托管分享平台，
（2）创始人是Tom Preston-Werner（汤姆·普雷斯顿-维尔纳）、Chris Wanstrath（克里斯·万斯特拉斯），
（3）2018年的时候被微软以75亿美元收购，在2020年github收购了NPM
1、一个简单的git流程
（1）克隆项目：git clone https://github.com/AAA/BBB.git
（2）连接到远程仓库：git remote add origin https://github.com/AAA/BBB.git；解除连接：git remote remove origin
（3）建立分支：git branch branch_1
（4）切换到分支：git checkout branch_1
（5）====写代码。3和4可以合并为git checkout -b branch_1
（6）添加到暂存区：git add README.md
（7）添加到历史区：git commit -m "first branch_1"
（8）推送到远程仓库：git push -u origin fen_zhi_ming（从第2次开始，使用git push即可）git push --set-upstream origin fen_zhi_ming
2、其它命令
（1）切换到branch_1分支：git checkout branch_1
（2）拉取branch_1分支内容：git pull origin branch_1（这个操作很重要，最新代码将覆盖旧代码）
（3）把branch_1分支的内容合并到branch_2分支：git merge branch_1（在branch_2分支上运行）
（4）拉取远程分支branch_1并切换到该分支，git branch --track branch_1 remotes/origin/branch_1
（5）查看某文件的所有提交，git log -p src\views\content\content-item.vue
（6）查看某提交的所有文件，git show hash_id
3、回退与强推
（1）回退
git reset --hard HEAD^ 回退到上个版本
git reset --hard HEAD~3 回退到前3次提交之前
git reset --hard commit_id 退到指定的commit_id
（2）强推
origin HEAD --force
4、冲突
（1）产生条件：多人在各自的分支上对同一内容做了不同的修改，后合并的人会报冲突
（2）产生现象
<<<<<<< HEAD
本地向服务器提交的内容（我写的）
=======
服务器下载到本地的内容（人家写的）
>>>>>>>b0ef58d69851fedad4169878a62033c0ce16246c
5、git问题与解决
（1）问题1
A、内容，'common-module' already exists in the index
B、解决，git rm --cached 'common-module'
（2）问题2，
A、内容，dependency was not found:* @common-module/DateUtil
B、解决，git submodule add http://10.71.59.14:30190/maxiaolin/common-module
（3）问题3，
A、内容，在高版本node环境下，在vscode的命令窗口执行npm run dev出错
B、解决，在vscode的命令窗口执行一次$env:NODE_OPTIONS="--openssl-legacy-provider"即可
C、这个命令的作用是，指定在运行Node.js时使用旧版的OpenSSL提供程序
D、SSL（Secure Socket Layer）安全套接层
（4）问题4
A、内容，浏览器控制台出现非常慢
B、解决，F12-设置-preferences-Language-“English(US)-English(US)”
十四、gitLab的问题
1、通过Powershell从gitLib上拉取代码失败，解决SSL certificate problem
方案一：在项目准备存放的地方运行 git config --global http.sslVerify false
方案二：在项目准备存放的路径下运行 set GIT_SSL_NO_VERIFY=true git clone
方案三：用公钥pub
（1）运行ssh-keygen -t rsa -C “123456@qq.com”；cd ~/.ssh；ls（查看目录是否有id_rsa.pub文件）；cat id_rsa.pub（查看公钥）；复制公钥。
（2）进入gitlab；点击右上方settings；点击左中间SSH Keys；在Key里粘贴公钥；点击Add key；
（3）在项目准备存放的路径下运行 git clone gitlab地址（此过程可能与三次握手相关，另外还有四次挥手）
（4）来源，https://blog.csdn.net/kawayiyy123/article/details/110920412
2、通过Powershell向gitLib上推送代码失败，
方案一：git push -u origin fen_zhi_ming（从第2次开始，使用git push即可）
方案二：git push --set-upstream origin fen_zhi_ming（从第2次开始，使用git push即可）
3、通过TortoiseGit从gitLib上拉取、推送代码的步骤
步骤一：获取并添加公钥
（1）运行ssh-keygen -t rsa -C “123456@qq.com”；cd ~/.ssh；ls（查看目录是否有id_rsa.pub文件）；cat id_rsa.pub（查看公钥）；复制公钥。
（2）进入gitlab；点击右上方settings；点击左中间SSH Keys；在Key里粘贴公钥；点击Add key；
步骤二：获取并添加私钥
（1）在命令行输入PuTTYgen，按Enter，点击load
（2）选择文件类型All Files，点击id_rsa，点击打开
（3）点击 save private key，点击是，自动保存私钥到C:\Users\Haier\.ssh文件夹下，名称是id_rsa.ppk，如果没有该文件,则复制该文件夹下的文件id_rsa，并改名为id_rsa.ppk
（4）在项目处，右键，点击Git克隆，填写URL:git@...、加载Putty密钥(K)：C:\Users\Haier\.ssh\id_rsa.ppk，点击确定。
注意：此后拉取、推送就很顺畅了
4、通过TortoiseGit向gitLib上推送代码失败，一直提示输入密码，用私钥ppk
（1）执行3、步骤二：（1）（2）（3）
（2）在项目文件下，右键，移动鼠标到TortoiseGit上，点击Settings，点击Remote，填写Remote:origin、URL:git@...、Putty Key：C:\Users\Haier\.ssh\id_rsa.ppk，点击确定。
5、gitLab的提交地址由http改为https后，下拉代码不成功，解决方案如下：
过程：audit-html文件夹下空白处--右键单击---鼠标置于TortoiseGit(t)上---单击设置---单击确定--单击“编辑本地.git/config(L)”---把第9行代码中的http改成https，即可。
6、gitHub与gitLab
（1）都通过git命令管理代码
（2）通过TortoiseGit（[ˈtɔːtəs]，乌龟，中间人），把git命令操作改成点击操作
（3）通过TortoiseGit-LanguagePack,把TortoiseGit的英文界面改为中文界面
7、SSH：Secure Shell（安全壳），一项创建在应用层和传输层基础上的安全协议，为计算机上的Shell提供安全的传输和使用环境。从客户端来看，SSH基于密匙的安全验证过程为：
（1）需要依靠密匙，也就是你必须为自己创建一对密匙，并把公用密匙放在需要访问的服务器上。
（2）如果你要连接到SSH服务器上，客户端软件就会向服务器发出请求，请求用你的密匙进行安全验证。（此过程可能与三次握手相关，另外还有四次挥手）
（3）服务器收到请求之后，先在该服务器上你的主目录下寻找你的公用密匙，然后把它和你发送过来的公用密匙进行比较。
（4）如果两个密匙一致，服务器就用公用密匙加密“质询”（challenge）并把它发送给客户端软件。
（5）客户端软件收到“质询”之后就可以用你的私人密匙解密再把它发送给服务器。
8、CMD与Windows PowerShell
（1）前者增强后为后者
（2）前者命令少，后者命令多
（3）前者在固定位置打开，后者在当前位置打开
（4）覆盖写入文件，echo 1111111 > b.js
（5）追加写入文件，echo 1111111 >> b.js
（6）读取文件，cat b.js
9、gitLab删除仓库：进入仓库→点击(左下方)settings→可以不点击general→点击(Adanced)后面的expand→点击下面的Remove project→输入仓库名→点击Confirm
十五、VSCode
1、设置
附、点击提交：树杈号-更改（查看变化）-加号（git add）-输入（-m"输入的内容"）-提交（git commit -m"输入的内容"）
（1）找到设置setting
A、左下角齿轮----设置setting
B、文件file----首选项preference----设置setting
（2）常用设置
A、自动折行换行,设置setting----on(editor:word wrap)
B、修改字体,设置setting----Font Family
C、修改字体大小,设置setting----Font Zize
D、设置颜色主题,设置settinge----Color Theme
E、代码自动保存,设置setting----搜索auto save
F、关闭右侧预览,设置setting----搜索"editor.minimap.enabled"
G、多页签并存,设置setting----搜索"Workbench>Editor:Enable Preview"
H、滚轮改变字体大小,设置setting----搜索"mouseWheelZoom"(单词之间没有空格)----勾选
I、缩进2个空格,设置setting----Editor:Tab Size----2
J、html标签生成：在html中输入英文叹号!--按下tab或enter键。
K、js代码运行：安装插件code runner、安装node环境、F5
L、代码语法错误提示：插件，ESlint
M、代码处显示提交记录：插件，“GitLens — Git supercharged”
N、代码比较：单击文件1->选择以进行比较，单击文件2->与已选择项目进行比较
O、恢复默认设置：C:\Users\张三\AppData\Roaming\Code\User\settings.json，删除即可
（3）VSCode设置成中文语言环境
A、Ctrl+Shift+p
B、configure display language
C、确定=>“locale”:“zh-CN”
D、重启vscode工具
E、商店(最左侧最下方图标)
F、Chinese（Simplied） Lang
G、安装
（4）修改窗口高度和字体大小
A、找到workbench.main.css文件
途径一、C:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench
途径二、C:\Users\登录名\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench
B、修改左侧窗口字体大小，找到“.part>.content{font-size:”
C、修改选项卡字体大小，找到“.title .title-label a{text-decoration:none;font-size:”进行修改
D、修改选项卡高度，找到
.title .editor-actions{cursor:default;flex:initial;padding-left:4px;height:
.tab{position:relative;display:flex;white-space:nowrap;cursor:pointer;height:
.title .tabs-container{display:flex;height:
进行修改
（5）vscode如何用谷歌浏览器预览html文件
A、安装“view in browser”
B、安装“open in browser”
C、文件---首选项---设置---输入"open-in-browser.default"---“Chrome”
D、右键“x.html”---“Open in Default Browsers”
（6）运行结果释义，上面浏览器，下面浏览器控制
--------------------------------------
Local: http://localhost:8900
External: http://172.18.10.109:8900
--------------------------------------
UI: http://localhost:3001
UI External: http://172.18.10.109:3001
--------------------------------------
（7）window快捷键
A、window + e: 快速打开我的电脑
B、window + l: 快速锁屏
C、window + d: 快速回到桌面
D、shift + delete: 快速删除
附、代码检查工具（也适用于vscode）
A、代码出现红黄下划线时，将鼠标置其上，百度悬浮内容，查找解决方案
B、ESLint“代码检查工具”，可在根目录下添加.eslintrc.js文件
module.exports = {
"env": {
"browser": true,
"node": true
},
"globals": {//不在这里配置而使用下列变量，则会报错
"angular": true,
}
}
C、JSHint“代码检查工具”，可在根目录下添加.jshintrc.js文件，也可以
设置setting->检索“jshint:options”->点击“在settings.json中设置”->在"jshint.options":{}中加入
"asi": true,//无视没有加分号的行尾
"esversion": 8//使用ES8版的规则进行检测
2、快捷键
来源：https://www.cnblogs.com/weihe-xunwu/p/6687000.html
（1）注释：
A、单行注释：[ctrl+k,ctrl+c] 或 ctrl+/
B、取消单行注释：[ctrl+k,ctrl+u] (按下ctrl不放，再按k + u)
C、多行注释：[alt+shift+A]
D、多行注释：ctrl+/ (双斜线)
（2）移动行：alt+up/down
（3）显示/隐藏左侧目录栏 ctrl + b
（4）复制当前行：shift + alt +up/down
（5）删除当前行：shift + ctrl + k
（6）控制台终端显示与隐藏：ctrl + ~
（7）查找文件/安装vs code 插件地址：ctrl + p
（8）代码格式化：shift + alt + f
（9）新建一个窗口: ctrl + shift + n
（10）行增加缩进: ctrl + [
（11）行减少缩进: ctrl + ]
（12）裁剪尾随空格(去掉一行的末尾那些没用的空格): ctrl + shift + x
（13）字体放大/缩小: ctrl + ( + 或 - )
（14）拆分编辑器: ctrl + 1/2/3
（15）切换窗口: ctrl + shift + left/right
（16）关闭编辑器窗口: ctrl + w
（17）关闭所有窗口: ctrl + k + w
（18）切换全屏: F11
（19）自动换行: alt + z
（20）显示git: ctrl + shift + g
（21）全局查找文件：ctrl + shift + f
（22）显示相关插件的命令(如：git log)：ctrl + shift + p
（23）选中文字：shift + left / right / up / down
（24）折叠代码： ctrl + k + 0-9 (0是完全折叠)
（25）展开代码： ctrl + k + j (完全展开代码)
（26）删除行： ctrl + shift + k
（27）快速切换主题：ctrl + k / ctrl + t
（28）快速回到顶部： ctrl + home
（29）快速回到底部: ctrl + end
（30）格式化选定代码：ctrl + k / ctrl +f
（31）选中代码： shift + 鼠标左键
（32）多行同时添加内容（光标）：ctrl + alt + up/down
（33）全局替换：ctrl + shift + h
（34）当前文件替换：ctrl + h
（35）打开最近打开的文件：ctrl + r
（36）打开新的命令窗：ctrl + shift + c
（37）函数代码块的注释生成方法：安装插件“Document This”；将光标放置于function上面，快捷键Ctrl+Alt+D；
（38）代码正则替换：在Ctrl+H后，会出现两行搜索框，上行搜索框的右侧有雪花号，点击雪花号，正则替换可以使用了
（39）代码正则替换示例-删除所有空行-步骤：
A、ctrl+h；
B、点击雪花号；
C、^\s*$，11111111111111111，替换；
D、上一行尾部+11111111111111111，空，替换
3、加代码块
打开vscode>文件>首选项>配置用户代码片段>
（1）html
{
"jq": {
"prefix": "jq",
"body": [
"<!DOCTYPE html>",
"<html lang='en'>",
"<head>",
" <meta charset='UTF-8'>",
" <title>jq</title>",
" <script src='https://cdn.bootcss.com/jquery/1.9.1/jquery.js'></script>",
"</head>",
"<body>",
" <div>",
" $1",
" </div>",
"</body>",
"</html>",
"<script type='text/javascript'>",
" ",
"</script>"
],
"description": "jq"
},
"echarts": {
"prefix": "echarts",
"body": [
"<!DOCTYPE html>",
"<html lang='en'>",
"<head>",
" <meta charset='UTF-8'>",
" <title></title>",
" <script src='https://cdn.bootcss.com/echarts/3.7.1/echarts.js'></script>",
"</head>",
"<body>",
" <div id='myEchartsId' style='height:300px;'></div>",
"</body>",
"</html>",
"<script type='text/javascript'>",
" var myEcharts = echarts.init(document.getElementById('myEchartsId'));",
" var myEchartsOption = { ",
" };",
" myEcharts.setOption(myEchartsOption);",
"</script>",
],
"description": "echarts"
},
"ng": {
"prefix": "ng",
"body": [
"<!DOCTYPE html>",
"<html lang='en' ng-app='myModel'>",
"<head>",
" <meta charset='UTF-8'>",
" <title>ng</title>",
" <script src='https://cdn.bootcss.com/angular.js/1.6.2/angular.js'></script>",
"</head>",
"<body>",
" <div ng-controller='firstCtrl'>",
" $1",
" </div>",
"</body>",
"</html>",
"<script type='text/javascript'>",
" var app = angular.module('myModel', []);",
" app.controller('firstCtrl', function ($scope){",
" ",
" });",
"</script>"
],
"description": "ng"
},
"bt": {
"prefix": "bt",
"body": [
"<!DOCTYPE html>",
"<html lang='en'>",
"<head>",
" <title>两列高度自适应</title>",
" <link rel='stylesheet' href='https: //cdn.staticfile.org/twitter-bootstrap/4.1.1/css/bootstrap.min.css'>",
" <style>",
" .row>div {",
" background: #cccccc;",
" }",
" </style>",
"</head>",
"<body>",
" <div class='container'>",
" <div class='row'>",
" <div class='col-xl-6'>col-xl-6;col-xl-6;col-xl-6;</div>",
" <div class='col-xl-5'>col-xl-6</div>",
" </div>",
" </div>",
"</body>",
"</html>",
],
"description": "bt"
},
}
（2）js
{
"ccc": {
"prefix": "ccc",
"body": ["console.log($0)"],
"description": "console.log($0)"
},
"c1": {
"prefix": "c1",
"body": ["console.log( $0 )"],
"description": "console.log($0)"
},
"c2": {
"prefix": "c2",
"body": ["console.log('$0')"],
"description": "console.log('$0')"
},
"fn": {
"prefix": "fn",
"body": ["function $0(){", " ", "}"],
"description": "function $0()"
},
"ng": {
"prefix": "ng",
"body": [
"(function () {",
" angular",
" .module('$0')",
" .controller('', function ($scope) {",
" ",
" })",
"})()"
],
"description": "ng"
},
"sss": {
"prefix": "sss",
"body": ["$$scope.$1"],
"description": "$scope.'$1'"
},
"ppp": {
"prefix": "ppp",
"body": [
"/*方法说明",
" *@method 方法名",
" *@param{参数类型}参数名 参数说明",
" *@return {返回值类型} 返回值说明",
"*/"
],
"description": "ng"
}
}
（3）jQuery
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>jq</title>
<script src='https://cdn.bootcss.com/jquery/1.9.1/jquery.js'></script>
</head>
<body>
<div>
</div>
</body>
</html>
<script type='text/javascript'>
</script>
（4）echarts
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title></title>
<script src='https://cdn.bootcss.com/echarts/3.7.1/echarts.js'></script>
</head>
<body>
<div id='myEchartsId' style='height:300px;'></div>
</body>
</html>
<script type='text/javascript'>
var myEcharts = echarts.init(document.getElementById('myEchartsId'));
var myEchartsOption = {
};
myEcharts.setOption(myEchartsOption);
</script>
（5）angular1
<!DOCTYPE html>
<html lang='en' ng-app='myModel'>
<head>
<meta charset='UTF-8'>
<title>ng</title>
<script src='https://cdn.bootcss.com/angular.js/1.6.2/angular.js'></script>
</head>
<body>
<div ng-controller='firstCtrl'>
</div>
</body>
</html>
<script type='text/javascript'>
var app = angular.module('myModel', []);
app.controller('firstCtrl', function ($scope){
});
</script>
（6）bootstrap
<!DOCTYPE html>
<html lang='en'>
<head>
<title>两列高度自适应</title>
<link rel='stylesheet' href='https: //cdn.staticfile.org/twitter-bootstrap/4.1.1/css/bootstrap.min.css'>
<style>
.row>div {
background: #cccccc;
}
</style>
</head>
<body>
<div class='container'>
<div class='row'>
<div class='col-xl-6'>col-xl-6;col-xl-6;col-xl-6;</div>
<div class='col-xl-5'>col-xl-6</div>
</div>
</div>
</body>
</html>
十六、jinja2语法
1、行内条件
<div>{{ '' if system_event.peak_date == None else system_event.peak_date }}</div>
2、set
{% set dev_info = data["info"]["dev_info"] %}
<div>{{ dev_info.dev_name }}</div>
3、跨行条件
（1）跨行条件1
{% if device.on_line %}
<div>预备测试</div>
{% endif %}
（2）跨行条件2
{% if device.on_line %}
<div>预备测试</div>
{% else %}
<div>正式设备</div>
{% endif %}
4、for
（1）for之1
{% for dep_num_dict in data.info.dep_num_dict.keys() %}
<div>
<div>{{dep_num_dict}}</div>
<div>{{data.info.dep_num_dict[dep_num_dict].on_line}}</div>
</div>
{% endfor %}
（2）for之2
<div class="mytable">
{% for log_list in data.info.black_event %}
<div class="table-row">
<div>{{loop.index}}</div>
<div>{{ log_list.threat_name }}</div>
<div style="text-align:left;width:900px">
{% for log_list_in in log_list.suggest.split('<br>') %}//把字符串切分成数组，然后遍历
{{ log_list_in }}<br/>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
