WEB前端學習資源清單

JavaScript

基礎知識

• 【異步】MDN：使用 promises
• 【異步】Promise原理講解 && 實現一個Promise對象 (遵循Promise/A+規范)
• 【異步】用 async/await 來處理異步
• 【UMD】可能是最詳細的UMD模塊入門指南

• js監聽輸入框值的即時變化onpropertychange、oninput
• 為什么是 JSONP
• ECMAScript 位運算符
• Cookie
• Blob對象
• 淺析 JavaScript 中的 函數 uncurrying 反柯里化(需細體會)
• Javascript Lazyload延遲加載特效
• Javascript中bind()方法的使用與實現
• ArrayBuffer：類型化數組
• 小tips: 純前端JS讀取與解析本地文本類文件
• js中的new()到底做了些什么？？
• FormData 對象的使用
• [MDN]MouseEvent.movementX

前端性能、工程化

• 前端性能優化 24 條建議（2020）
• 【webpack】webpack-緩存
• 大公司里怎樣開發和部署前端代碼？
• 【webpack】babel-preset-env與stage-x的使用指南
• web前端圖片懶加載實現原理

存儲、通訊、緩存、XSS

• 【安全】前端安全面試題

•  預測最近面試會考 Cookie 的 SameSite 屬性

• 前端開發如何獨立解決跨域問題（代理與反向代理）
• 通訊相關：STOMP Over WebSocket
• 反向代理和正向代理區別

JS設計模式

• 騰訊全端 AlloyTeam 團隊 Blog JavaScript設計模式
• 龍恩：Javascript設計模式詳解
• 湯姆大叔：深入理解JavaScript系列

JS封裝、原型、繼承

• Javascript 面向對象編程（一）：封裝
• Javascript面向對象編程（二）：構造函數的繼承
• Javascript面向對象編程（三）：非構造函數的繼承
• JavaScript學習總結（五）原型和原型鏈詳解

web打包工具（webpack、git、gulp等）

• 【webpack3】webpack從此不再是我們的痛點 — 核心基礎
• 【webpack4】深入淺出的webpack構建工具--webpack4+vue搭建環境 (十三)
• Webpack模塊引用中還有什么坑？

• 【git】一個小時學會Git
• 【vuecli2】vue-cli的webpack模板項目配置文件分析

• 教你一步步從零構建webpack開發多頁面環境

• 【webpack入門】入門 Webpack，看這篇就夠了
• 阮一峰：npm scripts 使用指南
• 詳解webpack-CommonsChunkPlugin的配置和用法
• Gitbook簡易教程

書籍總結、前端技能

• 【書籍】 JS秘密花園
• 【書籍】《JavaScript權威指南》JavaScript核心概念歸納整理
• JavaScript 內存泄漏教程
• 探尋 JavaScript 精度問題以及解決方案
• JavaScript 中的數據格式轉換一例：reduce的應用

微信小程序、釘釘開發

• 微信小程序，監聽用戶登錄事件

前端自動化測試

• 阮一峰：測試框架 Mocha 實例教程
• 契約測試框架Pact：中文參考指南 Pact.js之github地址

CSS/CSS3/HTML/HTML5

• 從網易與淘寶的font-size思考前端設計稿與工作流
• 不得不收藏的——IE中CSS-filter濾鏡小知識大全
• 文件各種上傳，離不開的表單
• [HTML5] Blob對象及擴展分片上傳文件
• H5圖片壓縮與上傳
• CSS實現水平垂直居中的1010種方式（史上最全）
• 如何用純CSS創作一張紀念卓別林的卡片（read）
• HTML5 postMessage 和 onmessage API 詳細應用
• [適配]極速適配 iPhone X 秘笈
• [video參考]視頻H5 video最佳實踐
• 移動端開啟攝像頭、視屏錄制
  • MediaDevices.getUserMedia()　
  • MediaRecorder()
  • HTML5調用手機前置攝像頭或后置攝像頭拍照，canvas顯示,經過Android測試

VUE

• [基礎]揭密 Vue 的雙向綁定(自定義v-model)
• [vuex入門經典]vuex最簡單、最詳細的入門文檔
• Vue 折騰記 - (10) 給axios做個挺靠譜的封裝(報錯,鑒權,跳轉,攔截,提示)
• 手摸手，帶你用vue擼后台 系列一（基礎篇）
• 手摸手，帶你用 vue 擼后台 系列二(登錄權限篇)
• Vue.js——60分鍾組件快速入門（上篇)
• Vue源碼解析(五)-vuex
• 處理 Vue 單頁面 Meta SEO的另一種思路
• vue后端管理系統模板vue-admin-template（后台模板）
• Vue.js寫一個SPA登錄頁面的過程 （注：該實現就是登錄成功后在cookie中添加一個登錄狀態，其實不安全與准確）
• 從零構建vue2 + vue-router + vuex 開發環境到入門，實現基本的登錄退出功能
• vue-cli + webpack 多頁面實例應用
• vue-cli + webpack 多頁面實例配置優化方法
• vue-tooltip  - 帶綁定信息提示的提示工具
• vue-lazyload 
• vue-calendar - 日期選擇插件
• Vue利用canvas實現移動端手寫板
• 160行代碼仿Vue實現極簡雙向綁定[詳細注釋]
• 面試題：你能寫一個Vue的雙向數據綁定嗎？
• vue非父子組件怎么進行通信
• vue之pdf在線預覽 vue插件開發 使用pdf.js實現手機端在線預覽pdf文檔vue2.0全局組件之pdf
• Vue.js動畫筆記
• vue結合axios使用入門

• 關於Vue實例的生命周期created和mounted的區別
• Vue2 幾種常見開局方式
• 在多頁面項目下使用Webpack+Vue
• 基於vue的下拉刷新&滾動刷新指令
• vuejs美化時間
• Vue.js寫一個音樂播放器
• vue-manage-system 后台管理系統開發總結
• vue實現右鍵菜單vue-contextmenujs實現自定義contextmenu

node.js

基礎知識

• Node模塊--chalkchalk 包的作用是修改控制台中字符串的樣式

• Node portfinder獲取當前可用的port
• 【CommonJS】阮一峰：CommonJS規范

進階知識

• 深入淺出 Node.js（三）：深入 Node.js 的模塊機制

計算機網絡

• HTTP Keep-Alive模式 [需細讀]
• 看完這篇文章，我奶奶都懂了https的原理
• 你真的會使用XMLHttpRequest嗎？

前端面試題

• 螞蟻、字節、滴滴面試經歷總結
• 104道 CSS 面試題，助你查漏補缺

• 關於JS作用域的問題
• 備戰面試/筆試 —— 前端程序員不可不知的HTTP知識
• JavaScript：面試頻繁出現的幾個易錯點
• 騰訊web前端開發工程師筆試題及答案
• 世界各地程序員共同總結的前端面試題
• 從一道百度面試題到分析輸入url到頁面返回的過程（或者查詢返回過程）
• Vue面試中，經常會被問到的面試題/Vue知識點整理

好文推薦

• 天天寫業務代碼，如何成為技術大牛？

• 餓了么基於Vue2.0的通用組件開發之路（分享會記錄）
• 如何解決web大流量、高並發的問題
• 從達標到卓越 —— API 設計之道
• 前端網老姚淺談：怎么學JavaScript？
• 瀏覽器的工作原理：新式網絡瀏覽器幕后揭秘
• 編輯框用 Ctrl+V 粘貼圖片是如何實現的？
• IT技術人員的自我修養

其它學習資源

效果源碼

• HTML5 canvas signature_pad（手寫簽名）
• 網易雲-滑動拼圖   體驗地址：https://id.163yun.com/login?referrer=https://dun.163.com/dashboard&h=yd
• html2canvas（網頁保存為canvas）

效果地址、開發文檔、配置

• html5trick （前端功能）
• 實驗樓-WEB（前端項目教程，適合項目實戰學習）
• 騰訊平台微信端廣告開發規范
• Tomcat配置
• Tomcat的HTTP與AJP協議
• [全景效果]360度全景（krpano）
• [全景效果]實現全景圖效果（手機，PC）
• [全景效果]krpano HTML5全景漫游
• Swiper中文網(pc、移動效果)
• jquery.SuperSlide.js官網    案例效果地址
• Velocity.js（說明：不依賴jquery的輕量級JS動畫庫，包含了.animate() 的全部功能。 ）
• web彈層組件layer
• jQuery全屏滾動插件fullPage.js演示

游戲開發

• 泡泡龍游戲HTML5
• html游戲引擎，createJs框架介紹
• 實現2048慕課學習網站
• 原生JS+Canvas實現五子棋游戲
• “倔驢”一個h5小游戲的實現和思考（碼易直播）——總結與整理
• canvas開發玉兔吃月餅
• createjs 使用記錄
• createjs開發入門
• 100行JS實現HTML5的3D貪吃蛇游戲
• js開發實現簡單貪吃蛇游戲（20行代碼）
• js實現貪吃蛇小游戲（容易理解）
• JavaScript版—貪吃蛇小組件

效果類

• 移動端網頁輕量級日期控件LCalenda 根據em計算
• 基於Framework7實現的H5手機移動端三級聯動城市選擇器-01 根據px計算

• LArea移動端省市區城市三級聯動選擇控件-02 基於em計算

• 使用Move.js創建CSS3動畫
• jQuery超級簡單的綠色拖動驗證碼功能
• jQuery打印插件jqprint
• jQuery和CSS3簡單的背景圖片3D視覺差特效
• 視覺差效
• Sequence.js – 視差滾動特效圖片滑塊
• jQuery瀑布流插件 Masonry      jquery瀑布流布局(masonry.js)
• multiscroll.js制作斯柯達野帝頁面(跟寶馬活動F45相似的網站效果)
• js實現運動logo圖片效果及運動元素對象sportBox使用方法
• 導航菜單下面線條運動效果
• 導航線效果
• 利用jqueryRotare實現抽獎轉盤
• 時間軸
• jQuery左右箭頭和鼠標控制的板塊滾動
• jQuery/CSS3實現拼圖效果的相冊插件
• jquery圖片層疊旋轉木馬切換   Roundabout參數詳解
• jquery.roundabout.js圖片疊加3D旋轉插件多功能圖片翻轉切換效果
• jQuery 自定義網頁滾動條樣式插件 mCustomScrollbar 的介紹和使用方法     模擬滾動條例子
• jQuery日歷插件(也適用於手機上下滑動選擇時間)  日歷插件2
• iOS百度外賣的頭像波浪效果實現
• particles.js （鼠標移動畫折線效果）

其它資源

• Phantomjs結合nodejs下載網頁及相關資源文件：
  • 參考地址     
  • PhantomJS下載地址    
  • Phantomjs 使用說明
• gitbook實現編寫API文檔生成html、pdf格式
• 【重點查看】webAssembly相關：
  • 幾張圖讓你看懂WebAssembly     
  • 字節碼聯盟成立 以完善WebAssembly在瀏覽器之外生態性
• 【綜合】錄制屏幕gif動畫小軟件：Screen to Gif
• 【綜合】前端快速查詢語句：linq.js
• 【學習】XSLT 教程 （ofd需要）
• 【下載】ppt免費模板-第一PPT