2020年07月_飞翔的熊blabla

转载 React Hooks 原理

前言目前，Hooks 应该是 React 中最火的概念了，在阅读这篇文章之前，希望你已经了解了基本的 Hooks 用法。在使用 Hooks 的时候，我们可能会有很多疑惑为什么只能在函数最外层调用 Hook，不要在循环、条件判断或者子函数中调用？为什么 useEffect 第二个参数是空数组，就相当于 ComponentDidMount ，只会执行一次？自定义的 Hook 是如何影响使用它的函数组件的？ Capture Value 特性是如何产生的？ ......这篇文章我们不会讲解

2020-07-27 19:31:45 420

转载 JS——blob

1、【HTML5】Blob对象（1）写在前面：本小节主要介绍Blob对象属性及作用，通过demo介绍blob对象的应用场景。blob对象：一直以来，JS都没有比较好的可以直接处理二进制的方法。而blob的存在，允许我们可以通过js直接操作二进制数据。“一个blob对象就是一个包含有只读原始数据的类文件对象。blob对象中的数据并不一定得是JavaScript中的原生形式。file接口基于blob，继承了blob的功能，并且扩展支持了用户计算机上的本地文件”Blob对象可以看作是存放二进制

2020-07-26 18:55:20 6930

转载 50个最新TypeScript面试题合集 – TypeScript开发教程

以下是最常见的Typescript面试问题和答案。js项目如何升级为ts？有何影响？(参考:https://www.cnblogs.com/thyong/p/12182579.html) ts 基础类型都哪些，他们跟js的区别 ts为什么会流行？与ECMA新规范的关系？ tslint都能配置哪些功能？对开发流程有何影响？如何使用js实现类型约束，枚举等特性么？(仅需要在变量、函数的参数、函数的返回值位置加上...:类型...) 如何理解接口，泛型?1、什么是Typescript?T

2020-07-25 16:51:48 12280

转载再也不怕面试官问你express和koa的区别了

前言用了那么多年的express.js，终于有时间来深入学习express，然后顺便再和koa2的实现方式对比一下。老实说，还没看express.js源码之前，一直觉得express.js还是很不错的，无论从api设计，还是使用上都是可以的。但是这次阅读完express代码之后，我可能改变想法了。虽然express.js有着精妙的中间件设计，但是以当前js标准来说，这种精妙的设计在现在可以说是太复杂。里面的层层回调和递归，不花一定的时间还真的很难读懂。而koa2的代码呢？简直可以用四个字评论：精

2020-07-25 15:56:43 822

转载 service worker在移动端H5项目的应用

1. PWA和Service Worker的关系PWA (Progressive Web Apps) 不是一项技术，也不是一个框架，我们可以把她理解为一种模式，一种通过应用一些技术将 Web App 在安全、性能和体验等方面带来渐进式的提升的一种 Web App的模式。对于 webview 来说，Service Worker 是一个独立于js主线程的一种 Web Worker 线程，一个独立于主线程的 Context，但是面向开发者来说 Service Worker 的形态其实就是一个需要开发者...

2020-07-25 15:55:03 1003

转载从零开始搭建前端监控系统（一）——web探针sdk

前言本系列文章旨在讲解如何从零开始搭建前端监控系统。项目已经开源项目地址：github.com/bombayjs/bo… (web sdk) github.com/bombayjs/bo… (服务端，用于提供api)(未完) github.com/bombayjs/bo… （后台管理系统，可视化数据等）（未完）您的支持是我们不断前进的动力。喜欢请start!!!喜欢请start!!!喜欢请start!!!本文是该系列第一篇，web探针sdk的设计与开发，重点讲解sdk包

2020-07-22 09:50:51 2522

转载彻底搞懂浏览器Event-loop

前段时间，和头条的小伙伴聊天问头条面试前端会问哪些问题，他称如果是他面试的话，event-loop肯定是要问的。那天聊了蛮多，event-loop算是给我留下了很深的印象，原因很简单，因为之前我从未深入了解过，如果是面试的时候，我遇到了这个问题，估计回答得肯定不如人意。因此，最近我阅读了一些相关的文章，并细细梳理了一番，输出了本篇博文，希望能帮助大家搞懂浏览器的event-loop。后续会补充node中的event-loop。1. 预备知识JavaScript的运行机制:（1）所有同步任务都在

2020-07-22 09:45:17 168

转载 Redux 入门教程（二）：中间件与异步操作

上一篇文章，我介绍了 Redux 的基本做法：用户发出 Action，Reducer 函数算出新的 State，View 重新渲染。但是，一个关键问题没有解决：异步操作怎么办？Action 发出以后，Reducer 立即算出 State，这叫做同步；Action 发出以后，过一段时间再执行 Reducer，这就是异步。怎么才能 Reducer 在异步操作结束后自动执行呢？这就要用到新的工具：中间件（middleware）。一、中间件的概念为了理解中间件，让我们站在框架作者的角度思考.

2020-07-19 17:13:26 173

转载 Redux 入门教程（一）：基本用法

一年半前，我写了《React 入门实例教程》，介绍了 React 的基本用法。React 只是 DOM 的一个抽象层，并不是 Web 应用的完整解决方案。有两个方面，它没涉及。代码结构组件之间的通信对于大型的复杂应用来说，这两方面恰恰是最关键的。因此，只用 React 没法写大型应用。为了解决这个问题，2014年 Facebook 提出了Flux架构的概念，引发了很多的实现。2015年，Redux出现，将 Flux 与函数式编程结合一起，很短时间内就成为了最热门的前端架构。...

2020-07-19 17:11:32 206

转载 setTimeout和setImmediate到底谁先执行，本文让你彻底理解Event Loop

笔者以前面试的时候经常遇到写一堆setTimeout,setImmediate来问哪个先执行。本文主要就是来讲这个问题的，但是不是简单的讲讲哪个先，哪个后。笼统的知道setImmediate比setTimeout(fn, 0)先执行是不够的，因为有些情况下setTimeout(fn, 0)是会比setImmediate先执行的。要彻底搞明白这个问题，我们需要系统的学习JS的异步机制和底层原理。本文就会从异步基本概念出发，一直讲到Event Loop的底层原理，让你彻底搞懂setTimeout,setImme

2020-07-19 10:27:22 2218 5

转载 nodejs真的是单线程吗？

nodejs真的是单线程吗？[原文]一、多线程与单线程像java、python这个可以具有多线程的语言。多线程同步模式是这样的，将cpu分成几个线程，每个线程同步运行。而node.js采用单线程异步非阻塞模式，也就是说每一个计算独占cpu，遇到I/O请求不阻塞后面的计算，当I/O完成后，以事件的方式通知，继续执行计算2。事件驱动、异步、单线程、非阻塞I/O，这是我们听得最多的关于nodejs的介绍。看到上面的关键字，可能我们会好奇：为什么在浏览器中运行的 Javascrip.

2020-07-17 17:25:18 251

转载 React 点击事件的 bind(this) 传参问题

本文为大家介绍 React 中的点击事件如何传参。问题描述先来看一下问题的描述吧。如下图：那么我该怎么解决这个问题呢？以下是 HTML 代码，clickFunction是点击事件函数，thisStatus是要传递的参数:<div onClick={this.clickFunction.bind(this, thisStatus)>收</div>以下是 React 代码的函数接收参数方式，thisStatus函数接受的参数:clickFunct...

2020-07-17 14:43:40 440

转载 nodejs异常处理

因为nodejs是单线程的，所以一旦发生错误或异常，如果没有捕获，整个系统就会挂掉。错误异常有两种场景的出现，一种是代码运行中throw new error没有被捕获，另一种是Promise的失败回调函数，没有对应的reject回调函数处理，针对这两种情况Nodejs都有默认的统一处理方式，就是给整个进程process对象监听相应的错误事件。比如process.on('uncaughtException',function(err) {} ) //监听未捕获的异常process.on..

2020-07-17 14:01:44 868

转载上篇：es5、es6、es7中的异步写法

1.1 es5 —— 回调把异步执行的函数放进回调函数中是最原始的做法。但是异步的层次太多时，出现的回调嵌套导致代码相当难看并且难以维护。taskAsyncA(function () { taskAsyncB(function () { taskAsyncC(function () { ... }) });});于是出现了很多异步流程控制的包。说白了就是把多层嵌套的异步代码展平了。如async.js 和 bluebird/Promise。1.1.

2020-07-16 09:45:44 247

转载下篇：express、koa1、koa2的中间件原理

2.1 express@4.15.32.1.1 例子 1 'use strict'; 2 3 var express = require('express'); 4 var app = express(); 5 6 app.use((req, res, next) => { 7 console.log('middleware 1 before'); 8 next(); 9 console.log('middleware 1 after'); 1

2020-07-15 18:02:22 205

转载 es5、es6、es7中的异步写法

1.1 es5 —— 回调把异步执行的函数放进回调函数中是最原始的做法。但是异步的层次太多时，出现的回调嵌套导致代码相当难看并且难以维护。taskAsyncA(function () { taskAsyncB(function () { taskAsyncC(function () { ... }) });});于是出现了很多异步流程控制的包。说白了就是把多层嵌套的异步代码展平了。如async.js 和 bluebird/Promise。1.1.

2020-07-15 18:00:58 737

转载 Cookie的Secure属性和HttpOnly属性

　　基于安全的考虑，需要给cookie加上Secure和HttpOnly属性，HttpOnly比较好理解，设置HttpOnly=true的cookie不能被js获取到，无法用document.cookie打出cookie的内容。Secure属性是说如果一个cookie被设置了Secure=true，那么这个cookie只能用https协议发送给服务器，用http协议是不发送的。换句话说，cookie是在https的情况下创建的，而且他的Secure=true，那么之后你一直用https访问其他的页面（比

2020-07-14 16:57:37 1186

转载详解JS函数柯里化

第一次看到柯里化这个词的时候，还是在看一篇算法相关的博客提到把函数柯里化，那时一看这个词就感觉很高端，实际上当你了解了后才发现其实就是高阶函数的一个特殊用法。果然是不管作用怎么样都要有个高端的名字才有用。首先看看柯里化到底是什么？维基百科上说道：柯里化，英语：Currying(果然是满满的英译中的既视感)，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。看这个解释有一点抽象，我们就拿被做了无数次示例的add函数

2020-07-12 14:35:03 147

转载手写个图片懒加载和事件的节流与防抖

转自于:https://ah.yxlblog.com/index/article/145.html前记在一些图片量比较大的网站（比如电商网站首页，或者团购网站、小游戏首页等），如果我们尝试在用户打开页面的时候，就把所有的图片资源加载完毕，那么很可能会造成白屏、卡顿等现象。但是打开页面的瞬间，呈现给用户的只有屏幕的一部分（我们称之为首屏）。只要我们可以在页面打开的时候把首屏的图片资源加载出来就可以了。/* * 分析 * 1、获取视口的高度 * 2、图片距离可视窗口的顶部距离 *.

2020-07-11 22:40:20 323

转载微信为什么不禁拼多多？诱导分享到底怎么判

「猜画小歌」都刷屏朋友圈了，怎么还没有被禁？难道真是背靠大佬有人撑腰？拼多多那么影响用户体验了，为什么微信不管一管？投资了待遇差这么多吗？新世相还没改变潮水的方向呢，怎么链接就打不开了？是不是得罪人了？用户对微信诱导分享的判定向来抱有诸多的质疑。今天，我们就借着刚刚上市的拼多多，和你讲讲微信的诱导分享。在平台违规边缘试探的拼多多？首先我们要了解，拼多多那些鼓励用户分享的操...

2020-07-10 11:46:04 1274

转载 10 分钟理解 BFC 原理

一、常见定位方案在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案:普通流 (normal flow)在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。浮动 (float)在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽

2020-07-09 17:58:04 197

转载 tslint配置

"rules": { // TS特性 "member-access": true, // 设置成员对象的访问权限（public,private,protect) "member-ordering": [// 设置修饰符顺序 true, { "order": [ "public-static-field", ...

2020-07-09 17:35:41 1086

转载 ESLint语法自定义规则

ESlint有助我们写成风格统一的代码，但是其中有一些默认配置并不符合个人的习惯，我们可以手动对其进行更改。在vue-cli创建的项目中，所有的ESlint配置都是写在.eslintrc.js中的如果是在.eslintrc.js文件中，所有的属性都通过module.exports = {}进行导出，如果是.eslintrc.json文件，则属性直接定义在文件中即可。下面是一些常用属性的配置代码：eslint解析器配置项：指定js的导入方式，module是指通过模块导入，默认值为script(表示通

2020-07-09 17:09:57 2159

转载 node.js使用cluster实现多进程

nodeJS 是一门单线程!异步!非阻塞语言! 单CPUpm2的内部和cluster内部实现其实是一个道理，都是封装了一层child_process--fork. 而child_process--fork 则是封装了unix 系统的fork 方法。nodeJS的master 开始并不是上帝，他只是一个小小的太监，每次请求(妃子)来的时候，他只会默默的看着几个worker小皇帝相互争夺，如果某个worker胜出，则其他的worker也就草草了事，等下一个请求过来。所以说，每来一次请求，都会引起一

2020-07-08 19:32:12 396

转载二叉树中常见的面试题

1用一个函数判断一棵树是否平衡题目：实现一个函数检查一棵树是否平衡。对于这个问题而言，平衡指的是这棵树任意两个叶子结点到根结点的距离之差不大于1。注意，对于这道题，要审清题意。它并不是让你判断一棵树是否为平衡二叉树。平衡二叉树的定义为：它是一棵空树或它的左右两个子树的高度差的绝对值不超过1，并且左右两个子树都是一棵平衡二叉树。而本题的平衡指的是这棵树任意两个叶子结点到根结点的距离之差不大于1。（程序员面试金典）思路：对于本题，只需要求出离根结点最近和最远的叶子结点，然后看它们到根结.

2020-07-08 13:08:45 515

转载 Node.js性能分析神器Easy-Monitor

摘要:使用Easy-Monitor，可以准确定位Node.js应用的性能瓶颈，帮助我们优化代码性能。当应用出现性能问题时，最大的问题在于：如何准确定位造成性能瓶颈的代码呢？对于Node.js开发者，这里推荐一下Easy-Monitor，它应该是阿里巴巴某个90后程序员开发的。这个NPM模块可以帮助我们快速定位性能瓶颈。问题当负载较高时，某个后端模块的响应时间慢了很多，甚至出现超时错误”504 Gateway Time”。通过查看监控可知，这个模块在高峰期的CPU使用量是满负荷的，这有可能是问题.

2020-07-07 14:32:27 1552

转载 HelloIndexedDB：最便捷的indexedDB操作工具

开发文档:https://www.tangshuang.net/5681.htmlHelloIndexedDB是对indexedDB复杂api的高级封装，采用Promise，通过高度抽象，让indexedDB的操作极其方便。对于初入门的开发者而言，可以像localStorage一样极其方便的使用indexedDB。虽然市面上有很多indexedDB封装的库，但它们都太过复杂，使用它们需要理解不同的概念，以至于刚入门的开发者望而生畏。而使用HelloIndexedDB，则无需理解任何概念，可以立即上手

2020-07-05 20:53:23 726

转载浏览器数据库 IndexedDB 入门教程

一、概述随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。通俗地说，IndexedDB 就是浏览器提供的本地数据库，它可以

2020-07-05 20:48:01 1023 1

飞翔的熊blabla