- 博客(73)
- 收藏
- 关注
RSS订阅原创 彻底搞懂 npm、yarn 与 pnpm 依赖管理逻辑
npm2的依赖管理嵌套依赖npm3/yarn的依赖管理思路就是将树打平，将依赖扁平化，不就能解决嵌套过深和依赖冗余的问题大部分说法是会根据package.json里面的顺序决定谁会被提出来，放在前面的包依赖的内容会被先提出来。但是，最终会通过localeCompare方法对依赖进行一次排序，所以字典序在前面的npm包的底层依赖会被优先提出来，对于我们的例子来说就是a_klx所依赖的[email protected]会被优先提出来。pnpm的依赖管理如果我们用pnpm再来安装一遍上面的依赖，
2021-12-06 18:27:37
568
原创 H5 drag拖放
demo<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title></title> <style type="text/css"> #container { width: 800px; height: 800px; display: flex; justi
2021-10-11 16:15:04
292
原创 前端设计模式
策略模式定义一系列的算法，把它们一个个封闭起来，并且使他们可以相互替换。举例：处理商店促销类型prePrice - 处理预热价onSalePrice - 处理大促价backPrice - 处理返场价freshPrice - 处理尝鲜价askPrice - 分发询价逻辑实现：原本全部放在askPrice，并通过ifelse分支处理每种情况， 改为封装每一个单独功能但还是存在缺点：没有实现“对扩展开放，对修改封闭”的效果。// 处理预热价function prePrice(originP
2021-09-21 17:15:50
120
原创 html语义化标签
1、什么是HTML语义化？根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。2.为什么要语义化？代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构有利于SEO: 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息提升用户体验： 例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。便于团队开发和维护: 语义化使得代码更具有可读性
2021-09-15 21:57:47
71
原创 用户体验优化-渐进式图片
认识渐进式图片渐进式图片其实是一种JPEG格式的图片，和普通的JPEG图片的区别如下：Baseline JPEG 普通图片渲染时，数据将按照存储时的顺序从上到下逐行扫描被显示出来的，直到所有的数据都被读取完毕，就完成了整张图片的显示。Progressive JPEG 这种格式的图片在保存信息的时候,是一帧一帧的存储的,如果逐帧逐帧的读的话,就会先看到模糊图,然后一点一点变清晰解码...
2021-09-15 16:28:41
607
原创 前端工程化
前端工程化就是为了让前端开发能够“自成体系”，主要应该从模块化、组件化、规范化、自动化四个方面思考。自动化：前端工程化的很多脏活累活都应该交给自动化工具来完成。需要秉持的一个理念是:任何简单机械的重复劳动都应该让机器去完成。图标合并、持续集成、自动化构建、自动化部署、自动化测试规范化：目录结构的制定、编码规范、前后端接口规范、git分支管理、文档规范组件化：组件化≠模块化。模块化只是在文件层面上，对代码或资源的拆分；而组件化是在设计层面上，对UI（用户界面）的拆分。模块化:Com
2021-09-08 14:43:02
92
原创 nodejs事件循环
其实nodejs与浏览器的区别，就是nodejs的 宏任务 分好几种，而这好几种又有不同的 任务队列，而不同的 任务队列 又有顺序区别，而 微任务是穿插在每一种【注意不是每一个！】宏任务 之间的,即微任务是在不同阶段之间执行的。1. timers：执行setTimeout() 和 setInterval()中到期的callback。2. I/O callbacks：上一轮循环中有少数的I/Ocallback会被延迟到这一轮的这一阶段执行3. idle, prepare：队列的移动，仅内部使用4
2021-09-01 21:08:49
557
原创 webpack多页面配置，多入口
原理将每个页面所在的文件夹都看作是一个单独的单页面程序目录，配置多个entry以及html-webpack-plugin即可实现多页面打包。使用Webpack构建多页面程序的实现步骤webpack多页面打包配置使用Webpack构建多页面程序...
2021-08-30 15:48:01
103
原创 promise捕获错误方式？用 try catch 可以捕获吗？
捕获错误方式rejectedcatch全局捕获示例：unhandledrejectionwindow.addEventListener('unhandledrejection', function(event) { // the event object has two special properties: alert(event.promise); // [object Promise] - the promise that generated the error alert(e
2021-08-30 14:21:40
3454
原创 Fetch 请求的超时设置与终止请求
要求fetch 请求,3秒超时输出超时,不管成功与否,成功输出成功,失败输出失败。考察实现：Fetch 请求的超时设置与终止请求解决在使用XMLHttpRequest可以设置请求超时时间，可是转用Fetch后，超时时间设置不见了,在网络不可靠的情况下，超时设置往往很有用ES6以后Promise 出现解决地狱回调等不优雅的代码风格。个人理解这个更像是一个生产者和消费者的关系，查看 Promise文档，有以下两个方法Promise.race([promise1,promise2]) 传入多个Prom
2021-08-30 13:58:38
1341
原创 js拖拽功能的实现
如果要设置物体拖拽，那么必须使用三个事件，并且这三个事件的使用顺序不能颠倒。1.onmousedown：鼠标按下事件2.onmousemove:鼠标移动事件3.onmouseup:鼠标抬起事件拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化；元素的移动就是style.position的top和left的改变。当然，并不是任何时候移动鼠标都要造成元素的移动，而应该判断鼠标左键的状态是否为按下状态，是否是在可拖拽的元素上按下的。拖拽状态 = 0鼠标在元素上按下的时候
2021-08-25 18:12:09
2019
原创 DOMContentLoaded事件和Load事件的区别? async 和 defer区别？
DOMContentLoaded事件和Load事件的区别DOMContentLoaded 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。load：当整个页面及所有依赖资源如样式表和图片都已完成加载时，将触发load事件。渲染树的生成是基于DOM和CSSOM的。但是触发DOMContentLoaded的时间依然是在HTML解析为DOM后，无论此时CSS解析为CSSOM的过程是否完成。解析HTML结构。加载外
2021-08-18 15:19:28
216
原创 V8 如何执行一段JS代码？
计算机执行高级语言的两种方式V8 如何执行一段JS代码？1.生成 AST生成 AST 分为两步——词法分析和语法分析。词法分析词法分析即分词，它的工作就是将一行行的代码分解成一个个token。//比如下面一行代码:let name = 'sanyuan'即解析成了四个token，这就是词法分析的作用。语法分析接下来语法分析阶段，将生成的这些 token 数据，根据一定的语法规则转化为AST。举个例子:let name = 'sanyuan'console.log(na
2021-04-04 16:47:03
180
原创 Symbol小结
本文为自我小结，详细内容看ECMAScript 6 入门保证每个属性的名字都是独一无二的Symbol 值通过Symbol函数生成。这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。typeof运算符的结果，表明变量s是 Symbol 数据类型，而不是字符串之类的其他类型。Symbol函数前不能使用new命令，否则会报错。这是因为生成的 Symbol 是一个原
2021-03-29 19:41:46
114
原创 forEach知识点归纳
forEachforEach() 方法按升序为数组中含有效值的每一项执行一次 callback 函数，那些已删除或者未初始化的项将被跳过（例如在稀疏数组上）。参数：1.可依次向 callback 函数传入三个参数：数组当前项的值数组当前项的索引数组对象本身2.如果 thisArg 参数有值，则每次 callback 函数被调用时，this 都会指向 thisArg 参数。如果省略了 thisArg 参数，或者其值为 null 或 undefined，this 则指向全局对象。按照函数观察到
2021-03-25 19:47:11
348
原创 类型转换--强类型转换、自动类型转换
强制转换Number()使用Number函数，可以将任意类型的值转化成数值。下面分成两种情况讨论，一种是参数是原始类型的值，另一种是参数是对象。字符串转数字：1.如果可以被解析为数值，则转换为相应的数值2.如果不可以被解析为数值，返回 NaN //Number(‘324abc’) // NaN3.空字符串转为0布尔转数字：布尔值：true 转成 1，false 转成 0undefined：转成 NaNnull：转成0Number函数将字符串转为数值，要比parseInt函数严格很
2021-03-24 11:51:06
159
原创 闭包含义、危害、作用及其实现私有属性
什么是闭包？红宝书(p178)上对于闭包的定义：闭包是指有权访问另外一个函数作用域中的变量的函数，闭包产生的原因?首先要明白作用域链的概念，其实很简单，在ES5中只存在两种作用域————全局作用域和函数作用域，当访问一个变量时，解释器会首先在当前作用域查找标示符，如果没有找到，就去父作用域找，直到找到该变量的标示符或者不在父作用域中，这就是作用域链，值得注意的是，每一个子函数都会拷贝上级的作用域，形成一个作用域的链条var a = 1;function f1() { var a = 2
2021-03-23 21:30:59
207
原创 webpack原理相关流程
1.webpack 原理（1）初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；（2）开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译；（3）确定入口：根据配置中的 entry 找出所有的入口文件；（4）编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；（5）完成模块编译：在经过第4步使用 Loader
2021-03-23 16:50:46
136
原创 原型及原型链含义--所有的函数都是 Function 的实例
每个构造函数都有一个原型对象，该原型对象有一个属性（constructor）指回构造函数，而实例有一个内部指针__proto__（[[Prototype]]） 指向原型（即：蓝色 1）。实例与构造函数的原型之间有直接关系，实例与构造函数之间没有。所有的函数（js中函数也是对象）都是 Function 的实例.所以函数都有一个属性__proto__指向Function的原型对象（即：红色3）Object 是 Function 的实例对象, Object.proto === Function.proto..
2021-03-23 09:56:04
652
原创 js练习题
1.包括变量定义提升、this指针指向、运算符优先级、原型、继承、全局变量污染、对象属性及原型属性优先级等等。function Foo() { getName = function () { alert (1); }; return this;}Foo.getName = function () { alert (2);};Foo.prototype.getName = function () { alert (3);};var getName = function () { alert (4
2021-03-17 11:26:01
133
原创 优雅解决按钮”重复点击“问题：支付按钮防刷等
应用场景：对于支付按钮或者收藏等，需进行一定处理，防止短时间内重复点击，多次请求接口，造成不必要资源浪费。解决方案：css样式：对于button按钮，可以使用setAttribute(‘disabled’, xxx)和removeAttribute(‘disabled’)来禁止用和恢复。防抖：立即执行一次，例如按钮防抖，防止用户多次点击（下一次调用必须与前一次调用的时间间隔大于wait才会触发）。 function debounce(func, wait, immediate
2021-03-16 22:37:09
607
原创 为什么要用 setTimeout 模拟 setInterval ？
setInterval在JS 事件循环之宏任务和微任务中讲到过，setInterval 是一个宏任务。用多了你就会发现它并不是准确无误。推入任务队列后的时间不准确：在 setInterval 被推入任务队列时，如果在它前面有很多任务或者某个任务等待时间较长比如网络请求等，那么这个定时器的执行时间和我们预定它执行的时间可能并不一致。函数操作耗时过长导致的不准确：考虑极端情况，假如定时器里面的代码需要进行大量的计算(耗费时间较长)，或者是 DOM 操作。这样一来，花的时间就比较长，有可能前一次代码还没有
2021-03-16 21:37:39
687
原创 浏览器内核 之 js事件循环机制
浏览器都包含哪些进程？知道了浏览器是多进程后，再来看看它到底包含哪些进程：（为了简化理解，仅列举主要进程）1.Browser进程：浏览器的主进程（负责协调、主控），只有一个。作用有负责浏览器界面显示，与用户交互。如前进，后退等负责各个页面的管理，创建和销毁其他进程将Renderer进程得到的内存中的Bitmap，绘制到用户界面上网络资源的管理，下载等2.第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建3.GPU进程：最多一个，用于3D绘制等4.浏览器渲染进程（浏览器内
2021-03-12 21:12:31
169
原创 CDN：加速我们的网络服务
为什么要有网络加速互联网从逻辑上看是一张大网，但实际上是由许多小网络组成的，这其中就有小网络“互连互通”的问题，典型的就是各个电信运营商的网络，比如国内的电信、联通、移动三大家。这些小网络内部的沟通很顺畅，但网络之间却只有很少的联通点。如果你在 A 网络，而网站在 C 网络，那么就必须“跨网”传输，和成千上万的其他用户一起去“挤”连接点的“独木桥”。而带宽终究是有限的，能抢到多少只能看你的运气。还有，网络中还存在许多的路由器、网关，数据每经过一个节点，都要停顿一下，在二层、三层解析转发，这也会
2021-03-11 13:17:28
379
原创 WebSocket 深入浅出
背景：为什么要有 WebSocket为了克服 HTTP“请求 - 应答”模式的缺点“请求 - 应答”有什么不好的地方呢？“请求 - 应答:”是一种“半双工”的通信模式，虽然可以双向收发数据，但同一时刻只能一个方向上有动作，传输效率低。更关键的一点，它是一种“被动”通信模式，服务器只能“被动”响应客户端的请求，无法主动向客户端发送数据。虽然后来的 HTTP/2、HTTP/3 新增了 Stream、Server Push 等特性，但“请求 - 应答”依然是主要的工作方式。这就导致 HTTP 难以应用
2021-03-10 21:20:49
245
原创 什么是JWT? Token? 如何基于Token进行身份验证？
JWT （JSON Web Token）Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准（(RFC 7519).该token被设计为紧凑且安全的，特别适用于分布式站点的单点登录（SSO）场景。JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息，以便于从资源服务器获取资源，也可以增加一些额外的其它业务逻辑所必须的声明信息，该token也可直接被用于认证，也可被加密。JWT 本质上就一段签名的 JSON 格式的数据。由于
2021-03-10 13:03:05
1055
1
原创 es6之Set 和 Map对比
一.SetES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。1.Set 实例的属性和方法:Set 结构的实例有以下属性。Set.prototype.constructor：构造函数，默认就是Set函数。Set.prototype.size：返回Set实例的成员总数。Set 实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。下面先介绍四个操作方法。Set.prototype.add(value)：添加某个值，返回 Set 结
2021-03-08 16:00:56
1364
原创 CSS3 新特性-transition和animation
transitiontransition 属性是一个简写属性，用于设置四个过渡属性：transition-property //规定设置过渡效果的 CSS 属性的名称。transition-duration //规定完成过渡效果需要多少秒或毫秒。 默认：0transition-timing-function //规定速度效果的速度曲线。transition-delay // 属性规定过渡效果何时开始。 默认0animationanimation属性是一个简写属性，用于设置六个动画
2021-03-07 21:44:58
305
原创 图片懒加载
首先：搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop1.clientHeight、scrollTop 和 offsetTop <img src="loading.gif" data-src="https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706_1280.jpg" alt=""> <img src="loading.gif" data-src
2021-03-03 17:41:26
166
1
原创 随手记：小程序相关知识点
一.小程序生命周期1.应用生命周期App() 必须在 app.js 中调用，必须调用且只能调用一次，app.js中定义了一些应用的生命周期函数（1）onLaunch: 初始化小程序时触发，全局只触发一次（2）onShow: 小程序初始化完成或用户从后台切换到前台显示时触发（3）onHide: 用户从前台切换到后台隐藏时触发（4）onError: 小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息后台： 点击左上角关闭，或者按了设备 Home 键离开微信，并没有
2021-03-02 14:24:24
485
原创 inline-block产生空白间隙的问题 解决方法
当我们在对元素的display属性使用inline-block值时，会在元素间形成一定宽度的空白间距:<ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li></ul>*{ margin: 0; paddi
2021-03-01 15:58:46
516
原创 js基础 0.1 + 0.2不等于0.3
1.判断数据类型typeof、instanceof、Object.prototype.toString.call()、constructor参考：判断数据类型2.类数组与数组的区别与转换类数组对象：arguments对象、NodeList对象、以及getElementsByClassName(“a”)获取的对象;arguments是一个类数组对象，包含着传入函数中的所有实参集合，虽然arguments主要作用是保存函数实参，但这个arguments有一个callee属性，它是一个指针，指向拥有这个
2021-02-26 23:17:56
338
原创 JavaScript中数据类型的判断——typeof，instanceof，constructor，Object.prototype.toString.call()
（1）typeoftypeof 对于原始类型来说，除了 null 都可以显示正确的类型null:解释: 虽然 typeof null 会输出 object，但是这只是 JS 存在的一个悠久 Bug。在 JS 的最初版本中使用的是 32 位系统，为了性能考虑使用低位存储变量的类型信息，000 开头代表是对象然而 null 表示为全零，所以将它错误的判断为 object 。typeof 1 // 'number'typeof '1' // 'string'typeof undefined // '
2021-02-26 21:27:08
208
原创 重绘和回流深入浅出
我们首先来回顾一下渲染流水线的流程:回流回流也叫重排。当 Render Tree 中部分或全部, 因元素的尺寸、布局、隐藏等改变而需要重新构建，浏览器重新渲染的过程称为 回流。会导致回流的操作：页面首次渲染。浏览器窗口大小发生改变。元素尺寸或者位置发生改变。元素内容变化(文字数量或者图片大小发生改变)。元素字体大小的改变。添加或者删除可见的 DOM 元素。激活 CSS 伪类 (eg: :hover)。查询某些属性或调用某些方法。一些常用且会导致回流的属性和方法。clientW
2021-02-26 14:25:54
216
原创 深入浅出执行上下文与作用域
1.什么是执行上下文简而言之，执行上下文是评估和执行 JavaScript 代码的环境的抽象概念。每当 Javascript 代码在运行的时候，它都是在执行上下文中运行。执行上下文的类型JavaScript 中有三种执行上下文类型。全局执行上下文 ：这是默认或者说基础的上下文，任何不在函数内部的代码都在全局上下文中。它会执行两件事：创建一个全局的 window 对象（浏览器的情况下），并且设置 this 的值等于这个全局对象。一个程序中只会有一个全局执行上下文。函数执行上下文： 每当一
2021-02-10 22:30:36
400
原创 防抖与节流实现及多场景运用变形
防抖（debounce）防抖函数：一个需要频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效。防抖（debounce）：不管事件触发频率多高，一定在事件触发n秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，就以新的事件的时间为准，n秒后才执行，总之，触发完事件 n 秒内不再触发事件，n秒后再执行。1.运用场景一场景：延迟执行函数对于连续的事件响应我们只需要执行一次回调：每次 resize/scroll 触发统计事件百度查询，账号文本输入的验证（连续输入文字后发送
2021-02-05 11:47:54
187
原创 TCP可靠传输的原理及其实现
可靠传输的工作原理理想的传输条件有以下两个特点：1.传输信道不产生差错2.不管发送方以多快的速度发送数据，接收方总是来得及处理收到的数据。然而实际的网络不具备以上两个条件。但我们可以使用一些可靠的协议，当出现差错时让发送方重传出现错误的数据，及时告诉发送方适当降低发送数据的速度。这样一来，本来不可靠的传输信道就能够实现可靠的传输了。1.停止等待协议就是每发送完一个分组就停止发送，等待对方确认。在收到确认后再发送下一个分组。确认和重传机制出现差错时，没有收到确认，就认为刚才发送的分组丢失
2021-02-02 16:02:48
1529
原创 https通信原理 及 传统https加密（用RSA算法）和 TSL1.2区别
1.什么是httpsHTTP的特性是明文传输（指不加密），因此在传输的每一个环节，数据都有可能被第三方窃取或者篡改，具体来说，HTTP 数据经过 TCP 层，然后经过WIFI路由器、运营商和目标服务器，这些环节中都可能被中间人拿到数据并进行篡改，也就是我们常说的中间人攻击。HTTPS并不是一个新的协议.只是http通信接口部分用SSL和TLS协议代替而已。通常，http直接和tcp通信。当使用ssL时，演变成先和SSL通信再有SSL和和tcp通信了。简言之，https就是身披SSL这层外壳的htt
2021-01-31 11:52:49
1836
原创 http缓存代理--深入浅出
什么是代理服务器引入代理之后，作为代理的服务器相当于一个中间人的角色，对于客户端而言，表现为服务器进行响应；而对于源服务器，表现为客户端发起请求，具有双重身份。代理服务器的作用负载均衡：客户端的请求只会先到达代理服务器，后面到底有多少源服务器，IP 都是多少，客户端是不知道的。这个代理服务器可以拿到这个请求之后，可以通过特定的算法分发给不同的源服务器，让各台源服务器的负载尽量平均。保障安全：利用心跳机制监控后台的服务器，一旦发现故障机就将其踢出集群。并且对于上下行的数据进行过滤，对非法 IP
2021-01-30 12:53:14
451
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人