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