前端知识体系梳理

javascript/jquery

浏览数:85

2020-6-12

知识体系流程图

前端知识体系主要分成四部分:基础知识、框架库、开发环境、运行环境。主要目的就是将所学的知识点串联起来,才能赋予知识于生机活力。对我而言,我基本上是零散的时间学习前端知识,对整个前端没有系统的学习,忽略很多基础知识。故而构建前端学习路线和方法,建立知识框架。
可能还不全,欢迎留言补充。

1.基础知识

1.1 HTML(超文本标记语言 [ Hyper Text Markup Language])

  • 语义化标签、属性
  • 表单验证
  • data-* 属性
  • HTML多媒体

    • video(视频)
    • audio(音频)
  • SVG
  • Canvas
  • HTML5 拖放
  • Web Worker
  • 游览器缓存机制
  • H5存储
  • HTML5 离线缓存
  • HTML 渲染流程
  • 重绘和回流
  • 地图
  • websocket

1.2 CSS(指层叠样式表 [Cascading Style Sheets])

  • 选择器
  • 盒模型
  • 定位、浮动
  • BFC
  • 动画
  • 过渡
  • 弹性布局
  • 2D、3D转换
  • 边框、圆角
  • 背景、渐变
  • 文本效果、字体
  • CSS3 多列
  • CSS 伪类
  • CSS HACK
  • 媒体查询
  • CSS 预处理语言

1.3 JavaScript: 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。

  • 数据类型

    • 基础类型
    • 引用类型
  • 流程控制语句
  • 内置对象
  • 变量、作用域
  • 原型、原型链
  • 函数
  • 事件
  • this 指针
  • 单线程与事件循环
  • DOM
  • BOM
  • 表单脚本
  • 面向对象
  • 正则
  • Ajax和跨站技术
  • ES6

    • let 和 const 命令
    • 解构
    • Symbol
    • Set 和 Map 数据结构
    • 箭头函数
    • Proxy
    • Promise
    • Class 语法
    • module
  • 错误处理及调试

    • 错误处理
    • 调试技术
    • 常见的错误

1.4 算法

1.5 数据结构

  • JSON
  • XML

1.6 面向对象

1.7 设计模式

  • 单例模式
  • 工厂模式
  • 建造者模式
  • 原型模式
  • 观察者模式
  • 策略模式
  • 构造函数模式
  • 混合模式

1.8 计算机基础

  • 网络协议
  • http 协议
  • DNS

2. 框架与库

敏捷开发框架库
2.1 web库

  • jQuery、zepto、Swiper
  • Vue、React、Angular
  • UI组件库

    • Bootstrap
    • React: Ant-design、Blueprint 、Material-UI、React-Bootstrap
    • Vue: Element、iview、vuetify、vue-beauty、Vux、Vant
    • Angular: ng-zorro
    • backbone
    • WeUI
    • layui
  • 跨站平台

    • react-native
    • Flutter
    • Electron
  • 可视化组件

    • Echarts
    • D3
    • chart
    • Flot
    • three
    • HighCharts
    • Sigma
    • MyHeatMap
  • 小程序

    • WeUI
    • iView WeApp
    • Wux WeApp
    • mpvue
    • wepy
    • Taro

2.2 node

  • Express
  • hapi
  • Koa
  • egg
  • Loopback
  • Keystone

3. 开发环境

3.1 代码管理

  • git
  • svn

3.2 IDE

  • WebStorm
  • subline
  • vscode

3.3 构建工具

  • webpack
  • Grunt
  • Gulp

3.4 调试工具

  • 谷歌
  • firebug

3.5 测试
3.6 部署提测
3.7 linux

4. 运行环境

4.1 响应式布局

4.2 性能优化

  • 压缩
  • 合并请求
  • 缓存
  • 避免重定向

4.3 web安全

  • 同源策略
  • XSS跨站点攻击
  • CRSF跨站点请求伪造
  • SQL 注入

4.4 游览器兼容性

  • CSS hack
  • 渐进增强、优雅降级
  • JavaScript

4.5 node

5.书籍推荐

  • 《HTML5秘籍》
  • 《CSS权威指南 第三版》
  • 《CSS实战手册》
  • 《CSS禅意花园》
  • 《JavaScript高级程序设计 第三版》
  • 《JavaScript权威指南(第六版)》
  • 《JavaScript DOM编程艺术》
  • 《ECMAScript6入门》
  • 《你不知道的javascript 【上】【中】【下】》
  • 《HTTP权威指南》
  • 《深入浅出 node》

学习网站

作者:FishStudy520