- 博客(36)
- 收藏
- 关注
RSS订阅
原创 简述HTTPS的通信机制
HTTPS是什么？HTTPS = HTTP + 加密 + 认证 + 完整性保护。简单点说HTTPS可以看做是对HTTP的一个扩展，在HTTP的基础上添加了一些其他的东西。加密、认证和完整性保护，添加这么些东西就很明显是为了保证数据的安全性。HTTP的不足：通信使用明文（未加密），内容可能会被窃听没有验证通信方的身份，可能遭遇伪装无法证明报文的完整性，可能会被篡改HTTPS的作用便是为了解决上述问题。HTTPS并不是一个新的协议，只是HTTP披了一层SSL或TLS的马甲。在四层模型中，HTT
2020-06-23 23:13:35
569
原创 在浏览器输入URL时，Web页面的呈现过程？
一个简单回答：浏览器生成请求并发送到服务器；服务器接受到请求后，执行一些动作或获取某些资源，然后将响应发送回客户端；浏览器在接收到响应数据之后，解析DOM树和CSS树，处理JavaScript，构建页面。如果这是你是在面试中的回答，那估计面试官的表情就是这样的。很明显，面试官在问这个问题的时候，重点应该是浏览器生成请求并发送到服务器是如何工作的。那这又不得不提到TCP/IP四层模型了。我们都知道，TCP/IP四层模型，分别是应用层、传输层、网络层、链路层。利用TCP/IP协议簇进行网络.
2020-06-17 11:44:37
751
1
原创 通过对比class组件来理解React的hooks特性
前言hooks是react16.8新增的特性。关于为什么要新增hooks，是因为class的组件会存在以下的一些问题。在组件之间复用状态逻辑很难复杂组件变得难以理解难以理解的 class这些点就不详细赘述了，这篇文章的重点是介绍hooks。useStatefunction useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];useState是用来取代
2020-06-05 16:37:39
2905
3
原创 JavaScript的奇妙this
this 关键字是 JavaScript 中最复杂的机制之一。它是一个很特别的关键字，被自动定义在所有函数的作用域中。但是即使是非常有经验的 JavaScript 开发者也很难说清它到底指向什么。this是什么？指向函数本身？光从字面意思上来看，很容易让人觉得this就是指向函数本身，事实上真是这样吗？我们可以看一个例子。function foo() { this.count = this.count ? this.count + 1 : 1;}for (let i = 0; i <.
2020-06-02 18:01:37
464
1
原创 浅谈JavaScript中常见的几种继承
总所周知，在JavaScript中其实是利用原型和原型链来实现继承机制的，属性和方法要么存在于自身，要么存在于原型链上。那么很明显，我们实现继承时，无非就两种方法：要么将父类的属性和方法移到子类，要么将子类和父类串到原型链上。因为原型链的关系，JavaScript中的继承并不和传统OOP中的继承一样。在传统的OOP中，继承是一种复制行为，在JavaScript中，继承实际上是一种引用行为。更多...
2020-05-26 17:54:24
1438
原创 那些年，面试遇到的关于JavaScript隐式转换的题
前言不知道大家有没有见过这样的一张图？我当时看见这张图的时候，表情和他几乎一样，内心毫无波澜甚至想笑。。。我还仔细看了看，发现有些地方貌似还真不咋清楚，于是我又来复习了一遍关于JavaScript的隐式转换。。。隐式转换首先要清楚JavaScript中存在两个方法valueOf和toString，他们存在于最顶层的原型Object.prototype上，也就是说我们可以通过原型链访问到这两个方法，他们是用于ToPrimitive也就是转换为原始值。valueOf函数返回的是本身（基础类型则是原始
2020-05-18 16:37:36
761
1
原创 Express和Koa2的区别
前言犹记得前段时间一次面试中，面试官问到：能说一说express和koa的区别吗？当时心里轻蔑一笑，这问题简单，于是信心满满回答道：一个是基于回调，一个是基于Promise的。当时面试官楞了一下，笑了笑没说什么，我当时便意识到有什么地方不对，后来查了下资料，发现确实没有这么简单。我总结了我查阅到的资料，希望对各位童鞋有所帮助。Express和Koa2的区别和联系Express是基于 No...
2020-05-03 18:22:15
4099
原创 聊一聊KOA的洋葱模型
Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造， 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。 Koa 并没有捆绑任何中间件， 而是提供了一套优雅的方法，帮助您快速而愉快地编写服务端应用程序。其实KOA是什么，相比不用我多说，很多前端的小伙伴都了解...
2020-05-03 17:10:41
3029
原创 简单说说原型和原型链
原型是什么？JavaScript是一门基于原型的语言，在JavaScript中没有类的定义，而是使用原型和原型链来实现模拟实现类和类的继承的关系（ES6的类也只是语法糖）。什么是原型呢？这个网红布丁小兔子，很可爱吧，是怎么做出来的呢？首先调好布丁原料，然后拿出模具，将原料倒入，等待成型之后，轻轻的取出来，最后将成型的兔子的耳朵和鼻子图上红色，眼睛涂上黑色，就大功告成啦。这个时候就可以拿出...
2020-04-10 00:07:09
1024
原创 关于宏任务、微任务和事件循环
我想很多人都见过或听过这种题。setTimeout(() => { console.log('settimeout') });new Promise((resolve) => { resolve(''); console.log('promise-resolve');}).then(() => { console.log('promise-then');});...
2020-04-06 00:12:27
1697
原创 观察者模式和发布订阅模式区别与实现
备注：本文所有代码采用ES6书写。什么是观察者模式？观察者模式是软件设计模式的一种。在此种模式中，一个目标对象管理所有相依于它的观察者对象，并且在它本身的状态改变时主动发出通知。以上是维基百科对于观察者模式的定义。其实上面这段话不难理解，打个比方。双十一之前，你看上了一个腿打折的商品需要预约，系统会在双十一的时候提醒所有点了预约的用户来抢货。我们来解析一下这个过程。系统就可以看做是目标...
2020-04-05 23:27:09
1933
原创 前端开发中图片的优化
1. 常用的图片格式PNG优点：背景可以透明、画质很高、不失真缺点：体积很大使用场景：比较小或者需要部分透明的图片，例如logo、图标等JPG/JPEG优点：压缩比高的情况下可以保留比较高的画质，相对PNG俩说体积会小很多缺点：边缘会产生锯齿感、模糊感使用场景：在展示较大且画质较好的图片时使用。例如轮播图、大背景图等等WEBP由Google提出一种新的图片格式。拥有无损压缩的质量（PNG），体积还比PNG小大概30%。但普及度不够，兼容性不好，目前使用较少。GIF优点
2020-09-23 16:30:18
346
原创 浏览器是如何呈现网页的？（关键渲染路径&回流&重绘）
从获取HTML文件直到浏览器以像素点的方式在屏幕中绘制出页面的内容确实经历了很多步骤。这些步骤我们称之为关键渲染路径。关键渲染路径这个说法可能听起来会比较陌生，换用一个经常会在面试中被问到的问题：在浏览器输入URL时，Web页面的呈现过程是怎样的？DNS解析、TCP/IP四层模型等负责将资源传送给浏览器，而浏览器从拿到资源开始直到页面绘制结束这个过程就是我们所说的关键渲染路径。关键渲染路径随便打开一个网站，在Performance选项卡reload一下，放大FP（First Paint），就会发现.
2020-09-16 22:10:00
554
原创 RAIL模型的简单介绍
RAIL, 是 Response, Animation, Idle, 和 Load 的首字母缩写, 是一种由Google Chrome团队与2015年提出的性能模型, 用于提升浏览器内的用户体验和性能. RAIL模型的理念是 "以用户为中心；最终目标不是让您的网站在任何特定设备上都能运行很快，而是使用户满意。也就是说，RAIL模型的目的是通过合理的处理手段提高用户的使用体验。缩写全称描述RResponse在100ms内响应用户的操作。虽说是100ms，但预算只有50m.
2020-09-10 14:25:52
1211
原创 JS中监听网络状况的常用方法
1. navigator.onLine返回的是布尔值。true表示在线，false表示离线。onLine属性只能简单判断网络的断开和连接状态，而不能监听网络状态的变化，例如从4g到3g。function updateOnline() { console.log(navigator.onLine ? 'online' : 'offline');}window.addEventListener('online', updateOnline);window.addEventListener('of
2020-09-09 23:14:47
1877
原创 webpack如何自定义一个loader？
现代前端在开发过程中时常都会使用到webpack，用来对代码进行模块化打包。通常情况下，我们都是直接使用webpack的配置和别人写好的loader。如果自己要实现一个loader，需要怎么做？1. 什么是loader？webpack是基于node的模块化打包工具，它本身也只能处理JS和JSON文件，没有处理CSS、图片等其他格式文件的能力。loader就相当于是一个翻译机，将这些文件翻译成webpack能处理的格式。换句话说，loader赋予了webpack处理其他文件的能力。2. loader的使
2020-09-07 16:07:45
545
原创 JavaScript常用技巧之函数节流
上一篇文章写了写关于防抖的东西，与之相关的节流当然也要来聊一聊。在固定时间内，多次触发只执行一次。类似于定时执行的概念，显然通过setTimeout或者时间戳都可以实现。setTimeout利用setTimeout延时执行的特性，可以在定时器执行的时候去执行事件。function throttle(func, wait) { let timer; return function(...args) { if (!timer) { timer = setTimeout(() =&
2020-08-24 22:23:19
139
原创 JavaScript常用技巧之函数防抖
在触发一段时间后执行事件，如果这段时间内又触发了，则继续等待同样的时间。防抖在实际开发中使用场景还是蛮多，比如列表的实时搜索等。延时执行，这很容易想到使用setTimeout来实现。基础版function debounce(func, wait) { let timer; return function () { timer && clearTimeout(timer); timer = setTimeout(func, wait); };}测试一下// .
2020-08-24 10:26:09
146
原创 defineProperty与Proxy的差异对比
不管你是否使用过vue，多多少少应该也了解过vue的使用原理，也就是我们经常说的数据劫持。在vue2中使用的是Object.defineProperty实现的，而在vue3中则是使用的Proxy。defineProperty使用defineProperty实现一个简单的数据劫持（数据监听）。const watch = (target, property, callback) => { // 这里新增一个_value字段用于临时存储 let _value = target[property];
2020-08-21 16:49:11
1915
原创 vue3带来的新特性/亮点
1. Performancevue3在性能方面比vue2快了2倍。重写了虚拟DOM的实现运行时编译update性能提高SSR速度提高2. Tree-shaking supportvue3中的核心api都支持了tree-shaking，只会对使用到的功能或特性进行打包（按需打包），这意味着更多的功能和更小的体积。3. Composition APIvue2中，我们一般会采用mixin来复用逻辑代码，用倒是挺好用的，不过也存在一些问题：例如代码来源不清晰、方法属性等冲突。基于此在vue3.
2020-08-17 17:50:18
1221
原创 JavaScript中Object.is的实现
Object.is() 方法判断两个值是否为同一个值。这是MDN上关于Object.is的定义。这定义很像是等号，不过也有些区别。Object.is不会转换被比较的两个值的类型，这点和===更为相似，他们之间也存在一些区别。NaN在===中是不相等的，而在Object.is中是相等的+0和-0在===中是相等的，而在Object.is中是不相等的Object.is = function(x, y) { if (x === y) { // 当前情况下，只有一种情况是特殊的，即 +0 -.
2020-07-26 17:31:02
827
原创 手写Promise - 常用静态方法all、resolve、reject、race
手写Promise - 实现一个基础的Promise手写Promise - 实例方法catch、finally手写Promise - 常用静态方法all、resolve、reject、race先来回顾一下，上一章节之后的代码。class WPromise { static pending = 'pending'; static fulfilled = 'fulfilled'; static rejected = 'rejected'; constructor(executor) { t
2020-07-26 17:14:58
546
原创 手写Promise - 实例方法catch、finally
手写Promise - 实现一个基础的Promise手写Promise - 实例方法catch、finally手写Promise - 常用静态方法all、any、resolve、reject、race上一篇文章手写了一个基础的Promise，我们继续来完善它，为其添加经常用到的catch和finally方法catch & finallycatch() 方法返回一个Promise，并且处理拒绝的情况。我们知道then方法的第二个参数其实就是干这个用的，catch只是一个别名。finally
2020-07-17 21:54:44
760
3
原创 手写Promise - 实现一个基础的Promise
前端开发中经常会用到Promise，不过有部分人并不清楚Promise的原理，本文也是本人在学习Promise时对Promis的一些认识，希望能对各位童鞋有所帮助。手写Promise - 实现一个基础的Promise手写Promise - 实例方法catch、finally手写Promise - 常用静态方法all、any、resolve、reject、race从认识Promise开始。。。/* 模拟一个简单的异步行为 */function fetchData() { return new P
2020-07-11 00:29:20
898
原创 什么是对称（非对称）加密算法？
对称加密算法加密和解密共用一个秘钥的方式成为共享加密算法（对称加密算法）。优点：加解密速度快，效率高缺点：不便于秘钥的分发和管理，安全性不高非对称加密算法非对称加密算法使用一对非对称的秘钥。一把叫做私有秘钥，不能让其他任何人知道。另一把叫做公开秘钥，顾名思义就是可以随意发布，任何人都可以获得。对于私钥加密的内容只能使用公钥解密，同样的，使用公钥加密的内容只能使用私钥进行解密。优点：安全性更高缺点：算法更加复杂，加解密速度较慢...
2020-06-23 23:28:06
553
原创 RESTful API常用的HTTP请求方法
GET：获取资源例如图片、css文件、js文件等，在RESTful API中，一般用来获取数据，例如列表，详情等。对应CRUD中的R，即查找操作。POST：传输实体主体例如提交表单信息，在RESTful API中，一般用来提交数据，例如表单等。对应CRUD中的C，即创建操作。PUT：传输文件在RESTful API中，一般用做修改数据。对应CRUD中的U，即修改操作。DELETE：删除文件与PUT相反，在RESTful API中，一般用做删除数据。对应CRUD中的D，即删除操作。HEAD：获
2020-06-17 14:35:11
5124
原创 TCP/IP四层模型（协议簇）各层作用
OSI七层模型是国际标准，分为七层，概念清晰，但却过于复杂，由此演变出了一个事实标准即TCP/IP四层模型，这个模型将应用层、表示层、会话层合并为一层应用层，将数据链路层、物理层合并为链路层。OSI七层模型TCP/IP四层模型协议应用层表示层会话层应用层HTTP、TCP、DNS、SMTP、TFTP等传输层传输层TCP/UDP网络层网络层IP数据链路层物理层链路层-TCP/IP四层模型各层作用-作用应用层应用层处于四层模型
2020-06-16 16:11:24
6310
原创 CSS中的@import和SCSS等预编译@import的区别
CSS： css中的@import是为了开发者能将css分解成更小的部分，它的引入会直接发起一个HTTP的请求。SCSS预编译： scss的@import则更加像我们使用的import等模块化的东西，它是直接将代码包含进目标SCSS文件，而不会产生额外的http请求。...
2020-06-08 15:20:36
1668
原创 JavaScript中的Object.create实现
废话不多说，直接上代码：function createObj(o) { function F() {} F.prototype = o; return new F();}看看栗子：const person = { name: 'willem', colors: ['red', 'green', 'blue']};const p1 = createObj(person);const p2 = createObj(person);p1.colors.push('white');
2020-05-26 18:03:31
576
原创 经常用到的HTTP Code码的通俗解释和字典
1xx - 信息响应、正在处理101 Switching Protocol 协议升级。2xx - 成功响应200 OK 请求正常返回。还有一个是200 Cache是HTTP强缓存相关，表示直接读取的缓存内容。204 No Content 服务器成功处理了请求，但不返回内容。206 Partial Content 成功处理部分请求。也就是HTTP1.1新增的断点续传，一般用来下载大文件，搭配Range使用。3xx - 重定向300 Multiple Choice 需要进行后续操作，需要
2020-05-21 22:54:38
775
原创 JavaScript中的Attribute和Property区别和联系
前端的童鞋应该都听过这两个概念，Attribute和Property，不过很多人应该都只是有一个模糊的概念，其中当然包括我，于是我去查找了一些相关的资料，在这里总结一下：JavaScript为了方便操作DOM，在JavaScript中定义了一个对象类型：DOMElement。对象上有很多的属性，而这些属性就是所谓的property，在这些属性中有一个参数叫做attrbutes。看一个例子：<input name="inputName" id="inputId" custom="custom" d
2020-05-15 17:01:18
723
原创 函数柯里化的理解和实现
什么是柯里化？在计算机科学中，柯里化（英语：Currying），又译为卡瑞化或加里化，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。以上是维基百科对于柯里化给出的定义，总结一下：输入是一个函数，并且这个函数拥有n个参数输出也是一个函数，并且可以使用fn()()()这种方式调用参数被柯里化过程中的函数被拆分写一个经典的用来解释柯里化的例子：function add(a, b, c) { return a +
2020-05-15 00:39:42
1533
原创 模拟实现Javascript中的bind函数
bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。从MDN对于bind的描述来看：返回值是一个函数，而不是执行结果this值会指向第一个参数其余参数会作为新函数的参数看个例子：function test(name, age) { console.log(th...
2020-04-27 00:02:52
608
原创 模拟实现Javascript中的call和apply
Call的模拟实现call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。这是MDN上关于call的描述，用通俗的语言解释一下就是：指定了this值（修改this）可以传入多个参数它的调用对象时函数可能这样解释还是有些模糊，可以看一个例子：function Test(name, age) { console.log(this.name); ...
2020-04-26 18:19:46
583
原创 模拟实现js中的new操作符
new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。这是MDN上对new操作符的定义，从这句话中可以看出new返回的其实就是一个实例，那么问题来了实例又是个啥东西？先看个例子：function Cat(name, gender) { this.name = name; this.gender = gender;}Cat.prototype.say = ...
2020-04-25 23:54:43
641
原创 从零开始，搭建vue插件的开发环境并将插件开源到npm
从零开始，使用webpack搭建开发环境，使用jest进行单元测试，使用eslint检测代码，写一个Vue的指令或组件发布到NPM。Demovue-wechat-pc 组件vue-words-highlight Directive指令搭建开发环境一般来说，当我们自己想要写一个vue的组件或插件的时候，会选择使用webpack自己搭建开发环境，而不是使用vue-cli来生产开发环境。初始...
2020-04-21 01:06:26
714
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人