跳到主要內容

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


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



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

留言

張貼留言

這個網誌中的熱門文章

架構設計 | 異步處理流程，多種實現模式詳解

本文源碼：GitHub·點這裏 || GitEE·點這裏 一、異步處理 1、異步概念 異步處理不用阻塞當前線程來等待處理完成，而是允許後續操作，直至其它線程將處理完成，並回調通知此線程。 必須強調一個基礎邏輯，異步是一種設計理念，異步操作不等於多線程，MQ中間件，或者消息廣播，這些是可以實現異步處理的方式。 同步處理和異步處理相對，需要實時處理並響應，一旦超過時間會結束會話，在該過程中調用方一直在等待響應方處理完成並返回。同步類似電話溝通，需要實時對話，異步則類似短信交流，發送消息之後無需保持等待狀態。 2、異步處理優點 雖然異步處理不能實時響應，但是處理複雜業務場景，多數情況都會使用異步處理。 異步可以解耦業務間的流程關聯，降低耦合度； 降低接口響應時間，例如用戶註冊，異步生成相關信息表； 異步可以提高系統性能，提升吞吐量； 流量削峰即把請求先承接下來，然後在異步處理； 異步用在不同服務間，可以隔離服務，避免雪崩； 異步處理的實現方式有很多種，常見多線程，消息中間件，發布訂閱的廣播模式，其根據邏輯在於先把請求承接下來，放入容器中，在從容器中把請求取出，統一調度處理。 注意 ：一定要監控任務是否產生積壓過度情況，任務如果積壓到雪崩之勢的地步，你會感覺每一片雪花都想勇闖天涯。 3、異步處理模式 異步流程處理的實現有好多方式，但是實際開發中常用的就那麼幾種，例如： 基於接口異步響應，常用在第三方對接流程； 基於消息生產和消費模式，解耦複雜流程； 基於發布和訂閱的廣播模式，常見系統通知 異步適用的業務場景，對數據強一致性的要求不高，異步處理的數據更多時候追求的是最終一致性。 二、接口響應異步 1、流程描述 基於接口異步響應的方式，有一個本地業務服務，第三方接口服務，流程如下： 本地服務發起請求，調用第三方服務接口； 請求包含業務參數，和成功或失敗的回調地址； 第三方服務實時響應流水號，作為該調用的標識； 之後第三方服務處理請求，得到最終處理結果； 如果處理成功，回調本地服務的成功通知接口； 如果處理失敗，回調本地服務的失敗通知接口； 整個流程基於部分異步和部分實時的模式，完整處理； 注意 ：如...
張貼留言
閱讀完整內容

.NET Core前後端分離快速開發框架(Core.3.0+AntdVue)

.NET Core前後端分離快速開發框架(Core.3.0+AntdVue) 目錄 引言 時間真快，轉眼今年又要過去了。回想今年，依次開源發布了 Colder.Fx.Net.AdminLTE(254Star) 、 Colder.Fx.Core.AdminLTE(335Star) 、 DotNettySocket(82Star) 、 IdHelper(47Star) ，這些框架及組件都是本着以實際出發，實事求是的態度，力求提高開發效率（我自己都是第一個使用者），目前來看反響不錯。但是隨着前端和後端技術的不斷變革，尤其是前端，目前大環境已經是前後端完全分離為主的開發模式，在這樣的大環境和必然趨勢之下，傳統的MVC就顯得有些落伍了。在這樣的背景下，一款前後端分離的.NET開發框架就顯得尤為必要，由此便定了框架的升級目標： 前後端分離 。 首先後端技術的選擇，從目前的數據來看，.NET Core的發展遠遠快於.NET Framework，最簡單的分析就是Colder.Fx.Core.AdminLTE發布比Colder.Fx.Net.AdminLTE晚，但是星星卻後來居上而且比前者多30%，並且這個差距在不斷擴大，由點及面的分析可以看出我們廣大.NET開發人員學習的熱情和积極向上的態度，並不是某些人所認為的那麼不堪（ 走自己的路，讓別人說去吧 ）。大環境上微軟积極擁抱開源，大力發展.NET Core， 可以說前途一片光明。因此後端決定採用 .NET Core3.0 ，不再浪費精力去支持.NET Framework。 然後是前端技術選擇，首選是三大js框架選擇，也是從實際出發，Vue相對其它而言更加容易上手，並且功能也毫不遜色，深得各種大小公司喜歡，如果偏要說缺點的話，那就是對TS支持不行，但是即將發布Vue3.0肯定會改變這一缺陷。選擇了Vue之後，然後就是UI框架的選擇了，這裏的選擇更多了，我選擇了Ant Design Vue，理由便是簡潔方便，十分符合我的設計理念。 技術選型完畢之後便...
張貼留言
閱讀完整內容

台北市住宅、社區建創儲能設備 最高可獲600萬元補助

為了推廣分散式發電，台北市環保局預計補助1億元供住宅社區設置創能、儲能設備，計有3種方案可供選擇。環保局說明，每案補助額度不超過建制總經費49％，社區每案最高可獲200萬至600萬元補助，住宅每案補助上限100萬元，5月1日起開放申請。 環保局說明，台北市溫室氣體排放量7成以上來自住商部門，其中以使用電力造成間接溫室氣體排放為大宗，台北市平均年用電量約159.86億度，1度電約等同排放0.5公斤二氧化碳，若想達成2050年淨零排放目標，僅靠節能減碳無法達成，必須發展綠色創能、儲能，並且參考歐洲、日本的做法，採分散式發電方式，推廣到社區、住家、商辦，達到供電自給自足目標。 因此，環保局推出「台北市住宅社區創能儲能及節能補助計畫」，補助對象為台北市轄內房屋所有權人及社區管理委員會，補助方案共計3種，每一申請人或每一場址僅能獲1次補助，每案補助額度不超過建置總經費49％為限，5月1日到7月31日開放申請，但補助經費用完即停止申請。 環保局說明，方案A補助對象以社區為主，公共區域申請創能儲能及節能項目，每案補助上限新台幣600萬元；方案B分為住宅或社區公共區域申請創能搭配儲能項目（創能或儲能方案不得單獨申請），社區每案補助上限新台幣400萬元，住宅每案補助上限100萬元。方案C補助對象也是社區，公共區域申請節能項目，每案補助上限新台幣200萬元。 網頁設計 最專業,超強功能平台可客製,窩窩以「數位行銷」「品牌經營」「網站與應用程式」「印刷品設計」等四大主軸，為每一位客戶客製建立行銷脈絡及洞燭市場先機,請問 台中電動車 哪裡在賣比較便宜可以到台中景泰電動車門市去看看總店：臺中市潭子區潭秀里雅潭路一段102-1號。 電動車補助 推薦評價好的 iphone維修 中心擁有專業的維修技術團隊，同時聘請資深iphone手機維修專家，現場說明手機問題，快速修理，沒修好不收錢住家的頂樓裝 太陽光電 聽說可發揮隔熱功效一線推薦東陽能源擁有核心技術、產品研發、系統規劃設置、專業團隊的太陽能發電廠商。 網頁設計 一頭霧水該從何著手呢? 回頭車 貨運收費標準宇安交通關係企業，自成立迄今，即秉持著「以誠待人」、「以實處事」的企業信念 台中搬家公司 教你幾個打包小技巧,輕鬆整理裝箱!還在煩惱搬家費用要多少哪？台中大展搬家線上試算搬家費用，從此不再擔心「物品怎麼計費」、「多...
張貼留言
閱讀完整內容