- 博客(45)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 flex简单Demo
flexindex.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <link hre
2020-11-08 16:39:27
265
转载 高性能滚动scroll及页面渲染优化
本文主要想谈谈页面优化之滚动优化。主要内容包括了为何需要优化滚动事件，滚动与页面渲染的关系，节流与防抖，pointer-events:none 优化滚动。因为本文涉及了很多很多基础，可以对照上面的知识点，选择性跳到相应地方阅读
2020-10-02 15:26:56
517
原创 常见算法疑难----JS实现
常见算法快速排序重建二叉树两个栈实现一个队列跳台阶(记忆化递归)变态跳台阶反转链表二叉树的创建(层次遍历)二叉树的创建(先序遍历)二叉树的深度优先遍历二叉树的广度优先遍历字典树快速排序思路：先从数列中取出一个数作为基准数将比这个数小的放在它的左边，比它大的放在右边再对左右区间重复1，2步，直到区间中只有两个数合并有序区间(左+基准+右)，排序成功<script> let arr = [31,23,24,2,13,234] function quickSort
2020-09-07 20:42:48
93
原创 圣杯布局和双飞翼布局
布局圣杯布局双飞翼布局圣杯布局效果：两边定宽，中间自适应，且中间部分优先加载实现思路浮动成一行利用margin负值，padding将左右部分移动到中间部分的两边利用定位将左右部分移出去，不覆盖中间部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width
2020-09-05 17:34:52
166
1
转载 响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）px和视口媒体查询百分比自适应场景下的rem解决方案通过vw/vh来实现自适应px和视口在静态网页中，我们经常用像素（px）作为单位，来描述一个元素的宽高以及定位信息。在pc端，通常认为css中,1px所表示的真实长度是固定的。那么，px真的是一个设备无关，跟长度单位米和分米一样是固定大小的吗？答案是否定的，下面图1.1和图1.2分别表示pc端下和移动端下的显示结果，在网页中我们设置的font-size统一为16px。从上面两幅
2020-08-31 15:34:34
770
原创 TCP三次握手，扫描式解析
TCP最近在准备秋招，复习到TCP三次握手的时候，总感觉描述不够，于是查阅各方资料，整理得出了这篇笔记，下面我逐一叙述：TCP是什么？TCP(Transmission Control Protocol)，中文释义传输控制协议，是TCP/IP四层模型中位于传输层的网络协议，是一种面向连接的、可靠的、基于字节流的传输层通信协议，由IETF的RFC 793 定义，是为了在不可靠的互联网络上提供可靠的端到端字节流而专门设计的一个传输协议为什么要进行TCP的三次握手？TCP的三次握手旨在决定客户端和
2020-08-29 12:14:16
723
原创 自定义Promise
Promise这是我学习Promise的时候，教程最后的老师写出来的，我也只懂了半数，整个实现来看还是比较复杂的，很多设计都非常巧妙，设计Promise的大佬确实厉害，我放上来的是最终成型的版本，中间一步一步实现的过程版我放到github上了，感兴趣的可以自行下载，链接在最下方//自定义Promise函数模块：IIFE(function (window) { const PENDING = 'pending' const RESOLVED = 'resolved' cons
2020-08-25 22:18:11
123
原创 Promise入门简介及相关使用
Promise引入WhatWhyHow引入在真正开始了解Promise之前，我先提一下有关问题，为后续的讲解做好铺垫实例对象与函数对象函数对象：将函数作为对象使用时，简称为函数对象实例对象：new函数产生的对象，简称为对象<script> /* 函数对象：将函数作为对象使用时，简称为函数对象 实例对象：new函数产生的对象，简称为对象 */ function Fn(){ //Fn函数 } const fn = new Fn
2020-08-24 23:43:29
169
原创 axios拦截器执行顺序的源码解释
axios拦截器执行顺序的源码解释我们先来看一段代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head>
2020-08-20 17:59:20
2241
原创 实例演示axios拦截器和取消请求
axiosaxios拦截器axios取消发送请求基本流程实例演示axios拦截器拦截器是什么？以我的理解，拦截器就是一个回调函数，里面包含了一些逻辑处理的代码，它分为请求拦截器，其在请求发送之前执行，处理一些请求发送之前的逻辑，响应拦截器，其在响应拿到之后，回调函数执行之前执行，处理一些拿到响应数据的逻辑。为了方便演示，我使用koa写了一个简易的接口，用于处理请求返回数据const Koa = require('koa');const router = require('koa-router
2020-08-18 22:57:34
1617
原创 HTTP请求基础知识总结
HTTPHTTP请求交互的基本过程HTTP请求报文HTTP响应报文POST请求体参数格式常见的响应状态码不同类型的请求及其作用API的分类HTTP请求交互的基本过程前台应用从浏览器端向服务器发送 HTTP 请求(请求报文)后台服务器接收到请求后, 调度服务器应用处理请求, 向浏览器端返回 HTTP 响应(响应报文)浏览器端接收到响应, 解析显示响应体/调用监视回调HTTP请求报文请求行:methodurlGET /product_detail?id=2POST
2020-08-17 23:25:02
258
原创 自实现微微型axios
axios准备准备在实现前我们需要用json-server搭建一个REST接口，这是大神弄好的一个包，直接用就行了，30s足矣，用来方便测试，可以到npm上看使用:json-server搭建好之后，我们就可以用它提供的接口来测试我们自己封装的axios是否可行代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"
2020-08-17 23:02:23
89
原创 使用原生nodejs封装类似express路由
如果看不懂，可以移步我往期的博客地址express-router.js//引入相应模块const http = require('http')const ejs = require('ejs')var app = require('./module/router-ww')//创建web服务器//每次请求时触发调用app函数，先寻找静态目录，没有就触发调用相应的路由http.createServer(app).listen(3000)//修改静态Web目录app.staticPath(
2020-07-29 11:07:47
143
原创 使用原生nodejs搭建简单静态Web服务器
web.js//搭建一个简单的静态Web服务器const http = require('http')const url = require('url')const fs = require('fs')const path = require('path')var extname = require('./Module/tool')//基本思路//获取请求的地址//根据地址读取相应的文件内容http.createServer((req,res) => { //通过url
2020-07-29 10:51:52
608
原创 nodejs快速上手
Node.jsHTTP、URL模块COMMONjs和Nodejs模块，自定义模块包，npm，cnpm，第三方模块，package.jsonfs模块nodej是一个JavaScript运行环境(runtime)。它让JavaScript可以开发后端程序，它几乎能实现其它后端语言能实现的所有功能，nodejs最擅长处理高并发我没有对各个模块进行相应的描述，而是直接使用代码，让你快速上手HTTP、URL模块创建一个web服务器http模块//创建一个web服务器//引入模块var http
2020-07-29 10:27:30
238
原创 Node.js简单入门介绍
Node.js基础准备Node.jsnpmBuffer缓冲区fs文件系统基础准备命令行窗口的常用命令dir 列出当前目录下的所有文件cd 目录名 进入到指定的目录md 目录名 创建一个文件夹rd 目录名 删除一个文件夹. 表示当前目录… 表示上一级目录环境变量当我们在命令行窗口打开一个文件或调用一个程序时，系统会首先在当前目录下寻找文件程序，如果找到了则直接打开，如果没有找到则会依次到环境变量path路径中寻找，直到找到为止，没有则报错,所以我们可以将一些经常需要访问的程序和文
2020-07-24 11:14:24
154
原创 曾风靡一时的jQuery，你还不会吗？
jQuery初识jQueryjQuery的两把利器jQuery 选择器$工具的方法jQuery属性CSS模块jQuery对象的筛选jQuery文档处理事件效果多库共存onload和readyjQuery插件初识jQuery在开始jQuery之前，我们先来看一个例子:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <scrip
2020-06-14 12:34:09
192
原创 深入探讨JS高级4------线程机制与事件机制
线程机制与事件机制进程与线程浏览器内核定时器引发的思考JS是单线程的事件循环模型H5_Web_Workers多线程进程与线程进程：程序的一次执行, 它占有一片独有的内存空间线程： CPU的基本调度单位, 是程序执行的一个完整流程进程与线程一个进程中一般至少有一个运行的线程: 主线程一个进程中也可以同时运行多个线程, 我们会说程序是多线程运行的一个进程内的数据可以供其中的多个线程直接共享多个进程之间的数据是不能直接共享的浏览器运行是单进程还是多进程?有的是单进程firef
2020-06-09 10:55:27
197
1
原创 深入探讨JS高级3-----对象高级
对象高级对象创建模式继承模式对象创建模式Object构造函数模式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>01_Object构造函数模式</title></head><body><!--方式一: Object构造函数模式 * 套路: 先创建空Object对象, 再动态添加属性/方法
2020-06-09 10:05:59
90
原创 深入探讨JS高级2----函数高级
函数高级原型和原型链执行上下文与执行上下文栈作用域与作用域链闭包原型和原型链当我们在JS中使用构造函数new出一个实例对象时，这个对象上就会有一些方法，比如toString()等，你没有没想过这些方法是哪儿来的？原构造函数上面的？不是，其实它是来自构造函数的原型对象上的，下面我们来看看关于JS原型函数的prototype属性每个函数都存在一个prototype属性，它默认指向一个空的Object实例对象(即称为原型对象)原型对象中有一个属性constructor，它执行函数对象给原型对象添加
2020-05-31 10:39:39
221
1
原创 深入探讨JS高级1---基础总结深入
JS高级基础总结深入基础总结深入数据类型a.分类基本类型(又称值类型):String (任意字符串)Number (任意数字)boolean (true/false)undefined (undefined)null (null)对象类型(又称引用类型):Object (任意对象)Function (一种特殊的对象，可以执行)Array (一种特殊的对象，数值下标，内部数据有序)b.判断typeof (返回数据类型的字符串表达)可以判断：undefine
2020-05-29 10:31:06
151
原创 CSS预处理器Less
Less为什么要使用Less什么是预处理器Less注释Less变量Less的嵌套规则Less混合arguments变量继承Less避免编译为什么要使用Less你是否对一成不变的CSS书写感到厌烦？你是否对多次书写同样的内容感到不满？你会思考，为什么CSS中不能像其他语言一样书写变量，封装函数进行代码的复用，很明显，原生CSS并不具备这个功能，但是，我们可以使用CSS预处理器，Less便是其中的...
2020-05-06 21:20:38
151
原创 抛砖引玉---CSS媒体查询选择器
媒体查询选择器引言媒体类型媒体属性关键字引言响应式前端页面是前端发展的大趋势，不会响应式的前端工程师不是一个好工程师，响应式布局的核心就是媒体查询选择器在CSS中，我们使用@media来定义媒体查询选择器媒体类型媒体类型就是前端页面需要展示的媒介，常见的有:all 所有媒体设备screen 彩色屏幕print 打印预览<!DOCTYPE html>&l...
2020-05-03 21:15:45
293
原创 flex弹弹弹性布局
flex布局简介容器项目新版本新增flex简写属性简介CSS flex 弹性盒子是一种用在页面上布置元素的布局模式，它是响应式的，分为新老两个版本，老的叫做box，新的叫做flex，我将从新老两个版本进行flex的介绍：在开始之前，我们必须先知道几个概念，什么是容器？什么是项目？什么是主轴和侧轴？容器：就是用于外层包括的元素，就是设置display:flex的元素项目：容器里面的就是一个...
2020-05-03 20:58:16
240
原创 CSS3_3D变换和动画
CSS33D坐标轴景深，舞台，灭点和景深基点3D变换3D实例动画3D坐标轴前端中的3D坐标轴和我们印象中的有点不一样，我们可以这样记，屏幕水平(左右)方向为X轴，垂直(上下)方向为Y轴，面向穿过你自己为Z轴，我是这样记的，感觉比较好记景深，舞台，灭点和景深基点要在前端页面上实现3D效果，我们必须明确以下几个概念景深(perspective)：是指相机对焦点前后相对清晰的成像范围太抽象了...
2020-05-02 16:45:31
228
原创 CSS3从头来过_3
CSS3过渡2D变换过渡transition：提供了一种在更改CSS属性时控制动画速度的方法，其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的，它是一个简写属性API介绍transition-property 指定要产生过渡效果的属性，有些属性不能产生过渡效果，比如displaytransition-duration 指定过渡持续的时间，必须带单位transition-...
2020-04-30 11:33:48
138
原创 CSS3从头来过_2
CSS3自定义字体&字体图标新增UI方案渐变自定义字体&字体图标CSS3允许我们自定义字体@font-face{ font-family: "自定义的字体名字"; src: url(字体文件路径);}/*使用*/h1{font-family: "自定义字体的名字";}自定义字体最重要的应用就是字体图标字体图标大致的制作过程是：a. 制作一套矢量图...
2020-04-24 22:23:50
149
原创 CSS3从头来过_1
CSS3导学选择器CSS的声明优先级(选择器优先级)导学面试常问的三个问题，能让人怀疑是否学过CSS，开始吧：CSS的全称是什么？CSS的全称是cascading style sheets,直译过来就是层叠样式表顺便提一下HTML是Hypertext markup language,超文本标记语言CSS的组成是什么？要理解CSS的组成，得从一个例子来说，直观一点:<...
2020-04-23 12:59:18
115
原创 Git简介
Git简介Git是什么版本控制简介Git的优势Git的结构Git和GitHub的关系本地库和远程库的交互方式Git命令行操作查看历史记录的几种方式版本前进与后退的方式删除文件找回比较文件分支管理Git原理GitHub远程库操作SSH免密登录前言：我不会讲Git的安装，以下的内容都是基于你已经安装好环境了Git是什么在项目开发的过程中不是一蹴而就的，需要经过不断的修改、增加、删除多个功能模块。...
2020-04-18 21:22:38
220
原创 ES6知识补充2
ES6知识补充2数组缓冲区视图定型数组ES6函数ES6迭代器ES6 Promise对象ES6 Generator函数ES6 async函数数组缓冲区数组缓冲区是内存中的一段地址，是定型数组的基础，实际字节数在创建时确定，之后只可修改其中的数据，不可修改大小创建数组缓冲区let buffer = new ArrayBuffer(10);console.log(buffer.byteLe...
2020-04-14 22:11:44
228
原创 ES6知识补充1
ES6知识补充1解构赋值Map对象Set对象ES6 字符串ES6 数值ES6 对象ES6 数组解构赋值在数组的解构中，解构的目标若为可遍历对象，皆可进行解构赋值。可遍历对象就是实现Iterator接口的数据let [a, b, c, d, e] = 'hello';// a = 'h'// b = 'e'// c = 'l'// d = 'l'// e = 'o'当解构模...
2020-04-14 17:32:51
119
原创 JS HTML DOM操作
JS HTML DOMDOM简介DOM HTMLDOM CSSDOM事件DOM EventListenerDOM元素HTML Collection对象NodeList对象DOM简介HTML DOM(文档对象模型)通过HTMl DOM，可访问JS文档的所有元素当网页被加载时，浏览器创建页面的文档对象模型(Docement Object Model)HTML DOM模型被构造为对象的树通过...
2020-04-12 17:13:09
111
原创 ES6新增语法简介
ES6新增语法什么是ES6新增关键字let新增关键字const解构赋值箭头函数剩余参数扩展运算符构造函数方法新增实例方法模板字符串数据结构Set什么是ES6全称ECMScript,它是由ECMA国际标准化组织制定的一项脚本语言的标准化规范(范指ES2015-ES2018)新增关键字let新增的用于声明变量的关键字letlet声明的变量只在所处于的块级作用域有效(一对大括号中)if(...
2020-04-07 23:02:46
250
原创 JS复习5----浅谈JS函数
JS函数JS函数定义a. 使用关键字function声明定义函数b. 函数声明后不会立即执行，会在我们需要的时候自己调用c. JS函数可以通过一个表达式定义，函数表达式可以存储在一个变量中(小心这句话了啊)：var x = function(a,b) { return a*b;} //声明一个函数并存储在变量x中x(3,4); //调用函数d. Function()构造函数...
2020-04-06 21:31:55
154
原创 JS复习4-----继续深入
JS this关键字a.面向对象语言中，this表示当前对象的一个引用，但在JS中this不是固定不变的，它会随着执行环境的改变而改变，具体如下：1 在方法中，this表示该方法所属的对象2 如果单独使用，this表示全局对象3 在函数中，this表示全局对象4 在函数中，在严格模式下，this是未定义的5 在事件中，this表示接收事件的元素6 类似call()和apply()方...
2020-04-05 22:40:26
189
原创 JS正则表达式详解
JS正则表达式什么是正则使用正则的优势创建正则表达式的方法介绍一些正则中常用的方法选择符的使用元字符的使用量词的使用重复匹配原子表和原子组模式修正符转义字符汉字与字符属性lastIndex的作用批量使用正则匹配同一字符串禁止贪婪全局匹配$符号的使用原子组别名断言匹配什么是正则概念:正则表达式是对字符串（包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为“元字符”））操作的一种逻辑公...
2020-04-04 16:02:10
763
原创 JS复习3----细枝末节
@JS复习JS错误–throw、try和catchtry语句测试代码块的错误catch语句处理错误throw语句创建自定义错误finally语句在try和catch语句之后，无论是否触发异常，该语句都会执行当错误发生时，JS引擎通常会停止，并生成一个错误信息，技术术语为：JS将抛出一个错误JS调试在程序代码中寻找错误叫做代码调试熟用console.log()方法设置断点...
2020-03-30 22:28:19
81
空空如也
antd select框异常收起
2021-07-13
TA创建的收藏夹 TA关注的收藏夹
TA关注的人