Pinoochio的博客

由redux到react-redux再到rematch

Pinoochio — Thu, 23 Dec 2021 20:35:35 +0800

这比较适合看过redux但看了跟没看一样的同学，帮助记忆理清里面的基础知识一. Redux 1. Store Store是保存数据的地方，可以把它看做一个容器。整个应用只能有一个Store。 Redux提供createStore这个函数生成store import { createStore } from 'redux'; const store = createStore(fn); // store也可以接受第二个参数：state的初始值，他会覆盖reducer的state参数中的默认初始值 cons

HTTP1/2/3的发展和区别

Pinoochio — Sat, 04 Sep 2021 17:14:19 +0800

不同版本HTTP 本文是对极客时间里李兵老师讲的浏览器工作原理与实践的笔记记录和总结。 HTTP/0.9 1991年提出，主要用于学术交流。最早出现的HTTP/0.9需求很简单——用来在网络之前传递HTML超文本内容。特点：只有一个请求行（例如：GET /index.html ，用来获取index.html），并没有HTTP 请求头和请求体，因为只需要一个请求行就可以完整表达客户端的需求了。服务器也没有返回头信息，这是因为服务器端并不需要告诉客户端太多信息，只需要返回数据就可以了。返回的文件内容是

从输入URL到页面呈现发生了什么？

Pinoochio — Wed, 25 Aug 2021 17:01:54 +0800

从输入URL到页面呈现发生了什么？按下回车后，用户发出URL请求到页面开始解析的这个过程，叫做导航。前导一切都从浏览器进程开始：浏览器中tab外面发生的一切都是由浏览器进程控制的。浏览器进程有很多负责不同工作的线程，其中包括绘制浏览器顶部按钮和导航栏输入框等组件的UI线程、管理网络请求的网络线程、以及控制文件读写的存储线程等。当你在导航栏里面输入一个URL的时候，其实就是UI线程在处理你的输入。 1. 用户输入-浏览器进程用户在地址栏输入关键字后，地址栏会判断输入的关键字是搜索内容还是请求的U

V8引擎如何执行JavaScript代码的？

Pinoochio — Thu, 12 Aug 2021 22:01:20 +0800

在了解之前，我们首先要知道几个概念：编译器、解释器、抽象语法树（AST）、字节码、即时编译器（JIT）等 1. 编译器和解释器之所以存在编译器和解释器，是因为机器读不懂程序员所写的高级语言代码，所以在执行代码之前，需要将代码“翻译”成机器能读懂的机器代码。然而语言又可分为编译型语言和解释型语言。编译型语言在代码执行前需要经过编译器来进行编译，编译后会生成机器能读懂的二进制文件，这样以后每次运行程序时，直接运行二进制文件就可以了。解释型语言是在代码执行时，通过解释器对程序边动态解释边执行。

计算机网络详细笔记

Pinoochio — Sun, 08 Aug 2021 11:33:53 +0800

笔记来源是对某站湖科大教书匠每节课的总结，强推这位老师的计网课程，PPT做的巨好！一. 基础知识 1.2 因特网概述网络是由若干节点和连接这些节点的链路（Link）组成。多个网络还可以通过路由器互连起来，就构成了覆盖范围更大的网络，即互联网（或互连网），因此互联网是“网络的网络” 因特网是世界上最大的互连网络。因特网服务提供者ISP：普通用户通过ISP接入Internet，ISP可以从因特网管理机构申请到成块的IP地址，同时拥有通信线路以及路由器等连网设备。任何机构和个人只要向ISP交纳规定的费用，

JavaScript实现一个带并发限制的异步调度器，保证同时最多运行2个任务

Pinoochio — Sun, 23 May 2021 21:00:15 +0800

用JavaScript实现一个带并发限制的异步调度器，保证同时最多运行2个任务，完善代码。 class Scheduler { constructor() { this._max = 2; } } const timeout = (time) => new Promise(resolve => { setTimeout(resolve,time); }) const scheduler = new Scheduler(); const addTask = (time,or

Vue源码前戏之Mustache模板引擎的源码解析

Pinoochio — Sat, 27 Mar 2021 17:15:43 +0800

模板引擎是一个帮助我们在一个有规则的字符串内渲染数据的工具。举一个例子： var str = `

我叫{{name}},来自于{{school}}

` var name = '王五' var school = '一个神秘的大学' 现在有一个str字符串，里面带有花括号的子串需要被渲染成对应的数据，得到这样的字符串，渲染到页面中，就形成了模板引擎。我叫王五，来自于一个神秘的大学当然mustache有更复杂的语法，比如： var templateStr = `

JS原生实现轮播图

Pinoochio — Sat, 20 Mar 2021 21:34:43 +0800

轮播图主要思想就是：在大的容器里，装着一个很长的表，表是容器宽度的整数倍。然后通过更改列表样式里的left属性来实现左右滑动。本文旨在控制滑动五张图片，但在html中使用了七张图片，第一张和最后一张是有重复的，至于原因会在下面解释。通过给容器设定overflow:hidden属性来保证只显示容器视口大小的一张图片。

/*容器*/

JS红宝书之创建对象的多种方式

Pinoochio — Sat, 06 Feb 2021 02:09:11 +0800

借鉴了github里冴羽大佬的笔记，让我在读红宝书的时候通畅很多。地址：https://github.com/mqyqingfeng/Blog 虽然Object构造函数或对象字面量可以用来创建单个对象，但使用同一个接口创建很多对象，会产生大量的重复代码。 6.2.1 工厂模式 function createPerson (name,age){ var o = new Object(); o.name = name; o.age = age; o.getName = funct

JS红宝书笔记之引用类型

Pinoochio — Fri, 05 Feb 2021 12:08:42 +0800

第五章引用类型引用类型的值（对象）是引用类型的一个实例。与类相似。 ECMAScript提供了很多原生引用类型（例如Object） 5.1 Object类型对象在JS中被称为引用类型的值。object是一个基础类型，其他所有类型都从object继承了基本的行为。 5.1.1 创建Object实例有两种方式 var person = new Object() //使用new操作符后跟Object构造函数 var person = {} // 使用对象字面量表示法，属性名加不加引号都可以。

JS算法之字符串篇（很多基操）

Pinoochio — Thu, 04 Feb 2021 00:33:24 +0800

下标不存在时，str[index]和str.charAt(index)的区别： str[index]会返回undefined str.charAt(index)会返回""(空字符串) leetcode14：最长公共前缀注意存在空数组的情况。既然判断最长的公共前缀，那么在恰当的位置终止循环是必要的。这里用到了数组的every()方法，以判断数组元素是否存在公共的元素。 var longestCommonPrefix = function(strs) { let res = '';

JS算法之数组篇

Pinoochio — Wed, 03 Feb 2021 20:55:12 +0800

leetcode88：合并两个有序数组方法有很多，可以直接将nums2插入nums1后面然后排序，也可以利用双指针，直接将nums2的元素插入到nums1中合适的位置。双指针： //目的是将nums2的元素都插入到nums1中，所以循环判断以n为主 var merge = function(nums1, m, nums2, n) { let len = m + n -1; m--;n--; while(n>=0){ nums1[len--] = nums1[

数组的扁平化以及去重和排序

Pinoochio — Mon, 01 Feb 2021 13:56:05 +0800

已知如下数组：var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10]; 编写一个程序将数组扁平化去并除其中重复部分数据，最终得到一个升序且不重复的数组数组扁平化即将多层嵌套的数组转化为只有一层递归实现： function flatten(arr){ let res = []; for(let i = 0; i < arr.length; i++){ .

爬虫入门

Pinoochio — Fri, 29 Jan 2021 15:01:13 +0800

什么是爬虫 ——通过编写程序，模拟浏览器上网，然后让其去互联网上抓取数据的过程。 1. 爬虫在使用场景中的分类：通用爬虫：抓取系统重要组成部分。抓取的是一整张页面数据。聚焦爬虫：是建立在通用爬虫的基础上，抓取的是页面中的特定的局部内容。增量式爬虫：检测网站中数据更新的情况。只会抓取网站中最新更新出来的数据 2. 爬虫的矛与盾： 2.1 反爬机制门户网站，可以通过制定相应的策略或技术手段，防止爬虫程序进行网站数据的爬取。 2.1.1 robots.txt协议

Vue组件化之父子组件的相互访问

Pinoochio — Thu, 28 Jan 2021 12:48:52 +0800

父访问子 children-refs 当父组件想直接调用子组件的数据或方法时。父组件访问子组件：使用$children或 $refs children 在父组件中调用this.$children会返回包含子组件对象的数组，用索引找到对应的子组件父组件methods:{ btnclick(){ this.$children[0].showMessage() //即可调用索引为0的子组件中的showMessage方法 } } ref 父组件中调用this.$refs会返回{ref:

Vue组件化之父子组件之间的双向绑定

Pinoochio — Wed, 27 Jan 2021 22:24:39 +0800

例如子组件里有input，想实现子组件props里的属性和value值实现双向绑定，可以在子组件中添加一个data或computed属性来代替props中的属性，然后实现绑定。 //如果不改变父组件的值