前端涉及的所有知识体系_前端知识

前端 (58) 2023-03-24 16:25

大家好,我是编程小6,很高兴遇见你,有问题可以及时留言哦。

前端涉及的所有知识体系_前端知识_https://bianchenghao6.com/blog_前端_第1张

前言:

2019年还不到半个月就会过去,2020年即将到来,技术日新月异,前端更是比女孩子的心思变的还快,所以如何应对不断的技术变化与变革,是每个技术人员最关心的事情。有句话说的好,万变不离其宗,所以形成自己的体系,至少要有体系思维,才能再不断的变化中,以不变应万变,去挑战未来的不确定性,做到胸有成竹,心中坦荡,宠若不惊。以下的前端知识体系也许是你需要的,接下来将从脑图谱和文档结构进行编排

前端知识体系图谱

前端涉及的所有知识体系_前端知识_https://bianchenghao6.com/blog_前端_第2张

Todo List

  • 为图谱对应的列表增添超链接,链接到知识点对应的更多内容的页面(建议文档渠道:官网、MDN、GitHub、wiki,中英文随意)

    • 编程基础
    • 开发软件
    • 类库框架
    • 知识进阶
    • 工程开发
    • [X] 编程思想
    • [X] 领域分支
    • [X] 社区发展
    • [X] 计算机基础
    • [X] 后端知识
    • 软技能
  • 增加二级图谱,进行更详细的拓展

    • 编程基础
    • 开发软件
    • 类库框架
    • 知识进阶
    • 工程开发
    • 编程思想
    • 领域分支
    • 社区发展
    • 计算机基础
    • 后端知识
    • 软技能

编程基础

HTML(5)

  • 元素
  • DOM
  • 语义化

CSS(3)

  • CSSOM
  • 选择器
  • 布局
  • 交互
  • 绘制

JavaScript(ES6+)

  • 类型
  • 原型链
  • 作用域
  • 闭包
  • 事件
  • 异步
  • 正则表达式

开发软件

编辑器和IDE

  • VIM
  • Sublime Text3
  • Notepad++
  • WebStorm
  • Visual Studio Code(强烈推荐)

调试工具

  • Chrome DevTools
  • Firebug
  • Postman
  • Fiddler
  • Charles

切图

  • Sketch
  • PhotoShop
  • PxCook

类库框架

工具库

  • jQuery
  • Zepto
  • Bootstrap
  • Prototype
  • Underscore
  • Lodash
  • RxJS
  • moment

开发库/框架

  • Vue

    • Vuex
    • Vue-router
    • Vue-cli
    • Element UI
  • React

    • Redux
    • React-router
    • create-react-app
    • Ant design
  • Angular

  • Ember

  • Knockout

  • Backbone

知识进阶

网络通信

  • 通讯协议

    • HTTP1.0/1.1/2.0/3.0
    • HTTPS
    • TCP
    • UDP
    • WebSocket
    • *:HTTP1.0、HTTP1.1 和 HTTP2.0 的区别、TCP和UDP的区别
  • API风格

    • RESTFul
    • RPC
    • GraphQL

性能

  • 性能指标

    • 首次绘制(FP)
    • 首次内容绘制(FCP)
    • 首次有效绘制(FMP)
    • 每秒传输帧数(FPS)
    • 用户可交互时间
    • DNS解析时间
    • TCP连接时间
    • HTTP请求响应时间
    • *:以用户为中心的性能指标
  • 评估工具

    • PageSpeed
    • WebPageTest
    • PhantomJS
    • Lighthouse
    • JSPerf
    • Chrome dev tools

安全

  • XSS
  • CSRF
  • CSP
  • Same-origin Policy

浏览器

  • IE6/7/8/9/10/11 (Trident) / Edge (EdgeHTML)
  • Firefox (Gecko)
  • Chrome/Chromium (Blink)
  • Safari (WebKit)
  • Opera (Blink)
  • *:can i use

工程开发

模块化

  • CSS Module
  • ES6 Module
  • CommonJS
  • SeaJS/CMD
  • RequireJS/AMD
  • *:AMD 和 CMD 的区别有哪些?

版本管理

  • Git

    • Gitlab
    • Github
  • Svn

    • TortoiseSVN

依赖管理

  • npm
  • Yarn
  • Lerna

语言增强

  • CSS

    • Less
    • Sass(Scss)
    • Stylus
    • Post css
  • JavaScript

    • TypeScript
    • CoffeeScript
    • Flow

构建工具

  • Webpack
  • Gulp
  • Grunt
  • Rollup

转换器

  • Babel
  • Traceur

CI/CD

  • Git webhooks
  • Jenkins

代码质量

  • 质量检测

    • JSLint/JSHint/TSLint/ESLint
    • StyleLint
    • Sonar
  • 单元测试

    • Chai/Expect/Should
    • Unit/Mocha/QUnit/Jasmine/Jest
    • Karma
    • Sinon
    • Istanbul
  • E2E测试

    • Nightwatch
    • Cypress

编程思想

设计模式

  • 单例模式
  • 工厂模式
  • 观察者模式
  • 发布订阅模式
  • 代理模式
  • 适配器模式
  • 策略模式
  • 命令模式
  • ...

架构模式

  • Script
  • Code Blocks
  • Code Behind
  • MVC
  • MVP
  • MVVM
  • Flux
  • *:你对MVC、MVP、MVVM 三种组合模式分别有什么样的理解?

编程范型

  • 面向对象编程(OOP)
  • 面向切面编程(AOP)
  • 函数式编程
  • 响应式编程

程序设计

  • 结构化程序

    • 自顶向下
    • 逐步求精
    • 模块化
    • 限制使用goto
  • 面向对象程序

    • 单一功能原则(S)
    • 开放关闭原则(O)
    • 里氏替换原则(L)
    • 接口隔离原则(I)
    • 依赖反转原则(D)

领域分支

可视化

  • SVG

    • D3
    • Raphaël
    • Snap
  • Canvas 2D

    • Echarts
    • HighCharts
  • WebGL

    • Three

移动Web

  • WebView

    • Zepto
    • jQuery Mobile
  • Web to Native

    • Weex
    • React Native
    • Flutter
  • 小程序

  • 响应式网页设计

游戏开发

  • Cocos2d
  • Egret Engine

便携式设备

  • Glass
  • Bracelet

社区发展

  • SSR

  • 大前端

  • 微服务

  • Serverless

  • WebAssembly

  • Less code/No code

计算机基础

编译原理

  • 词法
  • 文法
  • V8
  • AST
  • JIT
  • *:JavaScript 语法解析、AST、V8、JIT

数据结构

  • 堆(Heap)
  • 栈(Stack)
  • 队列(Queue)
  • 链表(Linked List)
  • 数组(Array)
  • 树(Tree)
  • 集合(Set)
  • 哈希表(Map)
  • *:JavaScript 算法与数据结构

算法

  • 排序

    • 冒泡排序
    • 选择排序
    • 插入排序
    • 快速排序
    • 希尔排序
    • 归并排序
    • 堆排序
    • 计数排序
    • 基数排序
  • 检索

    • 线性搜索
    • 二分查找
    • 索引
    • 深度优先搜索(DFS)
    • 广度优先搜索(BFS)
  • Diff

  • *:JavaScript 算法与数据结构

操作系统

  • PC

    • Linux
    • Unix
    • Windows
    • Mac OS
  • Mobile

    • Android
    • IOS

计算机网络

  • OSI七层模型

后端知识

Node

  • Express
  • Koa
  • Egg

编程语言

  • C/C++/Java/PHP/Ruby/Python/...

网页服务器

  • Nginx
  • Apache
  • Tomcat

数据库

  • SQL

    • MySQL
    • Oracle
    • SQL Server
    • PostgreSQL
    • DB2
  • NoSQL

    • MongoDB
    • CouchDB
    • HBase

数据缓存

  • Redis
  • Memcached

软技能

学习能力

  • 知识储备
  • 知识分享

技术能力

  • 解决问题

团队协作

  • 沟通技巧

项目管理

  • 业务理解
  • 需求分析
  • 项目评估

人员管理

架构设计能力

  • 交互设计
  • 可用性
  • 扩展性
  • 安全性
  • 性能

参考文献

  • 进军高级前端开发工程师必备的知识图谱
  • 前端技能汇总

通过上面的介绍,希望给你一些建设性的参考,有任何问题欢迎骚扰,加入【前端突击】,长按二维码关注,或微信搜索 前端突击 一起探讨前端的边界

欢迎关注,【前端突击】猎鹰突击,迎难而上,期待你的加入...

前端涉及的所有知识体系_前端知识_https://bianchenghao6.com/blog_前端_第3张

发表回复