勤學(xué)如春起之苗，不見其增，日有所長；輟學(xué)如磨刀之石，不見其損，日有所虧。

我在 github 上新建了一個(gè)倉庫 日問，每天至少一個(gè)問題。有關(guān)全棧，graphql，devops，微服務(wù)以及軟技能，促進(jìn)職業(yè)成長，歡迎交流。

以諸葛武侯的誡子書與君共勉

夫君子之行，靜以修身，儉以養(yǎng)德。非澹泊無以明志，非寧靜無以致遠(yuǎn)。夫?qū)W須靜也，才須學(xué)也，非學(xué)無以廣才，非志無以成學(xué)。淫慢則不能勵(lì)精，險(xiǎn)躁則不能治性。年與時(shí)馳，意與日去，遂成枯落，多不接世，悲守窮廬，將復(fù)何及！

【Q037】linux 有哪些發(fā)行版，你最喜歡哪一個(gè)

原文鏈接，歡迎討論: 【Q037】linux 有哪些發(fā)行版，你最喜歡哪一個(gè)

開放問題，不過你至少得知道一個(gè)發(fā)行版...

【Q036】http 狀態(tài)碼中 301，302和307有什么區(qū)別

原文鏈接，歡迎討論: 【Q036】http 狀態(tài)碼中 301，302和307有什么區(qū)別

• 301，Moved Permanently。永久重定向，該操作比較危險(xiǎn)，需要謹(jǐn)慎操作：如果設(shè)置了301，但是一段時(shí)間后又想取消，但是瀏覽器中已經(jīng)有了緩存，還是會(huì)重定向。
• 302，F(xiàn)ount。臨時(shí)重定向，但是會(huì)在重定向的時(shí)候改變 method: 把 POST 改成 GET，于是有了 307
• 307，Temporary Redirect。臨時(shí)重定向，在重定向時(shí)不會(huì)改變 method

【Q035】http 常見的狀態(tài)碼有哪些

原文鏈接，歡迎討論: 【Q035】http 常見的狀態(tài)碼有哪些

【Q034】如何實(shí)現(xiàn)一個(gè) loading 動(dòng)畫

原文鏈接，歡迎討論：【Q034】如何實(shí)現(xiàn)一個(gè) loading 動(dòng)畫

【Q033】如何對(duì)接口進(jìn)行限流]

原文鏈接，歡迎討論: 【Q033】如何對(duì)接口進(jìn)行限流

一般采用漏桶算法：

1. 漏桶初始為空
2. API 調(diào)用是在往漏桶里注水
3. 漏桶會(huì)以一定速率出水
4. 水滿時(shí) API 拒絕調(diào)用

漏桶算法

可以使用 redis 的計(jì)數(shù)器實(shí)現(xiàn)

1. 計(jì)數(shù)器初始為空
2. API 調(diào)用計(jì)數(shù)器增加
3. 給計(jì)數(shù)器設(shè)置過期時(shí)間，隔段時(shí)間清零，視為一定速率出水
4. 計(jì)數(shù)器達(dá)到上限時(shí)，拒絕調(diào)用

當(dāng)然，這只是大致思路，這時(shí)會(huì)有兩個(gè)問題要注意

1. 最壞情況下的限流是額定限流速率的2倍
2. 條件競爭問題

不過實(shí)際實(shí)現(xiàn)時(shí)注意以下就好了（話說一般也是調(diào)用現(xiàn)成的三方庫做限流...)，可以參考我以前的文章 https://shanyue.tech/post/rate-limit/

【Q032】js 中什么是 softbind，如何實(shí)現(xiàn)

原文鏈接，歡迎討論：【Q032】js 中什么是 softbind，如何實(shí)現(xiàn)

【Q031】js 中如何實(shí)現(xiàn) bind

原文鏈接，歡迎討論: 【Q031】js 中如何實(shí)現(xiàn) bind

最簡單的 bind 一行就可以實(shí)現(xiàn)，而在實(shí)際面試過程中也不會(huì)考察你太多的邊界條件

Function.prototype.fakeBind = function(obj) {
  return (...args) => this.apply(obj, args)
}

測試一下

function f (arg) {
  console.log(this.a, arg)
}

// output: 3, 4
f.bind({ a: 3 })(4)

// output: 3, 4
f.fakeBind({ a: 3 })(4)

【Q030】linux 中如何打印所有網(wǎng)絡(luò)接口

原文鏈接，歡迎討論: 【Q030】linux 中如何打印所有網(wǎng)絡(luò)接口

ifconfig

ifconfig 是最簡單最常用，但是打印信息太多了

$ ifconfig

netstat

netstat 與 ip 也挺好用，特別是它們還可以打印路由表

$ netstat -i

ip

$ ip link

$ ip addr

【Q029】websocket 如何向特定的用戶組推送消息

在 redis 處維護(hù)一個(gè)對(duì)象，記錄每個(gè) group 所對(duì)應(yīng)的 connections/sockets

{
  'Class:201901': [student1Socket, student2Socket]
}

當(dāng) client 剛連入 server 時(shí)，便加入某個(gè)特定的組，或者叫 room，比如 student01，剛開始連入 server，可能要加入 room：Student:01，Class:201901，Group:10086

【Q028】在linux中如何獲取登錄的用戶 <img src="https://img.shields.io/badge/linux-fabd14">

【Q028】在linux中如何獲取登錄的用戶 <img src="https://img.shields.io/badge/linux-fabd14">

$ who

$ last

【Q027】在前端開發(fā)中，如何獲取瀏覽器的唯一標(biāo)識(shí) <img src="https://img.shields.io/badge/js-f1da50">

fingerprintjs2

【Q026】如何對(duì)接口進(jìn)行壓力測試 <img src="https://img.shields.io/badge/server-blueviolet">

【Q025】簡述 socket 建立的過程 <img src="https://img.shields.io/badge/network-blue">

一圖勝千言

image

【Q024】在 postgres 中，查詢時(shí)如何對(duì) jsonb 數(shù)據(jù)格式化 <img src="https://img.shields.io/badge/db-red">

使用 jsonb_pretty 函數(shù)，示例如下

> select jsonb_pretty('{"a": {"b": 4}}'::jsonb)
+----------------+
| jsonb_pretty   |
|----------------|
| {              |
|     "a": {     |
|         "b": 4 |
|     }          |
| }              |
+----------------+
SELECT 1
Time: 0.018s

【Q023】websocket 服務(wù)多節(jié)點(diǎn)部署時(shí)會(huì)有什么問題，怎么解決 <img src="https://img.shields.io/badge/server-blueviolet">

借用 redis

【Q022】如何實(shí)現(xiàn)一個(gè)簡單的 Promise <img src="https://img.shields.io/badge/js-f1da50">

一個(gè)簡單的 Promise 的粗糙實(shí)現(xiàn)，關(guān)鍵點(diǎn)在于

1. 當(dāng) pending 時(shí)， thenable 函數(shù)由一個(gè)隊(duì)列維護(hù)
2. 當(dāng)狀態(tài)變?yōu)?resolved(fulfilled) 時(shí)，隊(duì)列中所有 thenable 函數(shù)執(zhí)行
3. 當(dāng) resolved 時(shí)， thenable 函數(shù)直接執(zhí)行

rejected 狀態(tài)同理

class Prom {
  static resolve (value) {
    if (value && value.then) {
      return value 
    }
    return new Prom(resolve => resolve(value))
  }

  constructor (fn) {
    this.value = undefined
    this.reason = undefined
    this.status = 'PENDING'

    // 維護(hù)一個(gè) resolve/pending 的函數(shù)隊(duì)列
    this.resolveFns = []
    this.rejectFns = []

    const resolve = (value) => {
      // 注意此處的 setTimeout
      setTimeout(() => {
        this.status = 'RESOLVED'
        this.value = value
        this.resolveFns.forEach(({ fn, resolve: res, reject: rej }) => res(fn(value)))
      })
    }

    const reject = (e) => {
      setTimeout(() => {
        this.status = 'REJECTED'
        this.reason = e
        this.rejectFns.forEach(({ fn, resolve: res, reject: rej }) => rej(fn(e)))
      })
    }

    fn(resolve, reject)
  }


  then (fn) {
    if (this.status === 'RESOLVED') {
      const result = fn(this.value)
      // 需要返回一個(gè) Promise
      // 如果狀態(tài)為 resolved，直接執(zhí)行
      return Prom.resolve(result)
    }
    if (this.status === 'PENDING') {
      // 也是返回一個(gè) Promise
      return new Prom((resolve, reject) => {
        // 推進(jìn)隊(duì)列中，resolved 后統(tǒng)一執(zhí)行
        this.resolveFns.push({ fn, resolve, reject }) 
      })
    }
  }

  catch (fn) {
    if (this.status === 'REJECTED') {
      const result = fn(this.value)
      return Prom.resolve(result)
    }
    if (this.status === 'PENDING') {
      return new Prom((resolve, reject) => {
        this.rejectFns.push({ fn, resolve, reject }) 
      })
    }
  }
}

Prom.resolve(10).then(o => o * 10).then(o => o + 10).then(o => {
  console.log(o)
})

return new Prom((resolve, reject) => reject('Error')).catch(e => {
  console.log('Error', e)
})

【Q021】React 中，cloneElement 與 createElement 各是什么，有什么區(qū)別 <img src="https://img.shields.io/badge/react-61dafb">

首參不一樣，直接上 API

React.cloneElement(
  element,
  [props],
  [...children]
)

React.createElement(
  type,
  [props],
  [...children]
)

【Q020】如何實(shí)現(xiàn)一個(gè)分布式鎖 <img src="https://img.shields.io/badge/redis-0d4e99"> <img src="https://img.shields.io/badge/server-blueviolet">

【Q019】如何實(shí)現(xiàn)選中復(fù)制的功能 <img src="https://img.shields.io/badge/html-ea4628">

它一般可以使用第三方庫 clipboard.js 來實(shí)現(xiàn)，源碼很簡單，可以讀一讀

主要有兩個(gè)要點(diǎn)

1. 選中
2. 復(fù)制

選中

選中主要利用了 Selection API

選中的代碼如下

const selection = window.getSelection();
const range = document.createRange();

range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);

selectedText = selection.toString();

取消選中的代碼如下

window.getSelection().removeAllRanges();

它有現(xiàn)成的第三方庫可以使用: select.js

復(fù)制

復(fù)制就比較簡單了，execCommand

document.exec('copy')

我是山月，一個(gè)喜歡跑步與爬山的程序員，我會(huì)定期分享全棧文章在個(gè)人公眾號(hào)中。如果你對(duì)全棧面試，前端工程化，graphql，devops，個(gè)人服務(wù)器運(yùn)維以及微服務(wù)感興趣的話，可以關(guān)注我

如果你對(duì)全棧面試，前端工程化，graphql，devops，個(gè)人服務(wù)器運(yùn)維以及微服務(wù)感興趣的話，可以關(guān)注我