普通网友-CSDN博客

原创 JavaScript 中如何判断对象是否为空

在自己的日常开发中，一般使用Object.keys()来判断对象是否为空：const obj = {};Object.keys(obj).length === 0 // true 则为空对象而在一篇文章中却是如此判断：const obj = {};Object.keys(obj).length === 0 && obj.constructor === Object为什么还要额外判断对象的constructor呢？即构造函数呢？Object.keys()

2021-05-17 17:52:48 175

原创 JavaScript Debugger 原理揭秘

代码写完会运行一下看下效果，开发的时候我们更多都是通过 dubugger 来单步或断点运行。我们整天在用 debugger，可是你有想过它的实现原理么。本文会解答以下问题：代码运行的底层原理是什么为什么需要 debugger debugger 实现原理是什么如何实现 debugger 客户端代码运行的原理是什么代码的运行方式可以分为直接执行和解释执行两类。不知道平时你有没有注意，可执行文件直接 ./xxx 就可以执行，而执行 js 文件需要 node ./xxx，执行 pytho

2021-05-14 16:40:50 266

原创 async、await 实现原理

JavaScript 异步编程回顾由于 JavaScript 是单线程执行模型，因此必须支持异步编程才能提高运行效率。异步编程的语法目标是让异步过程写起来像同步过程。1. 回调函数回调函数，就是把任务的第二段单独写在一个函数里面，等到重新执行这个任务的时候，就直接调用这个函数。const fs = require('fs')fs.readFile('/etc/passwd', (err, data) => { if (err) { console.error(err)

2021-05-12 17:36:31 639

原创明明有了promise，为啥还需要async await？

为了让还没听说过这个特性的小伙伴们有一个大致了解，以下是一些关于该特性的简要介绍：async/await是一种编写异步代码的新方法。在这之前编写异步代码使用的是回调函数和promise。async/await实际是建立在promise之上的。因此你不能把它和回调函数搭配使用。async/await可以使异步代码在形式上更接近于同步代码。这就是它最大的价值。语法假设有一个getJSON方法，它返回一个promise，该promise会被resolve为一个JSON对象。我们想要调用该方法，

2021-05-12 10:05:59 700

转载浏览器运行 JS 的顺序，你真的掌握吗？

前言不知道你有没有遇到过类似这样的问题，某些代码乱序执行或样式的更改后不生效？你是不是曾经把代码包在 setTimeout 里面来解决类似的问题？是不是这种方式不太可靠？然后你就不断调试 timeout 值以至于看起来好像没问题了？接下来我们将一起来看一下这其中到底发生了什么。进程和线程我们先来区分一下进程和线程进程是 cpu 资源分配的最小单位（是能拥有资源和独立运行的最小单位）线程是 cpu 调度的最小单位（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）通俗

2021-05-08 10:41:11 541

原创五分钟——快速了解JS代码执行前的“预编译阶段”

莫名奇妙出现的"预编译阶段"众所周知，JS是一种解释型语言而非编译型语言（下面非常简要地说明一下两种区别）简要区分编译型语言和解释型语言：计算机是不能理解高级语言的，更不能执行高级语言，它只能理解机器语言，所以任何高级语言的程序想要运行，都必须先将其转化成计算机语言也就是机器码，而转换的方式有两种：1.编译：在编译型语言的程序执行之前，需要一个专门的编译过程，将源代码编译成机器语言，以后再运行的时候可以直接使用编译结果2.解释：解释型语言不需要预先编译，其直接将源代码解释成机器码并立

2021-04-30 15:43:29 347

原创手写Vue2.0源码（十）-计算属性原理

前言此篇主要手写 Vue2.0 源码-计算属性适用人群：1.想要深入理解 vue 源码更好的进行日常业务开发2.想要在简历写上精通 vue 框架源码（再也不怕面试官的连环夺命问哈哈）3.没时间去看官方源码或者初看源码觉得难以理解的同学正文<script> // Vue实例化 let vm = new Vue({ el: "#app", data() { return { aa: 1, bb: 2,

2021-04-30 07:59:11 369

原创常见面试题之JavaScript数据类型转换

JavaScript 本身是一门弱类型语言，这意味着 JavaScript 变量没有预先确定的类型。变量当前的类型由其值所决定，也许上一秒种的string，下一秒可能就是个array。所以当我们进行某些操作时，变量可以进行类型之间的转换，接下来我们就谈一谈数据类型到底是如何转换的。前言先来看一道面试题let result = 100 + true + 21.2 + null + undefined + "Tencent" + [] + null + 9 + false;// resul..

2021-04-29 14:48:18 296 1

原创聊一聊 Vue 3 双向绑定是如何工作的

先来简单介绍一下双向绑定，它由两个单向绑定组成：模型 —> 视图数据绑定；视图 —> 模型事件绑定。在 Vue 中:value实现了模型到视图的数据绑定，@event实现了视图到模型的事件绑定：<input :value="searchText" @input="searchText = $event.target.value" />而在表单中，通过使用内置的v-model指令，我们可以轻松地实现双向绑定，比如<input v-mo...

2021-04-29 08:26:45 340

原创使用这些思路与技巧，我读懂了多个优秀的开源项目

一、灵魂四连问1.1 为什么要读源代码1.2 如何选择项目1.3 如何阅读源码1.4 有实际的案例么接下来小码哥就以最受欢迎的 Axios 为例，来分享一下读源码的思路与技巧。二、如何品读 Axios？2.1 走进 AxiosAxios 是一个基于 Promise 的 HTTP 客户端，同时支持浏览器和 Node.js 环境。它是一个优秀的 HTTP 客户端，被广泛地应用在大量的 Web 项目中。由上图可知，Axios项目的 Star 数为78.1..

2021-04-28 13:46:39 108

原创你不知道的 Proxy

序言：对于vue-next项目中的@vue/reactivity模块，也是利用 Proxy 来实现响应式。因此，如果你要学习@vue/reactivity模块的话，就需要先掌握 Proxy。小码哥将从 6 个方面入手，带你一步一步揭开 Proxy 对象的神秘面纱。阅读完本文，你将了解以下内容：代理的作用； Proxy 对象与 Reflect 对象的相关知识； Proxy 对象的 6 个使用场景；使用 Proxy 对象时的一些注意事项； Proxy 在开源项目中的应用。一、聊一...

2021-04-28 08:49:46 429

原创 JS 中如何实现并发控制？

一、并发控制简介在日常开发过程中，你可能会遇到并发控制的场景，比如控制请求并发数。那么在 JavaScript 中如何实现并发控制呢？在回答这个问题之前，我们来简单介绍一下并发控制。假设有 6 个待办任务要执行，而我们希望限制同时执行的任务个数，即最多只有 2 个任务能同时执行。当正在执行任务列表中的任何 1 个任务完成后，程序会自动从待办任务列表中获取新的待办任务并把该任务添加到正在执行任务列表中。为了让大家能够更直观地理解上述的过程，小码哥特意画了以下 3 张图：1.1 阶段一...

2021-04-27 16:57:53 1687

原创 JS 中如何实现大文件多线程并行下载？

本文小码哥哥将介绍如何利用 async-pool 这个库提供的 asyncPool 函数来实现大文件的并行下载。相信有些小伙伴已经了解大文件上传的解决方案，在上传大文件时，为了提高上传的效率，我们一般会使用 Blob.slice 方法对大文件按照指定的大小进行切割，然后在开启多线程进行分块上传，等所有分块都成功上传后，再通知服务端进行分块合并。那么对大文件下载来说，我们能否采用类似的思想呢？在服务端支持 Range 请求首部的条件下，我们也是可以实现多线程分块下载的功能，具体如下图所示：看

2021-04-27 15:17:11 1575

原创常见面试题之一：var、let 及 const 区别

什么是提升？什么是暂时性死区？var、let 及 const 区别？对于这个问题，我们应该先来了解提升（hoisting）这个概念。console.log(a) // undefinedvar a = 1从上述代码中我们可以发现，虽然变量还没有被声明，但是我们却可以使用这个未被声明的变量，这种情况就叫做提升，并且提升的是声明。对于这种情况，我们可以把代码这样来看var aconsole.log(a) // undefineda = 1接下来我们再来看一个例子var a

2021-04-27 07:28:42 533 1

原创你真的了解 call、apply 及 bind 函数的实现原理吗

序言：现如今很多开发者对于程序开发只停留在用的层面上，从不去思考这个方法究竟为什么能这么用。常言道看物看本质，解决问题才能更直观的发现问题所在。直击问题根源，而不是治标不治本！相信大家都知道call,apply及bind函数的用法，大致用义为绑定事件对象。但是大家有没有真正想过使用这个方法它的背后到底是做了什么处理呢？有没有想过内部是怎样实现这个函数的呢？首先从以下几点来考虑如何实现这几个函数不传入第一个参数，那么上下文默认为window 改变了this指向，让新的对象可以执行该函数，并...

2021-04-26 13:29:20 136

原创从proto和prototype来深入理解JS对象和原型链

就标题而言，这是七八篇里起得最满意的，高大上，即使外行人也会不明觉厉！????不过不是开玩笑，本文的确打算从__proto__和prototype这两个容易混淆来理解JS的终极命题之一：对象与原型链。是时候亮出我多年的神器图了__proto__和prototype__proto__引用《JavaScript权威指南》的一段描述：Every JavaScript object has a second JavaScript object (or null ,but this i

2021-04-26 07:36:38 105

原创 @babel/plugin-transform-runtime 到底是什么？

很多初学者在刚接触 babel 的时候，通常会看到这样一个报错信息：ReferenceError: regeneratorRuntime is not defined这个报错表面上是由于 async function 语法被 babel 转译之后的代码使用了 regeneratorRuntime 这个变量，但是这个变量在最终的代码里未定义造成的报错。babel 在转译的时候，会将源代码分成 syntax 和 api 两部分来处理：syntax：类似于展开对象、optional chain、

2021-04-25 15:17:12 1543

原创 Vue的核心思想是什么?

Vue核心思想：数据驱动、组件化一,数据驱动传统的前端数据交互是用Ajax从服务端获取数据，然后操作DOM来改变视图；或者前端交互要改变数据时，又要再来一次上述步骤，而手动操作DOM是一个繁琐的过程且易出错。Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它让开发者省去了操作DOM的过程，只需要改变数据。Vue会通过Dircetives指令，对DOM做一层封装，当数据发生改变会通知指令去修改对应的DOM，数据驱动DOM变化，DOM是数据的一

2021-04-25 07:46:30 2347

james324的博客