CSS @font-face 性能優化；Webpack5.0 新特性嘗鮮實戰 ；Git 自救指南；Vue響應式原理-理解Observer、Dep、Watcher；jQuery源碼解析之trigger()；前端進階之 let、const、var；前端框架技術選型 React vs. Vue (vs. Angular)；公司要求會使用框架vue，面試題會被問及哪些？
- CSS @font-face 性能優化 本文主要介紹字體加載優化的常用策略。
- Webpack5.0 新特性嘗鮮實戰 在老袁寫這篇文章的時候，v5版本仍然處于早期階段，可能仍然有問題。而且作為一個 major 版本，其中有一些breaking changes，可能會導致一些配置和插件不工作。但這并無妨礙我們去開始對changelog上的新特性進行嘗鮮實戰。大家如果遇到什么問題可以 移步到這 進行反饋。另外有關于Webpack4的配置和Compiler->Compilat...
- Git 自救指南Git 雖然因其分布式管理方式，不完全依賴網絡，良好的分支策略，容易部署等優點，已經成為最受歡迎的源代碼管理方式。但是一分耕耘一分收獲，如果想更好地掌握 git，需要付出大量的學習成本。即使在各種 GUI 的加...
- Vue響應式原理-理解Observer、Dep、Watcher 最近在學習Vue的源碼，看了網上一些大神的博客，看起來感覺還是蠻吃力的。自己記錄一下學習的理解，希望能夠達到簡單易懂，不看源碼也能理解的效果:laughing: 如果有錯誤，懇求大佬們指點嘿:yum: Object.defineProperty 相信很多同學或多或少都了解Vue的響應式原理是通過 Object.defineProperty 實現的。被 Objec...
- jQuery源碼解析之trigger() 一、 $() .trigger()和 $() .triggerHandler() 的作用和區別 （1）trigger("focus") 觸發被選元素上的指定事件（focus）以及事件的默認行為（比如表單提交）; triggerHandler(xxx) 不會引起事件（比如表單提交）的默認行為 （2）trigger(xxx) 觸發所有匹配元素的指定事件； triggerHandler(xxx) 只觸...
- 前端進階之 let、const、var 首先我們來看一段代碼 console.log(變量) // undefined var 變量 = 1 復制代碼 從上面的代碼來看，雖然變量還沒有被聲明，但是我們卻可以使用，這種情況就叫做提升，并且是聲明提升。 再來一段代碼 console.log(變量) // ? 變量() {} function 變量() {} var 變量 = 1 復制代碼 上面的代碼叫做函數提升，函數...
- 前端框架技術選型 React vs. Vue (vs. Angular) 重新考慮前端技術選型需要大量思考，討論，決策，規劃，管理和實施。我們首先需要做出的決定之一是選擇一個前端框架來重新設計我們的產品。 我們研究了幾個月來保證我們得出一個的更好決策。進行討論，建立概念證明，與其他公司相關經驗的同事進行面談，并閱讀大量在線材料。 在本文中，我將比較選型過程中的入圍者...
- 公司要求會使用框架vue，面試題會被問及哪些？ 如果你是一個已經在學習前端開發的初學者亦或者是一名在代碼界縱橫多年的程序員，那你一定知道現在最火的前端框架之一Vue.js。它相比于React與Angular上手更加容易，或許這也是很多初學者選擇vue的原因之一。 我們看到很多招聘上都寫著掌握vue開發項目，那么面試都會問什么呢？別急，下面是我給大家整理了一...
- 從零實現一個 Webpack Loader 參考： Webpack Book --- Extending with Loaders。 Webpack Doc --- Loader Interface Loader 是 Webpack 幾大重要的模塊之一。當你需要加載資源，就需要設置對應的 Loader，這樣就可以對其源代碼進行轉換。 由于 Webpack 社區的繁榮，使得大部分的業務場景所使用的資源都有對用的 loader，可...
- 【JavaScript】數據結構與內存中的堆和棧 目錄 前言 一 堆棧 二 堆棧與內存泄漏 前言 電腦中一個很重要的部件是內存條，絕大多數時候我們在操控一部分ram運行我們的程序，于是就涉及到了堆棧的概念，鑒于總是記不住要查，寫一篇比較簡單的來記一下堆棧。 一 堆棧 堆棧是一個計算機專用術語，在數據結構里它代表著兩種數據...
- 前端培訓-初級階段-場景實戰（2019-06-06）-Content-Type對照表及日常使用前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，打牢基礎知識的中心思想，我們開課啦（...
- JS數組的數據結構 當我們談到棧和隊列的時候，就會條件反射想起數據結構。在ECMAScript標準中，數組也是提供了類似于其他數據結構的方法，分別是 棧方法 和 隊列方法 。 二、棧方法 1. 定義 棧是一種 后進先出 的數據結構，也就是最新添加的項會被最早移除，如同堆疊烙餅一般。 棧中項的插入（又叫推入）和移除（又叫彈出）只...
- 實用指南：編寫函數式 JavaScript 原文：https://www.freecodecamp.org/news/a-practical-guide-to-writing-more-functional-javascript-db49409f71/ 譯者：zhicheng 校對者：lily 提示：文中的藍色字體大家可以點擊文末“閱讀原文”在 freeCodeCamp 中文論壇訪問鏈接 一切都是函數。 函數式編程...
- 重回前端之Class 在學習了C#之后，回頭再看JavaScript時，第一時間就想到關于Class和偽類，當初在看《JavaScript高程》和《JavaScript語言精粹》時，在關于原型和繼承的相關章節，不止一次的提到了偽類，并闡述了使用的偽類的優點和缺點?！皞晤悺毙问娇梢越o習慣了使用基于類的語言編程的后端程序員提供方便書寫JavaScript的便利，但是隱藏...
- Vue核心50講 | 第四回：Vue 官方贈送的橙色裝備，豈能不要 書接上文，上一回咱們快速的了解了 Vue 的生命周期，知道了在 Vue 的生命周期中存在三個比較重要的階段，分別是 Created、Mounted 和 Destroyed。接下來，咱們就來說一說 Vue 官方贈送的橙色裝備 —— vue-devtools。 說到 vue-devtools，使用 Vue 開發的時候 Vue 官方推薦在瀏覽器安裝 Vue Devtools 這個工具。這個時候...
- 六種組織CSS的方式Ben Frain曾經說過，寫css代碼很容易，但是擴展和維護卻很難。本文就介紹了一套方案來解決這個問題。
- JavaScript進階系列-原型繼承與原型鏈 先上圖 原型繼承 原型繼承實現 function Animal(name){ // 屬性 this.name = name || 'Animal'; // 實例方法 this.sleep = function(){ console.log(this.name + " 正在睡覺。"); } } // 原型方法 Animal.prototype.eat = function(food){ console.log(t...
- 那些年，我們一起踩過的坑（前端防翻車指南） javascript做為一門腳本語言，由于缺乏約束，以及各種自動容錯機制和隱式轉換，產生了很多容易誤解和容易引發問題的地方， 《javascript語言精髓》一書中，有很大一部分篇幅介紹了javascript語言的糟粕和毒瘤部分，相信大部分問題有些人遇到過，有些人則通過學習知曉其原理而完美的躲過，隨著ES規范的不斷完善與發展，其...
- 配置Webpack4支持ES6/TypeScript/異步文件引用加載 由于Webpack以及它的周邊工具babel等更新過快，在當前的時間線來看，很多相關的文章已被版本所淘汰，已經不足以借鑒來搭建一個可以正常使用的環境，所以打算寫來記錄一下。 在寫這篇文章的時候我會同步搭建本地環境，盡量避免有略過的細節部分。 環境起步 熟悉初始化項目的親可直接跳過。 首先請保證node與npm版...
- 談談JavaScript中裝箱和拆箱 在 JavaScript 里面有個引用類型叫做 基本包裝類型 ，它包括 String、Number和Boolean 。那么它和基本的類型 String、Number和Boolean 是啥關系呢？接著往下看:eyes: 裝箱操作 所謂的 裝箱 ，是指將基本數據類型轉換為對應的引用類型的操作。而裝箱又分為 隱式裝箱和顯式裝箱 。 隱式裝箱 ...
- 通過什么途徑能夠深入了解 JavaScript 引擎是如何工作的？ 昨天收到一封來自深圳的一位前端童鞋的郵件，郵件內容如下（很抱歉，未經過他的允許，公開郵件內容，不過我相信其他人肯定也有同樣的問題，所以，直接把問題原文拋出來）： “讀了你的幾篇關于JS（變量對象、作用域、上下文、執行代碼）的文章，我個人覺得有點抽象，難以深刻理解。我想請教下通過什么途徑能...
- 異步編程（1）：Promise 我們都知道，ES是單線程語言。所以異步編程對它來說，尤其重要。也可以說是他的核心功能。 我們常見的異步編程有很多，比如 回調函數 ?、 事件監聽 發布訂閱 Promise 等。 在早期的時候，我們使用的主要方式是回調函數，但是當我們有很多回調函數需要依賴的時候，一層套一層，就會形成 回調地...
- 一步步分析 Node.js 的異步I/O機制 它的優秀之處并非原創，它的原創之處并非優秀。 《深入淺出Node》 本文章節如下圖所示，閱讀時間大約為10分鐘~15分鐘，圖少字多，建議仔細閱讀。 背景 在計算機資源中， I/O 和 CPU計算 在硬件支持上是可以并行進行的。所以，同步編程中的I/O引起的阻塞導致后續任務（可能是CPU計算，也可能是其他I/O...
- JavaScript 線性代數：向量 本文是“JavaScript 線性代數”教程的一部分。 向量是用于精確表示空間中方向的方法。向量由一系列數值構成，每維數值都是向量的一個 分量 。在下圖中，你可以看到一個由兩個分量組成的、在 2 維空間內的向量。在 3 維空間內，向量會由 3 個分量組成。 我們可以為 2 維空間的向量創建一個 Vector2D 類，...
- Fundebug前端JavaScript插件更新至1.8.0，兼容低版本的Android瀏覽器 摘要：兼容低版本Android瀏覽器，請大家及時更新。 Fundebug前端BUG監控服務 Fundebug 是專業的程序BUG監控平臺，我們JavaScript插件可以提供全方位的BUG監控，可以幫助開發者第一時間定位JavaScript執行錯誤、HTTP請求錯誤以及資源加載錯誤。并且，我們可以記錄用戶行為、“錄制”用戶操作視頻，幫助開發者...
- 重學前端（8）封裝ajax,http,跨域問題 HTTP協議，即超文本傳輸協議(Hypertext transfer protocol)。是一種詳細規定了瀏覽器和服務器之間互相通信的規則 HTTP協議規定了 請求 和 響應 的標準 請求與請求報文 get請求的請求報文詳解 //--------------------------請求行-------------------------------- // GET 請求方式 // 01.ph...
- 提升javascript運行速度的編程實踐（延遲加載、條件預加載和位運算） 在計算機領域中最主要的性能優化技術之一就是“避免無謂的工作”，避免無謂的工作有兩層意思：第一是“別做無關緊要的工作”（廢代碼），第二是重復已完成的工作。無關緊要的工作在代碼重構的過程中往往能夠被發現，第二種經常難以發現和界定。 避免重復的工作，以瀏覽器探測為例： function addHandler(target,eventTyp...
- 面試官(8): React 強調的『不可變數據結構』怎么實現? 我們在學習 React 的過程中經常會碰到一個概念,那就是數據的不可變性(immutable),不可變數據是函數式編程里的重要概念,因為可變數據在提供方便的時候會帶了很多棘手的副作用,那么我們應該如何處理這些棘手的問題,如何實現不可變數據呢? 文章目錄 可變數據的副作用 不可變數據的解決方案 實現更簡單的immut...
- 一周 GitHub 開源項目推薦 | Golang、Python、PHP、前端、機器學習、Linux 一周 GitHub 開源項目推薦 點擊鏈接或圖片即可閱讀 喜歡請分享到朋友圈哦 深入 Go 并發編程研討課 通過本次課程，你可以: 了解基本同步原語的具體實現、hack 同步原語進行擴展，了解它們的使用場景和坑，以及別人是怎么踩的 ...
- 前端打包混編壓縮js代碼，如何不重新打包，修改js文件內部配置參數？ 利用worker多線程 實現基于vue打包后外置配置化操作 實際就是vue build打包文件都混編了 但是worker多線程 實現外部配置。 前端項目在build后，項目的代碼通常進行混編、壓縮等處理，我們的js代碼最終會成為無序的js模塊文件。若修改項目中業務的配置參數，通?？梢酝ㄟ^接口服務來傳達，但是有時候也需要外部的配置文...
- webpck4.x系列-output 說過了entry， 與之相對應的便是output output出口 目錄 配置 output 選項可以控制 webpack 如何向硬盤寫入編譯文件。注意，即使可以存在多個入口起點，但只指定一個輸出配置。 output的配置項要比entry多 具體詳細的配置，可以 參考 filename 打包輸出的文件...
- 剛剛6月榜單：JS跌慘，Python又霸榜，C++再無翻身可能 Python勇者無敵！ 最近一份PYPL 6月報告了來了，通過半年的發展，Python基本已奠定2019年-2020的地位，持續稱王就對了！ PLPY 6月榜單， JS跌慘 只見Python笑，哪聞C++哭 PYPL 發布 6 月編程語言指數榜啦。 毫無波瀾，Python繼續拿下 NO.1，贏得毫無懸念，毫無驚喜。 沒記錯...
- 手摸手教你搭一個前后端 React、Typescript、Koa、GraphQL 環境 項目選型與環境搭建 項目選型 三大框架里選哪個？ react 個人愛好。 react-router 定義路由。 react context 狀態管理。 react hooks 組件化。 引入強類型語言？ typescript。為 js 提供類型支持，編輯器友好，增加代碼...
- Promise使用以及源碼推理 Promise是什么 Promise是高版本瀏覽器自帶的一個類，不兼容低版本瀏覽器。Promise對象有三個狀態，等待態pending，成功態resolved，失敗態rejected，默認為pending，成功或者失敗后不可再變化狀態。 我們為什么用Promise 在異步編程中可以幫助我們解決回調地獄的痛苦。方便有連帶關系的異步請求編寫，也可實現并發...
- 類似 GitHub 的 webhook 實現 Webhook是一種非常強大的推送機制，如果熟悉WordPress的同學可以類比構建WP生態的各類鉤子函數。Githubt通過webhook讓開發人員可以監聽倉庫的變化觸發持續集成工具的運作，比如Travis CI。 需求 大家都看過Github上的webhook，可以對某一個repository設置webhook監聽倉庫變化，比如push，page_build等...
- 從setTimeout簡單了解js事件模型 先從一個例子入手： (function() { console.log('開始執行') setTimeout(function fun1() { console.log('第一個延時函數消息') }) console.log('一條消息') setTimeout(function fun2() { console.log('第二個延時函數消息') }, 0) console.log('結束') })(); 復制代碼 輸出結果很容...
- 基于vue-cli3多頁面開發apicloud應用 之前開發項APP項目直接用APICloud+原生js的方式進行編寫，整個項目下來發現開發慢，頁面代碼多且復雜，維護起來相對困難，而且文件大打包之后的APP會比較大，apicloud的框架也不好用，支持部分es67(像let、const、import等es6新特性不支持寫的太難受了) 采用vue-cli+APIcloud的方式寫解決以上痛點，開發靈活，并且打包...
- #工具推薦#【CSS Grid 代碼生成器：CSS Grid Generator】詳見： CSS Grid Generator 是一款通過拖拽方式就可以生成 CSS Grid 代碼的工具，幫助你快速進行動態布局。
- 如何壓縮JS代碼？ 當我們使用 JQuery 這樣的庫的時候，會發現通常會提供兩個版本：開發調試就引入未壓縮的開發版，正式發布就引入壓縮后的生產版。那么要壓縮自己的JS代碼要怎么做呢？ 把如何壓縮JS代碼作為第二個例子，是因為我以前在剛開始學習前端知識的時候就疑惑什么事生產版和開發版~新童鞋可以先了解，后理解。 使用 Ug...
- 談談js點擊之后發生了什么 之所以突然想寫這個文章，主要是之前看到一篇有意思的博文， 《探究點擊事件在JavaScript事件循環中的表現》 ，有趣的地方在于JS點擊事件加入回調的 并不是點擊事件的回調方法 ，而是點擊事件本身 (點擊位置等描述點擊的) 。 點擊不是加入回調而不是加入事件 <body style="height: 2000px"&...
- 什么時候不能在 Node.js 中使用 Lock Files[每日前端夜話0x7E] 每日前端夜話 0x7E 每日前端夜話，陪你聊前端。 每天晚上18:00準時推送。 正文共：3509 字 預計閱讀時間： 10 分鐘 翻譯：瘋狂的技術宅 來源： toptal When Not to Use Lock Files with Node.js “可是在我的機器上能工作??！”這種場景可能是調試 bug 時最常...
- Angular 8.0 正式發布：支持更多 Web 標準 “ Angular 8.0 版縮短了應用在現代瀏覽器上的啟動時間，提供了用于訪問 CLI 的新 API，并使 Angular 支持更多 Web 標準，追上了 Web 生態的前沿發展趨勢?！?/div>webpack 4.0 小記 其實之前也會看一些 webpack 腳手架的配置，但是使用的插件實在是太多了，不了解各個插件的左右是一個很大的瓶頸，所以著手認識認識各大插件。 項目地址 ，之前一直都是用腳手架工具，最近得閑就學習了花褲衩大佬的手摸手系列，自己按著實現一下，順便記錄一下知識點。 項目使用 yarn,之前用主要使用 cnpm，但是總...vue實現錄音功能（pc端） 錄音功能一般來說在移動端比較常見，但是在pc端也要實現按住說話的功能呢？項目需求：按住說話，時長不超過60秒，生成語音文件并上傳，我這里用的是recorder.js 1.項目中新建一個recorder.js文件，內容如下，也可在百度上直接搜一個 // 兼容 window.URL = window.URL || window.webkitURL navigator.getUser...Web 漏洞防護指南 資料總結得還不錯。React Hooks 源碼解析 譯文一篇。生產環境下的Node.js——開源監控工具 你認為Node.js應用程序可以擁有的最重要的功能是什么？ 是花哨的全文模糊匹配搜索，還是用socket進行實時聊天呢？ 你能告訴我可以添加到Node.js應用中的最高級，最驚人和最吸引人的功能是什么么？ 想知道我的么？ 高性能和不間斷服務 。高性能應用程序需要做好以下三點： 最短的停機時間； 可預測的資源使...在 Vue 應用中使用 Netlify 表單功能 Netlify 帶有內置表單處理功能，可以用來存儲表單數據，下載 csv 文件，同時可以在接收到新的提交時發送郵件通知或者通過配置 webhook 發送請求。 它是通過在部署應用時直接解析 HTML 文件，識別 html 中的 form 標簽來實現的，本文記錄如何在一個 Vue 應用中使用表單功能。 開發 首先使用@vue/cli 新建一個 Vue...你用的那些 CSS 轉場動畫可以換一換了 “本文主要介紹 N 多種全新的動畫過場效果，實現簡單，體驗俱佳，主要用到的技術是 clip-path 和 mask 遮罩，以及 CSS 變量和 animation 的創新實現方法?！?/div>
前端日報欄目數據來自碼農頭條，每日分享互聯網上熱門的前端開發、移動開發、設計、資源和資訊等，為開發者提供動力，如果覺得內容對你有用，記得分享給你的小伙伴。進入碼農頭條查看更多