- 博客(40)
- 收藏
- 关注
RSS订阅原创 谈谈你对WebSocket的理解
一、什么是WebSocket WebSocket是一种基于TCP的全双工通信协议，在应用层。 1.为什么需要WebSocket 1、传统上的HTTP协议它是无状态的，服务器不能够识别是哪个客户端发送的请求，不能够保存状态。 2、WebSocket弥补了这一问题，在客户端向服务端发送请求之后，服务器处理请求并返回到客户端，使用WebSocket可以使得服务器主动向浏览器推送消息 2.WebSocket与HTTP的区别 1、HTTP是客户端直接向服务端发送请求，WebSocket是在完成一次握手之
2022-04-04 09:55:01
2749
原创 浏览器的回流和重绘（Reflow&&Repaint）
回流一定会引起重绘，重绘不一定引起回流 回流：页面的部分内容或者全部内容重新渲染 重绘：对元素的样式进行改变 会导致回流的操作 页面首次渲染 元素内容改变 字体大小改变 激活CSS伪类 添加删除DOM元素 如何避免回流 CSS 尽量不使用table布局 避免使用CSS表达式 JavaScript 避免频繁操作样式 避免频繁操作DOM 给元素设置display 避免频繁读取 总结 一切引起元素位置改变的行为都会引起回流 不会引起元素位置发生改变的行为称为重绘 ...
2022-03-27 13:26:27
1144
原创 从零开始学JavaScript-----事件循环
1、什么是事件循环 它是在同步异步的基础上加入宏任务、微任务，异步任务分为宏任务和微任务。 2、宏任务 setInterval、setTimeout 3、微任务 es6的nextTick、promise.then链式 4、宏任务和微任务执行顺序的问题 由于js是单线程的，在执行事件的时候需要排队，这时候需要异步任务。 宏任务在前、微任务在后（宏任务一定是在微任务全清的情况下执行） ...
2022-03-27 13:16:27
303
原创 异步与同步
promise与异步 Promise是异步编程的一种解决方案 回调可以称异步。 注意：Array上的那些函数，虽然需要回调函数，但它不是异步。所以这些不用Promise处理。 1、同步 (1)使用alert介绍同步阻塞(2)使用函数计算两个数的和调用后用变量接收 2、异步 常见的应用场景：(1)网络请求(2)读取文件(3)js中的事件函数就是非常典型的异步表现形式。 异步的特点：①都有一个延迟时间 ②不影响其他代码运行 同步和异步的区别： 同步：没有回调，函数调用直接用等号赋值，如果程
2022-01-05 21:36:28
482
原创 1本地存储-----Cookie、LocalStorage
本地存储 本地存储分为Cookie、 LocalStorage 与 SessionStorage localStorage 设置：localStorage.setItem(key, value) 读取：localStorage.getItem(key) 删除：localStorage.removeItem(key) cookie 存储数据的一种方式（或者方案），达到保存状态。很大的概率是应用在登录成功以后（保存登录状态） 保存状态的鼻祖就是cookie。localSto
2022-01-04 22:39:20
260
原创 JavaScript----继承
继承 1、原型链继承 原型链继承：原型链继承就是将父类的实例对象赋值给子类的原型对象。 面试题：如何用一句话实现继承：将父的实例赋给子类的原型（一定要说，有不足）。 不足： 1、如果父类有引用类型，子类一改，会导致后续的都改了 2、子的constructor指向父类，这是不对的，应该指向自己的构造函数 2、对象冒充继承 对象冒充继承：在子类的构造函数中，调用父类的构造函数，并用call改this指向为子的实例 好处：解决了父类引用类型子类一改全改的问题
2022-01-03 11:12:42
391
原创 判断数据类型的方法
判断数据类型的方法 数据类型分为两类：基本数据类型和引用数据类型 ①typeof只能判断出来基本数据类型，引用数据类型都返回object ②instanceof可以判断出来引用数据类型，但是null是个特例 null instanceof Object ----false ③这个方法可以判断出所有数据类型 Object prototype toString call（参数）.slice(8,-1) ...
2022-01-03 11:10:10
292
原创 深拷贝与浅拷贝
目录 如何实现深拷贝 JSON.parse(JSON.stringify(xxx))（不能拷贝对象中的方法） 递归的方法实现深浅拷贝 ES6 新增 ... 展开方式实现深拷贝 使用lodash工具库实现深拷贝 深拷贝：将内存地址中存放的数据完整的克隆下来， 放入到新开辟的内存空间中。 浅拷贝：①拷贝基本数据类型：直接拷贝实体数据 ②拷贝复杂数据类型：只能拷贝引用地址，拷贝不到实体数据 如何实现深拷贝 JSON.parse(JSON.stringify(xxx))（不能拷贝对象中的方法）
2022-01-02 12:12:41
433
原创 express框架
目录 简介 安装及基本使用 工具的使用 nodemon Rest Client 路由 中间件 简介 中间件的好处 总结特点 使用中间件 简介 Express是基于基于 Nodejs平台，快速、开放、极简的 Web 开发框架 官网地址：Express - 基于 Node.js 平台的 web 应用开发框架 - Express 中文文档 | Express 中文网 作用：使用 Express，我们可以方便、快速的创建 Web 网站的服务器或 API 接口(纯json数据)的服务
2022-01-01 10:29:15
301
原创 nodejs创建服务器步骤
1、引入http模块。这个模块是内置模块 const http = require('http') 2、http身上有个createServer() 函数 创建服务器的。 const server = http.createServer() //得到 个服务器对象 3、 兼听事件: 兼听用户发的请求事件 server.on( 'request',function(req,res){ /* req:request简写。语法上只是一个形参而已，请求消息
2022-01-01 10:13:56
787
原创 HTTP基础总结
服务端和客户端 请求：用户主动发起诉求 处理：去找到相应的页面 响应：找到页面返回给用户 URL地址 简单来说就是网址。URL（全称是Uniform Resource Locator）中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。 通信协议 就是规定 。你如何发请求（如何把诉求告诉服务器），以及如何响应（如何把结果返回给客户端） 服务器名称 网址（域名），在全世界没有重复的域名 。 刚才我们说
2022-01-01 10:06:09
1220
原创 nodejs基础总结
目录 Node简介 Node.js的特点 Node与JavaScript之间的区别 文件操作 文件夹操作 其他 关于node中出现的一些错误 模块系统 npm与包 包管理工具npm package.json .gitignore的深刻含义 包的分类 Node简介 Node.js是一个能够在服务器端运行JavaScript的开放源代码、跨平台JavaScript运行环境。 Node.js主要用于编写像Web服务器一样的网络应用 官网地址：Node.js 中文官网：Nod
2022-01-01 10:01:49
289
原创 ES6基础知识总结
目录 let和const命令 字符串新增方法 Symbol 数据结构 数组解构 对象解构 运算符 箭头函数 继承 iterator迭代器 let和const命令 ES6新增的两个命令，用来声明变量 let命令 let命令的特点：①不存在变量提升和暂时性死区 ②不能重复声明 ③块级作用域 在ES5中var 存在变量提升，有全局作用域和局部作用域 const命令 const特点和建议 某些值，从始至终不会变，那么建议使用常量。 const 声明常量 。一旦声明常量必
2022-01-01 09:57:21
213
原创 git介绍
目录 git介绍 git的三个区域 git操作步骤 git分支 本地仓库文件上传到远程仓库 git介绍 git的三个区域 工作区、暂存区、仓库区 git操作步骤 ①使用git初始化项目 ②编写代码 ③把工作区添加到暂存区：git add . ④把暂存区添加到仓库区 git commit -m 提交说明 git分支 使用步骤 ①先初始化git init ②先在master上提交一次，主分支才会真正的存在 ③创建分支·：git branch 分支名 ④切换分支并且创建分
2022-01-01 09:55:01
236
原创 从零开始学JavaScript-----防抖和节流（debounce和throttle）
防抖：事件在函数执行过程中只执行了一次 防抖分为两种：立即执行和非立即执行 立即执行：事件一触发就执行一次，在函数执行的时间段，不在触发事件，如果触发，这个时间段无效 非立即执行：事件触发后，在函数最后的时间执行一次 防抖（使用了闭包和定时器） 防抖的缺点：事件在不断被触发的时间段里，函数不会执行 下面是一段防抖的代码 <h1>0</h1> <script> let h1 = document.querySelector('h1'
2021-12-26 21:19:25
471
原创 ES6--------为对象部署iterator接口
1、简介 迭代、循环、遍历、递归等可以称为循环。 Iterator是一种接口机制，为各种不同的数据结构提供统一的访问机制, 遍历器, 因为现在有Array / Object / Set / Map 4种结构, 所以ES6 加入了Iterator遍历器, 只要拥有这个Iterator遍历器, 就都可以使用for...of进行遍历 2、iterator的作用 为各种数据结构，提供一个统一的、简便的访问接口 使得数据结构的成员能够按某种次序排列 ES6创造了一种新的遍历命令for.
2021-12-24 20:09:07
1045
原创 nodejs------------------模块的种类
自定义模块：（开发者自己定义的模块，每一个js文件都可以称为一个模块）,开发者可以使用commonjs规范自己写的js文件，都称为自定义模块 内置模块：（由Node.js官方提供，如：fs、path、querystring等） 第三方模块：（由第三方开源出来的模块，使用前需要npm工具从npm社区下载） 1、自定义模块 (1)如何定义数据和功能函数（如何定义公共代码） (2)外部如何使用定义的数据和功能函数 1. 自定义模块 开发者自己写的模块，官方定义：每一个...
2021-12-24 16:18:52
636
原创 nodejs------------------文件夹操作
1、创建目录 语法： fs.mkdirSync( path[,options] ) 参数说明： path：必选参数，要创建的文件夹完整路径名称 options：可选参数，是否递归创建文件夹，{ recursive:true } true代表递归创建 2、删除目录 语法： fs.rmdirSync( path[,options] ) 3、读取目录 语法： fs.readdirSync(path) 参数说明： path：必选参数，要读取的文件夹的完整路径 如果读取成功返回一个数组。
2021-12-24 14:31:44
799
原创 nodejs------------------文件操作
1、写入文件 const fs = require('fs') fs.writeFileSync('demo/test1.txt','world\r\n',{ flag:'a' }) //第3个参数不写，默认为'w' 2、读取文件 // let result = fs.readFileSync('demo/test1.txt') // console.log( result.toString(),'读取的内容' ) //十六进制转换成字符串 //读取json文件 let result = fs
2021-12-24 10:30:56
152
原创 jQuery基础知识整理
1、class操作 jQuery元素.addClass('class名'); 添加 一次可以添加多个 jQuery元素.removeClass('class名'); 删除 一次可以删除多个 jQuery元素.toggleClass('class名'); 切换 如果有这个class，则删除，如果没有，则添加 jQuery元素.hasClass('class名'); 查找是否有，返回布尔值 2、css操作 jQuery元素.css('样式属性', '值'); /..
2021-12-13 17:36:35
624
原创 从零开始学JavaScript——JS增删改查（事件委托）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D.
2021-12-04 21:53:37
513
原创 从零开始学JavaScript——JS阻止默认事件的方法
阻止默认事件的两种方法 1、在发生函数最后加上return false 2、ev.preventDefault(); 阻止默认事件的兼容 //阻止默认事件的兼容 function preventDefault(ev){ if(ev.preventDefault){ //标准模式 ev.preventDefault(); }else{ //
2021-12-04 21:14:54
1436
原创 从零开始学JavaScript——JS阻止冒泡的兼容及二级菜单
<!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.0"> <title>D.
2021-12-04 20:40:51
155
原创 从零开始学JavaScript——JS处理事件绑定兼容
封装一个函数，实现事件绑定的兼容与解绑的兼容 <!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.0
2021-12-04 19:58:24
456
原创 （二）JS基础知识总结
目录 第一天 第二天 第三天 第四天 第五天 第六天 第七天 第八天 第一天 1、什么是JavaScript，有什么特点，作用是什么 JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。 特点：解释性、基于对象、事件驱动、安全性、跨平台 作用：验证发往服务器端的数据、增加 Web 互动、加强用户体验度 2、JavaScript数据类型有哪些？ 基本数据类型：Number String Boolean Null Undefined 引用数据类型 ：Obje
2021-12-04 16:17:49
279
原创 从零开始学JavaScript——js数组去重的三种方法
1.通过indexOf查找数组下标的方式去重，如果返回值等于负一，则证明新数组中没有这个数，添加进来。 var arr1 = [1, 2, 33, 2, 2, 1, 1, 4, 4]; var arr2 = ['a','b','b','c','c','s','s','d','f','d']; function array(arr) { var newArr = [];//存储去重后的新数组 for (var i = 0; i
2021-12-04 11:04:19
598
原创 从零开始学JavaScript——JS对象方法总结
目录 扩展原型上的方法 扩展数组的indexOf方法，兼容IE8及以下 1、字面量方法 2、实例创建 3、工厂模式创建对象 4、创建对象-构造函数 5、创建对象-原型方法 6、混合模式创建对象 7、创建对象-动态混合 扩展原型上的方法 扩展String.prototype.trim这个方法，让它兼容IE8及以下 if (!String.prototype.trim) { String.prototype.trim = function () {
2021-12-03 23:56:04
235
原创 排序算法（选择排序，冒泡排序，快速排序）
目录 1、选择排序 2、冒泡排序 3、快速排序 1、选择排序 从第一项起，每一项都和后面所有项依次比较，如果被比较项比当前项小，则两项交换位置。 每一轮，都找到一个最小的数，放到前面。 var arr = [5, 32, 2, 7, 45]; console.log(fn(arr)); function fn(arr) { for (var i = 0; i < arr.length - 1; i++) { for (var j = i + 1; j ...
2021-12-03 17:36:47
467
原创 （一）JS基础知识总结
目录 1、new 操作符具体干了什么呢? 2、JavaScript 对象的几种创建方式？ 3、JavaScript 原型，原型链？ 4、什么是回调函数，作用是什么？ 5、什么是闭包，闭包有什么作用，说说你对闭包的理解。 6、分别解释防抖节流。 7、call 和 apply 的作用和区别？ 1、new 操作符具体干了什么呢? (1) 创建一个新对象； (2) 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）； (3) 执行构造函数中的代码（为这个新对象添加属性）； (4
2021-12-03 17:14:51
227
原创 从零开始学JavaScript——JS拖拽三大事件
说到拖拽，我们要知道的三大事件 onmousedown（鼠标按下选择元素） onmousemove（按住鼠标移动元素） onmousedown(鼠标松开释放元素) 接下来我们来看一个小案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
2021-12-01 17:08:37
1811
原创 JS添加表格
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #form { width: 480px; margin: 30px auto; border: 1px solid #eee; .
2021-11-27 09:07:40
1319
原创 从零开始学JavaScript——数据渲染（用js在页面制作一个表格）
<!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.0"> <title>D.
2021-11-27 09:06:11
798
原创 js小案例总结
<!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.0"> <title>D.
2021-11-26 23:19:49
282
原创 从零开始学JavaScript——DOM与表单操作
目录 一、获取节点 1、子节点 2、节点基本属性 3、父节点 4、其他节点 二、操作节点 1、创建节点 2、追加节点 3、插入节点 4、删除节点 5、替换节点 6、克隆节点 三、表单操作 1、获取表单元素 2、表单事件 3、表单方法 4、得焦失焦 5、input事件 6、change事件 一、获取节点 1、子节点 父级.children：返回元素节点（在IE8及以下，会返回注释节点，在IE9及以下，正常返回） 父级.childNodes：在IE9
2021-11-26 20:09:20
354
原创 数组的迭代方法与正则
目录 一、数组的迭代方法 1、forEach 2、map 3、filter 4、every 5、some 6、find和findIndex 二、正则 1、写法 2、修饰符 3、正则的方法 test exec match split replace search 4、正则相关实例 一、数组的迭代方法 1、forEach // 数组.forEach(function (item, index, array) { }); // 接收一个函数做为参数，该函数有三个参数
2021-11-26 19:56:06
338
原创 定时器的总结
1.setTimeout 超时定时器，延迟执行，延迟某个特定的时间开始执行，只执行一次 作用：一般用于咨询弹框、网站广告弹窗等相关操作 设置定时器：var 定时器引用 = setTimeout(函数, 时间毫秒); 清除定时器：clearTimeout(定时器引用) 2、setInterval 间歇定时器，间歇执行，即隔某个时间就执行一次 作用：一般用于轮播图、倒计时、抽奖等相关操作 设置定时器：var 定时器引用 = setInterval(函数, 时间毫秒);
2021-11-26 19:44:33
413
原创 HTML，CSS书写规范
css书写规范 书写代码前 确认版心（页面有效区） 考虑样式表规划，提高样式重复使用率 提前沟通页面中模棱两可的需求和交互效果，方便后续合理布局
2021-11-11 16:23:02
397
原创 js倒计时
倒计时原理 1.未来时间 - 当前时间 = 毫秒数 2.将毫秒数转换成：xx天xx小时xx分钟xx秒 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d
2021-11-10 09:14:06
219
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人