Ajax-XMLHttpRequest/JQuery/Axios/Fetch请求，以及JSONP/CORS跨域请求XMLHttpRequestGET12345678910111213141516171819202122232425262728btn.onclick = function(){ // 1. 创建对象 const xhr = new XMLHttpRequest(); // 2. 初始化 设置请求方法和url xhr.open('GET', 'http://127.0.0.1:8000/server') // 3. 发送 xhr.send(); // 4. 事件绑定 处理服务端返回的结果 xhr.onreadystatechange = function(){ // readyState 是 xhr 对象中的属性, 表示状态 0 1 2 3 4 //判断 (服务端返回了所有的结果) i ...

原文地址 www.jb51.net 图片懒加载，往往作为减少首页白屏时间的一个解决方案而出现。直观的来说，就是不要直接加载所有图片，而是满足一定条件后才加载，也就是” 惰性加载 “。实现图片懒加载的方式有很多，如果要简单点那就直接使用第三方插件：vue-lazyload，如果想探究一下别人的插件是怎么实现图片懒加载的，那么可以看看本文是如何实现的。 实现思路实现图片懒加载我们需要先明白具体的场景，一般来说，我们会在首屏先加载几张图片，其他的图片则先不加载，在页面滚动时，图片快出现在视窗中的时候才来加载图片。为什么要这么实现呢，因为对于图片很多的场景，如果一次性加载出所有的图片，可能会导致页面白屏时间比较长，特别是图片比较大的时候。 实现过程： 使用data-*自定义数据属性给img标签新增一个data-src属性 全局监听滚动事件，使用节流处理回调函数 在回调函数中，判断图片是否已经出现在可视区域，如果已经出现在可视区域，则加载该图片 页面初始化的时候执行一下回调函数，保证首屏有图片显示 在这个实现过程中，涉及一些知识点，我们来快速回顾一下： 准备知识data-*data-*是 ...

ES6-11特性ES6特性let 不能重复声明变量 块级作用域12345for (let i = 0; i<length; i++) { btns[i].onclick = function () { console.log("hello" + i); }} 不存在变量提升 不影响作用域链 const 常量需要赋初值 常量的值不能修改 块级作用域 数组、对象的值可以修改，因为引用地址不变 变量的解构赋值123let [a, b, c] = anotherArray;let {name, age, func} = anotherObj; 模板字符串1234567let str = `<ul> <li>hello</li> </ul>`let name = "kong";let name = `name: ${name}`; 对象的简化 ...

Webpack 自动化打包构建Webpack 是一个模块打包器，它可以将许多模块打包成一个或多个静态资源文件。它通常用于构建前端应用程序，但是也可以用于构建后端应用程序。使用 Webpack 进行自动化构建通常包括以下步骤： 安装 Webpack：使用 npm 命令 npm install webpack 安装 Webpack。 配置 Webpack：创建一个 webpack.config.js 文件，并在其中配置 Webpack。这包括设置入口文件、出口文件、加载器等。 运行 Webpack：使用命令 npx webpack 运行 Webpack。这将执行构建流程，并生成打包后的文件。 使用插件和工具：可以使用各种插件和工具来增强 Webpack 的功能，例如压缩文件、创建 source maps 等。 项目目录结构12345678910111213├── webpack-test (项目根目录) ├── config (Webpack配置文件目录) │ ├── webpack.dev.js(开发模式配置文件) │ └── webpack.prod. ...

Nodejs基础Buffer 缓冲区 Buffer 是专门存储二进数制数据，显示时以 16 进制的形式显示的据结构 每一个元素占用一个字节内存 Buffer 是对底层内存的直接操作，因此大小一旦确定就不能修改 常用方法1234let buf = Buffer.from("hello"); // buf.toString() 转换回来let buf1 = Buffer.alloc(10); // 创建10字节大小let buf2 = Buffer.allocUnsafe(10); // 10字节数据，并取出内存未清除敏感的数据 fs 文件系统模块 同步文件系统会阻塞程序的执行 异步文件系统不会阻塞程序的执行，通过回调函数返回结果 操作模式： 模式 说明 r 读取文件，文件不存在抛异常 r+ 读写文件，文件不存在抛异常 rs 同步模式下打开文件用于读取 rs+ 同步模式下打开文件用于读写 w 写文件，不存在则创建，存在则覆盖原有内容 wx 写文件，文件存在打开失败 w+ 读写文件，不存在创建，存在截断 wx+ 读写， ...

Express官网传送门(opens new window) 基于 Node.js 平台，快速、开放、极简的 Web 开发框架 Express 是用于快速创建服务器的第三方模块。 Express 初体验基本使用创建服务器，监听客户端请求，并返回内容： 12345678910111213141516171819202122232425262728const express = require('express')// 创建 web 服务器const app = express()// 监听客户端的 GET 和 POST 请求，并向客户端响应具体的内容app.get('/user', (req, res) => { res.send({ name: 'zs', age: 20, gender: '男' })})app.post('/user', (req, res) => { res.send('请求成功 ...

Docker Springboot项目部署① jar包同级目录创建Dockerfile文件 ② 编辑Dockerfile 123456789101112# 拉取基础镜像FROM java:8# 设置作者信息MAINTAINER 10wen# 把pet_rescue-0.0.1-SNAPSHOT.jar添加到容器里，并重命名为app.jar# 因为pet_rescue-0.0.1-SNAPSHOT.jar和Dockerfile在同一个目录下，所以只写文件名即可ADD pet_rescue-0.0.1-SNAPSHOT.jar app.jar# 设置端口号，此处只开放一个端口2000EXPOSE 2000# 执行命令，此处运行app.jarRUN bash -c 'touch /app.jar'ENTRYPOINT ["java","-jar","app.jar"] ③ 制作镜像：编辑好Dockerfile文件保存后，在当前文件夹输入命令 1docker build -f Dockerfile -t pet_ ...

Git&Github 工作流git clone git@… 克隆项目到本地 git checkout -b my-feature 新建本地分支my-feature git add .git commit -m’update’ 更新本地分支my-feature git push origin my-feature 远端新建分支my-feature 此时若远端有了新的 commit，本地 main/my-feature 并不是最新，而my-feature又有了更新 git checkout main 切换到本地主分支main git pull origin master 更新本地主分支main与远端master一致 git checkout my-feature 切换到本地工作分支my-feature git rebase main 在本地main最新的基础之上更新我的修改，有可能出现 rebase conflict，手动选择代码解决冲突 git pull -f origin my-feature 将本地my-feature强行推到远端 my-feat ...

JSON Web TokenJWT 由（.）分隔的三个部分组成 Header.Payload.Signature Header（头部）描述 JWT 的元数据,由Base64URL算法转成字符串 1234{"alg": "HS256", // 签名的算法（algorithm）"typ": "JWT" // 令牌（token）的类型} Payload（负载）用来存放实际需要传递的数据,由Base64URL算法转成字符串 iss (issuer)：签发人 exp (expiration time)：过期时间 sub (subject)：主题 aud (audience)：受众 nbf (Not Before)：生效时间 iat (Issued At)：签发时间 jti (JWT ID)：编号 Signature（签名）对前两部分的签名,防止数据篡改,使用 Header 里面指定的签名算法产生签名 12345HMACSHA256( base64UrlEncode(header) + &q ...

六种通信方式一、Props 父与子组件通信1234567891011121314<Child :name='name' :func='func' /> // 三种子组件接收形式props: ['name']props:{ name:String}props:{ name:{ type:String, required:true, default:'name' }} 路由Props12345678910111213141516{ name:'home', path:'/home', componenet: Home, // 三种形式 props:true, props:{key:'value'}, props:($route)= ...