Practi'blog

发表于 更新于 本文字数： 272 阅读时长 ≈ 1 分钟 
1
2
3
4
5
6
7
8
9
declare module 'use-untyped-hook' {
  export interface InputProps { ... }   // type declaration for prop
  export interface ReturnProps { ... } // type declaration for return props
  export default function useUntypedHook(
    // 参数
    prop: InputProps
    
  ): ReturnProps; // 返回值
}

发表于 更新于 本文字数： 53 阅读时长 ≈ 1 分钟

合并音视频文件

1
ffmpeg -i audio.opus -i video.mp4 -c copy output.mp4

发表于 更新于 本文字数： 54 阅读时长 ≈ 1 分钟

服务端

iperf3 -s

客户端

单线程只有100Mbps左右
iperf3 -c [ip] -P[线程] -t[测试次数]

发表于 更新于 本文字数： 100 阅读时长 ≈ 1 分钟

不同权限用户设置不同权限属性值，在菜单页面根据权限的值显示不同组件。当用户强行跳转到更高权限页面时在路由对应的组件中进行判断。根据权限的值判断没有权限则使用Navigate跳转，有权限则显示对应组件。

发表于 更新于 本文字数： 399 阅读时长 ≈ 1 分钟

1.1 打开光猫telnet功能
浏览器访问 http://192.168.1.1:8080/cgi-bin/telnetenable.cgi?telnetenable=1

1.2 telnet进入光猫获取telecomadmin密码
登录用户名root，密码是默认wifi密码+默认useradmin密码，具体看光猫背面

#cat /flash/cfg/agentconf/factory.conf

#cat /flash/cfg/app_conf/pppoe/chap-secrets

关闭防火墙

1
2
3
4
5
ip6tables -F
ip6tables -X
ip6tables -P INPUT ACCEPT
ip6tables -P OUTPUT ACCEPT
ip6tables -P FORWARD ACCEPT

防火墙一段时间后自动开启，需要再次关闭

发表于 更新于 本文字数： 70 阅读时长 ≈ 1 分钟

引用当前单元格左侧的第一个单元格：=OFFSET(INDIRECT(ADDRESS(ROW(), COLUMN())),0,-1)。

发表于 更新于 本文字数： 1.4k 阅读时长 ≈ 1 分钟

防抖(debounce)

基于上述场景，首先提出第一种思路：在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms，然后：

如果在200ms内没有再次触发滚动事件，那么就执行函数
如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时

效果：如果短时间内大量触发同一事件，只会执行一次函数。

实现：既然前面都提到了计时，那实现的关键就在于setTimeout这个函数，由于还需要一个变量来保存计时，考虑维护全局纯净，可以借助闭包来实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function debounce(fn,delay){
    let timer = null //借助闭包
    return function() {
        if(timer){
            clearTimeout(timer) 
        }
        timer = setTimeout(fn,delay) // 简化写法
    }
}
// 然后是旧代码
function showTop  () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　console.log('滚动条位置：' + scrollTop);
}
window.onscroll = debounce(showTop,1000) // 为了方便观察效果我们取个大点的间断值，实际使用根据需要来配置

到这里，已经把防抖实现了，现在给出定义：

对于短时间内连续触发的事件（上面的滚动事件），防抖的含义就是让某个时间期限（如上面的1000毫秒）内，事件处理函数只执行一次。

节流(throttle)

即使用户不断拖动滚动条，也能在某个时间间隔之后给出当前距离顶部的距离

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function throttle(fn,delay){
    let valid = true
    return function() {
    if(!valid){
        //休息时间 暂不接客
        return false 
    }
    // 工作时间，执行函数并且在间隔期内把状态位设为无效
        valid = false
        setTimeout(() => {
            fn()
            valid = true;
        }, delay)
    }
}
/* 请注意，节流函数并不止上面这种实现方案,
例如可以完全不借助setTimeout，可以把状态位换成时间戳，然后利用时间戳差值是否大于指定间隔时间来做判定。
也可以直接将setTimeout的返回的标记当做判断条件-判断当前定时器是否存在，如果存在表示还在冷却，并且在执行fn之后消除定时器表示激活，原理都一样
    */

// 以下照旧
function showTop  () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　console.log('滚动条位置：' + scrollTop);
}
window.onscroll = throttle(showTop,1000)

如果一直拖着滚动条进行滚动，那么会以1s的时间间隔，持续输出当前位置和顶部的距离

发表于 更新于 本文字数： 381 阅读时长 ≈ 1 分钟

cookie实际上是一小段的文本信息。客户端请求服务器，如果服务器需要记录该用户的状态，就使用response向客户端浏览器颁发一个cookie。客户端浏览器会把cookie保存起来。当浏览器再次请求该网站时，浏览器就会把请求地址和cookie一同给服务器。服务器检查该cookie，从而判断用户的状态。服务器还可以根据需要修改cookie的内容。 session是另一种记录客户状态的机制。不同的是cookie保存在客户端浏览器中，而session保存在服务器上。客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上，这就是session。客户端浏览器再次访问时只需要从该session中查找该客户的状态就可以了。 如果说cookie机制是通过检查客户身上的“通信证”，那么session机制就是通过检查服务器上的“客户明细表”来确认客户身份。

发表于 更新于 本文字数： 2.9k 阅读时长 ≈ 3 分钟

position

absolute
元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。

css盒模型

ie表示content、padding、border。正常表示content。

Promise

Promise状态平pending，fulfilled，rejected。

resolve reject

Promise.all then得到一个结果数组，任何一个报错就进catch。Promise.any then得到第一个fulfilled的结果。promise allSettled

Promise.then Promise.catch

call apply bind

call是每个参数。apply是参数组成的数组。bind只绑定this。

微任务宏任务，事件循环

setTimeout就是作为宏任务来存在的，而Promise.then则是具有代表性的微任务。

new Promise在实例化的过程中所执行的代码都是同步进行的，而then中注册的回调才是异步执行的（微任务）。

async函数在await之前的代码都是同步执行的，可以理解为await之前的代码属于new Promise时传入的代码，await之后的所有代码都是在Promise.then中的回调

先执行同步代码，执行微任务，再执行宏任务

BFC块格式化上下文

根元素（）

浮动元素（float 值不为 none）

绝对定位元素（position 值为 absolute 或 fixed）

行内块元素（display 值为 inline-block）

Cookie、sessionStorage、localStorage的区别

cookie在浏览器和服务器中操作；存在时间；大小4K、5M；操作方式setItem、getItem、removeItem、document.cookie = "yummy_cookie=choco";；

非受控组件，受控组件

ref指向表单是非受控组件

递归 栈溢出

闭包

访问私有变量，防抖节流

导致内存泄露

js节流防抖

节流：快速的多次输入只向后端请求一次数据

防抖：n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效

强缓存和协商缓存

强缓存：浏览器不会像服务器发送任何请求，直接从本地缓存中读取文件并返回Status Code: 200 OK。Expires

协商缓存: 向服务器发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源。Last-Modifed，Etag。

http状态码

200 成功。300重定向。400客户端错误。500服务器错误

瀑布流 圣杯

三栏布局 flex

中间加上{ flex: 1 }，表示flex-grow占用可用空间

eval缺点

不安全，消耗性能

jsonp原理

利用script标签的src属性来实现跨域。

由于使用script标签的src属性，因此只支持get方法

箭头函数

this指向

不能用作构造函数

call apply不能绑定this

箭头函数没有prototype属性

箭头函数没有自己的arguments

html5

video audio canvas worker storage websocket

css3

圆角 渐变 转换 动画 媒体查询 flex布局

WeakMap WeakSet

WeakMap指键为对象，当这个对象设置为null之后，这个键也会删除。普通的Map不会删除这个键

WeakSet指元素为对象。

Array.prototype.find()

console.log同步异步

chrome的控制台出于性能考虑，对于引用类型的数据读取是存在延迟的；

控制台默认值读取第一层数据，当你点击展开时，才会重新去堆内存中读取属性值和下一层的数据。

这种出于性能优化会让我们觉得console.log 是异步的。

所以console.log到底是同步还是异步的，答案肯定是同步。

AMD、CMD、CommonJs、ES6之间的区别

组合继承 js

数组随机排序

大量插入dom元素的方法

css hack不同浏览器的兼容性问题，加入前缀

内存泄露

没有使用的全局变量

计时器没有回收

dom节点的引用，删除节点后还存在

闭包

重绘重排

当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。

当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。

重排一定引起重绘

冒泡和捕获

冒泡和捕获是两种相反的事件触发机制，冒泡向上传播，捕获向下传播。

node.js中间件

cookie-parser，cookie-session，body-parser，mongoose，passport

文件上传formidable

文件下载createReadStream

react事件

冒泡和捕获是两种相反的事件触发机制，冒泡向上传播，捕获向下传播。

React合成事件机制: React并不是将click事件直接绑定在dom上面,而是采用事件冒泡的形式冒泡到document上面,然后React将事件封装给正式的函数处理运行和处理。

e.stopPropagation()

Hooks 实现原理：

Hooks 的实现基于 React Fiber节点（是一个链表） 的调度机制和组件树的遍历。当函数组件被调用时，React 会创建一个 Fiber 节点来表示该组件，并将其添加到 Fiber 树中。Hooks 的状态管理和副作用逻辑被存储在 Fiber 节点中，并在组件的每次渲染中被调用。

跨站登录

登录成功后跳转路由中携带登录信息

ES6(2015)

let，const，类，模块化，箭头函数，函数参数默认值，模板字符串，解构赋值，延展操作符，对象属性简写，

ES7(2016)

数组includes

ES8(2017)

async await，object.values，String.prototype.padEnd(targetLength[, padString])

ES9(2018)

正则表达式反向断言

ES10新特性（2019）

其他

正六变形

扁平化数据 树形

监听路由

内存 储存
回收内存







纯函数 副作用

无副作用 & 纯函数
函数与外界的只有唯一一个渠道进行沟通，通过传入参数和返回值进行沟通。

相同的传入参数永远只会有相同的返回值。

性能优化

代码压缩，代码分片，减少http请求，图片懒加载

在客户端进行水合（添加事件处理程序的过程）

React Server Components 带来什么优势

减少bundle size，一些js不会打包，如将markdown转化为html的js

运行服务端功能：访问数据库

自动化代码分片：Client Components被视为潜在代码分片

响应式开发状态变化时根据状态改变页面

虚拟dom

缓存静态内容

仅包含所有动态的后代节点，当这个组件需要重渲染时，只需要遍历这个打平的树而非整棵树：这也就是我们所说的树结构打平。

发表于 更新于 本文字数： 258 阅读时长 ≈ 1 分钟

img竖排显示时下方有4px的留白
由于img是行内元素，默认display: inline; 它与文本的默认行为类似，下边缘是与基线（baseline）对齐，而不是紧贴容器下边缘。

将displayp设置为block即可消除4px的bug。

其实解决方法不止一种：
1.将图像定义成 img:{display:block;}
2.给父级设置固定高度，然后 overflow:hidden
3.设置 font-size:0;
4.设置 img 的 vertical-align: bottom;
5.设置 img 的 margin-bottom: -4px;

0%