前端学习清单

Web前端学习大纲

• 前端基础篇

• HTML

• 标签与语义化
• 文档流
• SEO
• 参考网站：https://www.runoob.com/html/html-tutorial.html

• CSS

• CSS基本语法
• CSS层叠与继承机制
• BFC
• 常见的布局方式（响应式与自适应）
• CSS动画
• 常见的预编译语言（Less、sass/scss、postcss）
• OOCSS
• reset技术
• 常见的CSS框架

• Bootstrap
• Uikit
• Iview

• 参考网站：

• https://www.runoob.com/css/css-tutorial.html
• https://www.sass.hk/docs/

• JavaScript

• 数据类型与内存中的存储
• 常见的算术运算符与逻辑运算符
• 函数的定义方式
• 流程控制
• BOM与DOM操作

• Browser对象
• DOM对象
• 事件冒泡、捕获、代理/委托

• 作用域与作用域链
• 变量提升、闭包与垃圾回收机制
• 原型与原型链
• 继承实现
• 指针修改方式
• web存储方案及区别（cookie、sessionStorage、localStorage）
• 常见的ES6语法（http://es6.ruanyifeng.com/）

• 变量声明、解构
• 新增的数据类型与数据结构
• 模块声明与导入
• class

• 异步与同步、EventLoop
• Jquery库
• 参考网站：https://www.runoob.com/js/js-tutorial.html

• 前端规范篇

• JS命名规范
• CSS命名规范

• BEM（https://www.w3cplus.com/css/bem-definitions.html）
• OOCSS（https://www.sass.hk/skill/sass140.html）

• HTML标准

• 代码质量控制

• Eslint（https://eslint.bootcss.com/docs/rules/）
• Jslint
• SonarLint

• Git源码管理与提交规范

• git、svn提交流程
• 常见的分支管理与冲突解决
• git commit message规范（Conventional Commits）
• Gerrit提交规范（详情参考我司的前端Gerrit使用教程）

• HTTP知识

• Ajax与常见的请求方式
• 同源策略与跨域解决方案

• 同源策略
• 预检请求的方式和作用
• 常见的跨域解决方案

• jsonp
• CORS
• postMessage

• 三次握手
• 返回状态码区分和意义
• 单工通信与双工通信

• 单工通信：http请求、SSE
• 双工通信：Websocket

• axios

• 浏览器知识

• 常见的浏览器内核
• 浏览器缓存策略与解决方案、Service Worker
• 浏览器的渲染原理
• CSRF与其防御方案

• 流程图与思维导图

• 参考网站：http://www.woshipm.com/zhichang/2329530.html
• 在线绘制流程图：https://www.draw.io/

• 主流框架

• Vue+Vue-router+Vuex+I18n+Nuxt

• Vue基础文档：https://cn.vuejs.org/
• I18n：http://kazupon.github.io/vue-i18n/zh/api/
• 服务端渲染（Nuxt）：https://zh.nuxtjs.org/guide/installation

• React+Redux+Next
• Angular
• SPA相关知识点

• MVVM原理
• 单向数据流
• 双向数据绑定
• VDOM原理
• Diff算法
• 生命周期
• 路由模式与实现原理
• 状态管理

• 静态类型检查语言

• TypeScript（https://www.tslang.cn/docs/home.html）
• Flow（https://flow.org/en/docs/getting-started/）

• 模块化

• 常见的模块化规范

• CMD
• AMD
• UMD
• ES6模块化

• 模块化实现

• requirejs
• seajs

• 参考：https://www.jianshu.com/p/bd4585b737d7

• 组件化

• 组件的定义方式
• 组件扩展
• 组件之间的通信

• 工程化

• webpack（https://www.webpackjs.com/）

• entry/output
• loader
• plugins
• model
• 模块

• Grunt：https://www.gruntjs.net/

• 面向对象知识

• 面向对象编程原则SOLID

• S（Single）单一原则
• O（Open Closed）开放封闭
• L（Liskov Subsitution）里氏替换
• I（Interface Segregation）接口分离
• D（Dependency Inversion）依赖倒置

• 面向对象三大特征

• 封装
• 继承
• 多态

• 参考资料：https://www.jianshu.com/p/33f48fd441ea

• 测试

• Unit

• Jest（https://jestjs.io/docs/zh-Hans/getting-started）
• Mocha+Karma

• http://www.mamicode.com/info-detail-65206.html
• http://www.chaijs.com/api/

• E2E

• NightWatch

• Web安全攻防
• 小程序/公众号、 PWA、混合开发

• 小程序/公众号

• https://developers.weixin.qq.com/miniprogram/dev/framework/
• http://weex.apache.org/cn/guide/
• http://mpvue.com/

• PWA（借助Vue开发的PWA）
• 混合开发（Hybrid App）

• Cordova
• Ionic

• 桌面端（Electron：http://www.electronjs.org/）
• Linux操作以及web部署

• Linux操作（https://www.runoob.com/linux/linux-tutorial.html）
• Web部署（Nginx、Tomcat）

• CI/CD

• 什么是CI/CD?
• CI/CD的实现

• 源码管理gitlab/github等
• 构建与编译，反馈Jenkins
• 质量管理 SonarQube

• 参考：

• https://www.jenkins.io/zh/doc/

• 数据可视化

• canvas、svg
• Echarts、v-chart
• 参考网站：https://echarts.apache.org/zh/index.html

• 微前端

• Web Components
• Single-SPA（qiankun：https://qiankun.umijs.org/zh）

• Nodejs

• Nodejs参考资料：http://nodejs.cn/learn
• Express参考：https://www.expressjs.com.cn/

• 数据结构

• 二叉树与最小二叉树
• 链表、栈、队列、图

• 数据库知识

• 线性数据库与非线性数据库之间的区别
• 常见的数据库

• MySQL
• Oracle
• MongoDB