- 博客(32)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 前端一对一RTC实现入门
RTC这个概念最近越炒越火，而webRTC只是RTC实现的其中一环。webRTC名称源自网页即时通信（英语：Web Real-Time Communication）的缩写，是一个支持网页浏览器进行实时语音对话或视频对话的API。虽然webRTC标准在2011年就出现了，但是webRTC标准只定义了客户端的行为，服务端却并没有规范。这篇文章简单的聊一下webRTC的前端规范。首先要即时通信，需要获取视频或者音频流，这个需要用到navigator.mediaDevices.getUserMedia这个方法，
2021-03-25 18:04:28
760
原创 GraphQL-nestJS（类型与查询）
GraphQL 是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）。GraphQL 并没有和任何特定数据库或者存储引擎绑定，而是依靠你现有的代码和数据支撑。...
2021-04-02 21:25:10
958
原创 0.1 + 0.2 !== 0.3 ?
这是一道很经典的前端面试题，那是什么导致这个问题出现的呢，这里分析下原因：javascript的数字都是采用双精度浮点数,遵循IEEE 754标准，即符号位一位，整数位十一位，小数位五十二位，具体十进制如何转二进制请自行百度。0.1的二进制为0.000110011（0011无限循环）科学计数法为：（0011无限循环）0.2的二进制为0.00110011(0011无限循环)科学计数法为：（0011无限循环）根据IEEE 754标准小数位有五十二位，所以需要对于无限循环的二进制进行进位。
2021-03-23 17:04:36
236
原创 程序员之计算养老保险还是定投理财划算
作为程序员，想必大家都对于理财有一定的研究。一直想买养老产品，结果通过程序计算发现，其实养老保险并没有想象中的划算，以下通过计算得出的答案：// 每2000每年保额获得的利息const annuityRate = { 26: 981.74 / 2000, 27: 978.78 / 2000, 28: 975.68 / 2000, 29: 972.44 / 2000,}// 动态规划计算利息 - 模仿某养老金逐年定投const fund = function (total, rate,.
2020-12-02 11:45:56
272
2
原创 Fragment，Portal和Suspense
Fragment：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>test</title></head><body> <div id="container"></div></body><script src="./vue.global.js"></scri
2020-08-21 17:58:19
245
原创 使用腾讯serverless爬取贴吧信息
'use strict'const axios = require('axios')const cheerio = require('cheerio')const iconv = require('iconv-lite')const DB_HOST = process.env[`DB_HOST`]const DB_PORT = process.env[`DB_PORT`]const ...
2020-08-21 15:47:27
257
1
原创 前端常用算法学习总结
一.动态规划给定一个三角形，找出自顶向下的最小路径和。每一步只能移动到下一行中相邻的结点上。相邻的结点 在这里指的是 下标 与 上一层结点下标 相同或者等于 上一层结点下标 + 1 的两个结点。例如，给定三角形：[ [2], [3,4], [6,5,7], [4,1,8,3]]自顶向下的最小路径和为11（即，2+3+5+1= 11）。动态规划我个人的理解是：能将一个大问题分解为一个个小问题，并且这些小问题之间有共性能重复调用。那么如何判断这...
2020-08-21 15:27:30
679
1
原创 js微任务宏任务
面试有问到，很长时间没记有点忘记了，记录学习下：宏任务：setTimeout(web,node) setInterval(web,node) setImmediate(node) requestAnimationFrame(web)微任务：process.nextTick(node) MutationObserver(web) Promise(node,web)...
2020-08-19 16:56:51
219
原创 Vue keep-alive的实现原理
使用vue的时候，想必大家都是用过keep-alive，其作用就是缓存页面以及其状态。使用了这么久vue只知道如何使用但不明白其中原理，昨天翻看实现代码，这里做个笔记。这里以vue3为例，整个组件的源码为：const KeepAliveImpl = { name: `KeepAlive`, // Marker for special handling inside the re...
2020-01-16 17:26:08
5140
原创 初探serverless（腾讯云函数）
官方文档：https://cloud.tencent.com/document/product/583闲来无聊，一直听说serverless最近比较火热，试了下腾讯的serverless云函数。个人对于serverless的理解：其实serverless顾名思义，就是无服务器架构，并不是说不需要服务器，只是服务器的管理与资源分配无需用户关系，用户只需要编写对应的函数，提交到对应平台，然...
2019-12-18 15:18:24
2755
1
原创 vue3.0时间切片（废除）
一直对时间切片非常感兴趣，虽然最新的vue-next中剔除了时间切片，但是这里还是可以借鉴下其中的原理和思想：首先要先知道javascript的执行机制，javascript的任务分为macro-task宏任务和micro-task微任务，宏任务主要为同步代码，settimeout，setInterval等，微任务为promise,process.nextTick等。网上有一张图能比较清楚的说...
2019-11-14 11:34:55
1028
原创 vue3.0响应式原理（四）
最后简单介绍下ref与computed，首先先看ref的主要代码：export function ref(raw?: unknown) { if (isRef(raw)) { return raw } raw = convert(raw) const r = { _isRef: true, get value() { track(r, Op...
2019-11-08 16:20:24
1579
原创 vue3.0响应式原理（三）
讲完effect的大概实现，重新回到在二中一开始讲到订阅的实现，这里重新给到订阅的源码：function createGetter(isReadonly: boolean) { return function get(target: any, key: string | symbol, receiver: any) { const res = Reflect.get(target...
2019-11-06 17:42:18
440
原创 vue3.0响应式原理（二）
Vue3的响应式主要是通过proxy handlers来实现的，上一节有讲，Vue3的proxy handlers分为baseHandlers与collectionHandlers，这里主要讲baseHandlers。baseHandles又分为mutableHandlers与readonlyHandlers，顾名思义后者是只读的handlersexport const mutableHan...
2019-10-29 19:16:51
694
原创 vue3.0响应式原理（一）
vue 3.0响应式采用了原生的proxy，原理其实和2.0差不多，主要也是订阅收集的模式。所有需要被代理的对象需要调用Vue的reactive方法，顾名思义就是响应式的意思，方法返回一个proxyconst original = {foo: 1}const observed = Vue.reactive(original)reactive方法的源码如下：export f...
2019-10-24 14:35:14
850
原创 Reselect源码分析
Reselect库可以创建可记忆的(Memoized)、可组合的selector函数。Reselect selectors 可以用来高效地计算 Redux store 里的衍生数据。react通过connect高阶组件将redux与react连接，当redux更新时，如果不使用Reselect库时，每当组件更新重新计算衍生数据有可能会造成不必要的性能浪费，通过阅读源码了解到Reselec...
2019-04-25 13:25:43
370
转载 浏览器缓存
转载自：http://bbs.qcloud.com/thread-3775-1-1.htmlCDN是什么？谈到CDN的作用，可以用8年买火车票的经历来形象比喻：8年前，还没有火车票代售点一说，12306.cn更是无从说起。那时候火车票还只能在火车站的售票大厅购买，而我所住的小县城并不通火车，火车票都要去市里的火车站购买，而从县城到市里，来回就是4个小时车程，简直就是浪费生命。后来就...
2019-03-20 16:26:49
141
原创 Promise/A+
ES6将Promise列入了标准，提供了原生的接口，研究Promise/A+对于ES6的理解有很大的帮助。这里主要探究Promise构造函数，实例resolve方法、实例then方法以及实例子的notify方法。const RESOLVED = 0;const REJECTED = 1;const PENDING = 2;function Promise(executor) { ...
2018-10-26 19:00:51
217
原创 MongoDB—server instance in invalid state connecting
在使用mongodb的时候有一个问题，在第二次请求时前一次数据库还没有关闭的时候，会导致报错。比较暴力的解决方法是让数据库一直开着，本人自己也做了一个方法来避免此情况发生。将请求数据库的任务放进队列，在数据库打开后完成所有数据库任务后resolve来关闭数据库。//post.jsvar mongodb = require('./db');function Post(title, pos...
2018-08-21 10:03:41
312
1
原创 http隧道
http权威指南对于隧道的解释是：隧道（tunnel） 是建立起来之后， 就会在两条连接之间对原始数据进行盲转发的HTTP 应用程序。 HTTP 隧道通常用来在一条或多条 HTTP 连接上转发非 HTTP 数据， 转发时不会窥探数据。HTTP 隧道的一种常见用途是通过 HTTP 连接承载加密的安全套接字层（SSL，Secure Sockets Layer） 流量， 这样 SSL 流量就可以穿过...
2018-08-17 14:59:05
5045
原创 Typescript学习日记—4
1.接口 vs. 类型别名接口创建了一个新的名字，可以在其它任何地方使用。 类型别名并不创建新名字—比如，错误信息就不会使用别名。 在下面的示例代码里，在编译器中将鼠标悬停在 interfaced上，显示它返回的是 Interface，但悬停在 aliased上时，显示的却是对象字面量类型。另一个重要区别是类型别名不能被 extends和 implements（自己也不能 extends和 i...
2018-08-15 15:52:41
772
转载 为什么V8引擎这么快？
转载自https://blog.csdn.net/horkychen/article/details/7761199Google研发的V8 JavaScript引擎性能优异。我们请熟悉内部程序实现的作者依源代码来看看V8是如何加速的。作者：Community Engine公司研发部研发工程师Hajime Morita Google的Chrome中的V8 JavaScript引擎，由...
2018-08-08 09:22:30
2918
原创 最短路径算法—Bellman-Ford
Bellman-Ford算法是求含负权图的单源最短路径的一种算法，效率较低，代码难度较小。其原理为连续进行松弛，在每次松弛时把每条边都更新一下，若在n-1次松弛后还能更新，则说明图中有负环，因此无法得出结果，否则就完成。#include<stdio.h>void main() { //dis数组存储1号顶点到各个顶点的距离,n表示顶点个数，m表示边数 //u，v，w分别储...
2018-08-07 11:30:51
311
原创 Vue—Typescript
Vue-cli推出了3.0，自带了Pwa和Typescript，尝试了下发现Typescript用起来十分方便，这里简单介绍下。这次脚手架项目中用到了2个插件，vue-class-component和vue-property-decorators。这里介绍下使用方法vue-class-componentNote:1.如果使用Typescript，那么需要使用--experiment...
2018-07-26 11:44:31
2803
原创 Typescript学习日记—3
1.外部枚举外部枚举用来描述已经存在的枚举类型的形状。declare enum Enum { A = 1, B, C = 2}外部枚举和非外部枚举之间有一个重要的区别，在正常的枚举里，没有初始化方法的成员被当成常数成员。 对于非常数的外部枚举而言，没有初始化方法时被当做需要经过计算的。declare在Typescript的意义在于这个枚举类型可能在别的地...
2018-07-25 15:31:51
704
原创 Typescript学习日记—2
1.在泛型约束中使用类型参数你可以声明一个类型参数，且它被另一个类型参数所约束。 比如，现在我们想要用属性名从对象里获取这个属性。 并且我们想要确保这个属性存在于对象 obj上，因此我们需要在这两个类型之间使用约束。function getProperty(obj: T, key: K) { return obj[key];}let x = { a: 1, b: 2, c:...
2018-07-24 17:35:01
435
原创 Node Cluster的一些理解
1.cluster.isMaster怎么识别的？主进程fork的时候给到子进程一个NODE_UNIQUE_ID。所以只要环境变量有这个参数就是子进程。2.主进程没有创建服务器的语句，到底有没有创建？都知道http基于tcp传输层的，既然主进程没有创建服务器的语句，是否是通过子进程的相关操作实现的。这里翻开nodejs源码对于listen的实现：Server.prototype.liste...
2018-07-24 16:25:06
1323
原创 Typescript学习日记—1
多说会ES6转TS非常容易，然后在学习文档过程中，还是有些地方描述不详细或者新的概念导致断断续续看了一周的时间，才把手册指南都看完。这里把一些个人觉得比较难理解的地方做一个总结，以加深记忆并希望给新入坑的小伙伴一点灵感把。毕竟我觉得文档跳跃性太大了，而且有些地方描述不是很详细，网上的资料也都是照抄官网文档的。当然本人水平有限，有可能有不对的地方，望见谅。1.类型断言 类型断言好比其它语言里...
2018-07-24 10:21:05
530
原创 javascript字符串和unicode
什么是码点这就要提到unicode了，unicode是一个大集合，里面的规模可以容纳100多万个符号，每个符号的编码都不一样，为了会有unicode，ASCII根本不够用啊，而且没一个统一标准，即使用到限制位，不同的国家同样的编码代表的符号可能都不一致，何况还有亚洲国家呢。所以为每一个字符分配一个唯一的数字，这个数字就是码点。unicodeunicode是分区定义。每个区可以存放 65536 个...
2018-07-12 14:35:57
1134
原创 ES6模块学习笔记
1.目前其实我们所用到的import都是通过babel转成require的，浏览器则是通过webpack等打包工具将这些代码打包成一个个文件的2.Node v9.6.0已支持import。但是需要命令行开启。node --experimental-modules x.mjs。而浏览器则是需要在script标签里加上type="module"，具体支持的浏览器版本网上有，这里不一一列举了。这里有个问...
2018-05-09 15:16:39
397
转载 Linux中的文件描述符与打开文件之间的关系
一些概念：1.为了便于统一管理，系统将所有的输入/输出设备都视为文件，按文件方式提供给用户使用，如目录的检索、权限的验证等都与普通文件相似，只是对这些文件的操作是和设备驱动程序紧密相连的，系统将这些操作转为对具体设备的操作。2.当用户第一次请求对某文件进行操作时，先利用 open 系统调用将该文件打开。所谓“打开”，是指系统将指名文件的属性(包括该文件在外存上的物理位置)从外存拷贝到内存打开文件表...
2018-05-08 16:31:17
207
原创 JS对象和数组的理解
let a={}; a[0]="吃饭"; a[{x:2}]="跑步"; for(let i in a){ console.log(`type:${typeof i},${i}:${a[i]}`) } //type:string,0:吃饭 type:string,[object Object]:跑步 let b=[]; b[0]...
2018-05-08 16:16:37
656
空空如也
关于typescript官方文档对于三斜线指令的理解问题。
2018-07-23
TA创建的收藏夹 TA关注的收藏夹
TA关注的人