日問周刊 | 全棧面試匯總

日問周刊 | 全棧面試匯總 | 第二期

我在 github 上新建了一個倉庫，每天至少一個問題。有關全棧，graphql，devops，微服務以及軟技能，促進職業成長，歡迎交流。

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

【Q037】linux 有哪些發行版，你最喜歡哪一個

開放問題，不過你至少得知道一個發行版...

【Q036】http 狀態碼中 301，302和307有什麼區別

301，Moved Permanently。永久重定向，該操作比較危險，需要謹慎操作：如果設置了301，但是一段時間后又想取消，但是瀏覽器中已經有了緩存，還是會重定向。

302，Fount。臨時重定向，但是會在重定向的時候改變 method: 把 POST 改成 GET，於是有了 307

307，Temporary Redirect。臨時重定向，在重定向時不會改變 method

【Q035】http 常見的狀態碼有哪些

【Q034】如何實現一個 loading 動畫

【Q033】如何對接口進行限流]

一般採用漏桶算法：

漏桶初始為空

API 調用是在往漏桶里注水

漏桶會以一定速率出水

水滿時 API 拒絕調用

可以使用 redis 的計數器實現

計數器初始為空

API 調用計數器增加

給計數器設置過期時間，隔段時間清零，視為一定速率出水

計數器達到上限時，拒絕調用

當然，這隻是大致思路，這時會有兩個問題要注意

最壞情況下的限流是額定限流速率的2倍

條件競爭問題

不過實際實現時注意以下就好了（話說一般也是調用現成的三方庫做限流...)，可以參考我以前的文章

【Q032】js 中什麼是 softbind，如何實現

【Q031】js 中如何實現 bind

最簡單的 bind 一行就可以實現，而在實際面試過程中也不會考察你太多的邊界條件

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 中如何打印所有網絡接口

ifconfig

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

$ ifconfig

netstat

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

$ netstat -i

ip

$ ip link
 
 $ ip addr

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

在 redis 處維護一個對象，記錄每個 group 所對應的 connections/sockets

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

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

$ who
 
 $ last

一圖勝千言

使用 jsonb_pretty 函數，示例如下

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

一個簡單的 Promise 的粗糙實現，關鍵點在於

當 pending 時， thenable 函數由一個隊列維護

當狀態變為 resolved(fulfilled) 時，隊列中所有 thenable 函數執行

當 resolved 時， thenable 函數直接執行

rejected 狀態同理

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'
 
     // 維護一個 resolve/pending 的函數隊列
     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)
       // 需要返回一個 Promise
       // 如果狀態為 resolved，直接執行
       return Prom.resolve(result)
     }
     if (this.status === 'PENDING') {
       // 也是返回一個 Promise
       return new Prom((resolve, reject) => {
         // 推進隊列中，resolved 后統一執行
         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)
 })

首參不一樣，直接上 API

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

它一般可以使用第三方庫來實現，源碼很簡單，可以讀一讀

主要有兩個要點

選中

複製

選中

選中主要利用了

選中的代碼如下

const selection = window.getSelection();
 const range = document.createRange();
 
 range.selectNodeContents(element);
 selection.removeAllRanges();
 selection.addRange(range);
 
 selectedText = selection.toString();

取消選中的代碼如下

window.getSelection().removeAllRanges();

它有現成的第三方庫可以使用:

複製

複製就比較簡單了，execCommand

document.exec('copy')

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※台北網頁設計公司這麼多，該如何挑選?? 網頁設計報價省錢懶人包"嚨底家"

※網頁設計公司推薦更多不同的設計風格，搶佔消費者視覺第一線

※想知道購買電動車哪裡補助最多?台中電動車補助資訊懶人包彙整

※南投搬家費用,距離,噸數怎麼算?達人教你簡易估價知識!

Orignal From: 日問周刊 | 全棧面試匯總 | 第二期

環保清潔

搜尋此網誌