_BuzzLy-CSDN博客

原创 vue核心之虚拟DOM

虚拟 DOM 前世今生虚拟 DOM 也叫 VDOM，虚拟 DOM 其实并不是什么新鲜事物，早在多年前网上就已经有很多介绍虚拟 DOM 的文章。但把虚拟 DOM 发扬光大的是 React，并且 vue2.0 也引入虚拟 DOM，可以看出虚拟 DOM 在前端举足轻重的地位。简单来说虚拟 DOM 就是用数据格式表示 DOM 结构，并没有真实的 append 到 DOM 上，因此称为虚拟 DOM。...

2020-04-27 18:50:33 407

原创如何从无到有实现Promise（下）

温故知新上一篇《如何从无到有实现Promise（上）》中我们已经实现了一个看似可以正常工作的简易版 Promise ，不要认为这样就结束了，其实好戏才刚刚开始。本篇我们继续改造和丰富这个 Promise，让它可以适用更复杂的场景。本文篇幅较长，又有大量的代码片段，可以边记录笔记边阅读，对照着看更容以理解。链式调用“有点东西”众所周知 Promise 的 then 方法是支持链式调用...

2020-04-17 09:44:09 205

原创如何从无到有实现Promise（上）

前言最近整理了两篇关于js异步的笔记，谈到异步就不得不说说 Promise。Promise 取代传统回调方式实现异步，也是理解 generator、async/await 的前提。基本用法不再阐述，这里只谈谈如何从无到有的实现 Promise。一、从构造函数开始我们在使用 Promise 时都要使用 new 关键字，由此可知 Promise 其实就是一个构造函数，我们使用这个构造函数创建一...

2020-04-09 17:22:01 422

原创分分钟拿下JS异步（下）

叨叨几句上篇通过几个由浅入深的例子了解了如何处理异步任务。这一篇深入理解异步概念中的任务队列、事件循环、宏任务、微任务等。开始之前还要重复强调一点就是：JavaScript 是单线程的，也就是无法同一时候运行多段代码。至于为何这样设计，也许是作者“任性”，或者是考虑到 JavaScript 作为浏览器脚本语言，主要用途是与用户互动，如果是多线程，那么势必会带来复杂的同步问题。先看两段代...

2020-03-07 16:36:56 359 1

原创分分钟拿下JS异步（上）

js中的异步是初学者绕不过去的几座大山之一。什么是异步简单介绍下异步，Javascript语言是单线程的，代码依次执行，一些情况下就会造成代码阻塞，因此就需要引出异步。异步也就是用来解决这个问题的。js语言也在不停的努力更加优雅的实现异步。由于异步诞生之初就很复杂，导致异步成为了许多初学者的噩梦，老司机也是频频翻车。从callback到promise，从generator到async/aw...

2020-03-04 23:58:32 455

原创 vue数据响应式的实现（附图）

根据对vue源码的理解，对vue的数据响应式做一个简单的实现。定义myvue，使用方式仿造vue，简单实现插值表达式、数据双向绑定、事件及指令。直接上代码创建index.html，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <m...

2019-09-08 18:08:47 1051

原创老司机也翻车的闭包

前置知识，js变量作用域要想了解闭包，我们先要了解javascript中变量作用域的概念。js中变量作用域分为两种：全局作用域、局部作用域。作用域具体内容在之前的“js作用域”一文中详细阐述，这里就不做过多解释。通过了解变量作用域我们知道，js的变量作用域很特殊，子作用域可以访问全部父作用域的变量，但是父作用域无法访问到子作用域的变量。为何使用闭包但是出于一些原因，有时候我们需要得到...

2019-07-22 23:43:53 7044 1

什么是thisJavaScript中的this是什么？定义：this是包含它的函数作为方法被调用时所属的对象。function fn1(){ this.name = &amp;amp;amp;quot;halo&amp;amp;amp;quot;;}fn1();我们将定义拆分一下（包含它的函数、作为方法被调用、所属的对象），包含它的函数：包含this的函数是fn1。作为方法被调用：fn1(); 此处fn1函数被调用。所属的对

2019-06-12 22:58:53 10985 1

原创 JavaScript数组空位的处理

let array = [,1,,2,,3];array = array.map((i)=>++i);执行后array是什么？如果你认为结果是[NaN,2,NaN,3,NaN,4]那么你就需要继续往下看了。ES5中：在大多数情况下会忽略空位，例如forEach、for in、filter、every、reduce、some都会跳过空位。map也像上面那些方法一样，会跳过空位，但是会保留这个值，join和toString会将空位与undefined以及null处理成空字符串。ES6

2021-08-30 13:05:54 586

原创 JavaScript里的强制转换和隐式转换

一、隐式转换以下语句的执行结果是什么？A. undefined == nullB. isNaN(“100”)C. parseInt(“1a”) === 1D. [ ] instanceof Array答案：A. undefined == null 为 true； undefined === null 为 falseB. 当传入 NaN 或能被转换成 NaN 的值，isNaN 返回 true，“100"会被先转成 Number–>100，不为 NaN，因此返回 falseC. p

2021-08-30 12:50:22 519

原创关于 var x = y = 100 你真的会用吗？（下）

一道被无数人无数次地解释过的经典面试题： var a = { n:1 }; a.x = a = { n:2 }; console.log(a.x);理解这道题的第一步需要搞懂这行代码： var x = y = 100;相关内容在上一篇《关于 var x = y = 100 你真的会用吗？（上）》中已经介绍过了。仔细看题目中的第二行，对比我们上面的代码，只是少了 var 关键字，如果把我们上面的代码也去掉 var 关键字，那么就变成： x = y = 100;

2021-06-15 22:23:41 761

原创关于 var x = y = 100 你真的会用吗？（上）

var x = y = 100; // x=100 // y=100可能很多人都写过这样的代码，首先来说这样的写法没有错，看起来也很简洁，但事实上这行代码是js中最容易错用的表达式之一。你也许会说，这就是简单的声明赋值表达式，我总这么用，没有出过错。别急，下面的内容可能会颠覆你的认知。声明在JavaScript中一共有六条声明用的语句，严格滴说 JavaScript 中只有变量和常量两种标识符，六条声明语句分别为：letconstvarfunctionclass...

2021-06-09 23:12:42 1538 5

原创一道前端流程控制面试题

最近在面试时遇到这样一道笔试题，觉得很有意思，拿出来分享一下。看题目：实现一个 LazyMan，按照以下方式调用时，得到相关输出：LazyMan("Hank")// Hi! This is Hank! LazyMan("Hank").sleep(10).eat("dinner")// Hi! This is Hank!// *等待 10 秒..// Wake up after 10// Eat dinner~ LazyMan("Hank").eat("dinner").eat("

2020-08-14 21:36:19 334

原创前端性能优化之WebP图片

前言前端性能涉及方方面面，根据优化角度切入点的不同可以分为页面工程优化和代码细节优化两大方向。页面工程优化：从页面请求开始，涉及网络协议、资源配置、浏览器性能、缓存等；代码细节优化： JavaScript 对 DOM 操作等。今天要介绍的是一种叫WebP格式的图片。WebP介绍WebP 是由Google开发的一种新的图片格式，它支持有损压缩、无损压缩和透明度，压缩后的文件大小比JPEG、PNG等都要小。诸多的好处使它成为了当下前端性能优化的重要切入点之一。使用WebP由于之前

2020-08-13 23:59:52 1925 1

原创前端也要知道的TCP和UDP

TCP 和 UDP作为一个前端已经不止一次的在面试中被问到 TCP 和 UDP 协议了。为了让自己的回答不那么敷衍，从前端的角度对 TCP 和 UDP 在基础层面进行了一下总结。TCP 和 UDP 是运输层的两种协议，什么是运输层呢？运输层（Transport Layer）就是负责向两台主机进程之间的通信提供通用的数据传输服务，应用进程利用该服务传送应用层报文。这里的通用是指并不针对某一个特定的网络应用，而是多种应用可以使用同一个运输层服务。TCP 协议是一种面向连接的、可靠的数据传输服务。可

2020-06-12 16:45:12 1107

原创 HTTP 响应状态码表

100 //继续请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分，正在等待其余部分101 //切换协议请求者已要求服务器切换协议，服务器已确认并准备切换200 //成功服务器已经成功处理了请求，通常，这表示服务器提供了请求的网页201 //已创建请求成功并且服务器创建了新的资源202 //已接受服务器已接受请求，但尚未处理203 //非授权信息服务器已经成功处理了请求，但返回的信息可能来自另一来源204

2020-06-12 15:23:05 310

原创人尽皆知的HTTP缓存，你真的能说清？

缓存概念与分类缓存的应用非常广泛，在前端更是有着举足轻重的地位，是解决性能问题最常用的手段之一。缓存在我们的项目中可谓是无处不在，小到一个函数的执行结果，大到图片资源、服务器请求的数据可以进行缓存。缓存之所以这么重要，是因为它能带来非常多的好处, 如：加快网页加载和呈现速度。减少了不必要的的请求，因而节省网络流量和带宽同时也减少服务器的负担。浏览器的资源缓存分为两类: from disk cache(磁盘)和 from memory cache(内存)。from disk cache和 f

2020-06-10 17:22:33 379

原创 JS中的curry化（柯里化）

什么是 curry 化curry 化也是一个常见的概念，维基百科对其解释为：在计算机科学中，柯里化（currying），又译为卡瑞化或加里化，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。这个技术由克里斯托弗·斯特雷奇以逻辑学家哈斯凯尔·加里命名的。再简洁一些就是：柯里化是把接受多个参数的函数变换成接受一个单一参数的函数，并且返回接受余下的参数而且返回结果的新函数的技术。还是不懂，没关系，下面就通过几个例子一步一步去

2020-05-14 16:39:17 1395

原创 JS模块化浅谈【CommonJS、AMD、CMD、UMD、ESM】

模块化伴随着前端的发展，从无到有，从“伪”到“真”，再到后来的有成熟体系和规范并且适用于浏览器环境下的模块化。让我们来看看模块化到底经历了什么。什么是模块化？为什么需要模块化？在最初的前端，js 只负责比较简单的交互，代码量非常有限，我们将所有代码都混在一起。但是随着前端技术的发展，js 可以做的事情也越来越多，这就导致 js 代码量激增。这时对于一个复杂的应用程序，与其将所有代码一股脑地放...

2020-04-29 16:58:09 1144

原创 css——如何实现水平垂直居中

居中也是 css 中使用频率非常高的知识点，看下面的例题。 <style> .wp { border: 1px solid orange; width: 300px; height: 300px; } .box { background: green; widt...

2020-04-22 13:56:14 283

原创 css——什么是BFC

什么是 BFCBFC 称为块级格式化上下文它会创建一个特殊的区域，在这个区域中只有 block box 参与布局，而BFC的一套规则就规定了在这个特殊的区域中如何进行布局，如何进行定位，区域内元素的相互关系和相互作用，这个特殊的区域不受外界影响。block box 是指 display 属性为 block、list-item、table 的元素，相应的还有 inline box，如 d...

2020-04-22 09:57:07 356

原创一道经典的Promise面试题

最近在总结异步的一些实现方式，也是翻出了一道比较经典的 promise 面试题与大家分享。当然具体实现代码比较长，所以面试只是问了思路。今天找时间把它实现出来。进入正题：现假设后端有一个服务，用于批量获取书籍信息，接受一个数组作为请求参数，数组储存了需要获取书籍信息的书籍 id，这个服务 fetchBooksInfo 大概是这个样子： const fetchBooksInfo = b...

2020-03-06 16:30:42 581

原创 vue基础之自定义组件

刚开始学vue的一篇笔记，闲来无事翻出来瞅瞅，顺便整理下，希望可以帮助刚入门vue的同学吧。先看一个成熟的表单组件的基本功能html结构：<el-form :model="model" :rules="rules"> <el-form-item label="用户名" prop="username"> <el-input v-model="model.us...

2019-09-04 20:45:26 443 1

原创 typescript学习笔记——（二）接口

你要知道的TypeScript的核心原则之一是对值所具有的结构进行类型检查。接口的作用就是为类型命名和为代码或第三方代码定义契约或者约束。接口什么时候该使用接口呢，先看下面一个示例。function printLabel(labelledObj: { label: string }) { console.log(labelledObj.label);}函数printLabel有...

2019-09-02 14:41:05 554

原创 typescript学习笔记——（一）基础类型

前段时间公司项目使用了ts做类型限制，虽然没有深入使用，但是已经能感受到ts的强大。遂将之前的学习笔记整理一遍以作复习。为vue3.0打好基础（大佬们别再学了，跟不上了-_-!!）。你要知道的TypeScript是JavaScript的超集，含了 JavaScript 的所有元素，可以载入 JavaScript 代码运行，并扩展了 JavaScript 的语法。JavaScript是弱类型语...

2019-08-28 08:21:58 584

原创 JavaScript正则，你要的姿势我都有

js中正则表达式的功能非常强大，匹配、替换、查找无所不能。利用好正则可以达到事半功倍的效果。基础内容不再赘述，这里只聊一些比较容易被忽略的技巧。匹配数量{n}匹配n次{n,}匹配大于等于n次{n,m}匹配大于等于n次，小于等于m次*匹配前一个表达式0次或多次，相当于{0,}+匹配前面一个表达式1次或者多次，相当于{1,}?匹配前面一个表达式0次或者1次。相当于 {0,1}。跟在* ...

2019-08-08 23:44:12 520

原创我以为我实现了bind

上一次跳槽面试的时候，一次面试接近尾声，进行的特别顺利，直到面试官提出一个问题，“请你实现一下bind”。“什么！！实现bind？为什么不问call、apply、bind的使用及区别，这些我都倒背如流”。因为那时的段位还很低，对知识的掌握还停留在使用层面，所以被问到的时候是特别懵的。好在面试官人很好，经过多次提示还是写出了一个初级实现。代码如下：Function.prototype.bin...

2019-07-19 23:37:39 834 1

原创老掉牙，但永不过时的面向对象——继承

几乎所有语言都有面向对象的概念，JavaScript 的面向对象实质是基于原型的对象系统。说到面向对象，不得不提的就是继承。认识 new一个没有其他语言经验的人要更容易理解 JavaScript 的继承。不同于其他语言的类的继承，JavaScript 中使用的是原型继承，不过从表面上看更像是基于类的继承，原因可能是因为 new 关键字的使用。new 关键字是用来调用构造函数的，一个函数之所以...

2019-07-19 00:40:26 590

原创 javascript中reduce的应用和实现

定义js中数组的方法非常重要，对数组的方法一定不能陌生，reduce方法很好地体现了“函数式”理念。arr.reduce(callback[, initialValue])reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。简单使用数组的reduce方法接收两个参数第一个参数为一个函数，函数有四个参数，是total、currentVal...

2019-07-14 17:04:26 505

原创用js实现offset方法

工作忙+准备面试，好久没有更新了。有点时间就想休息一下。不能再堕落下去了，拖着疲惫的身体咬咬牙更新两篇。本来前段时间在整理关于vue组件封装、bind实现、promise实现的文章。但是由于篇幅有点大，并且笔记有些久远好多东西还要再更新下，所以就推迟了。就简单整理下最近自己写过的代码中比较有代表性的例子。如何用js实现jq中的offset方法。JQuery中的offset方法是获取当前元素...

2019-07-13 22:38:09 1240

原创 nodejs之koa中间件源码解析

前言上一篇《nodejs之express中间件》已经对express中间件的实现做了详细的讲解，同时也对实现中间件的框架Connect的源码做了简单的分析。并且也提到了express的中间件是直线型，koa的中间件是洋葱型。本篇就来说说koa的中间件。koa介绍koa和express是同一个团队开发的。与express很像，也是一个自身功能极简的框架，所以在一个项目中所需要的东西大多是以中间...

2019-05-29 00:11:14 697

原创 nodejs之中间件框架Connect源码浅谈

前言上篇文章介绍了express中间件的使用和如何自己实现中间件，也介绍了其实express中间件的实现依赖了Connect中间件框架，3.0版本之前的express框架的中间件完全是由另一个框架Connect实现的。虽然现在已经移除了对Connect的依赖，不过也是在express中实现了Connect。可以说是中间件让express更加灵活，尤其是其中的next的设计属实巧妙，下面就通过源...

2019-05-26 23:53:39 892

原创 nodejs之express中间件

前言目前最主流的nodejs框架应该就是express和koa了，二者都是同一个团队开发的。koa更新一点，并且一些设计思想要比express更成熟，不过仍有大量的项目在使用express。作者对于express框架的定义为“基于 Node.js 平台，快速、开放、极简的 Web 开发框架”。说明express框架本身并没有太多功能，而其大多功能都是通过中间件实现的。由此可见中间件在expre...

2019-05-23 00:12:33 724

原创 nodejs之cookie和session

由于最近工作需要又将node捡了起来。翻了下之前的笔记，想着把几篇比较详细的整理下分享出来。第一篇就来说说经常会用到的cookie&session。由来众所周知http是一个无状态的协议，服务端无法跟踪客户端的状态。那么就会导致一个问题，如我们以管理员身份登录一个后台管理系统，登录成功后跳转到管理页面，那在我们进行操作时，服务器怎么知道我们是否已经登录过了呢？cookie为了解决上...

2019-05-21 00:07:43 678

原创 webpack4.0基础篇

webpack唯一的功能就是打包。一、准备学习webpack首先需要安装nodejs，并且作者也强调新版本的nodejs会提高webpack的打包速度。安装好node后就可以在项目命令行中执行下面的代码npm init然后根据需要设置，也可以一直回车，当然如果都使用默认配置也可以npm init -y这样就可以在项目中生成package.json文件了。这样做的目的就是为了使项目...

2019-05-14 23:15:50 243

原创 js实现数据双向绑定

接上一篇文章《js实现数据单向绑定》上篇文章中用原生js实现了数据的单向绑定。本篇文章继续介绍如何用js实现数据的双向绑定。绑定的方式模仿vue中的v-model指令。创建标签<div id="div1"> <input type="text" v-model="name"> <br> 姓名：{{name}}</div>创建一个输...

2019-04-30 23:39:10 564

原创 js实现数据单向绑定

如果你在学习一种前端框架，如vue、angular等，那么你一定不会对数据的单向绑定陌生。何为数据的单向绑定？传统开发模式下，如使用jQuery开发，我们想将一个变量显示到html中，首先要定义一个变量name，然后通过jq代码操作dom将变量放到HTML中，如果name发生修改，还要再次通过jq代码操作dom将新的变量值放到HTML中。这就是传统的MVC框架，其中的Model和View是我们...

2019-04-29 23:52:12 2548

原创 JS变量作用域&作用域链

作用域&作用域链作用域的概念变量作用域的概念：变量作用域就是一个变量可以使用的范围。JS中首先有一个最外层的作用域：称之为全局作用域。JS中还可以通过函数创建出一个独立的作用域，其中函数可以嵌套，所以作用域也可以嵌套。var age = 18; // age是在全局作用域中声明的变量，即为全局变量function f1(){ console.log(name); // ...

2019-04-09 14:29:40 699

原创 JS变量提升

什么是变量提升首先我们要知道js执行前有一个“预编译”过程，预编译主要有两个任务：声明所有var变量（初始为undefined）。解析定义式函数语句。变量提升的概念：函数和变量的声明会被js的解释器放到最上面。在ES6之前，JavaScript没有块级作用域(一对花括号{}即为一个块级作用域)，只有全局作用域和函数作用域。变量提升栗子1 function fn1() {...

2019-04-09 14:27:01 2084

原创 JS - Promise使用

在JavaScript中代码都是单线程执行的，因此JavaScript中所有的网络操作、浏览器事件都必须异步执行。在Promise之前JavaScript处理异步的方式都是回调函数。可以说callback的方式已是深入人心，那Promise又是解决什么问题的呢？看下面一段代码：$.get('/getList',function(){ $.get('/getCount',function(){...

2019-04-08 23:03:00 298

adding data summaries

空空如也