一、浏览器工作流程|渲染进程|JS引擎线程|执行栈
来源，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、浏览器把请求回来的资源放在硬盘里，根据具体情况进行加载，这就是缓存机制
B、当应用运行到特定路由时，浏览器把硬盘里的组件代码加载到内存，这就是路由懒加载
（2）内存，“临时”存储（正在运行的）指令和数据
（3）CPU，中央处理器，从内存中读取指令和数据，并执行和运算
（4）显卡，将（计算机生成的）图像数据转换为（显示器可以显示的）信号；GPU（图形处理器）是显卡的核心组成部分
（5）主板，连接着硬盘--内存--CPU--显卡、各种输入输出接口-等硬件设备
（6）电源
（7）机箱
1、浏览器的工作流程，分布在4个进程中
附、DNS，域名系统，Domain Name System
（1）获取资源
A、浏览器通过DNS，解析url、找到服务器，发出HTTP请求
B、三次握手，建立TCP连接
C、服务器响应HTTP请求，传输数据，结束
D、四次挥手，断开TCP连接
（2）渲染页面
来源，https://blog.csdn.net/zm17671443092/article/details/107214240
来源，https://www.cnblogs.com/lovekiku123/p/12347776.html
来源，https://www.runoob.com/tags/tag-script.html
来源，https://www.runoob.com/tags/tag-link.html
附、加载--------------------------------------------------------------------------------------------------------
a、同步加载，该资源加载完成后，再继续执行后续的代码
b、异步加载，在浏览器后台进行，不会阻止浏览器前端网页的渲染，当资源加载完成后，浏览器会根据需要更新页面的显示
c、异步加载完成，异步操作时，所需的资源或任务已经成功加载或执行完毕
A、HTML文档解析
a、创建Document对象
b、document.readyState = ‘loading’
c、下面B、C、D、E、F填充Document对象
B、link同步加载外部css
a、创建线程加载
b、继续解析文档
C、link异步加载外部css、js，
a、rel，规定当前文档和被链接文档之间的关系
b、<link rel="preload" href="style.css" as="style">
c、<link rel="preload" href="js文件" as="script">
d、这是js异步加载的流行方式，defer和async为落后方式
D、script同步加载外部js，没有async、defer，
a、浏览器加载并阻塞
b、加载完成并执行该脚本
c、继续解析文档
E、script异步加载外部js，有async、defer
a、浏览器创建线程加载
b、继续解析文档
附、有async属性的js，加载完成后立即执行，因而无序
F、img等异步加载图片
a、正常解析dom结构
b、浏览器异步加载src
c、继续解析文档
G、文档解析完成-DOMContentLoaded，DOM 树构建完成，但外部资源（如图片、样式表、脚本等）可能还在加载中时，就会触发该事件
a、document.readyState = ‘interactive’//交互的
b、有defer属性的脚本，按照顺序执行
c、DOMContentLoaded事件执行（此前DOM和CSSOM都已经形成），从“同步脚本执行”到“事件驱动阶段”
d、形成渲染树、布局渲染树、绘制渲染树
e、开始首次绘制（同步解析结束，就开始首次绘制，对吗）
H、文档加载完成-load，当整个网页（包括 HTML、所有的外部资源如图片、样式表、脚本等）都加载完成后，才会触发该事件
a、有async属性的js，
b、img、css等加载完成后
c、document.readyState = ‘complete’
d、load事件执行
e、可能会再次绘制
附、怎样查看客户端首次渲染
A、浏览器输入http://localhost:8000
B、enter
C、打开控制台console
D、刷新浏览器
附、客户端渲染，CSR，Client-Side-Render，服务器收到请求后，发送数据给浏览器，浏览器用js把数据拼接到html里，然后渲染
A、优势
a、公共部分不重复加载
b、擅长网站交互
c、初始加载后，页面加载速度更快
B、劣势
a、初始加载需要更长的时间
b、不利于SEO
C、又叫单页面应用，SPA，Single-Page-Application
附、服务端渲染，SSR，Server-Side-Render，服务器收到请求后，把数据拼接到html里，发送给浏览器渲染
A、优势
a、初始页面加载速度快
b、利于SEO
B、劣势
a、公共部分重复加载
b、不擅长网站交互
2、浏览器的基本概念
（1）进程（Process）与线程（Thread）
A、进程是计算机程序中关于某数据集合上的一次运行活动，是系统进行资源分配和调度的基本单位，是操作系统结构的基础。浏览器的四个进程
a、浏览器进程(Browser Process)，负责协调和管理其他进程
b、插件进程(Plugin Process)，负责运行浏览器中的插件，如Adobe Flash，chrome://extensions/
c、GPU进程(GPU Process)，负责图像和视频
d、渲染进程(Renderer Process)，负责网页的呈现和交互
B、线程是操作系统能够进行运算调度的最小单位。它被包含在进程之中，是进程中的实际运作单位
a、单线程，进程只有一个线程
b、多线程，进程有多个线程
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）浏览器前端进程，主要负责与用户直接交互的部分，包括以下几个方面
A、用户界面呈现
a、页面渲染：将 HTML、CSS 和 JavaScript 等代码转换为用户可见的页面
b、交互元素响应：处理用户与页面上的交互元素（如按钮、链接、输入框等）的交互操作
B、性能优化
a、资源加载优化：负责管理网页资源的加载，如懒加载（延迟加载非关键资源）、预加载（提前加载可能会用到的资源）
b、动画和特效处理：实现页面上的动画和特效，如过渡效果、滚动动画等
C、安全和用户体验保障
a、安全防护：防止跨站脚本攻击（XSS）、跨站请求伪造（CSRF）等安全威胁
b、错误处理和反馈
附、涉及到的硬件和软件（浏览器前端在哪些硬件或软件里）
a、硬件，CPU、GPU、内存
b、软件，操作系统、浏览器软件本身、网页技术（HTML、CSS、JavaScript）
（4）浏览器后台进程，在浏览器运行时，在后台持续运行的一些程序或任务，包含异步加载
A、资源管理
a、缓存管理：浏览器后台进程负责管理缓存，将访问过的网页资源（如图片、脚本、样式表等）存储在本地，以便下次访问时可以更快地加载
b、内存管理：监控浏览器的内存使用情况，确保不会因为内存占用过高而影响系统性能
B、任务处理
a、异步任务执行：加载网页资源、执行定时任务等
b、插件和扩展管理：管理浏览器的插件和扩展，确保它们在后台稳定运行
C、安全和隐私保护
a、安全连接：确保与服务器的通信是安全的，通过使用 SSL/TLS 协议加密数据传输，防止数据被窃取或篡改
b、安全检查：持续进行安全检查，以保护用户的设备和数据安全。这包括检测恶意软件、钓鱼网站、不安全的脚本等
c、隐私保护：管理用户的隐私设置，如阻止第三方跟踪器、清除浏览历史和缓存等
D、与服务器的通信
a、与服务器交互：浏览器通过 HTTP 或 HTTPS 等协议与服务器进行通信，发送请求并接收响应
b、异步数据加载：使用 Ajax 等技术在后台异步地从服务器加载数据，而不刷新整个页面
c、接收通知：接收来自服务器的推送通知，并在适当的时候向用户显示通知
附、涉及到的硬件和软件（浏览器后台在哪些硬件或软件里）
a、硬件，CPU、内存、硬盘
b、软件，操作系统、浏览器软件本身、插件和扩展
（5）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等协议可以通过浏览器进行访问的资源
3、渲染进程的五个线程
（1）GUI渲染线程，负责解析、渲染html、css到浏览器界面
A、渲染结果等屏幕刷新时才会呈现出来
B、屏幕刷新频率一般60HZ，即16.6ms刷新一次屏幕
（2）定时器线程
A、由浏览器内核的timer模块来进行延时处理
B、当时间到达的时候，才会将回调函数添加到任务队列中
（3）事件触发线程
A、由浏览器内核的DOM Binding模块来处理
B、当点击等事件触发的时候，回调函数会立即添加到任务队列中
（4）ajax请求线程
A、由浏览器内核的 network 模块来处理
B、在网络请求完成返回之后，才将回调添加到任务队列中
（5）JS引擎线程，负责解析执行JS脚本程序
A、它是渲染进程的主线程
B、所有JS代码都运行在这个线程中
附、单线程，只有一个线程的进程，所走的程序路径按照连续顺序排下来，前面的必须处理好，后面的才会执行
附、单线程，它是多线程进程中的1个线程，JS代码的运行只占用了1个线程，没有占用多个线程
附、JS引擎
a、是负责在浏览器或Node.js等环境中解析和执行JS代码的软件组件
b、是JS运行时的核心，将JS代码转换为机器语言，使其能够在计算机上执行
c、不同的浏览器和运行环境使用不同的JS引擎
d、Google浏览器使用的JS引擎是V8引擎
（6）其它线程，
A、defer（推迟线程）
B、worker（子线程）
C、EventSource（服务器线程）
D、WebSocket（双工通信线程）
4、JS引擎线程的五个概念
（1）执行栈，主线程上执行任务的地方。别称有，调用栈、控制栈、运行时栈、机器栈
（2）同步任务，在执行栈排队、立即执行的任务
（3）异步任务，先在其它线程挂起、后适时推送到主线程上对应的任务队列里、等候执行
A、微任务，发起者为JS引擎，Promise.then()、async/await
B、宏任务，发起者为宿主（Node、浏览器），setTimeout()、setInterval()、requestAnimationFrame
附、其它线程，定时器线程、事件触发线程、ajax请求线程
附、挂起，暂停执行；Suspend，挂起；Suspense，担心
（4）任务队列，主线程上异步任务等候执行的地方
A、微任务队列，存放微任务的地方
B、宏任务队列，存放宏任务的地方
（5）事件循环
A、主线程把“所有的”同步任务推入执行栈执行，
B、主线程把微任务队列里“所有的”微任务回调推入执行栈执行
在执行的过程中，可能产生宏任务，比如在Promise.then()里执行setInterval
C、主线程把宏任务队列里“第1个”宏任务的回调推入执行栈执行
在执行的过程中，可能产生微任务，比如在setInterval里执行Promise.then()
D、如此轮询执行B、C，直到“宏/微任务队列”都为空，称为“事件循环”
个人理解，宏任务执行1个后，微任务执行1轮
E、同一个任务中，微任务优于宏任务执行；不同的任务中，宏任务优于微任务执行
附1、vue中的$nextTick方法利用了微任务队列
来源，百度“vue.$nextTick,微任务队列还是宏任务队列”
A、主线程执行nextTick，回调函数推入"微任务队列"
B、主线程任务执行完毕，DOM更新，执行"微任务队列"的回调函数
C、示例
getText () {
this.showText = true;
this.$nextTick(() => {//加上这层壳，下面内容在DOM更新后执行
var innerHTML = document.getElementById('divBox').innerHTML;
console.log(innerHTML);
})
}
附2、示例，宏任务和微任务的执行顺序
说明、第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');
二、前端性能检测与分析
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、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
2、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、再次交换数据需要建立新的连接
四、前端优化方案
附、方案概览，压缩静态资源、使用请求动画帧、减少请求、取消（阻止）请求、异步加载、懒加载、缓存，共7项
附、关于缓存
A、定义，把后台数据存到前端，再次使用时，不用再次请求
B、方案，cookie、session、sessionStorage、localStorage、WebSqlDatabase、indexedDB、vuex
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、使用请求动画帧，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 < 200) {
time++;
element.style.transform = 'translate(' + time * 3 + '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>
3、减少请求
附、HTTP教程，https://www.runoob.com/http/http-tutorial.html
（1）减少http同步请求（html页面，表单action），
（2）减少http异步请求（ajax请求，即XMLHttpRequest）
（3）减少图片请求，使用雪碧图(多张小图片合并成一张大图；sprite，精灵，雪碧)
附、骨架屏(初始化时，定义样式类如.header、.nav、.footer的背景色；在window.onload里，把背景色改为背景图片)
4、取消（阻止）请求，“终止请求”
（1）取消上次多请求-2种情形
A、tab切换，请求容器
a、把请求容器传给httpRequest
data:{
return {
nowTabName: '',
otherTabReq: {},
isLoading: false,
}
},
methods: {
onClickTab(tabName) {
if(this.nowTabName === tabName && this.isLoading) return;//连续点击本tab
if(Object.keys(this.otherTabReq).length){//点击其他tab的请求结果还没返回，就点击本tab
for(var attr in this.otherTabReq)this.otherTabReq[attr]()//相当于原生的xhr.abort()
}
this.nowTabName = tabName;
this.isLoading = true;
httpRequest({ otherTabReq: [this.otherTabReq,'firstReq']}).then(function(){
delete this.otherTabReq.firstReq;
if(!Object.keys(this.otherTabReq).length)this.isLoading = false;
}).catch(function(){
delete this.otherTabReq.firstReq;
if(!Object.keys(this.otherTabReq).length)this.isLoading = false;
})
},
},
b、在httpRequest里，用cancel填充请求容器，
c、在当前页面，遍历请求容器，执行cancel
B、页面跳转，vuex
a、在httpRequest里，把本页面的所有“请求取消”都存储到vuex里，
b、在router.beforeEach里，把vuex里的所有“请求取消”都执行，
c、示例
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;
},
);
（2）阻止本次单请求-2种情形，
A、判断条件
function onSubmit(){
if(this.selectedNum != this.num ){//不满足条件，不发出请求
var text = this.selectedNum>this.num?'多于':'少于';
Toast.success('勾选的人数'+text+'参会人数');//内置防抖
return
}
httpRequest(data).then(function（）{})
},
B、弹窗确认
function onSubmit(){//Vant
Dialog.confirm({
title: '标题',
message: '你真要删除吗？',
beforeClose: function(action, done) {
if (action === 'confirm') { //不点击确认按钮，不发出请求
httpRequest(data).then(function（）{
done();//弹窗消失
Toast.success('删除完成！');
})
} else {//点击取消按钮
done(false);//弹窗不消失
}
}
});
},
function handleClose(done){//elementUI
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => {});
},
（3）阻止下次单请求-4种情形，
A、根据是否正在转圈
data:{
return {
isLoading: false, //取消方法
}
}
methods:{
onSubmit() {
if(this.isLoading)return;//上次请求没结束，不发出下次请求
this.isLoading = true;
httpRequest(data).then(function（）{
this.isLoading = false;
})
}
}
B、滚轮加载，在“本次请求结束”或“间隔时间已够”时，才发出下次请求
C、去抖，重新计时，到时间间隔，才发出下次请求
D、节流，不重新计时，到时间间隔，就发出下次请求
5、异步加载
来源，https://www.runoob.com/tags/tag-script.html
来源，https://www.runoob.com/tags/tag-link.html
（1）script标签的异步加载属性，async和defer，
来源，https://blog.csdn.net/z9061/article/details/83011175
来源，https://blog.csdn.net/weixin_45792953/article/details/112168794
附、名词解释
a、script，标签同时拥有src和该属性时，该属性有作用；其它情况等同于内嵌脚本，脚本同步执行
b、defer，推迟，新线程“推迟”加载；DOM树构建完成时“执行”，多个defer顺序执行，接着DOMContentLoaded执行；
c、async，异步，新线程“异步”加载；下载完毕，立即“执行”，多个async无序执行，是“HTML5的新增属性”，优先级高；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>执行顺序</title>
</head>
<body>
<div>执行顺序</div>
</body>
</html>
<script>
document.onreadystatechange = function () {
console.log('document.readyState 的值为' + document.readyState);
}
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 //交互的；unload，卸载；load，加载
// DOMContentLoaded 已执行
// document.readyState 的值为complete
// onload 已执行
// onbeforeunload 已执行
// onunload 已执行
</script>
（2）link标签的预加载属性，preload、prefetch、preconnect、prerender，可预加载js、css文件
来源，https://cloud.tencent.com/developer/article/1880213
来源，https://www.wenjiangs.com/doc/vlf1m6xwg8mu
附、名词解释
a、preload，预加载，尽早加载，按需执行
b、prefetch，预提取，空闲加载，按需执行
c、dns-prefetch，dns预提取，跨域时使用，在请求资源之前解析域名
d、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>
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 Index = () => import('./Index.vue');
const routes = [
{
path: '/',
name: 'Index',
component: (): Index,
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种（cookie、session、sessionStorage、localStorage、WebSqlDatabase、indexedDB、vuex）
1、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'
2、session缓存，
（1）后端缓存，存储在后端
（2）客户端请求服务器，服务器可以把用户状态以session的方式记录在服务器上，
（3）当浏览器再请求该网站时，服务器根据cookie确定该用户的身份后，只需要从该session中查找该用户的状态就可以了
3、sessionStorage存储和localStorage存储相同点
（1）增
A、localStorage['name'] = 'Lucy';
B、localStorage.name = 'Lucy';
C、localStorage.setItem('name','Lucy');
（2）删
A、delete localStorage['name'];
B、delete localStorage.name;
C、localStorage.removeItem('name');
D、localStorage.clear(); //清除所有的值
（3）改
A、localStorage['name'] = 'Lucy';
B、localStorage.name = 'Lucy';
C、localStorage.setItem('name','Lucy');
（4）查
A、localStorage["name"];
B、localStorage.name;
C、localStorage.getItem('name');
D、localStorage.hasOwnProperty('name'); //true 或 false
E、localStorage.valueOf(); //取出所有值
（5）存储大小，都是5MB
（6）只能存储字符串类型，其它类型先用JSON.stringfy转成字符串存储，后用JSON.parse转成对象取用
（7）用法示例-真实项目：
A、localStorage.setItem(STORAGE_KEY,JSON.stringify(todos)) //var STORAGE_KEY = 'todos-vuejs'
B、JSON.parse(localStorage.getItem(STORAGE_KEY)||'[]')
4、localStorage和sessionStorage不同点，百度“LocalStorage和sessionStorage的区别”
（1）localStorage的数据是持久化的，可以在同源的不同页面之间共享
（2）sessionStorage的数据则是临时的，只能在“本浏览器本窗口（同一浏览器窗口内）”的“不同标签页之间”共享，关闭本窗口，则数据清除
（3）“本浏览器本窗口”，不包含“点击本浏览器图标，打开一个新窗口”
5、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));
}
});
});
6、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('没有更多数据了！');
}
};
}
7、vuex存储
六、长连接-3种
概要：HTTP协议是无状态协议的短连接，“短连接”解决方案是“长连接”
（1）web worker，主要用于前端内部-双向传输数据
（2）Web EventSource，主要用于后台向前端-单向传输数据，与http一样，用超文本传输协议
（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、客户端实现（1个方法、4个事件）
<!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);
}
ws.onerror = function(event) {
console.error('WebSocket 连接出现错误：', event);
};
ws.onclose = function() {
console.log('WebSocket 连接已经关闭。');
};
</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;
七、浏览器对象（window）
来源，https://www.w3cschool.cn/javascript/yji712hr.html
附、IE浏览器和标准浏览器的区别与相似（F、G）
A、事件对象：e=e||window.event
a、事件类型：e.type
b、事件源：e.target=e.target||e.srcElement;
c、阻止默认事件：e.preventDefault?e.preventDefault():e.returnValue=false;
d、阻止冒泡：e.stopPropagation?e.stopPropagation():e.cancelBubble=true;
B、DOM加载完成：
a、标准：DOMContentLoaded；
b、IE：document.onreadystatechange
C、事件监听：
a、标准：addEventlistener(“click”,function(){},false)；
b、IE：Attachment(“onclick”,function(){})
D、this：
a、标准：this为当前元素；
b、IE：this为window
E、方法绑定与执行：
a、标准：同一事件的相同方法不能重复绑定，按顺序执行；
b、IE：同一事件的相同方法能重复绑定，随机执行；
F、DOM二级事件绑定原理，标准与IE都会给元素
a、开辟一个事件池，把所有方法都依次存到事件池中；
b、绑定多个方法
G、事件流：
a、捕获：从外向内；
b、事件源：发生事件的元素；
c、冒泡：从里向外
附、浏览器（BOM，浏览器对象模型，window）的属性、方法、事件、五大对象，方法与事件的区别（触发和执行内容）
（1）属性
（2）方法，触发在我，执行内容在它
（3）事件，触发在它，执行内容在我
（4）五大对象
A、navigator导航器对象
B、screen显示器对象
C、history历史对象
D、location位置对象
E、document文档对象，DOM（window.document，文档对象模型）
1、浏览器的属性
来源，https://www.runoob.com/jsref/obj-window.html
（1）窗口属性
A、innerHeight，返同窗口的文档显示区的高度
B、innerwidth，返回窗口的文档显示区的究度FF
C、outerHeight，返回窗口的外部高度
D、outerwidth，返回窗口的外部宽度
E、pageXOffset，声明当前文档向右滚动过的像素数
F、pageYoffset，声明当前文档向下滚动过的像素数
G、screenX，声明窗口的左上角的X坐标
H、screenY，声明窗口的左上角的Y坐标
I、screenLeft，返回相对于屏幕窗口的x坐标
J、screenTop，返回相对于屏幕窗口的y坐标
K、document.body.scrollLeft/document.documentElement.scrollLeft，声明当前文档向右滚动过的像素数
L、document.body.scrollTop/document.documentElement.scrollTop，声明当前文档向下滚动过的像素数
M、parent，返回父窗口
N、top，返回最顶层的父窗口
（3）console对象
来源，https://www.runoob.com/w3cnote/javascript-console-object.html
A、console.assert()，如果断言为 false，则在信息到控制台输出错误信息
B、console.clear()，清除控制台上的信息
C、console.count()，记录 count() 调用次数，一般用于计数
D、console.error()，输出错误信息到控制台
E、console.group()，在控制台创建一个信息分组 一个完整的信息分组以 console.group() 开始，console.groupEnd() 结束
F、console.groupCollapsed()，在控制台创建一个信息分组。 类似 console.group() ，但它默认是折叠的
G、console.groupEnd()，设置当前信息分组结束
H、console.info()，控制台输出一条信息
I、console.log()，控制台输出一条信息
J、console.memory，网页所占用内存的相关信息
K、console.table()，以表格形式显示数据
L、console.time()，计时器，开始计时间，与 timeEnd() 联合使用，用于算出一个操作所花费的准确时间
M、console.timeEnd()，计时结束
N、console.trace()，显示当前执行的代码在堆栈中的调用路径
O、console.warn()，输出警告信息，信息最前面加一个黄色三角，表示警告
（4）存储属性
A、sessionStorage，在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。
B、localStorage，在浏览器中存储 key/value 对。没有过期时间。
（5）其他属性
A、opener，可以实现同域名下跨窗体之间的通讯，一个窗体要包含另一个窗体的opener
B、closed，当前窗口关闭时返回true
C、name，设置或返回窗口的名称
D、self，返回对当前窗口的引用
E、indexedDB，在浏览器内持久化存储数据的方法
2、浏览器的方法
附、0级事件是以属性的形式存在的，2级事件则是以事件监听的形式存在的
（1）窗口方法
A、open(“URL”,“窗口名称”,“窗口风格“)，打开一个新的窗口，并在窗口中装载指定URL地址的网页，窗口风格如下
a、height，数值窗口高度不能小于100
b、width，数值窗口宽度不能小于100
c、left，数值窗口左坐标不能为负值
d、top，数值窗口上坐标不能为负值
e、locationL，yes/no，是否显示地址栏
f、menubar，yes/no，是否显示菜单栏
g、resizable，yes/no，是否可以改变窗口大小
h、scrollbars，yes/no，否允许出现滚动条
i、statusr，yes/no，是否显示状态栏
j、toolbar，yes/no，是否显示工具栏
B、close()自动关闭浏览器窗口
C、moveBy(水平位移量,垂直位移量)，按照给定像素参数移动指定窗口
D、moveTo(x,y)，功能将窗口移动到指定的指定坐标(x,y)处语法
E、resizeBy(水平,垂直)，将当前窗口改变指定的大小(x,y)当x、y的值大于0时为扩大当x、y的值小于0时为缩小
F、resizeTo(水平宽度,垂直宽度)，功能将当前窗口改变成(x,V)大小，x、y分别为宽度和高度
G、scroIBy(水平位移量，垂直位移量)，将窗口中的内容按给定的位移量滚动，参数为正数时，正向滚动，否则反向滚动
H、scrolTo(x,y)，将窗口中的内容滚动到指定位置
附、示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
var window_;
function openwindow(){
window_=window.open('','', 'width=100,height=100');
window_.focus();
}
function myFunction(){
window_.moveTo(500,500);
window_.focus();
}
</script>
</head>
<body>
<button onclick="openwindow()">创建窗口</button>
<button onclick="myFunction()">调整窗口</button>
</body>
</html>
（2）定时器方法
A、setTimeout(执行代码,亳秒数)，当到了指定的毫秒数后，自动执行功能代码语法
B、clearTimeout(定时器)，取消由setTimeout()设置的定时器语法
C、setInterval(重复执行的代码,亳秒数)，按指定周期重复执行功能代码语法
D、cearInterval(时间间隔器)，取消由setnterval()设置的时间间隔器
（3）对话框方法
A、alert(“提示字符串")，弹出一个警告框，在警告框内显示提示字符串文本
B、confirm("提示字符串”)，显示一个确认框，在确认框内显示提示字符中，当用户
a、单击"确定"按纽时该方法返回true
b、单击"取消”时返回false
C、prompt("提示字符串"，"缺省文本”)，显示一个输入框，在输入框上方显示提示字符申，在输入文本框内显示缺省文本，并等待用户输入
a、当用户单击“确定"按钮时，返回用户输入的字符串
b、当单击”取消"按钮时，返回nul值
（4）其它方法
A、atob()，解码一个 base-64 编码的字符串
B、btoa()，创建一个 base-64 编码的字符串
C、getComputedStyle()，获取指定元素的 CSS 样式
D、getSelection()，返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置
E、matchMedia()，该方法用来检查 media query 语句，它返回一个MediaQueryList对象
F、openDatabase()，创建一个数据库对象
G、print()，打印当前窗口的内容
H、postMessage()，安全地实现跨源通信
I、stop()，停止页面载入
3、浏览器的事件
（1）url改变
A、onhashchange(event)，url的hash改变时触发，onpopstate事件包含本事件
B、onpopstate(event)，浏览历史（history对象或hash）发生改变时触发
（2）页面展示改变
A、onpageshow(event)，用户访问页面时触发
B、onpagehide(event)，用户离开当前网页跳转到另外一个页面时触发
（3）页面外观改变
A、onresize(event)，页面重新调整大小
B、onscroll(event)，页面滚动时触发
（4）加载事件
A、onload，页面加载完毕，页面内包括图片的所有元素加载完毕后才能执行，后于DOMContentLoaded执行
B、onbeforeunload，页面卸载之前
C、onunload，页面卸载以后
4、浏览器的五大对象之navigator导航器对象
来源，https://www.runoob.com/jsref/obj-navigator.html
（1）appCodeName，返回浏览器的代码名
（2）appName，返回浏览器的名称
（3）appVersion，返回浏览器的平台和版本信息
（4）cookieEnabled，返回指明浏览器中是否启用cookie的布尔值
（5）platform，返回运行览器的操作系统平台
（6）userAgent，返回由客户机发送服务器的user-agent头部的值
（7）geolocation，返回浏览器的地理位置信息
（8）language，返回浏览器使用的语言
（9）onLine，返回浏览器是否在线，在线返回ture，否则返回false
（10）product，返回浏览器使用的引擎（产品）
（11）javaEnabled()，指定是否在浏览器中启用Java
（12）taintEnabled()，规定浏览器是否启用数据污点(data tainting)
（13）sendBeacon()，方法可用于通过HTTP将少量数据异步传输到Web服务器，navigator.sendBeacon(url, data)
5、浏览器的五大对象之screen显示器对象
来源，https://www.runoob.com/jsref/obj-screen.html
（1）availHeight，返回显示屏幕的可用高度
（2）availwidth，返回显示屏幕的可用宽度
（3）colorDepth，返回屏幕颜色的位数
（4）height，返回屏幕的像素高度
（5）pixelDepth，返回屏幕的颜色分辨率（每象素的位数）
（6）width，返回屏幕的像素宽度
6、浏览器的五大对象之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
注、length，返回历史列表中的网址数
（1）forward()，前进。加载history列表中的右一个URL，等同于history.go(1)
（2）back()，后退。加载history列表中的左一个URL，等同于history.go(-1)
（3）go()，跳转。加载history列表中的某个具体页面，history.go(0)，location.reload()，刷新当前
（4）pushState(state,title,url)，给“浏览器当前页签”添加状态
A、示例与参数
history.pushState({page: 1}, "title 1", "/page1");
state，对象，比如state={key:obj};在其它页面可以通过history.key来获取
title，字符串，浏览器用它显示页面标题
url，字符串，当前浏览器地址
B、特点，
a、改变浏览器的地址栏而不重新加载页面
b、向浏览器的会话历史栈增加一个新的状态
C、优势
a、实现无刷新前端路由
b、给浏览器当前页签增加状态
D、缺点，
a、不会触发页面加载事件及其他事件的处理函数
b、无法阻止用户使用“后退”按钮
c、可能导致404错误
问题描述，点击谷歌浏览器左上方的圆箭头刷新，会出错404（这点非常重要，是它不能大范围使用的原因！！！）
问题解决，在服务器端进行相应的nginx配置，这种情况让他返回index.html
E、补救，如果你想使用history.pushState来加载一个新页面的内容，
你可以创建一个函数，该函数
使用AJAX请求获取新页面的内容，
使用pushState更新浏览器的地址栏
（5）replaceState(state,title,url)，给“浏览器当前页签”修改状态
history.replaceState({page: 2}, "title 2", "/page2");
（6）两种操作的作用，给“浏览器当前页签”添加（或修改）状态，以下是两种操作，
附、它们是HTML5的一个API
A、pushState
B、replaceState
（7）五种操作的作用，给“浏览器当前页签”的“不同历史记录”激活，以下是五种操作
A、浏览器的后退（向左）
B、浏览器的前进（向右）
C、history.back（向左）
D、history.forward（向右）
E、history.go（负左，正右，0当前）
（8）window.onpopstate(event)事件，
a、浏览历史（history对象或hash）发生改变时触发
b、event.state，就是“当前页面”参数(state,title,url)中的state，
（9）两种操作、五种操作、onpopstate，三者之间的关系，说明
A、两种操作，只能改变当前页面状态，不会触发window.onpopstate(event)事件
B、五种操作，与两种操作相关与否，都会触发window.onpopstate(event)事件
C、五种操作，与两种操作无关时，还会触发http请求
（10）两种操作、五种操作、onpopstate，三者之间的关系，示例
window.onpopstate = function(event) { //这是异步函数
console.log( event.state, history.state, event.state == history.state, event, ); // true
};
setTimeout(function(){
history.pushState({state1: 1}, "状态 1", "/page1");
console.log( '状态1，不触发window.onpopstate' );
},1000)
setTimeout(function(){
history.back();
console.log( '状态1，触发window.onpopstate' );
},2000)
（11）window.onhashchange事件，
A、url的hash改变时触发
B、onpopstate事件包含本事件
（12）onpopstate事件包含onhashchange事件，示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="#/5F">《a href="#/5F"》点击我《/a》</a>，锚点会定位到<br/>
《a name="/5F"》name="/5F"《/a》
<br/><br/><br/><br/><br/><br/><br/>
<a name="/5F">name="/5F"</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
<script>
window.onpopstate = function(event) {
console.log( 'onpopstate', window.location.hash, window.location );
console.log( 'onpopstate', window.history.length, window.history );
};
window.onhashchange = function(event) {
console.log( 'onhashchange', window.location.hash, window.location );
console.log( 'onhashchange', window.history.length, window.history );
};
</script>
7、浏览器的五大对象之location位置对象
来源，https://www.runoob.com/jsref/obj-location.html
（1）属性
A、protocol，设置或返回当前URL的协议
B、hostname，设置或返回当前 URL 的主机名
C、port，设置或返回当前 URL 的端口号
D、origin，源
----以上是origin的构成----
E、host，设置或返回主机名和当前URL的端口号
F、pathname，设置或返回当前URL 的路径部分
G、search，设置或返回从问号(?)开始的 URL
H、hash，设置或返回从井号(#)开始的URL
----以上是href的构成----
I、href，设置或返回完整的 URL
（2）方法
A、assign(URL)，加载新的文档方法
B、reload()，重新加载当前页面
C、replace(newURL)，用新的文档普换当前文档
附、属性示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
table{
border-collapse: collapse;
}
table tr th,table tr td{
padding: 5px;
border: 1px solid grey;
}
</style>
</head>
<body>
<div id="div"></div>
<table>
<thead>
<tr>
<th>属性名</th>
<th>属性值</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
<script>
var url = document.createElement('a');
url.href = 'https://www.runoob.com:80/1234567?s=search#hash';
var obj = {
'url.protocol': url.protocol,
'url.hostname': url.hostname,
'url.port': url.port,
'url.origin': url.origin + '，以上是origin的构成',
'url.host': url.host,
'url.pathname': url.pathname,
'url.search': url.search,
'url.hash': url.hash,
'url': url + '，以上是url的构成',
'url.href': url.href + '，这是最初的href',
};
var allStr = '';
for(var attr in obj){
var str = '<tr>';
str += '<td>' + attr + '</td>';
str += '<td>' + obj[attr] + '</td>';
str += '</tr>';
allStr += str;
}
document.getElementsByTagName('tbody')[0].innerHTML = allStr;
</script>
8、浏览器的五大对象之document文档对象
来源，https://www.runoob.com/jsref/dom-obj-document.html
（1）文档属性，如document.activeElement
A、document.activeElement，返回当前获取焦点元素
B、document.anchors，返回对文档中所有Anchor对象的引用
C、document.applets，返回对文档中所有Applet对象的引用。注意: HTML5已不支持<applet>元素
D、document.baseURI，返回文档的绝对基础URI
E、document.body，返回文档的body元素
F、document.cookie，设置或返回与当前文档有关的所有 cookie
G、document.doctype，返回与文档相关的文档类型声明(DTD)
H、document.documentElement，返回文档的根节点
I、document.documentMode，返回用于通过浏览器渲染文档的模式，仅 IE 浏览器支持
5，页面在 IE5 模式下展示
7，页面在 IE7 模式下展示
8，页面在 IE8 模式下展示
9，页面在 IE9 模式下展示
J、document.documentURI，设置或返回文档的位置
K、document.domain，返回当前文档的域名
L、document.domConfig，已废弃。返回normalizeDocument()被调用时所使用的配置
M、document.embeds，返回文档中所有嵌入的内容（embed）集合
N、document.forms，返回对文档中所有Form对象引用
O、document.images，返回对文档中所有Image对象引用
P、document.implementation，返回处理该文档的DOMImplementation对象
Q、document.inputEncoding，返回用于文档的编码方式（在解析时）
R、document.lastModified，返回文档被最后修改的日期和时间
S、document.links，返回对文档中所有Area和Link对象引用
T、document.readyState，返回文档状态 (载入中……)
U、document.referrer，返回当前页面的来源页面的URL；referrer，访问来源，引用地址
V、document.scripts，返回页面中所有脚本的集合
W、document.strictErrorChecking，设置或返回是否强制进行错误检查
X、document.title，返回当前文档的标题
Y、document.URL，返回文档完整的URL
Z、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前面有空格 */
"}"
)
}
}
});
（2）文档方法，如document.addEventListener()，
A、document.addEventListener()，向文档添加句柄
B、document.adoptNode(node)，从另外一个文档返回adapded节点到当前文档
C、document.close()，关闭用document.open()方法打开的输出流，并显示选定的数据
D、document.createAttribute()，创建一个属性节点
E、document.createComment()，createComment()方法可创建注释节点
F、document.createDocumentFragment()，创建空的DocumentFragment对象，并返回此对象
G、document.createElement()，创建元素节点
H、document.createTextNode()，创建文本节点
I、document.execCommand，操作可编辑内容区域的元素
a、示例一，复制textarea的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Copy to Clipboard Example</title>
</head>
<body>
<p>将以下文本复制到剪贴板：</p>
<textarea id="copyText" rows="5" cols="50">这是一些可以复制的文本：</textarea>
<button onclick="copyToClipboard()">复制到剪贴板</button>
</body>
</html>
<script>
function copyToClipboard() {
var copyText = document.getElementById("copyText");//获取textarea的元素
copyText.select();//选中文本
copyText.setSelectionRange(0, 99999); //对于移动设备
document.execCommand("copy");//执行复制命令
alert("已复制文本到剪贴板：" + copyText.value);//提示用户复制成功
}
</script>
b、示例二，复制p的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Copy to Clipboard Example</title>
</head>
<body>
<p id="paragraph">这是需要复制的段落文本。</p>
<button id="copyButton">复制到剪贴板</button>
</body>
</html>
<script>
document.getElementById('copyButton').addEventListener('click', function() {
var text = document.getElementById('paragraph').textContent;
var textArea = document.createElement('textarea');
//设置文本区域不可见
textArea.style.position = 'fixed';
textArea.style.opacity = '0';
textArea.value = text;
document.body.appendChild(textArea);
//选中文本区域内的文本
textArea.select();
//执行复制命令
try {
var successful = document.execCommand('copy');
console.log(successful ? '复制成功' : '复制失败');
} catch (err) {
console.error('复制失败', err);
}
//移除文本区域元素
document.body.removeChild(textArea);
});
</script>
J、document.getElementsByClassName()，返回文档中所有指定类名的元素集合，作为NodeList对象
K、document.getElementById()，返回对拥有指定id的第一个对象的引用
L、document.getElementsByName()，返回带有指定名称的对象集合
M、document.getElementsByTagName()，返回带有指定标签名的对象集合
N、document.importNode()，把一个节点从另一个文档复制到该文档以便应用
O、document.normalize()，删除空文本节点，并连接相邻节点
P、document.normalizeDocument()，删除空文本节点，并连接相邻节点的
Q、document.open()，打开一个流，以收集来自任何document.write()或document.writeln()方法的输出
R、document.querySelector()，返回文档中匹配指定的CSS选择器的第一元素
S、document.querySelectorAll()，HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表=
T、document.removeEventListener()，移除文档中的事件句柄(由addEventListener()方法添加)
U、document.renameNode()，重命名元素或者属性节点
V、document.write()，向文档写HTML表达式或JavaScript代码
W、document.writeln()，等同于write()方法，不同的是在每个表达式之后写一个换行符
（3）文档事件，如document.onreadystatechange
A、document.onreadystatechange，用于非标准浏览器的状态监听，标准浏览器监听用DOMContentLoaded。先于onload
（4）文档下元素属性，如element.accessKey
来源，https://www.runoob.com/jsref/dom-obj-all.html
A、element.accessKey，设置或返回accesskey一个元素
B、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()，设置指定属性节点(通过名称)
C、element.childNodes，返回元素的一个子节点的数组
D、element.children，返回元素的子元素的集合
E、element.classList，返回元素的类名，作为 DOMTokenList 对象
F、element.className，设置或返回元素的class属性
G、element.clientTop，表示一个元素的顶部边框的宽度，以像素表示
H、element.clientLeft，表示一个元素的左边框的宽度，以像素表示
I、element.clientHeight，在页面上返回内容的可视高度（高度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条）
J、element.clientWidth，在页面上返回内容的可视宽度（宽度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条）
K、element.contentEditable，设置或返回元素的内容是否可编辑
L、element.dir，设置或返回一个元素中的文本方向
M、element.firstElementChild，返回元素的第一个子元素
N、element.firstChild，返回元素的第一个子节点
O、element.id，设置或者返回元素的 id
P、element.innerHTML，设置或者返回元素的内容
Q、element.isContentEditable，如果元素内容可编辑返回 true，否则返回false
R、element.lang，设置或者返回一个元素的语言
S、element.lastChild，返回最后一个子节点
T、element.lastElementChild，返回指定元素的最后一个子元素
U、element.namespaceURI，返回命名空间的 URI
V、element.nextSibling，返回该元素紧跟的一个节点
W、element.nextElementSibling，返回指定元素之后的下一个兄弟元素（相同节点树层中的下一个元素节点）
X、element.nodeName，返回元素的标记名（大写）
Y、element.nodeType，返回元素的节点类型
Z、element.nodeValue，返回元素的节点值
A_、element.offsetHeight，返回任何一个元素的高度包括边框（border）和内边距（padding），但不包含外边距（margin）
B_、element.offsetWidth，返回元素的宽度，包括边框（border）和内边距（padding），但不包含外边距（margin）
C_、element.offsetLeft，返回当前元素的相对水平偏移位置的偏移容器
D_、element.offsetParent，返回元素的偏移容器
E_、element.offsetTop，返回当前元素的相对垂直偏移位置的偏移容器
F_、element.ownerDocument，返回元素的根元素（文档对象）
G_、element.parentNode，返回元素的父节点
H_、element.previousSibling，返回某个元素紧接之前元素
I_、element.previousElementSibling，返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）
J_、element.scrollHeight，返回整个元素的高度（包括带滚动条的隐蔽的地方）
K_、element.scrollLeft，返回当前视图中的实际元素的左边缘和左边缘之间的距离
L_、element.scrollTop，返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离
M_、element.scrollWidth，返回元素的整个宽度（包括带滚动条的隐蔽的地方）
N_、element.style，设置或返回元素的样式属性
O_、element.tabIndex，设置或返回元素的标签顺序
P_、element.tagName，作为一个字符串返回某个元素的标记名（大写）
Q_、element.textContent，设置或返回一个节点和它的文本内容
R_、element.title，设置或返回元素的title属性
S_、nodelist.length，返回节点列表的节点数目
（5）文档下元素方法，如element.addEventListener()，
A、element.addEventListener()，向指定元素添加事件句柄
B、element.appendChild()，为元素添加一个新的子元素
C、element.cloneNode()，克隆某个元素
D、element.compareDocumentPosition()，比较两个元素的文档位置
E、element.focus()，设置文档或元素获取焦点
F、element.getAttribute()，返回指定元素的属性值
G、element.getAttributeNode()，返回指定属性节点
H、element.getElementsByTagName()，返回指定标签名的所有子元素集合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
<p id="demo">单击“按钮”更改列表项的文本。</p>
<button onclick="myFunction()">点我</button>
</body>
</html>
<script>
function myFunction(){
document.getElementsByTagName("UL")[0].getElementsByTagName("LI")[0].innerHTML="Milk";
};
</script>
I、element.getElementsByClassName()，返回文档中所有指定类名的元素集合，作为 NodeList 对象
J、element.getFeature()，返回指定特征的执行APIs对象
K、element.getUserData()，返回一个元素中关联键值的对象
L、element.hasAttribute()，如果元素中存在指定的属性返回 true，否则返回false
M、element.hasAttributes()，如果元素有任何属性返回true，否则返回false
N、element.hasChildNodes()，返回一个元素是否具有任何子元素
O、element.hasFocus()，返回布尔值，检测文档或元素是否获取焦点
P、element.insertBefore()，现有的子元素之前插入一个新的子元素
Q、element.isDefaultNamespace()，如果指定了namespaceURI 返回 true，否则返回 false
R、element.isEqualNode()，检查两个元素是否相等
S、element.isSameNode()，检查两个元素所有有相同节点
T、element.isSupported()，如果在元素中支持指定特征返回 true
U、element.matches()，如果元素匹配指定的 CSS 选择器，matches() 方法就返回 true，否则返回 false
V、element.normalize()，使得此成为一个"normal"的形式，其中只有结构（如元素，注释，处理指令，CDATA节和实体引用）隔开Text节点，
即元素（包括属性）下面的所有文本节点，既没有相邻的文本节点也没有空的文本节点
W、element.querySelector()，返回匹配指定 CSS 选择器元素的第一个子元素
X、document.querySelectorAll()，返回匹配指定 CSS 选择器元素的所有子元素节点列表
Y、element.removeAttribute()，从元素中删除指定的属性
Z、element.removeAttributeNode()，删除指定属性节点并返回移除后的节点
A_、element.removeChild()，删除一个子元素
B_、element.removeEventListener()，移除由 addEventListener() 方法添加的事件句柄
C_、element.replaceChild()，替换一个子元素
D_、element.setAttribute()，设置或者改变指定属性并指定值
E_、element.setAttributeNode()，设置或者改变指定属性节点
F_、element.setUserData()，在元素中为指定键值关联对象
G_、element.toString()，一个元素转换成字符串
H_、nodelist.item()，返回某个元素基于文档树的索引
（6）文档下元素事件
附、示例
<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，在用户点击鼠标右键打开上下文菜单时触发
document.oncontextmenu = function(){
return false;//取消鼠标右键
}
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的hash改变时触发，onpopstate事件包含该事件
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对象或hash）发生改变时触发，该事件包含onhashchange事件
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()，初始化键盘事件对象的值
（6）文档下元素获取
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]
（7）文档下元素增删改查
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为深克隆
八、九宫格之位置交换与塌陷递补（发布/订阅模式，观察者模式）
注意：发布/订阅模式中，发布者只要做好消息的发布，而不关心消息有没有订阅者订阅。而观察者模式则要求两端同时存在
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
3、查看提交
（1）查看某文件-每次提交的-所有改变，git log -p src\views\content\content-item.vue；复制相对路径
（2）查看某提交-改变文件的-所有改变，git show hash_id；用git log，获取hash_id，截取前面一小段即可
4、查看有变化的文件
（1）git status，查看当前工作目录的状态（哪些文件发生了变化）:
（2）git diff，查看尚未暂存的变更（即修改过但还没用git add添加的变更）:
（3）git diff --cached，查看已暂存的变更（即用git add添加过的变更，但还没有提交的变更）:
（4）git diff HEAD，查看所有变更（包括暂存区和工作目录中的）:
（5）git diff <file-path>，查看指定文件的变更：
（6）git diff --cached <file-path>，查看暂存区和最后一次提交的变更（对于指定文件）:
（7）git diff HEAD <file-path>，查看工作目录与最后一次提交的变更（对于指定文件）:
5、回退
（1）git reset --hard HEAD^ 回退到上个版本
（2）git reset --hard HEAD~3 回退到前3次提交之前
（3）git reset --hard commit_id 退到指定的commit_id //git log，获取commit_id
6、强推
（1）git push --force origin <branch-name>
（2）git push -f origin <branch-name>
7、冲突
（1）产生条件：多人在各自的分支上对同一内容做了不同的修改，后合并的人会报冲突
（2）产生现象
<<<<<<< HEAD
本地向服务器提交的内容（我写的）
=======
服务器下载到本地的内容（人家写的）
>>>>>>>b0ef58d69851fedad4169878a62033c0ce16246c
8、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）代码正则替换示例1-删除所有空行-步骤：
A、ctrl+h；
B、点击雪花号；
C、^\s*$，11111111111111111，替换；
D、上一行尾部+11111111111111111，空，替换
（40）代码正则替换示例2-给index=1;index=25;index=330;的数字后面加空格-步骤：
A、ctrl+h；
B、点击雪花号；
C、index=(\d+)；
D、index=$1 ；
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>
