frontendmap/frontendmap

FrontEndMap - web前端基础知识体系，系统、优质、开源

FrontEndMap

web 前端基础知识体系，系统、优质、开源

如上图，FrontEndMap 会从前端开发经过的 源码环境 -> 构建过程 -> 服务器环境/node -> http -> 浏览器/webview 过程入手，对每个步骤做详细拆解，总结出其中用到的标准（如W3C）、规范（如nodejs API）、工具（如webpack React）等，做到尽量全面。

当然，FrontEndMap 希望能通过开源的力量，逐步完善成国内权威的 web 前端基础知识体系指南，欢迎大家 star、fork 并 PR ，也欢迎大家提交 issue。

开发环境

源码

物理结构

代码作为一个个物理文件该如何管理

• 版本管理 git
• 第三方依赖管理 npm
• javascript 模块化：AMD CMD commonJS ES6规范
• css module

逻辑设计

前端开发需要掌握的设计知识，逻辑、抽象的能力

• 基本功，算法、数据结构等
• 设计模式
• MVVM Vue.js Angular
• 组件化 React

构建

用构建工具搭建前端代码框架，构建过程中常用的工具

• 模板引擎，如jade
• 语法糖，如less、sass
• 自动化测试、单元测试
• lint 语法检查
• 打包，webpack gulp等

服务器/测试机

代码发布到服务器上之后，需要掌握的知识

• linux 命令
• vim
• nodejs

网络

服务器和客户端的交互基于 http 协议，会用到 socket ajax 等技术，以及一些常见的性能优化

• http
• socket
• ajax/fetch
• 性能优化

浏览器 / webview

浏览器下载到代码之后会渲染页面，还会遵守 W3C ECMA 的标准

• hybrid app 中实现 web 开发的常用方案
• 渲染与性能优化
• 安全
• 开发者工具 & 调试
• ECMA262 标准

W3C 标准

W3C 标准中规定了日常开发中使用最多的 html、css、DOM API 等语法和规范。

• html
• css
• javascript WEB-API
• 2D/3D

其他

• 流程规范
• 源码阅读
• 拓展视野