前端学习清单

Posted 2022-12-04 ଳxin

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命名规范（https://juejin.cn/post/6844903492415406088）
  • 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安全攻防（https://www.cnblogs.com/fundebug/p/details-about-6-web-security.html）
• 小程序/公众号、 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/
    • https://blog.csdn.net/qq_14993375/article/details/108267639
• 数据可视化
  • 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