20191001 前端開發周報

一周 GitHub 開源項目推薦:騰訊、12306、Vue、面試……;常見的三個 JS 面試題;十個超級實用的 JS 特性;js跨域問題總結;前端培訓-中級階段(14)- HTTP 首部字段和狀態碼(2019-09-05期);Vue常見面試題精講【持續更新】;面試官: 聊一聊Babel;9 行 JavaScript 代碼計算圓周率一百萬位

  1. 一周 GitHub 開源項目推薦:騰訊、12306、Vue、面試…… 一周 GitHub 開源項目推薦 點擊鏈接或圖片即可閱讀 喜歡請分享到朋友圈哦 TubeMQ:騰訊開源的萬億級分布式消息中間件 TubeMQ 是騰訊在 2013 年自研的分布式消息中間件系統,專注服務大數據場景下海量數據的高性能存儲和傳輸,經過近 7 年上萬億的海量數據沉淀,目前...
  2. 常見的三個 JS 面試題本文不是討論最新的 JavaScript 庫、常見的開發實踐或任何新的 ES6 函數。相反,在討論 JavaScript 時,面試中通常會提到三件事。我自己也被問到這些問題,我的朋友們告訴我他們也被問到這些問題。
  3. 十個超級實用的 JS 特性你可能剛上手 JavaScript,或者只是曾經偶爾用過。不管怎樣,JavaScript 改變了很多,有些特性非常值得一用。 這篇文章介紹了一些特性,在我看來,一個嚴肅的 JavaScript 開發者每天都多多少少會用到這些特性。
  4. 前端培訓-中級階段(14)- HTTP 首部字段和狀態碼(2019-09-05期)前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門,但也僅僅是入門,現在前端開發的定義已經遠遠不止這些。前端小課堂(HTML/CSS/JS),本著提升技術水平,打牢基礎知識的中心思想,我們開課啦(...
  5. Vue常見面試題精講【持續更新】v-if 是條件渲染指令,控制的是組件是否創建(渲染),值為true則渲染該組件,值為false則不渲染該組件,對應Html元素則不會存在于瀏覽器的html文檔中,即打開瀏覽器調試工具找不到該組件對應的渲染結果。v-show控...
  6. 面試官: 聊一聊BabelBabel 是現代 JavaScript 語法轉換器,幾乎在任何現代前端項目中都能看到他的身影,其背后的原理對于大部分開發者還屬于黑盒,不過 Babel 作為一個工具真的有了解背后原理的必要嗎?
  7. 9 行 JavaScript 代碼計算圓周率一百萬位 原文: A Million Digits of Pi in 9 Lines of Javascript 作者:Andrew Jennings BigInt 已經可以在 JavaScript 中使用了,至少在 Firefox 和 Chrome 中如此。對于高精度計算,我最喜歡做的就是計算圓周率,使用最簡單的方法,也就是說只使用加減乘除。 你可以找到很多計算圓周率的公式,但我最喜歡的是這個...
  8. 純手寫Promise,由淺入深在我的上一篇文章里著重介紹了async的相關知識,對promise的提及甚少,現在很多面試也都要求我們有手動造輪子的能力,所以本篇文章我會以手動實現一個promise的方式來發掘一下Promise的特點.
  9. JS 系列五:深入 call、apply、bind JS 系列暫定 27 篇,從基礎,到原型,到異步,到設計模式,到架構模式等。 本篇是 JS 系列中第 5 篇,文章主講 JS 中  call 、 apply 、 bind 、箭頭函數以及柯里化,著重介紹它們之間的區別、對比使用,深入了解  call 、 apply 、 bind 。 一、Function.prototype.call() call() 方法調用一...
  10. VUE基礎實用技巧 Vue以前聽說過,有了解過一點。當時還在熱衷于原生JavaScript去寫一些方法的封裝,不是為啥,就感覺這樣很帥,后面多多少少接觸了一些JQuery的用法,到現在為止,JavaScript原生封裝的一些方法,該忘的都忘了。上一家公司需要用到Vue,所以就利用下班的時候學習Vue。有次公司部門的培訓,一位大佬總結的實用技巧,感覺不...
  11. 前端面試每日 3+1 —— 第163天今天的知識點 (2019.09.26) —— 第163天 [html] xpath和dom有什么區別? [css] position跟margin collapse這些特性相互疊加后會怎么樣? [js] 怎樣在JavaScript中創建一個worker線程? [軟技能] 移動端的性能優化...
  12. 透過現象看本質: 常見的前端架構風格和案例 所謂軟件架構風格,是指描述某個特定應用領域中系統組織方式的慣用模式。架構風格定義一個詞匯表和一組約束,詞匯表中包含一些組件及連接器,約束則指出系統如何將構建和連接器組合起來。軟件架構風格反映了領域中眾多系統所共有的結構和語義特性,并指導如何將系統中的各個模塊和子系統有機的結合為一個完整的系統 ...
  13. 說說JS中的沙箱其實在前端編碼中,或多或少都會接觸到沙箱,可能天真善良的你沒有留意到,又可能,你還并不知道它的真正用途,學會使用沙箱,可以避免潛在的代碼注入以及未知的安全問題。
  14. 重磅:硬核前端面試開源項目匯總(進大廠必備)建立最好的面試地圖。目前的內容包括js、網絡、瀏覽器相關、性能優化、安全性、框架、git、數據結構、算法等。
  15. 在Vue中使用Tinymce5遇到的問題記錄 安裝并使用官方的 vue集成組件 $ npm install @tinymce/tinymce-vue 加載組件 import Editor from '@tinymce/tinymce-vue'; 使用組件 <editor api-key="API_KEY" :init="{plugins: 'wordcount'}"></editor> 其他配置參見 官方文檔 加載用戶自...
  16. 從 HTTP/1 到 HTTP/2,以及即將到來的 HTTP/3如今的生活中已經離不開互聯網,智能家居、在線支付、網上購物都需要互聯網的支持?;ヂ摼W切切實實地給生活帶來了諸多便利。有了互聯網,我們可以呆在空調房里,一邊刷著微博,一邊等透心涼的西瓜送到手上,安安...
  17. 淺析Vue.nextTick()原理1、為什么用Vue.nextTick() 2、什么是Vue.nextTick() 3、怎么用 4、小結 1、為什么用Vue.nextTick() 首先來了解一下JS的運行機制。 JS運行機制(Event Loop) JS執行是單線程的,它是基于事件循環的。 所有同步任...
  18. 前端一鍵打印解決方案 首先我來介紹下業務背景:我們在做一款類似于中介工作的軟件,為了幫助用戶快速辦理各種業務,獲得各種證件。為了能夠最高效的解決用戶懶得做的工作。我們業務的核心就是:機器能去做的事情絕不要讓人去做。 為此我們做下如下努力:1打通業務流程2puppteer流程化機器人3快速生成材料申報 下面我將介紹前端一...
  19. NodeJS有難度的面試題,你能答對幾個? Node中,每個文件模塊都是一個對象,它的定義如下: function Module(id, parent) { this.id = id; this.exports = {}; this.parent = parent; this.filename = null; this.loaded = false; this.children = []; } module.exports = Module; var module = new Module(filename, parent); 復制代碼 所有...
  20. CSS3 3D線條變換進度條動畫源碼 互聯網的那些破事的微博視頻
  21. HTTP3過去現在和未來(譯)在去年的HTTP3"生日周"期間,我們Cloudflare宣布了對Web的新標準QUIC和HTTP3(或當時稱為"HTTP over QUIC")的初步支持,從而可以更快,更可靠,更安全地connect到網站和API.我們還讓客戶加入wait list,只要相關應用開...
  22. 領略原生 JavaScript ES6~ES10 的魅力作為前端開發工程師,盲目追逐框架似乎有點舍本逐末,要知道基本功才是硬核。JavaScript 的語法這幾年一直在更新,不管我們是框架的核心開發者還是業務重塑者,學習下最新的 JavaScript 語法和能力是非常有好處的...
  23. HTML5 Canvas金色漩渦動畫源碼 互聯網的那些破事的微博視頻
  24. 純CSS3實現的六邊形加載動畫源碼 互聯網的那些破事的微博視頻
  25. JavaScript 工具怎么就這么爛 JavaScript 工具確實超級難用,但這并不是大家的錯。 如果大家點進來看了,就證明各位肯定對此抱有同感。哈哈,我也這么覺得。我的日常工作就是跟 JavaScript 工具打交道,而我的觀點是,這些工具至少可以做得更好。畢竟“無視問題,就是作惡”。 但不少朋友可能也并不認同我的觀點,別擔心,其實我自己也并不完全認同...
  26. 20190925 前端開發日報】徹底搞懂Vue中keep-alive的魔法(上);前端自動化解決QA重構對比測試難題;TypeScript 完全手冊;學習webpack一個案例就夠了;Github 上 36 個最實用的 Vue 開源庫;JS進...詳情→
    20190925 前端開發日報
  27. 學習寫一個babel插件 babel作為現代前端項目的標配,工作中經常會用到。但是,很少人會去研究它的底層實現和設計。這篇文章是日常工作中實踐總結,將會由淺入深地和大家一起學習下babel的一些基礎知識,以及編寫屬于自己的babel插件,并在項目中使用。 AST簡介 抽象語法樹(Abstract Syntax Tree,AST),或簡稱語法樹(Syntax tree),是...
  28. jQuery手風琴樣式的圖片切換組件源碼 互聯網的那些破事的微博視頻
  29. 使用nuxt前,需要了解的vue ssr基礎 更好的 SEO 更快的內容到達時間 SSR方案的權衡之處 開發條件所限 涉及構建設置和部署的更多要求 更多的服務器端負載 Vue SSR基本使用 一個最簡單的示例(官方) const Vue = require('vue') const server = require('express')() const renderer = require('vue-server-renderer').createRenderer() ...
  30. 前端String那些事兒 js中的String其實不僅僅是"foo"這樣的字面量字符串。 Blob構造函數的入參array,數組元素可以是USVString,到底什么是USVString讓我很困惑。 除了String外,其實還包括以下幾種類型的String。 工作中除了String.prototype上的那些好用的方法,es6的模板字符串等等,貌似也沒有其他常用字符串的地方了。這里...
  31. React16.8+Next.js+Koa2 開發 Github 項目總結 當我們使用 React 開發系統的時候,常常因為需要配置很多繁瑣的參數,如 Webpack 配置、Router 配置和服務器配置等, 如果需要做 SEO,要考慮的事情就更多了,那么怎樣讓服務端渲染和客戶端渲染保持一致是一件很麻煩很麻煩的事情, 需要引入很多第三方庫。針對這些問題,Next.js 提供了一個很好的解決方案,使開發人員可...
  32. 前端資源治理(一) 本文探討了前端資源治理的含義以及要解決的問題,并介紹了實現前端資源治理的思路。
  33. 學習webpack:基礎配置 上一篇博客起了個頭,介紹了為什么要用webpack,用webpack可以做什么,以及最簡單地配置。這篇博客將結合實際需求,一步一步的引入一些配置,所有內容基于實際需求出發。 entry和output 上一篇博客說到,entry是webpack打包的入口文件,webpack會從這個入口文件開始,尋找該入口文件的依賴模塊,以及遞歸的尋找依賴...
  34. JS的字符串插值,變量長文本換行 苦逼的PHPer要寫前端 作為一個PHPer,經常需要在html中寫js jq來解析數據,形成列表、選項等等。 (誰讓我們PHPer還要兼顧頁面呢?? 又不會Vue,只能這樣子討討生活。) 那么就經常遇到Html代碼拼接,或者字符串拼接,可能是這樣子的問題 let html = ""; for(...){ html += "<li> "...
  35. webpack配置-優化篇 針對沒有AMD/CommonJS的源代碼,通過配置noParse忽略webpack對其進行遞歸解析和處理,提高構建性能。比如jq,龐大又沒有采用模塊化標準,讓webpack去解析是沒有意義的。 noParse: /jquery/, 復制代碼 IgnorePlugin 忽略第三方包指定模塊,使其不被打包進去。比如moment.js這個日期處理庫,引用時會將所有的locale文件...
  36. Javascript進階1--作用域和閉包 從今天開始,我打算將我學到的js知識進行分享,歡迎大家的討論和補充,有任何不足之處,盡情地提出來吧~:grin: 作用域介紹 作用域是什么? 本質上是一套規則,用于確定在何處以及如何查找變量(標識符)。 何處? 作用域是可以嵌套的,引擎從當前作用域開始查找,如果找不到,就會向上一級繼續查找,當抵達到最...
  37. JavaScript-你可能不了解的塊級作用域 for (var i = 0; i < 5; i++) { console.log(i); } 復制代碼 我們在for循環中直接定義了變量i,通常我們只想在循環體內部的上下文環境中使用i,但是事情并不是向著我們希望的發展,i會被隱式的綁定到外面的作用域(函數作用域或者是全局作用域)。 1.2 var a = true; if (a) { var b = a * 2; b = ...
  38. JS 服務器推送技術 WebSocket 入門指北》最近在工作中遇到了需要服務器推送消息的場景,這里總結一下收集整理WebSocket相關資料的收獲。 (by SHERlocked93)
    JS 服務器推送技術 WebSocket 入門指北
  39. jQuery大屏圖文切換時間軸 可循環播放源碼 互聯網的那些破事的微博視頻
  40. 基于nodeJS從0到1實現一個CMS全棧項目(中)(含源碼) 今天給大家介紹的主要是我們全棧CMS系統的后臺部分,由于后臺部分涉及的點比較多,我會拆解成幾部分來講解,如果對項目背景和技術棧不太了解,可以查看我的上一篇文章 基于nodeJS從0到1實現一個CMS全棧項目(上) 這篇文章除了會涉及node的知識,還會涉及到redis(一個高性能的key-value數據庫),前端領域的java...
  41. 正則(2) 及 JS盒子模型 在不加全局修飾符 g 的時候,兩者功能是一樣的 加上 g 之后,match可以把所有的大正則匹配的內容都捕獲到,但是會丟掉小分組的捕獲 splice : 可以結合正則使用,可以直接把正則寫著split的括號中 var str = 'a-3_34+rgdfv=gegd?terdgdf' str.split(/ /) 把字符串中的字母和數字拆出來 replace 替...
  42. vue全家桶開發的一些小技巧和注意事項 用vue全家桶開發一年多了,踩過不少坑,也解決了很多的問題,把其中的一些點記錄下來,希望能幫到大家。以下內容基于最新版的vue + vuex + vue-router + elementUI,vue腳手架是vue-cli3。 css的scoped屬性 vue 為了防止 css 污染,當組件的 <style> 標簽有 scoped 屬性時,它的 css 只作用于當前組件中的元...
  43. 如何編寫全棧 JavaScript 應用 我們的 GitHub 倉庫最近在 GitHub 上獲得了 10,000 顆星。它在 HackerNews、GitHub Trending 上排名第一,并在 Reddit 上獲得了 2 萬個贊。 這篇文章是我這一段時間以來一直想寫的,隨著我們的倉庫快速上升,我認為現在是寫它的最佳時間。 我是自由職業者團隊的一員,我們使用 React/React Native、Node.js、G...
  44. vue自動化router 相信很多小伙伴在寫項目的時候會有很多的路由,簡直惡心的要死,不論是分層管理還是統一入口,都會有一大堆路由要去維護,當頁面出現問題的時候,還得一個個去查找,才能找到相應路由頁面。在寫一個后臺管理系統的時候有幾十上百個頁面,我實在忍受不了這么維護了,寫了個webpack plugin 動態生成router,后臺管理一下爽...
  45. CSS3發光線條旋轉Loading加載動畫源碼 互聯網的那些破事的微博視頻
  46. 愛上Javascript數組Array(一)——基礎介紹 本文屬于原創文章,轉載請注明--來自桃源小盼聊技術 Javascript,一門神奇的語言,它的數組也同樣獨特。我們要去其糟粕,取其精華,把常用的最優實踐總結出來。如有錯誤,請指出。 javascript數組是一種類數組的對象,擁有對象的特性。當屬性名是小而連續的整數時,應該使用數組,否則,使用對象。 數組來源 所有的...
  47. React 遭遇 V8 性能崩潰的故事 本篇文章主要講述 V8 如何選擇 JavaScript 值在內存中表現形式的優化方式,以及解釋 React core 在 V8 中出現的性能斷崖。
  48. Vue中 render 函數應用因為最近接手維護一個基于 ivew 的項目, 新增模塊中包含很多自定義功能, 所以大量使用到了 render 函數; 故對其做一下總結...關于 render 函數, 官方文檔也做了比較詳細的介紹: render 函數: [鏈接] ; 一般組件我...
  49. 前端精準測試探索:覆蓋率實時統計工具隨著業務增長, 隨之而來的前端需求激增, 如何在有限的時間內保證前端代碼的質量.通過測試同學單方面的保障, 還是免不了前端線上問題, 存在回歸不到位或者測試遺漏的地方, 同時測試質量的高低沒有客觀數據可量化.&...
  50. JavaScript-this綁定的優先級 理解this綁定優先級的前提是理解this的綁定規則,理解綁定規則之前,我們先來了解一下函數"調用位置"。 通常來說,要想找到調用位置,最重要的是分析調用棧(在有的編程模式下,真正的調用位置可能被隱藏起來了,通過調用棧來分析調用位置最為直接)。 來個梨子: function baz() { // 當前調...
  51. 前端工程實踐之可視化搭建系統(一) 背景 隨公司業務不斷發展,營銷活動、廣告、頁面改版等需求日益倍增,靠純人工擼代碼已經無法跟上需求增長速度。加班?招人?顯得不夠明智,也不夠前端,提效也就成為了關鍵。如何提效?從何入手?那不得不提的就是前端提效神器 —— 搭建系統,下文將從多個方面,向大家簡單介紹政采云前端團隊 ZooTeam 的可視...
  52. nodejs(十)Koa使用教程 使用koa搭建http服務器很簡單,只需要如下三步,即可 //demo01.js const Koa = require('koa') const app = new Koa() app.listen(3000) 復制代碼 然后使用node命令運行該文件即可 node buildHttp.js 復制代碼 打開瀏覽器,我們輸入 http://loaclhost:3000訪問,頁面顯示Not Found,這是因為我們并沒有告訴Koa應該...
  53. JavaScript:V8編譯過程 眾所周知 ECMAScript 語言類型分為: Undefined , Null , Boolean , String , Symbol , Number ,和 Object 。我們常說前六種數據類型為基礎類型, Object 為引用類型或者說復雜類型數據。那么我們有想過為什么說 Undefined , Null , Boolean , String , Symbol , Number 為基礎類型,而 Object 為引用類型?...
  54. JS 引擎 V8 如何與 Lite 模式兩開花?》V8 團隊近日發表了一個文章,就詳細分享了在構建 V8 Lite 的過程中將一些關鍵的優化部分帶到現有 V8 上的過程,以及在實際工作負載中對 V8 性能表現的影響。 (by 開源中國 - h4cd)
    JS 引擎 V8 如何與 Lite 模式兩開花
  55. 細說webpack 6. Babel的使用在 webpack 中編寫 JavaScript 代碼,可以使用最新的 ES 語法,而最終打包的時候,webpack 會借助 Babel 將 ES6+語法轉換成在目標瀏覽器可執行 ES5 語法。所以 Babel 是一個重要的知識點需要掌握。
  56. vue自動化路由 解放雙手,從此不用配置路由。當你看到項目中大批量的路由思考是拆分維護業務路由還是統一入口維護時,無需多慮,router-auto是你的最優選擇,它幫你解決路由的維護成本,你只需要創建相應的文件夾,路由就能動態生成,路由攔截你可以在main.js中去攔截他,總之比你想象的開發還要簡單。 router-auto github地...
  57. 新手前端不要慌 給你?10根救命稻草放假了特意給大家坐火車打發時間寫了這篇工具收集類的小文, 讓大家輕輕松松學知識, "鐵皮飯盒"祝大家十一快樂, 吃開心玩開心!
  58. #前端技術#【React 開發者指南】詳見: 這是一個詳細、全面的 React 開發者指南,旨在幫助你選取適合的學習路徑及你想學習的庫,從而成為一名 React 開發者。
    React 開發者指南

關注github前端日報 訂閱精彩文章

前端日報欄目數據來自碼農頭條,每日分享互聯網上熱門的前端開發、移動開發、設計、資源和資訊等,為開發者提供動力,如果覺得內容對你有用,記得分享給你的小伙伴。進入碼農頭條查看更多