/awesome-fed

Awesome FED

Primary LanguageJavaScript

淘宝前端技术图谱

https://cdn.rawgit.com/taobaofed/awesome-fed/master/index.html

基础知识体系

JavaScript语言

  • 基本逻辑
    • if
    • for/while,break
  • 函数
    • 闭包
    • 作用域
      • function
      • catch
      • with
      • eval
      • 查找和申明
    • this(call/apply)
  • 对象
    • 原型
    • new的过程
  • 内置对象
    • Array
    • Function
  • ES6

CSS

  • 排版
    • position
    • display
      • inline/block
      • inline-block
      • flex
    • float,clear
    • 盒模型
      • padding,margin,border,width/height
      • box-sizing
    • 行
      • line-height
      • vertical-align
    • 文本
      • whitespace
      • wordbreak
  • 绘制
    • background
    • color
    • transform
  • 动画
    • transition
    • keyframes,animation

Web API

  • DOM API
    • insertBefore
    • appendChild
    • childNodes/parentNode
    • document.createElement/document.createTextNode
    • 事件
      • 冒泡和捕获
      • addEventListener/removeEventListener
      • document.createEvent/dispatchEvent
  • CSSOM
    • window.getComputedStyle
    • getBoundingClientRect
    • getClientRects
  • canvas

HTML

  • viewport meta
  • 语义
    • ol/ul
    • dl,dt,dd
    • strong/b
    • strong/em
  • form
    • select
    • input
      • number
      • date

HTTP

  • 状态码
    • 404
    • 302
    • 304
    • 5??
  • 头
    • allow-cross-domain
    • e-tag,expires,cache
    • content-security-policy
  • 方法
    • post
    • get
    • delete/put
    • head

安全

  • CSRF/XSS
  • CSP
  • Same-origin policy
  • ADsafe/Caja/Sandbox

编程能力

  • 算法
    • 排序
    • 搜索算法
    • 动态规则
  • 数据结构
    • 二叉树
      • AVL树
      • 红黑树
    • 二叉堆

工程体系

版本管理

规范

检测

编译

Node体系

基础

应用开发

  • Web 框架

  • Remoting 框架

  • 插件

    • Security
    • HTTP 请求解析
    • 路由
    • 参数校验
    • 限流
    • 静态资源
    • SPDY/HTTP2
    • API
    • 缓存
    • 认证
    • Midway-plugin-xxx: Midway系列插件
    • Koa-xxx: Koa系列插件

  • client/driver

    • MySQL: 关系型数据库管理系统
    • MongoDB: 面向文档的数据库
    • HBase: 分布式、面向列的开源数据库
    • Redis: 内存数据结构存储系统
    • MemCache: 分布式的高速缓存系统
    • GraphQL: Facebook 开源的查询语言

工具

平台&服务

  • 包管理

    • npm

  • Provisioning & IAAS

    • docker/lxc
    • Midway Sandbox

  • 监控

    • 主机监控
    • 网络监控
    • 数据库监控
    • 业务监控
    • 虚拟机/运行时
    • 日志分析
    • 分布式调用跟踪

  • 运营管理

    • 报警
    • 流量控制
    • 弹性伸缩
    • 多机房容灾
    • 自动备份
    • 安全防卫

  • 治理

    • 依赖分析
    • 策略管理，预案平台
    • SLA
    • 容量规划(压测) PAP/Amazon

React体系

React

React Native

React模式