跳到主要內容

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


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



我在 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】如何對接口進行限流]



原文鏈接，歡迎討論:



一般採用漏桶算法：



  1. 漏桶初始為空

  2. API 調用是在往漏桶里注水

  3. 漏桶會以一定速率出水

  4. 水滿時 API 拒絕調用



可以使用 redis 的計數器實現



  1. 計數器初始為空

  2. API 調用計數器增加

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

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


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



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

  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 的粗糙實現，關鍵點在於



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

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

  3. 當 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]
 )



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


主要有兩個要點



  1. 選中

  2. 複製


選中


選中主要利用了


選中的代碼如下


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: 日問周刊 | 全棧面試匯總 | 第二期

留言

張貼留言

這個網誌中的熱門文章

有了四步解題法模板，再也不害怕動態規劃！（看不懂算我輸）

導言 動態規劃問題一直是算法面試當中的重點和難點，並且動態規劃這種通過空間換取時間的算法思想在實際的工作中也會被頻繁用到，這篇文章的目的主要是解釋清楚 什麼是動態規劃 ，還有就是面對一道動態規劃問題，一般的 思考步驟 以及其中的注意事項等等，最後通過幾道題目將理論和實踐結合。 什麼是動態規劃 如果你還沒有聽說過動態規劃，或者僅僅只有耳聞，或許你可以看看 Quora 上面的這個 回答 。 How to explain dynamic 用一句話解釋動態規劃就是 " 記住你之前做過的事 "，如果更準確些，其實是 " 記住你之前得到的答案 "。 我舉個大家工作中經常遇到的例子。 在軟件開發中，大家經常會遇到一些系統配置的問題，配置不對，系統就會報錯，這個時候一般都會去 Google 或者是查閱相關的文檔，花了一定的時間將配置修改好。 過了一段時間，去到另一個系統，遇到類似的問題，這個時候已經記不清之前修改過的配置文件長什麼樣，這個時候有兩種方案，一種方案還是去 Google 或者查閱文檔，另一種方案是借鑒之前修改過的配置，第一種做法其實是萬金油，因為你遇到的任何問題其實都可以去 Google，去查閱相關文件找答案，但是這會花費一定的時間，相比之下，第二種方案肯定會更加地節約時間，但是這個方案是有條件的，條件如下： 之前的問題和當前的問題有着關聯性，換句話說，之前問題得到的答案可以幫助解決當前問題 需要記錄之前問題的答案 當然在這個例子中，可以看到的是，上面這兩個條件均滿足，大可去到之前配置過的文件中，將配置拷貝過來，然後做些細微的調整即可解決當前問題，節約了大量的時間。 不知道你是否從這些描述中發現，對於一個動態規劃問題，我們只需要從兩個方面考慮，那就是 找出問題之間的聯繫 ，以及 記錄答案 ，這裏的難點其實是找出問題之間的聯繫，記錄答案只是順帶的事情，利用一些簡單的數據結構就可以做到。 概念 上面的解釋如果大家可以理解的話，接    動態規劃 算法是通過拆分問題，定義問題狀態和狀態之間的關係，使得問題能夠以遞推（或者說分治）的方式去解決。它的幾個重要概念如下所述。    階段： 對於一個完整的問題過程，適當的切分為若干個相互聯繫的子問題，每次在求解一個子問題...
張貼留言
閱讀完整內容

計算機本地文件快要滅絕了

　　 編者按： 文件是数字世界的基石，是我們基本的工作單位。但是，隨着互聯網的雲化、平台化、服務化，文件日益變得可有可無。這樣一種改變究竟好不好呢？喜歡懷舊的 Simon Pitt 開始回顧各種文件的好處，哪怕這讓他顯得不合時宜。原文發表在 medium 上，標題是：Computer Files Are Going Extinct 　　我喜歡文件。我喜歡對文件重命名、移動、排序，改變它們在文件夾中的显示方式，去備份文件，將之上傳到互聯網，恢復它們，對其進行複製，甚至還可以對文件進行碎片整理。作為信息存儲方式的一種隱喻，在我看來文件是很出色的。我喜歡把文件當作一個工作單位。如果我要寫篇文章，文章會放在文件裏面。如果我要生成圖像，圖像會保存進文件裏面。 　　 謳歌 files.doc 　　文件是擬物化的。這是個很花哨的詞，只是用來表示文件是反映現實物品的一個数字概念。比方說，Word 文檔就像一張紙，躺在你的辦公桌上（desktop）。JPEG 就像一幅畫，等等。它們每個都有一個小圖標，圖標的樣子看起來像它們所代表的現實物品。一堆紙，一個畫框，一個馬尼拉文件夾。真的挺很迷人的。 　　我喜歡文件的一點是，不管裏面有什麼，跟文件的交互方式總是一致的。我上面提到的那些東西——複製、排序、碎片整理——我可以對任何文件進行那些處理。文件可能是圖像、遊戲的一部分、也可能是我最喜歡的餐具清單。碎片整理程序不在乎它是什麼。它不會去判斷內容。 　　自從我開始在 Windows 95 裏面創建文件以來，我就一直都很喜歡文件。但是我注意到我們已經開始慢慢地遠離把文件當作基本工作單位的做法。 Windows95。我的計算機 　　 services.mp3 的興起 　　十幾歲的時候，我開始痴迷於收集和管理数字音樂：我收藏 MP3 文件。一大堆的 128 kbps MP3 文件。如果你足夠幸運，有自己的 CD 刻錄機的話，就可以將它們刻錄到 CD 上，然後在朋友之間傳遞。一張 CD 可以容納 700 MB。這相當於將近 500 張軟盤！ 　　我會仔細端詳我的收藏，然後煞費苦心地給它們添加上 IDv1 和 IDv2 音樂標籤。隨着時間的流逝，大家開始開發可以在雲端自動獲取曲目列表的工具，這樣你就可以檢查和驗證 MP3 的質量。有時候我甚至會去聽那些該死的東西，儘管...
張貼留言
閱讀完整內容

純電動 Mini Cooper SE 將成為中國國產車，年產 16 萬輛

BMW 集團與中國長城汽車合資，將於江蘇建立新廠，專門投入生產 MINI Cooper SE 和部分長城品牌電動車，預計於 2022 年完工並投入生產，每年將可生產 16 萬輛電動車。 靈動可愛的 Mini Cooper，在許多車迷心中都有著特殊的地位，今年 7 月發表了首款純電動版本的 Mini Cooper SE 之後，獲得熱烈迴響，預訂數量已接近 8 萬台，顯示大家對於純電 Mini 的熱愛，因為油電版的 Mini Cooper Countryman 的全球總銷售量也才 3 萬出頭。 Mini Cooper SE 之前公布了官方定價，最低從 27,900 歐元起算，美國售價約 29,900 美元。相比現有的三門款，只貴了一成左右。然而，三年後，中國消費者將有機會買到最便宜的電動 Mini。 電動 Mini Cooper SE 最低價是 27,900 歐元，扣掉全額補助最低可以到 24,400 歐元。 BMW 集團與中國長城汽車集團於 2018 年宣布，將組建合資公司光束汽車，投入在中國的電動車生產計畫，而現在他們正式宣布啟動計畫，於江蘇張家港打造一個新工廠，全部投入電動車的製造，包括了 Mini Cooper SE 和其他長城汽車旗下的電動車。 目前的電動 Mini 只在英國牛津工廠製造，不難想像當產能轉移到中國後，Mini Cooper SE 的價格將有機會進一步調降，來競爭全球最大的電動車市場。這座屬於合資公司光束汽車的新工廠，採用一個新的產銷模式，由 BMW 和長城共同合作開發、設計、製造新產品，但是銷售通路完全沿用原本的品牌渠道。 換句話說，2020 年到 2022 年銷售的電動 Mini，將會是英國製造，而 2022 年後就會有中國製造版本開賣，考量到 Mini 在中國每年約有 30 萬輛的銷售額，同時油電版的 Coutryman 銷量更佔了全球將近五分之一，無怪乎 BMW 會想在最接近主要市場的地方蓋工廠囉。 外型完美復刻油車版 最後，簡單介紹一下 Mini Cooper SE 這台車。Mini 在電動化的路上，盡力保持著跟經典造型一致的設計，畢竟大家愛的就是它的設計。電動版的 Mini 車頭、車身跟車屁股都多了一個黃色的插頭標誌，車頭的氣壩則變成封閉式設計，除此之外，幾乎看不出來差別，連馬達...
張貼留言
閱讀完整內容