[轉] WEB前端學習資源清單

常用學習資源

JS參考與基礎學習系列

• [MDN]JS標准參考
• es6教程
• JS標准參考教程
• 編程類中文書籍索引
• 深入理解JS系列
• 前端開發倉庫
• 《JavaScript 闖關記》
• JavaScript 初學者教程（指南）
• JS講義
• 李炎恢JavaScript教程 第一季
• 逐行分析jQuery源碼的奧秘

JS常用框架、庫、插件

• [vue]vue官網
• [vue]餓了么element UI
• [vue]vue-router路由
• [vue]vuex狀態管理
• [vue]mint-ui移動端UI組件
• [vue]VUX
• [vue]vue相關UI組件收集
• axios請求
• ajax：Fetch
• jQuery中文文檔
• webpack中文文檔
• 深入淺出 Webpack
• zeptojs中文版
• bootstrap官網
• echarts
• 微信組件weui           weui github官網實例

推薦團隊與博客

• w3cplus
• w3school
• 前端觀察
• 湯姆大叔博客
• 騰訊Web前端 Alloy 團隊 Blog
• 張鑫旭博客
• 牧雲雲博客
• qq前端月報

JS基礎與技能

JS設計模式

• 騰訊全端 AlloyTeam 團隊 Blog JavaScript設計模式
• Javascript設計模式詳解

ES6

• 30分鍾掌握ES6/ES2015核心內容（上）
• 30分鍾掌握ES6/ES2015核心內容（下）

JS封裝、原型、繼承

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

跨域通訊、緩存、XSS

• 前端開發如何獨立解決跨域問題（代理與反向代理）
• 通訊相關：STOMP Over WebSocket
• 怎么使用 JavaScript 將網站后台的數據變化實時更新到前端？

HttpRequest、Promise與async/await 異步

• 使用 promises
• Promise原理講解 && 實現一個Promise對象 (遵循Promise/A+規范)
• 你真的會使用XMLHttpRequest嗎？
• 用 async/await 來處理異步

webpack、git、gulp、grunt工具

• Webpack 4 教程：從零配置到生產發布（2018）(webpack4)

• 99%的時間在使用的Git命令
• vue-cli的webpack模板項目配置文件分析

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

• 入門 Webpack，看這篇就夠了(入門不錯)

前端自動化測試

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

前端技能與總結

• 4個錯誤使用JavaScript數組方法的案例

• 高效遍歷匹配Json數據，避免嵌套循環

• [總結] JS秘密花園
• [總結]《JavaScript權威指南》JavaScript核心概念歸納整理
• [jQuery入門經典]一個小時學會jQuery
• JavaScript 內存泄漏教程
• 探尋 JavaScript 精度問題以及解決方案
• JavaScript 中的數據格式轉換一例：reduce的應用

JS基礎列表

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

web開發問題

• 解決input[type=file]打開時慢、卡頓問題
• “無限加載更多”帶來的移動端性能瓶頸
• 整理 node-sass 安裝失敗的原因及解決辦法

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

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最佳實踐

網絡開發資源參考

效果源碼

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

面試題

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

在線工具

• 阿里圖標庫
• 奧森圖標（中文版）
• 奧森圖標（英文版）
• 瀏覽器兼容檢測工具
• 二進制流常用格式對照表
• CSS中文字體Unicode編碼在線工具
• CSS屬性指引 （一份清單，按字母表順序列出了每個CSS屬性）
• box-shadow 生成工具
• 漸變生成器
• CSS3 生成器
• 圖片壓縮
• 網絡編輯超級工具箱（IE低版本）
• 錄制屏幕gif動畫小軟件：Screen to Gif
• jplayer播放器下載地址

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

• 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版—貪吃蛇小組件

其它學習

• XSLT 教程 （ofd需要）
• 項目管理Confluence
• 前端快速查詢語句：linq.js

好文

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

效果類

• 移動端網頁輕量級日期控件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百度外賣的頭像波浪效果實現