WEB前端学习资源清单

常用学习资源

JS参考与基础学习系列

• [MDN]JS标准参考
• es6教程
• JS标准参考教程
• 编程类中文书籍索引
• 深入理解JS系列
• 前端开发仓库
• 《JavaScript 闯关记》
• JavaScript 初学者教程（指南）
• JS讲义
• 李炎恢JavaScript教程 第一季
• 逐行分析jQuery源码的奥秘

JS常用框架、库、插件

• vue系列
  • vue官网
  • 饿了么element UI
  • vue-router路由
  • vuex状态管理
  • vue-cli
  • mint-ui移动端UI组件
  • VUX移动端UI组件
  • Ant Design of Vue UI组件
  • viser-vue报表UI组件
  • vue相关UI组件收集
• webpack相关
  • webpack中文文档
  • 深入浅出 Webpack
• 微信开发
  • 微信组件weui
  • weui github官网实例
• 其它
  • jQuery中文文档
  • zeptojs中文版
  • bootstrap官网
  • echarts
  • axios请求
  • ajax：Fetch

推荐团队与博客

• w3cplus
• w3school
• 前端观察
• 汤姆大叔博客
• 腾讯Web前端 Alloy 团队 Blog
• 张鑫旭博客
• 牧云云博客
• qq前端月报

JS基础与技能

JS设计模式

• 腾讯全端 AlloyTeam 团队 Blog JavaScript设计模式
• 龙恩：Javascript设计模式详解
• 汤姆大叔：深入理解JavaScript系列

ES6

• 30分钟掌握ES6/ES2015核心内容（上）
• 30分钟掌握ES6/ES2015核心内容（下）
• ES6 知识整理一（es6快速入门）

JS封装、原型、继承

• Javascript 面向对象编程（一）：封装
• Javascript面向对象编程（二）：构造函数的继承
• Javascript面向对象编程（三）：非构造函数的继承
• JavaScript学习总结（五）原型和原型链详解

跨域通讯、缓存、XSS

• 前端开发如何独立解决跨域问题（代理与反向代理）
• 通讯相关：STOMP Over WebSocket
• 怎么使用 JavaScript 将网站后台的数据变化实时更新到前端？
• 离线和缓存：Service Worker

HttpRequest、Promise与async/await 异步

• 使用 promises
• Promise原理讲解 && 实现一个Promise对象 (遵循Promise/A+规范)
• 你真的会使用XMLHttpRequest吗？
• 用 async/await 来处理异步
• HTTP Keep-Alive模式 [需细读]

npm、webpack、git、gulp、grunt工具

• Webpack 4 教程：从零配置到生产发布（2018）(webpack4)

• 99%的时间在使用的Git命令
• vue-cli的webpack模板项目配置文件分析

• 教你一步步从零构建webpack开发多页面环境

• 入门 Webpack，看这篇就够了(入门不错)
• 阮一峰：npm scripts 使用指南

前端自动化测试

• 阮一峰：测试框架 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 对象的使用
• [MDN]MouseEvent.movementX

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最佳实践
• 移动端开发
  • 移动端前端开发设计稿及工作流的探索和思考
  • 移动端开发流行单位rem的几点看法
  • 手机网站的几点注意

计算机网络

• 看完这篇文章，我奶奶都懂了https的原理

网络开发资源参考

效果源码

• 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 粘贴图片是如何实现的？
• IT技术人员的自我修养

效果类

• 移动端网页轻量级日期控件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在浏览器之外生态性

 

注：后续逐渐添加