20180718 前端開發日報

嗨,送你一張Web性能優化地圖;面試官:請簡述一下vue-cli命令行工具,你能自己手寫一個嗎?;face-api.js:一個在瀏覽器中進行人臉識別的 JavaScript 接口;如何使用JavaScript控制臺改進工作流程;vue 實踐技巧合集;Angularjs中不同類型的雙向數據綁定;重新認識JavaScript面向對象:從ES5到ES6;2018年推出的10個JavaScript動畫庫

  1. 嗨,送你一張Web性能優化地圖 嗨,送你一張Web性能優化地圖 本文作者: Berwin ,W3C性能工作組成員,360導航高級前端工程師。Vue.js早期用戶,《深入淺出Vue.js》(正在出版)作者。 http://github.com/berwin 我們都知道對于Web應用來說性能很重要。然而性能優化相關的知識卻非常的龐大并且雜亂。對于性能優化需要做些什么以及性能瓶頸是...
  2. 面試官:請簡述一下vue-cli命令行工具,你能自己手寫一個嗎? 還記得我們在寫vue 項目的時候用腳手架vue-init的主要作用是根據指定模板生成項目原型嘛?那么vue-init怎么實現的呢? 其實就是在vue-cli package.json中增加下面的代碼 { "bin": { "vue": "bin/vue", "vue-init": "bin/vue-init", //執行vue-init 的...
  3. face-api.js:一個在瀏覽器中進行人臉識別的 JavaScript 接口 號外!號外!現在人們終于可以在瀏覽器中進行人臉識別了!本文將為大家介紹「face-api.js」,這是一個建立在「tensorflow.js」內核上的 javascript 模塊,它實現了三種 卷積神經網絡 (CNN)架構,用于完成人臉檢測、識別和特征點檢測任務。 face-api.js:https://github.com/justadudewhohacks/face-api.js ...
  4. 如何使用JavaScript控制臺改進工作流程 作為Web開發人員,很有必要了解如何調試代碼。后臺開發我們經常使用外部庫來記錄日志,并在某些情況下格式化顯示日志,前端我們會使用斷點和控制臺,但是我們瀏覽器的控制臺比我們想象的要強大得多。 當我們考慮控制臺時,首先想到的是console.log,對吧?但是它比我們想像中使用的方法多得多?,F在我們來看一下如何充...
  5. vue 實踐技巧合集 前言 本文純屬個人平時實踐過程中的一些經驗總結,算是一點點小技巧吧,不是多么高明的技術,如果對你有幫助,那么不勝榮幸。 本文不涉及罕見API使用方法等,大部分內容都是基于對vue的一些實踐而已。由于涉嫌投機取巧,可能會帶來一些不符合規范的副作用,請根據項目要求
  6. Angularjs中不同類型的雙向數據綁定 Angularjs1.X中兩種不同的雙向數據綁定 聊聊 Angularjs1.x中那些活見鬼的事情。 一. html與Controller中的雙向數據綁定 html-Controller的雙向數據綁定,在開發中非常常見,也是Angularjs1.x的宣傳點之一,使用中并沒有太多問題。 1.1數據從html流向controller 也就是從 視圖層 流向 模型層 ,原生html中需要...
  7. 重新認識JavaScript面向對象:從ES5到ES6 一. 重新認識面向對象 1. JavaScript是一門面向對象的語言 在說明JavaScript是一個面向對象的語言之前, 我們來探討一下面向對象的三大基本特征: 封裝 , 繼承 , 多態 。 封裝 把抽象出來的屬性和對方法組合在一起,且屬性值被保護在內部,只有通過特定的方法進行改變和讀取稱為封裝。 我們以代碼舉例, ...
  8. 2018年推出的10個JavaScript動畫庫 查看JavaScript開發人員的一些優秀動畫庫,包括HTML,CSS和JavaScript代碼示例! 現代網站的客戶端提供高質量的動畫,這導致了對JavaScript動畫庫的需求的增加。幸運的是,供應似乎與需求相匹配,并且有很多選擇。但是,選擇哪個庫可能會引起很多麻煩。許多圖書館有可能在一年中變得更好,并且將成為創建動畫的首選解...
  9. 于是,我們給前端分享會定義了一個未定義的名字 經過我司前端小伙伴們的投票,我們即將對外開放的前端分享會終于正式定名為 Undefined 分享會啦(撒花~)而這篇文章就是關于分享會本身的一個小分享 XD 我個人私底下是挺喜歡和其他同學扯些和技術有關的話題的,相信和我類似的開發小伙伴們也一定不少。不過在個
  10. 前端測試框架——認識Jest Jest是什么? Jest的slogan是令人愉快的JavaScript測試,顧名思義,就是用來測試JavaScript代碼的。 Jest有以下的特點: 高速和沙盒。Jest以最大化性能并行化的測試運行??刂婆_消息都是緩沖并輸出測試結果。沙盒測試文件和自動
  11. 論 Rust 和 WebAssembly 對源碼地址索引的極限優化 Tom Tromey 和我嘗試使用 Rust 語言進行編碼,然后用 WebAssembly 進行編譯打包后替換 source-map (源碼地址索引,以下行文為了理解方便均不進行翻譯)的 JavaScript 工具庫中性能敏感的部分。在實際場景中以相同的基準進行對比操作,WebAssembly 的性能要比已有的 source-map 庫 快上 5.89 倍 。另外,多次測試結果也...
  12. 前端測試框架Jest——語法篇 使用匹配器 使用不同匹配器可以測試輸入輸出的值是否符合預期。下面介紹一些常見的匹配器。 普通匹配器 最簡單的測試值的方法就是看是否精確匹配。首先是toBe() test('two plus two is four', () => { expect(2
  13. WebAssembly在那些情況下會優于JavaScript 在識別和描述核心元素的過程中,我們分享了構建SessionStack時使用的一些經驗法則,這是一個輕量級但健壯且高性能的JavaScript應用程序,以幫助用戶實時查看和重現其Web應用程序的缺陷。 這次我們來分析WebAssembly的工作原理,以及在如下幾個方面和JavaScript進行比較:加載時間,執行速度,垃圾回收,內存使用情況,...
  14. Vue mixins淺談使用方法及需要注意的點 前言 大家好啊,我又來了這次繼續我們上周的話題Vue mixins,經過幾天的研究發現Vue mixins并不能代替Vuex全局狀態管理或者eventvue傳遞參數,究竟為什么請先看下面的講解。 淺談Vue mixins 個人理解mixins就是定義一部分公共的方法或者計算屬性,然后混入到各個組件中使用,方便管理與統一修改 說了這么多我想大...
  15. Vue源碼閱讀前必須知道javascript的基礎內容 前言 vue目前是前端使用頻率較高的一套前端mvvm框架之一,提供了數據的響應式、watch、computed等極為方便的功能及api,那么,vue到底是如何實現這些功能的呢?在探究vue源碼之前,必須了解以下幾點javascript的基本內容,通過了解這些內
  16. Redux源碼分析--bindActionCreators篇 這是Redux源碼分析系列的第四篇文章,當這篇文章結束之后Redux源碼分析系列也該告一段落了。這篇文章主要想談談bindActionCreators這個函數的實現原理,為了更好的理解這個函數我會恰當地引入一些應用代碼。 1. ActionCreator創建
  17. 基于 HTML5 結合互聯網+的電力接線圖“互聯網+”思維讓數據的搜集和獲取更加便捷,并且隨著大數據的深度開發和應用,數據分析預測對于提升用戶體驗有非常重要的價值,同時也為不同行業、不同領域的合作提供了更廣闊的空間。傳統的發電企業是一個資金、...
  18. React 回憶錄(二)為什么使用 React? Hi 各位,歡迎來到 React 回憶錄! 在本章中,我將介紹 React 框架的五大特點:虛擬DOM,組件化,聲明式代碼,單向數據流和純粹的JavaScript語法。但在介紹這五大特點之前,讓我們先簡要說明一下 React 出現的時代背景。 01. Re
  19. Laya實戰-打地鼠JS版本的ES6重構 前言 在上一篇文章《從零開始制作微信小游戲-彈一弾》中,我使用了純原生的Canvas搭配Matter物理引擎,制作了一個彈一弾的微信小游戲,在其文末我提到了未來會寫一篇使用專業游戲引擎制作H5游戲的文章 這一篇文章就是這個目的。目前國內主流成熟的H5游戲引擎有
  20. Git存儲數據的原理 · 語雀 Git存儲數據的方式Git 是一個內容尋址文件系統,也就是說他實際上是一個鍵值對數據庫(key-value data store)。Git 存儲一份數據,然后返回一個40位的 Hash 值作為鍵值,通過這個鍵值,我們就能找到所存儲的數據。 - .git/
  21. redux中間件的源碼的一些理解 這是redux應用了middleware之后的處理事件的流程圖,這跟node中的中間件的功能如出一轍,下面我們來看它的源碼是如何實現的function applyMiddleware() { for (var _len = arguments.length
  22. React拾遺:從10種現在流行的 CSS 解決方案談談我的最愛 (下) If you are not paying for the product, you are the product. 當一個商品是“免費”的,那往往你成了商品。 終于有時間靜下心學點東西,把這個系列最后一篇填上。 中篇 介紹了 tachyons, 本篇介紹
  23. Angular Elements 及其運作原理 原文: Angular Elements: how does this magic work under the hood? 現在,Angular Elements 這個項目已經在社區引起一定程度的討論。這是顯而易見的,因為 Angular Element
  24. Web Worker 初探 以前我們總說,JS是單線程沒有多線程,當JS在頁面中運行長耗時同步任務的時候就會導致頁面假死影響用戶體驗,從而需要設置把任務放在任務隊列中;執行任務隊列中的任務也并非多線程進行的,然而現在HTML5提供了我們前端開發這樣的能力 - Web Workers AP
  25. React 學習路線圖(2018 版) 此學習路線將指引你在 2018 年成為 React 開發者 此倉庫是 react-developer-roadmap 的中文版。 下面的思維導圖展示了 React 的學習路線以及在學習道路上所需要學習的東西。我畫此圖的目的主要是為了讓問我“我接下來要學什么才能成為 React 開發者?”的人有一個清晰的目標。 免責聲明 此...

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

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