- 博客(48)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 Node.js连接Mysql
使用nodejs 连接mysql非常简单，可以使用下面几个简单步骤：1 安装mysqlcnpm install mysql;2 连接数据库var mysql = require('mysql');var connection = mysql.createConnection({ host : 'localhost', user : 'root', password : '123456', database : 'test'}); connecti
2021-02-07 19:32:05
352
原创 Javascript异步遍历器
遍历器是ES6新增的一个属性，用于遍历得到一个数据的值，调用next方法可以依次拿到一个对象{value, done}function idMaker() { let index = 0; next() { return { value: index++, done: false } }}const it = idMaker();it.next(); //{value: 0, done: false}it.next(); //{value: 1, done: false}上面代.
2021-01-31 23:17:35
463
原创 ES6之decorator
ES6的decorator相信大家都听说过，但是用的可能会比较少，今天就一起来看一下这个decorator是干嘛的装饰器(decorator)是一种与类相关的语法，用来注释或修改类和类的方法装饰器是一种函数，使用@+函数名的写法，它可以放在类和类方法的定义前面1 类的装饰器装饰器可以用来修饰整个类@testableclass MyTestableClass { // ...}function testable(target) { target.isTestable = true.
2021-01-23 22:56:33
624
1
原创 ES6 module的export 和export default的使用
1 概述：commonjS：服务器，同步方式加载模块AMD：浏览器，异步的方式ES6 module 取代前两个，成为浏览器和服务器通过的模块解决方案静态化，编译阶段就能确定模块依赖关系，以及输入和输出的变量，commonJS和AMD只能在运行时确定这些东西// CommonJS模块let { stat, exists, readfile } = require('fs');// 等同于let _fs = require('fs');let stat = _fs.stat;let exi
2021-01-16 22:33:26
575
原创 javascript连等赋值法， var a = b = 3， 你真的懂么
相信大家很多时候会遇到这样定义变量的方法：var a = b = 3; 结果大家也都知道，a b的值都是3，但是他们有什么区别呢？1 var a = b = 3;发生了什么？
2021-01-08 21:34:25
1348
原创 ES6中的super关键字详解
ES6重新实现了类的继承，而在继承的过程中，super关键字实现了至关重要的作用，可以说理解不了super关键字，也就掌握不了类的继承，今天我们就一起来盘盘super这个关键字首先抛出一个概念： super这个关键字，既可以当作函数使用，又可以当作对象使用 第一种情况：super作为函数时，代表父类的构造函数 ES6要求，子类的构造函数，必须执行一次super函数class A {}class B extends A { constructor() { super();//子类.
2020-12-31 14:24:37
4122
3
原创 npm包之bluebird
Blue是nodejs最出名的Promise实现，除了实现标准的Promise规范之外，还提供了标准的包装方法，可以将nodejs回调风格的函数包装成PromiseBluebird的使用https://www.npmjs.com/package/bluebird1 安装依赖npm install -S bluebird2 使用bluebird.promisifyAll()方法将nodejs回调风格的函数包装成Promise对象bluebird.promisifyAll(target, op.
2020-12-28 00:12:09
1041
原创 启动nodejs时报错 internal/modules/cjs/loader.js:584的解决办法
使用koa框架创建一个nodejs工程，运行时报错 internal/modules/cjs/loader.js:584,如何解决呢？今天在学习koa框架创建nodejs服务端程序时，启动node，报错internal/modules/cjs/loader.js:584执行安装 cnpm install -D escape-html, 然后再执行启动命令，又会出现如下图：再安装，还是如此，貌似喋喋不休，怎么解决呢？一个解决办法：删除node_modules文件夹。然后重新执行cnpm ins.
2020-12-19 00:26:21
10636
1
原创 Promise 值穿透 特性
今天看promise相关知识，发现值穿透这个特性之前并不太了解，特此记录一下代码：Promise.resolve(1) .then(2) // 注意这里 .then(Promise.resolve(3)) .then(console.log)此代码输出结果是1再看下面代码：Promise.resolve('foo') .then(Promise.resolve('bar')) .then(function(result){ c.
2020-12-08 11:39:46
3791
3
原创 javascript常见错误及处理方法
今天看到公众号一片文章讲前端js的常见错误及处理方法，感觉很有用，特此加以验证并做记录，也希望让更多的人有所收获常见的错误类型一般有以下几种：RangeError: 主要是出现在数组的下标使用时，下标超出了界限ReferenceError： 使用一个没有定义的变量会出现引用类型错误SyntaxError：语法错误，比如写代码时少个括号啊，或者该使用逗号的使用了分号TypeError: 类型错误，例如获取undefined的属性下面具体分析一下可能产生错误的几种情形1、RangeErro.
2020-12-06 22:31:55
1155
1
原创 NodeJs之process.argv属性
NodeJs的process是一个很重要的属性，今天一起来探究一下process下的argv属性process.argv 返回一个数组，其中包含当Node.js进程启动时传入的命令行参数，第一个是启动是process.execPath，第二个是执行的JavaScript文件的路径，其余的则是任何额外输入的参数，举例说明：argv.jsconsole.log(process.argv); //简单的一行代码，看一下输入的数组是什么执行命令：$ node argv.js '参数1' '参数2'.
2020-11-29 17:29:14
1369
1
原创 JavaScript使用ES6方式去重数组
在平时开发过程中，数组是我们经常面临的一种数据格式，有时候需要把一个数组里重复的元素去掉，今天就介绍一个最简单的方法，使用ES6中的Set结构假如有如下数组：[‘a’, ‘b’, ‘b’, ‘a’, ‘c’], 我们的目的是想要得到[‘a’, ‘b’, ‘c’], 那么我们可以这么做：let arr = ['a', 'b', 'b', 'a', 'c'];let uniqArr = [...new Set(arr)];// let uniqArr = Array.from(new Set(arr)
2020-11-23 14:28:24
150
原创 vue-router参数传递的四种方法
vue-router参数传递声明式导航和编程式导航router.push()都可以传参router-link的传参方式主要有：1 使用name传递参数，在router.js中增加name参数，对应的组件中使用$route.name来获取routes: [{ path: '/', name: 'Hello', //name也可以是一个对象，name: {parameter: 111, age: 'xxz'} component: Hello}]2 通过, 页面上使用
2020-11-16 17:49:13
2474
原创 JavaScript如何截取字符串的最后一位
工作开发过程中，经常会需要截取字符串的最后一位，下面来一起看一下该如何操作方法1：String对象的charAt方法charAt方法的作用是返回指定位置的字符str.charAt(str.length - 1)方法2：String对象的substr方法substr方法可以在字符中抽取从开始位置的指定长度的字符str.substr(str.length - 1, 1)上述代码中也可以省略第二个参数，表示截取从开始位置到结尾所有的字符str.substr(str.length - 1).
2020-11-09 10:51:12
41123
原创 如何撤销一次commit
平时我们在提交代码的时候，有时候可能会commit了不需要的代码，或者错误代码，这时候就需要我们修改commit内容，就简单的方法是回退一下，然后修改完代码再重新commit一般流程为：1、 添加修改文件：git add . 2、添加commit注释：git commit -m //"本次修改的地方"3、pushgit push但是如果我们在第二步执行完之后，又发现了新的问题，需要回退一步怎么办？我们可以使用下面这个命令：git reset --soft HEAD^这样就.
2020-11-02 10:53:45
2747
原创 HTML中meta标签都有什么作用？
一直以来，对HTML中的meta标签一知半解，这次抽时间好好总结一下meta标签 定义： meta元素提供有关页面的元信息(meta-information), 比如针对 搜索引擎和更新频度的描述和关键词,搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等, 实现比较简单，客户端发起请求，服务端返回数据来看一下HTTP/0.9的一个完整的请求流程.
2020-10-11 22:18:50
435
原创 CSS如何影响首次加载时的白屏时间？
上一篇文章我们介绍了DOM的概念，以及JavaScript是如何阻塞DOM生成的，今天我们继续探究CSS的工作原理，以及对页面渲染的影响渲染流程结合下面的代码看一下渲染流程：//theme.cssdiv { color: green; background-color: #000;}html片段：<html><head> <link href="theme.css" rel="stylesheet"></head&g.
2020-10-07 21:38:58
251
原创 浏览器工作原理(22) - JavaScript是如何影响DOM树构建的？
上一篇文章我们讲了chrome性能面板的使用，了解了请求过程中的几个性能指标，这篇文章我们一起来看一下DOM树是如何生成的，本文主要有两大块内容:第一个是解析过程中遇到JavaScript脚本，DOM解析器是如何处理的？第二个是DOM解析器是如何处理跨站点资源的？什么是DOM从网络传给渲染引擎的是HTML文档字节流，并无法执行，需要转换为渲染引擎能够识别的DOM树，在渲染引擎中，DOM有三个层面的作用:从页面的视觉来看，DOM是生成页面的基础数据结构从JavaScript脚本的角度来看，DOM.
2020-09-29 23:46:48
1323
原创 浏览器工作原理(21) - Chrome开发者工具：利用网络面板做性能分析
上一篇文章我们讲了async/await的用法，了解了其工作原理，接下来我们继续学习浏览器其他功能chrome开发者工具chrome开发者工具DevTools是浏览器的调试工具，内嵌于Google的Chrome的浏览器中开发者工具有很多重要的面板，比如与性能相关的网络面板，Performance面板，内存面板等，与调试相关的Element面板，Source面板，Console面板等从图中可以看出，它一共包含了 10 个功能面板，包括了 Elements、Console、Sources、NetW.
2020-09-22 23:12:25
580
原创 浏览器工作原理(20) - Async / Await 方法
上一篇文章中我们Promise的相关知识，很好的处理了回调的问题，但是也充满了then方法，如果处理流程很复杂，那么then就会很多，也会显得不太友好现在有这样一个场景，先请求一个资源，得到结果之后，再去请求 另外一个资源，fetch返回的是一个Promise对象，是浏览器原生支持的，并没有使用XMLHTTPRequest来封装fetch('https://www.example1.org') .then((response) => { console.log.
2020-09-21 19:49:37
729
原创 浏览器工作原理(19) - 使用promise， 告别回调函数
上一篇文章 我们了解了微任务是如何工作的，今天主要来学习一下微任务的一个实现 — Promise，BOM和DOM中大多数的API都是建立在Promise上， 可以说Promise已经成为现代前端的一把利刃我们先从JavaScript引入Promise的动机谈起，了解一下为什么引入promise，它又能解决什么问题呢？异步编程：代码逻辑不连贯页面的事件是通过循环系统来维护的，页面中的任务都是执行在主线程之上的，而那些比较耗时的任务，比如下载网络文件，获取用户设备信息等，这些任务都不会放在主线程，而是.
2020-09-19 01:19:05
360
原创 浏览器工作原理(18) - 宏任务和微任务的概念
上一篇文章中我们了解了什么是回调，也知道了什么是同步回调和异步回调，学习了一个XMLHttpRequest的完整流程，这次我们再说一下宏任务和微任务的概念随着浏览器的应用越来越广泛，消息队列这种粗粒度的事件管理机制已经不能满足部分领域的需求了，迫切需要更精细的管理机制 - 微任务， 它可以在实时性和效率直接做一个有效的权衡...
2020-09-17 23:12:59
1322
2
原创 浏览器工作原理(17) - XMLHttpRequest的实现原理
上一篇文章中讲了setTimeout的定义方法以及清除方法，并且也知道了setTimeout的任务不能放在消息队列中因为这样无法在指定的事件之后执行任务，需要将延迟执行的任务放在另外一个消息队列中，这样执行完普通函数执行就可以去拿到延迟执行的任务这篇文章我们继续往下走，看看XMLHttpRequest是如何实现的有了JavaScript之后，我们通过DOM就可以对页面元素进行各种操作了，这属于页面层面的修改，如果页面一部分是需要从后端获取数据，那么想要修改这一部分就需要将整个页面进行刷新。而XML.
2020-09-09 15:08:08
1418
原创 浏览器工作原理(16) - setTimeout实现原理
上一篇文章讲了消息队列和事件循环的有关知识，同时引出了微任务和宏任务的概念，这篇文章继续往下面说，这次来一起看看setTimeout这个函数相信各位在平时开发的过程中，经常会用到这个setTimeout函数，并且觉得也不是很难，就是一个定时器，用来指定在多少毫秒之后执行某个函数，返回的是一个编号，代表这个setTimeout定时器，编号的作用是用来清除该定时器的时候用，基本用法如下代码：function showName(){ console.log("小明")}var timerID = .
2020-09-05 23:44:13
734
原创 浏览器工作原理(15) - 消息队列和事件循环
上一篇文章讲了V8引擎编译器和解释器，了解了V8是如何执行一段代码的，接下来的文章再着重分析一下浏览器中的页面循环系统浏览器每个渲染进程都有一个主线程，主线程负责处理DOM，计算样式，处理布局，还需要执行JavaScript代码以及交互，显得非常的繁忙。那么这么多的任务，主线程是怎么按顺序执行的呢？这时候就要有一个系统来专门负责调度这些任务，这个系统就是今天的主角 – 消息队列和事件循环系统使用单线程处理安排好的任务比如有一下几个任务：任务 1：1+2任务 2：20/5任务 3：7*8任.
2020-09-01 23:41:04
446
原创 浏览器工作原理(14) - 编译器和解释器：V8是如何执行一段JavaScript代码的？
上一篇垃圾回收机制讲解了栈空间和堆空间分别是如何进行垃圾回收的，这篇我们继续将JavaScript是如何执行的 — 编译器和解释器今天我们继续从JavaScript引擎V8的角度来分析JavaScript代码是如何被执行的想要深入理解V8的运行机制和工作原理，我们有必要先了解一些概念， 例如： 编译器(compiler)、解释器(Interpreter)、抽象语法树(AST)、字节码(Bytecode)、即时编译器(JIT)编译器和解释器由于机器并不能直接识别我们的高级语言，必须将代码转换为机器.
2020-08-29 23:00:17
581
原创 浏览器工作原理(13) -垃圾回收，垃圾数据是如何自动回收的？
上一篇文章中我们了解了JavaScript中数据是如何存储的，并通过实际例子分析了原始数据类型是存储在栈空间中的，引用类型的数据是存储在堆空间中的，通过这种分配方式，我们解决了数据的内存分配的问题。但是实际的执行过程中，有些数据被使用之后，可能就不需要了，我们称这些数据为垃圾数据， 如果垃圾数据不进行及时清理，那么内存会越用越多，这时就需要一个垃圾回收机制，来回收垃圾释放内存不同语言的垃圾回收机制垃圾数据回收分为 手动回收 和 自动回收 两种策略C/C++语言的垃圾回收是手动来执行的(使用fre.
2020-08-27 00:34:23
395
原创 浏览器工作原理(12) - 栈空间和堆空间：数据是如何存储的？
上一篇文章从JavaScript执行上下文的角度讲清楚this，我们讲解了this的执行机制，以及机制存在的弊端，并给出了两种结局方案，接下来的三节内容主要讲V8的工作原理，栈空间和堆空间、垃圾回收机制、编译器和解释器的概念JavaScript内存机制或许大多数前端开发者对JavaScript的内存机制并不是很了解，平时也不会去关注这方面的知识，但是如果想对JavaScript有一个更深入的了解，注重前端应用的性能，那么这个知识点必须掌握。一段疑惑的代码先看一下这段代码：function fo.
2020-08-19 00:48:09
787
2
原创 浏览器工作原理(11) - 从JavaScript执行上下文的角度讲清楚this
在上一篇文章中我们讲解了作用域链和闭包的知识，认识了调用栈、作用域链、和闭包的知识，这次我们继续浏览器的工作原理 – 从执行上下文的角度讲清楚this的概念JavaScript中的this是什么在前面几篇文章中，我们提到执行上下文中包含了变量环境、词法环境、外部环境，但其实还有一个 this 没有提及，具体你可以参考下图：从图中可以看出，this 是和执行上下文绑定的，也就是说每个执行上下文中都有一个 this，在前面的文章中我们说到，执行上下文主要分为三种–全局执行上下文、函数执行上下文和 ev.
2020-08-16 19:05:28
354
原创 浏览器工作原理(10)-作用域链和闭包
上一篇文章我们分析了块级作用域是 通过创建执行上下文中变量环境和词法环境来实现的，这次我们来分析一下作用域链的概念作用域链是理解闭包的基础，且闭包在JavaScript中无处不在，接下来一起看看什么是 作用域链 ，然后通过作用域链进而掌握 闭包的概念话不多说，看下面一段代码：function bar() { console.log(myName)}function foo() { var myName = "inner" bar()}var myName = "ou.
2020-08-09 16:28:05
301
原创 浏览器工作原理(9)-var let 和const, 块作用域到底是怎么形成的？
在上一篇文章中我们讲解了关于JavaScript变量提升的内容，理解了JavaScript代码先编译再执行，变量提升导致很多代码的执行与实际视觉不一致，也算是JavaScript设计的一个缺陷为了修正这个缺陷，ES6语法引入了 let、const关键字和块级作用域 的概念，但是JavaScript必须保持向下兼容，所以var声明变量的方式会依旧存在。这篇文章主要是从根本上讲解为什么会有变量提升，以及如何避免此种情况的发生。作用域(Scope)为什么JavaScript中会存在变量提升的这个特性，这.
2020-07-31 00:27:27
415
原创 浏览器工作原理(8)-javascript栈溢出
前面文章中说到，当一段代码被执行时，JavaScript引擎首先会对其进行编译，并创建执行上下文那么什么样的代码片段会被编译，并创建执行上下文呢？一般下面三种情况都会被编译，并创建执行上下文：JavaScript执行全局代码，会编译全局代码并创建执行上下文，并且在整个页面的生存周期，全局执行上下文只有一份JavaScript调用一个函数的时候，函数体内的代码会被编译并创建执行上下文，一般情况下，函数调用结束，上下文也会被销毁使用eval函数，eval函数内的代码也会被编译，并创建执行上下文.
2020-07-26 23:53:19
545
原创 浏览器工作原理(7)-javascript执行顺序
接下来的章节开始讲JavaScript的执行机制想要很好的理解JavaScript语言本身，必须先理解JavaScript的执行上下文首先看下面一段代码showName()console.log(myname)var myname = 'xiaoming'function showName() { console.log('函数shwName被执行')}执行结果是：第一行： 函数showName被执行，第二行：undefined从上面的执行结果可以得出结论：1 执行过程中使用了未.
2020-07-26 22:02:03
270
原创 浏览器工作原理（6）-渲染流程，HTML、CSS、JavaScript是如何变成页面的
上一章节讲了从输入URL到页面展示的一个过程，这次说一下渲染阶段渲染机制比较复杂，渲染模块在执行过程中会被划分为很多子阶段，按照时间轴来分为以下几个阶段：构建DOM树，样式计算，布局阶段，绘制，分块，光栅化，合成。接下来来依次看一下每个阶段：构建DOM树构建DOM树的原因是因为浏览器无法直接理解和使用HTML，但是可以理解DOM树结构，从HTML文件到DOM树生成，是由HTML解析器来完成的，DOM树是保存在内存中树状结构，DOM树只是一个结构，并不具有样式，想要拥有正确的样式，还要进行样式计算。.
2020-07-17 17:40:44
272
原创 浏览器工作原理（5）-从输入URL到页面展示，中间经历了什么
从在地址栏输入URL按下enter键，到页面展示，这中间都发生了什么这是一道常考的面试题，涉及到网络、操作系统、浏览器渲染等问题，看一下李兵老师的一副总结图片，比较全面的总结了其中的过程由上图可知，整个发生过程，涉及到了多个进程共同工作，简单看一下各个进程的工作职责：浏览器进程：用户交互，子进程管理，文件存储网络进程：为浏览器进程和渲染进程提供网络下载服务渲染进程：把网络进程获取到的资源渲染成可以交互的前端页面一起看一下各个步骤都如何工作的：浏览器进程收到URL请求，首先进行信息处理.
2020-07-16 00:34:52
911
原创 浏览器工作原理（4）-HTTP协议，缓存机制
本次内容主要是http请求流程，浏览器的缓存机制HTTP是一种允许浏览器向服务器获取资源的协议先抛出两个问题：第一次访问一个站点会很慢，第二次访问时，速度就快了登录一个网站之后，再次打开，直接处于登录状态，如何实现？这些秘密都存在http的请求过程中浏览器端发起HTTP请求流程如果在浏览器地址栏输入 https://time.geekbang.org/index.html, 接下来浏览器会完成哪些动作呢？1. 构建请求浏览器构建请求行信息，构建好之后，准备发起网络请求GET /i.
2020-07-13 01:16:53
290
原创 浏览器工作原理（3）-TCP协议文件如何从服务器到浏览器
浏览器工作原理-TCP协议，文件如何从服务器到浏览器本周继续学习浏览器工作原理及实践，本次内容来看一下TCP协议确保文件完整的送到至浏览器First Page 是指页面加载到首次开始绘制的时长，而影响这个性能指标的一个重要原因是网络加载速度，网络传输协议无论使用http还是websocket，都是基于TCP/IP的，所以有必要了解一下TCP/IP，对于web的性能调优和问题定位都有很大帮助。在网络传输过程中，其实是将文件拆分为很多数据包来传输，而数据包在传输过程中有很大概率丢失或者出错，这就是常说
2020-07-12 23:59:38
544
原创 浏览器工作原理（2）-进程的理解
Chrome架构：仅仅打开了1个页面，为什么有4个进程？1 并行处理：同一时刻处理多个任务，比如计算如下公式并显示出来A = 1+2B = 20/5C = 7*8这个过程分成四个任务：三个计算，一个显示。正常情况下使用单线程来处理，分为四步依次执行。如果采用多线程，前三个计算任务同时执行，最后再显示，单线程需要四步，而多线程只需要两步，使用并行处理大大提升性能2 线程 VS 进程线程不能独立存在，由进程启动和管理，一个进程是一个程序的运行实例，启动一个程序的时候，操作系统会为该程序创建一块内
2020-07-06 01:04:45
482
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人