跳到主要內容

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


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



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

留言

張貼留言

這個網誌中的熱門文章

旅館疑有臭蟲 北市府稽查找嘸

有民眾抱怨，日前投宿的北市某旅館疑似出現臭蟲，北市觀傳局與衛生局、環保局聯合稽查，但因為沒有發現蟲屍，無法確認該旅館是否真有臭蟲，市府下周將召開專家會議處理該案，市長蔣萬安則允諾會以最高規格防範臭蟲。 北市某旅館傳出疑有臭蟲，議員陳宥丞23日在市政總質詢詢問市府處理進度，並指出法國、澳洲、韓國的臭蟲，起初都現蹤公車或地鐵卻沒被發現，直到大規模爆發，才付出大量社會成本處理，而且一般殺蟲劑無法殺掉臭蟲，北市是否有因應措施？ 觀傳局主任祕書蕭君杰表示，21日聯合環保局、衛生局到該旅館稽查，但沒有發現臭蟲，也沒有查到蟲卵跡象，只能檢查現場環境是否符合衛生相關規定，但環保局有指導業者如何針對臭蟲清潔消毒。觀傳局長王秋冬指出，下周會與專家學者召開會議，以最高規格處理此案。 想知道購買電動車哪裡補助最多? 台中電動車 補助資訊懶人包彙整 ；推薦評價好的 iphone維修 中心擁有專業的維修技術團隊，同時聘請資深iphone手機維修專家，現場說明手機問題，快速修理，沒修好不收錢住家的頂樓裝 太陽光電 聽說可發揮隔熱功效一線推薦東陽能源擁有核心技術、產品研發、系統規劃設置、專業團隊的太陽能發電廠商。 網頁設計 一頭霧水該從何著手呢? 回頭車 貨運收費標準宇安交通關係企業，自成立迄今，即秉持著「以誠待人」、「以實處事」的企業信念 台中搬家公司 教你幾個打包小技巧,輕鬆整理裝箱!還在煩惱搬家費用要多少哪？台中大展搬家線上試算搬家費用，從此不再擔心「物品怎麼計費」、「多少車才能裝完」 台中搬家 公司費用怎麼算?擁有20年純熟搬遷經驗，提供免費估價且流程透明更是5星評價的搬家公司好山好水 露營車 漫遊體驗露營車x公路旅行的十一個出遊特色。走到哪、玩到哪，彈性的出遊方案，行程跟出發地也可客製 廣告預算用在刀口上， 台北網頁設計 公司幫您達到更多曝光效益； 電動車補助 衛生局疾病管制科長張惠美表示，現場查到與臭蟲無關的多項衛生缺失，包含未提供從業人員體檢報告、簡易外傷藥品及器材超過有效期、紗窗有破損等，已要求業者2周內改善，將擇期複查，如果複查不合格，將依法裁罰3000元至2萬元罰鍰。 但陳宥丞批評，環保局未公告哪些藥劑能殺死臭蟲，很擔心北市會和韓國、法國一樣，把臭蟲防治交給民間恐造成大規模爆發，且北市內的廢棄傢俱回收廠也有可能成為臭蟲孳生的...
張貼留言
閱讀完整內容

必知必會-存儲器層次結構

相信大家一定都用過各種存儲技術，比如mysql，mongodb，redis，mq等，這些存儲服務性能有非常大的區別，其中之一就是底層使用的存儲設備不同。作為一個程序員，你需要理解存儲器的層次結構，這樣才能對程序的性能差別瞭然於心。今天帶大家了解下計算機系統存儲器的層次結構。 存儲技術 首先了解下什麼是存儲器系統？ 實質上就是一個具有不同容量、成本和訪問時間的存儲設備的層次結構。從快到慢依次為：CPU寄存器、高速緩存、主存、磁盤； 這裏給大家介紹一組數據，讓大家有一個更清晰的認識： 如果數據存儲在CPU寄存器，需要0個時鐘周期就能訪問到，存儲在高速緩存中需要4~75個時鐘周期。如果存儲在主存需要上百個周期，而如果存儲在磁盤上，大約需要幾千萬個周期！ -- 出自 CSAPP 接下來一起深入了解下計算機系統涉及的幾個存儲設備： 隨機訪問存儲器 隨機訪問存儲器（RAM）分為靜態RAM （SRAM） 和動態RAM（DRAM）。SRAM的速度更快，但也貴很多，一般不會超過幾兆字節，通常用來做告訴緩存存儲器。DRAM就是就是我們常說的主存。 訪問主存 數據流是通過操作系統中的總線的共享电子電路在處理器和DRAM之間來來回回。每次CPU和主存之間的數據傳送都是通過一系列複雜的步驟完成，這些步驟成為總線事務。讀事務是將主存傳送數據到CPU。寫事務從CPU傳送數據到主存。 總線是一組并行的導線，能攜帶地址、數據和控制信號。下圖展示了CPU芯片是如何與主存DRAM連接的。 那麼我們在加載數據和存儲數據時，CPU和主存到底是怎樣交互實現的呢？ 首先來看一個基本指令，加載內存數據到CPU寄存器中: movq A,%rax 將地址A的內容加載到寄存器%rax中，這個命令會使CPU芯片上稱為總線接口（bus interface）的電路在總線上發起讀事務，具體分為三個步驟： CPU將地址A放到系統總線上，I/O橋將信號傳遞到內存總線。詳情看下下圖a 主存感覺到內存總線上的地址信號，從內存總線讀地址，從DRAM取出數據字，將其寫到內存總線。I/O橋將內存總線信號翻譯成系統總線信號，沿着系統總線傳遞到CPU總線接口。下圖b CPU感覺到系統總線上的數據，從總線上讀數據，並將數據複製到寄存器%rax...
張貼留言
閱讀完整內容

2016年電動車和插電式混合動力車銷量預計將超過70萬輛

中汽協日前預測，2016年全國電動汽車和插電式混合動力車的銷量預計將超過70萬輛，較2015年的銷量增長一倍。 2015年電動車和插電式混合動力車的合併銷量為331092輛，較2014年增長了340%。其中包括247482輛電動車和83610輛插電式混合動力車，在24萬輛多的電動汽車銷量中，包括146719輛乘用車，另有100763輛為商用車。插電式混合動力車的銷量中，60663輛為乘用車，22947輛為商用車。 根據2015年起草的藍圖，政府計畫到2020年在全國範圍內新建12000個充電站和480枚充電樁。2014年年底，全國共有780個充電站共31000枚充電樁。2015年政府還為27個省市自治區設定了電動車的最低銷量目標。 政府預計，這些措施到位後，自主品牌車企的電動車和插電式混合動力車銷量到2020年可達100萬輛，到2025年可達300萬輛。 本站聲明:網站內容來源於EnergyTrend https://www.energytrend.com.tw/ev/,如有侵權,請聯繫我們,我們將及時處理 【其他文章推薦】 ※為什麼 USB CONNECTOR 是電子產業重要的元件? ※ 網頁設計 一頭霧水??該從何著手呢? 找到專業技術的 網頁設計公司 ，幫您輕鬆架站! ※想要讓你的商品成為最夯、最多人討論的話題? 網頁設計公司 讓你強力曝光 ※想知道最厲害的 台北網頁設計公司推薦 、 台中網頁設計公司推薦 專業設計師"嚨底家"!! Orignal From: 2016年電動車和插電式混合動力車銷量預計將超過70萬輛
張貼留言
閱讀完整內容