前言

  1. 学习任何技术的起点，都应该面向应用学习，根据市场的需求来决定产品和问题，然后针对性地学习技术来实现产品需求、解决问题，进而创造价值。
  2. 学习任何技术的终点都是对一个系统的把控，这就要求前端开发者不能仅仅局限于前端领域，一个前端技术专家对服务器的理解可能比一个后端高工理解的要深的多。

前端是什么

在一个系统中的定位是什么呢？可以从这几个方面去理解

  1. 一个工具，是一个信息+交互的实体
    从用户角度看，前端就是一个工具，使用这个工具可以完成相应的业务，比如购物、游戏、直播、浏览咨询等等。
    系统呈现给用户的，其实就是前端，前端是系统中用户唯一可以直观感受到的部分，其他的像数据库、接口层面、cdn服务器、大数据处理、大数据计算，对用户都是透明的。
  2. GUI程序，网页应用
    从开发者的角度，前端是一个GUI程序，一个网页的应用（大前端的范围可能更广一些）。
    一个系统可能包含很多程序和服务，而前端是其中一部分。

前端的价值

在一个系统中，前端可以创造什么价值呢，或者说一个系统需要前端带来什么价值呢？

主要有两个方面

  1. 从用户角度
    从用户角度看，前端需要实现的价值是
    1. 保证用户正常的业务功能，提供必要的信息展示和交互能力。
    2. 提供用户优异的体验。
    3. 保证用户的信息安全，在网络安全中有一个重要的分类是web安全。前端有义务保证用户的信息安全。
  2. 从开发者角度
    从开发者角度看，前端需要实现的价值是
    1. 提供基本能力，项目可以实现业务的需求，这是最基本的要求。
    2. 保证项目的质量，比如项目的低bug率等。
    3. 保证开发的效率，如果完成一个系统的一个功能的开发中，前端总是拖其他端的后退，那这样的前端价值就不会很高。

如何学习前端技术

从上面的讨论中，我们可以认识到，学习前端技术（或者学习任何一门技术），都应该面向应用或者说面向市场来学习。也就是说我们要一直明确地知道我们学习了某些东西之后，可以让我们实现哪些需求，解决哪些问题。

这样就要求我们首先知道有哪些需求和问题。然后针对性地学习相应的技术。

在知道需求和问题后，在学习的知识和技术的选择上，也是有策略的。我们应该总是选择那些性价比高的知识和技术来进行学习。就是需要保证我们能花最少的时间，可以有最大收益。

比如，如果痴迷技术可以钻研，提高技术深度，但是如果你更倾向于赚更多的前，那么花10年学习很多，成为一个技术专家，可能不如让自己具备开发简单应用的能力之后，就开始探索如何把这些应用变现。

比如，如果为了赚钱，那关注点应该是如何使用技术完成需求，应该是需求、产品是否能变现及如何实现学最少的东西实现最值钱的需求，即利益最大化。

比如，对于一个业务线的组长，他更倾向于学习如何实现一些业务需求的技术和提高用户体验，比如微信开发，音视频技术，性能优化等等，他交付的是给用户用的产品，因此他关注的是从用户角度的需求。而对于一个前端中台架构师，他可能更关注如何提高整体工作效率，比如掌握跨端开发并推广，devops，serverless，基础设施建设的最佳实践等等，架构师面临的是公司的整个前端开发团队的工作，因此它更关注从开发者角度的质量和性能的需求。

如何学习前端呢？最重要和优先级最高的，就是学习前端主要需求场景和解决方案及最佳实践

下面梳理前端的需求和问题，然后梳理对应的前端技术体系

前端体系

从上面讨论可以知道，前端面临的需求可以简单地总结如下

  1. 从用户角度
    1. 正常的业务功能
    2. 体验
    3. 安全
  2. 从开发者角度
    1. 基本的能力
    2. 质量
    3. 效率

下面先阐述一下上述各个需求

1.1 正常的业务功能，为了满足业务的正常开展，按照业务划分，前端的需求可以有很多类

  1. 1. 电商系统，有支付、第三方服务的调用等等需求
  2. 2. 音视频直播点播系统，有信令操作、音视频的操作、客户端开发（electron）等需求
  3. 3. crm系统
  4. 4. ehr系统
  5. 5. erp系统
  6. 6. 金融系统，有安全防护等需求
  7. 7. 企业官网，cms系统，模板等需求
  8. 8. 管理后台，表单、表格、富文本编辑器、文件上传下载等需求
  9. 9. dashboard系统，可视化图表需求
  10. 10. 企业内部运营管理系统，单点登录需求
  11. 11. h5游戏，3d开发，龙骨动画等
  12. 12. 地图系统，3d的需求
  13. 13. 绘图工具，canvas、拖拽功能、上传下载等需求
  14. 14. 文档系统，富文本编辑、权限管理、cms等需求
  16. 不同的业务也会有一些通用的需求
  18. 1. 微信相关开发，用户体系、授权、微信底层能力的使用（自定义分享、扫码、地图、支付等）、小程序开发
  19. 2. 用户体系设计
  20. 3. 富文本编辑器
  21. 4. 上传文件，分片上传、断点续传
  22. 5. 多语言支持
  23. 6. 多皮肤支持

1.2 体验，用户关注的体验对于前端开发者就是性能的需求，主要包括加载时性能和运行时性能，对于这两种需求，有很多解决方案

  1. 1. 代码压缩
  2. 2. 代码打包
  3. 3. 各种缓存策略、cdn
  4. 4. 图片处理
  5. 5. lighthouse工具的使用
  6. 6. 运行时代码优化
  7. 7. pwa
  8. 8. webassembly
  9. 9. 前端路由
  10. 10. SSR

1.3 安全，对于前端主要考虑XSS、CSRF攻击的防御，有些业务场景还有反爬虫的需求

2.1 提供基本能力，为了实现业务功能，大部分项目都需要提供一些基本的能力

  1. 1. ajax及封装
  2. 2. util方法的封装
  3. 3. 通用组件的支持
  4. 4. 路由

2.2 质量，为了保证项目质量，前端有很多解决方案

  1. 1. 单测
  2. 2. 代码检查
  3. 3. 代码组织最佳实践（为了保证代码的可维护性）
  4.     1. MVC、MVVM等模式
  5.     2. 状态管理
  6.     3. 前端路由
  7.     4. 枚举变量
  8.     5. layout（为了复用布局）
  9.     6. 等等
  10. 4. 前端监控体系

2.3 效率，为了保证开发效率，前端经历了漫长的发展，有很多解决方案和最佳实践

  1. 1. 模块化，为了解决多人协作快速迭代，本来不具备模块化基础支持的前端有了很多模块化的解决方案，包括js模块化和css模块化
  2. 2. 构建工具链，可以自动化完成打包，代码压缩，图片处理等必要的工作，不管是SPA还是MPA，在现代化前端开发中，都需要一个完善的构建工具链。
  3. 3. ci持续集成
  4. 4. 本地开发环境，提供高效调试的支持
  5. 5. mock数据，降低联调带来的效率影响
  6. 6. 包管理，提高代码复用效率和项目管理效率
  7. 7. 组件库搭建
  8. 8. 脚手架设计和使用
  9. 9. devops
  10. 10. serverless
  11. 11. 协作规范，如git commit规范、code review规范等
  12. 12. 跨端开发，rn、phonegap、weex、flutter、electron、nwjs

前端的知识非常多且杂。但是有个2-8定律，就是我们学习20%的常见知识和技能，就可以覆盖80%的场景。因此，我们学习计划要先把这20%掌握熟练，这是性价比最高的策略。

  1. 完成项目的基本能力的支持
    1. 项目的基本能力支持
      1. ajax
      2. 路由
      3. 各种util
      4. 通用组件库
      5. 模块化，js模块化，css模块化
    2. 代码组织最佳实践、框架及生态的最佳实践（React）
    3. 脚手架的使用
    4. 组件库、工具库的使用
    5. 通用组件设计及实现
    6. 异步编程完整解决方案
  2. 工程架构能力
    1. 构建工具的熟练掌握
    2. 脚手架原理及设计实现，SPA、MPA的项目基本搭建
    3. 组件库、工具库搭建
  3. 常见业务需求
    1. 微信开发常见场景，用户体系，授权流程
    2. 分片及断点上传原理
    3. 音视频简单开发及踩坑
    4. 表单
    5. 多语言
    6. 多皮肤
    7. 其他通用需求，如富文本编辑器、图表、可视化、扫描二维码等的原理了解
  4. 性能优化
    1. lighthouse使用
    2. webpack常见优化方法和工具
    3. React常见优化方法和工具，长列表渲染组件等
    4. 常见性能优化策略
  5. 监控
    1. 上报基础库封装
    2. sentry使用