前端刻意练习（原:前端晚练课）

   

每天一个前端知识点，苦练前端真功夫

很多时候，我们在看书或网上的教程时“一学就会”，可真正解决实际问题时往往“一写就跪”，看似“学会”的知识其实并没有掌握，我们缺乏相对应的必要练习。

本期练习传送门

• 第 129 期(W3C标准-CSS-动画)：跳动的心 for 10.24程序员节

知识体系

基本功

• W3C标准

  • HTML/HTML5
    • 第 17 期(W3C标准-HTML)：ol标签计数器
    • 第 18 期(W3C标准-HTML)：a 标签
    • 第 19 期(W3C标准-HTML)：换行
    • 第 20 期(W3C标准-HTML)：meta标签
    • 第 33 期(W3C标准-HTML)：汉语拼音
    • 第 43 期(W3C标准-HTML)：快捷键
    • 第 66 期(W3C标准-HTML)：特殊实体字符HTML、CSS、JS对照表
    • 第 67 期(W3C标准-HTML)：form 特性
    • 第 96 期(W3C标准-HTML)：output 元素
    • 第 105 期(W3C标准-HTML)：表单验证
    • 第 106 期(W3C标准-HTML)：原生HTML实现输入框下拉补全提示
    • 第 112 期(W3C 标准-HTML)：table的colgroup和col
  • CSS/CSS3
    • 语法
      • 第 53 期(W3C标准-CSS-语法)：样式的顺序
      • 第 32 期(W3C标准-CSS-语法)：两种盒模型的区别
      • 第 115 期(W3C标准-CSS-语法)：CSS 单位
    • 伪类/伪元素
      • 第 114 期(W3C标准-CSS-伪类&伪元素)：focus-within 伪类
      • 第 123 期(W3C标准-CSS-伪类&伪元素)：表单验证伪类
    • 布局排版
      • 第 35 期(W3C标准-CSS-布局排版)：图片等比缩放匹配父容器尺寸
      • 第 54 期(W3C标准-CSS-布局排版)：word-break与word-wrap
      • 第 70 期(W3C标准-CSS-布局排版)：不定高垂直居中
      • 第 97 期(W3C 标准-CSS-布局排版)：首字下沉效果
      • 第 98 期(W3C 标准-CSS-布局排版)：首行文字自定义
      • 第 100 期(W3C 标准-CSS-布局排版)：两端对齐
    • 绘制
      • 第 4 期(W3C标准-CSS-绘制)：CSS 菱形剪切
      • 第 92 期(W3C 标准-CSS-绘制)：background-origin 背景图片绘制参照点
      • 第 107 期(W3C标准-CSS-绘制)：占位区块效果
      • 第 127 期(W3C标准-CSS-绘制)：border-radius
    • 响应式布局
      • 第 39 期(W3C标准-CSS-响应式布局)：基于Grid的响应式布局
    • 动画
      • 第 46 期(W3C标准-CSS-动画)：按钮loading动画效果
      • 第 109 期(W3C标准-CSS-动画)：翻转缩放动画
      • 第 129 期(W3C标准-CSS-动画)：跳动的心 for 10.24程序员节
  • JavaScript
    • 第 64 期(W3C标准-JavaScript)：JavaScript中常用的转义字符
    • 第 94 期(W3C 标准-JavaScript)：toFixed 方法
    • 第 116 期(W3C 标准-JavaScript)：atob & btoa —— base64 的解码编码
    • 第 124 期(W3C 标准-JavaScript)：unicode码互转
    • 第 126 期(W3C 标准-JavaScript)：iframe父子通信
    • DOM
      • 第 24 期(W3C标准-JavaScript-DOM)：复选框的全选反选
      • 第 41 期(W3C标准-JavaScript-DOM)：点击空白处检测
      • 第 71 期(W3C标准-JavaScript-DOM)：复选框的半选
      • 第 84 期(W3C 标准-JavaScript-DOM)：client、offset和scroll
      • 第 90 期(W3C 标准-JavaScript-DOM)：获取DOM的样式
      • 第 117 期(W3C 标准-JavaScript-DOM)：监听页面DOM元素的插入
      • 第 119 期(W3C 标准-JavaScript-DOM)：DocumentFragment - 文档片段
      • 第 121 期(W3C 标准-JavaScript-DOM)：dataset
    • BOM
      • 第 59 期(W3C标准-JavaScript-BOM)：location 位置操作
    • 事件
      • 第 38 期(W3C标准-JavaScript-事件)：事件的绑定与移除
      • 第 51 期(W3C标准-JavaScript-事件)：复合事件
      • 第 55 期(W3C标准-JavaScript-事件)：页面卸载事件 beforeunload
      • 第 80 期(W3C标准-JavaScript-事件)：InputEvent.inputType
      • 第 120 期(W3C 标准-JavaScript-事件)：pagehide 和 pageshow
    • 存储
      • 第 58 期(W3C标准-JavaScript-存储)：保存文本域的内容刷新不丢失
    • 异步
      • 第 36 期(W3C标准-JavaScript-异步)：实现一个Promise方法
      • 第 65 期(W3C标准-JavaScript-异步)：手写实现AJAX
      • 第 113 期(W3C 标准-JavaScript-异步)：async 和 await
    • Math
      • 第 5 期(2019-05-12)：数组最大数最小数
      • 第 7 期(2019-05-14)：n以内的随机数
    • Date
      • 第 6 期(2019-05-13)：获取过去n天的日期
      • 第 93 期(W3C 标准-JavaScript-Date)：获取指定月份有多少天
      • 第 111 期(W3C 标准-JavaScript-Date)：五种获取指定日期毫秒数的方法
  • WCAG
  • JSON
    • 第 10 期(2019-05-17)：JSON.parse方法polyfill
    • 第 21 期(W3C标准-JSON)：JSON.stringify
  • XML
  • SVG
    • 第 28 期(W3C标准-SVG)：用SVG画西瓜
    • 第 104 期(W3C 标准-SVG)：SVG优雅降级显示
  • canvas
    • 第 83 期(W3C标准-canvas)：canvas 画布尺寸
    • 第 108 期(W3C标准-canvas)：碎屑特效
  • URL
    • 第 79 期(W3C标准-URL)：URLSearchParams

• ECMAScript

  • 语法
    • 第 13 期(2019-05-20)：无返回值的语句
    • 第 14 期(ECMAScript-语法)：类型判断
    • 第 16 期(ECMAScript-语法)：浅克隆
    • 第 23 期(ECMAScript-语法)：字符串对象HTML格式替代方法
    • 第 34 期(ECMAScript-语法)：js 对象深拷贝
    • 第 57 期(ECMAScript-语法)：setTimeout的其他参数
    • 第 72 期(ECMAScript-语法)：判断整数
    • 第 73 期(ECMAScript-语法)：Unicode字符与编码互转
    • 第 76 期(ECMAScript-语法)：如何判断空对象
  • 上下文环境
    • 第 12 期(2019-05-19)：同名函数的执行
    • 第 52 期(WECMAScript-上下文环境)：模拟call方法
    • 第 56 期(WECMAScript-上下文环境)：模拟apply方法
  • 原型链 继承
    • 第 22 期(ECMAScript-原型链 继承)：实现 Array map
    • 第 26 期(ECMAScript-原型链 继承)：实现 Array reduce
    • 第 37 期(ECMAScript-原型链 继承)：原型链的尽头
  • 作用域 闭包
    • 第 2 期(ECMAScript-作用域 闭包)：定时输出数字
    • 第 31 期(ECMAScript-作用域 闭包)：模拟ES6 Generator
  • 正则表达式
    • 第 9 期(ECMAScript-正则表达式)：CSS兼容性验证
    • 第 27 期(ECMAScript-正则表达式)：金额数值格式化
  • 严格模式
    • 第 11 期(ECMAScript-严格模式)：arguments与'use strict'

• HTTP 标准

  • 请求过程
    • 第 40 期(HTTP规范-请求过程)：HTTP的方法
  • 状态码
    • 第 77 期(HTTP 标准-状态码)：HTTP状态码和请求阶段码
  • 头部信息
  • HTTPS

内功

• 设计模式

• 算法

  • 搜索
    • 第 3 期(2019-05-10)：无重复字符的最长子串
    • 第 30 期(算法-搜索)：二分搜索算法
    • 第 42 期(算法-搜索)：获取多层嵌套对象的目标属性值
  • 排序
    • 第 1 期(算法-排序)：多重排序
    • 第 86 期(算法-排序)：经典排序算法之冒泡排序
    • 第 87 期(算法-排序)：经典排序算法之选择排序
    • 第 88 期(算法-排序)：经典排序算法之插入排序
    • 第 89 期(算法-排序)：经典排序算法之计数排序
    • 第 91 期(算法-排序)：经典排序算法之快速排序
    • 第 101 期(算法-排序)：根据内容排序数组
    • 第 118 期(算法-排序)：数组乱序
  • 递归
    • 第 25 期(算法-递归)：汉诺塔（河内塔）
    • 第 125 期(算法-递归)：统计子类目数量
  • 数学
    • 第 8 期(算法-数学)：求斐波那契数前N项
    • 第 29 期(算法-数学)：抽奖概率算法
    • 第 82 期(算法-数学)：如何将一张图片完全显示在容器里
    • 第 85 期(算法-数学)：判断一个数是否为素数（质数）

• 数据结构

  • 队列
    • 第 62 期(数据结构-队列)：队列和队列的模拟
    • 第 63 期(数据结构-队列)：队列的应用
  • 栈
    • 第 60 期(数据结构-栈)：栈和栈的模拟
    • 第 61 期(数据结构-栈)：栈的应用
  • 树
  • 链表
    • 第 74 期(数据结构-链表)：什么是链表
    • 第 75 期(数据结构-链表)：单链表的实现
  • 哈希
    • 第 122 期(数据结构-哈希)：哈希表
  • 数组
    • 第 15 期(数据结构-数组)：数组去重
    • 第 48 期(数据结构-数组)：获取字母表
    • 第 81 期(数据结构-数组)：数组项的互换和移动
    • 第 95 期(数据结构-数组)：伪数组
    • 第 110 期(数据结构-数组)：清空数组

• 性能

  • 第 102 期(内功-性能)：节流
  • 第 103 期(内功-性能)：防抖

招术

• 主流框架
  • React
    • 第 49 期(主流框架-React)：生命周期函数
• 技巧
  • 第 47 期(技巧)：图片加载器
  • 第 50 期(技巧)：npm和yarn的命令行
  • 第 68 期(技巧)：git 时光机(一)
  • 第 69 期(技巧)：git 时光机(二)
  • 第 78 期(技巧)：如何优化SPA首屏加载
  • 第 99 期(技巧)：前端工程师容易犯的一些低级错误
  • 第 128 期(技巧)：关于logo显示的SEO小技巧

参考资料：《前端工程师的知识体系》、《WEB前端知识体系脑图》、《自己总结的web前端知识体系大全》

友情赞助商：前端早读课

前端早读课 是由知名互联网公司大牛情封（4399 UED/高级主管）开设的前端学习公众号，每天清晨发布前端技术文章，与七万+同行相伴成长。欢迎扫码关注：