体系

构建知识体系，自我重塑

无论学什么技术，都要现有一张清晰的“地图”，也就是知识体系，而学习过程就是“按图索骥”

知识体系需要具有完备性

体系顺序（7大模块）： 基础 -> 入门 -> 中级 -> 进阶 -> 架构 -> 案例 -> 附录

一、态度（良好的开端）

  1. 不要陷入编程误区：编程要掌握方法

  2. 掌握基本语法，熟悉基本概念和逻辑

  3. 结合问题思考程序结构，使用编程套路

  4. 参考案例多练习多实践，举一反三，观察、提炼、应用；以终为始，考虑问题要完整

  5. 在乎你写的代码，掌握代码，并且始终不断地改进代码（同时要不断提升自己），写代码要清楚地知道自己在写些什么，为什么这么写，想清楚了再动手！

  6. 其实所有的东西都是相通的，学习相关新的知识其实没那么难，重要：夯实基础，找准方法，融会贯通！

  7. 读远比收藏重要

  8. 读源代码（带着目的去读，解决issue, 调试的过程中），参加开源项目

  9. 代码洁癖，追求高质量代码！！

二、需要锻炼的思维能力、需要掌握的知识和方法

思维能力

  • 逻辑思维
  • 抽象思维（将问题转化为模型的能力， 归纳和演绎）学会作图
    1. dfd数据流图，让你理清数据来源和数据去向
    2. 活动图让你理清处理方式
    3. 类图和面向对象思想让你理清数据和功能分配
    4. 数据结构让你知道如何实现数据传递和存储 要想提高抽象能力，就得不断的思考（不能一味地采用 trial & error 试错方法）
  • 编程思维 | 编程能力（数据驱动的思考方式）（杜绝 一看就会，一用就废）
  • 架构能力 技术架构一定要合适，没有一个技术架构是完美的，学会根据需求选择合适的技术架构； 在充分了解其优缺点之后，看适不适合当前项目需求 仅仅只是一颗螺丝钉，想要的不仅可以做螺丝钉，也可以做图纸；
  • 工程能力: 感性的认识上升到理论的高度

知识方法

  • 前端知识
  • 领域知识
  • 学习方法： 整理法、追溯法
  • 学习基础原则：1. 基础（背后的原理和概念）；2. 整洁；3. 优质的付费教程

三、基础

提升计算机学科素养； 掌握基本的数据结构和算法； 学会运用设计模式和编程范式等

  • 计算机基础
    • 计算机组成
    • 数据结构与算法
    • 计算机网络
  • 程序设计基础
    • C语言 - 主要是练习代码
  • 编程思想
    • 设计模式
    • 编程原则

四、核心

掌握核心技术

  • HTML
  • CSS
  • JavaScript
  • API(Browsers)
    • DOM
    • BOM
  • INTERNET
    • HTTP
    • WS

五、提升

技能提升

  • CSS预编译
    • Less
    • Sass
  • JS扩展
    • Typescript
  • JS库或框架
    • jQuery
    • axios
    • Mock
    • Vue
    • React
      • JSX
    • Angular
  • 模块化
    • Webpack / requireJS
    • CommonJS
    • AMD
    • UMD
    • ES6 Module
  • Node
    • Express

六、进阶

技能进阶

  • Git
  • ACP
  • Android Studio
  • Nginx
  • Docker
  • CI/CD
  • 架构设计（模块化设计等：eg 一辆四驱车需要各种零件的合理地组装，有些轮子是现成的，有些零件需要自己造）
  • 工具链
  • Java
  • Python
  • MySQL
  • MongoDB
  • Flutter

七、工程架构与发展

从整体出发，紧跟发展步伐

  • PWA
  • WebAssembly( .wasm )
  • 性能
  • 设计
  • 软件质量
  • 可维护性
  • 可扩展性
  • 软件工程化（构建、部署、运维、监控）

项目开发流程

开发过程： 需求文档 -- 需求评审 -- 原型图 -- 效果图 -- 静态页 -- 前端框架搭建（mock数据） -- 前端自动构建与部署  --
                    |                                        |  （这里前后端对接交互）                   | （优化迭代）
                    |                                        |                                          |
                    --   -- 数据库设计 --  环境搭建 -- 服务逻辑接口编写 -- 服务端自动构建与部署     --------

1. 选择合适的技术框架, 支持多平台分析
2. 设计稿转为代码(通用代码分离)
3. 充分了解业务，良好的交互体验
4. 自动化构建和部署
5. 优化与安全
6. 尽量减少hardcode（写死）

    注意：每一个点都是需要深耕的！！

前端要求：
   - 根据产品原型，快速确定前端技术选型，主要是前端框架的选定，前端工程目录结构生成，
   - 自动化构建task编写（git + yo + gulp + bower + npm）等，开发，调试，打包，压缩，混淆等都非常方便，
   - 前端工程师还会根据此次的需求，考虑性能监控，埋点统计，SEO，兼容性等多方面知识

八、推荐书单

  • 《程序设计基础》
  • 《计算机科学导论》
  • 《数据结构与算法》
  • 《计算机网络》
  • 《红宝书（JavaScript高级程序设计）》
  • 《犀牛书》
  • 《金字塔原理》
  • 《代码大全2》
  • 《代码：重构的艺术》
  • 《刻意练习》
  • 《Eloquent Javascript: A Modern Introduction to Programming》

九、摘抄DeveloperRoadMap（仅供参考）

1、初级工程师

  • 阶段标准： 初级前端工程师：能够完成日常的功能开发和debug，可以在已有的代码基础上做修改，优化和维护；熟练使用平时开发需要用到的工具即可，无需理解原理。这时候需要学习的东西是非常多的，不过由于只要掌握80%（二八法则的比喻，前80%的知识只需要20%的精力学习，后20%深入的知识则需要投入80%的精力）的使用知识，进步会非常快。

  • 阶段分析： 需要大量的项目实践经验，至少应用一个框架开发实际项目半年以上，才算真正掌握一个框架的使用。另外就是项目开发过程中运用到的各种工具，每个领域都要熟悉一种，当然，只要熟悉基本操作即可。最后，对于业内的各种话题和思想要有概念，起码做到听说过，大概知道是干什么的。整个初级工程师的学习过程大约会持续1-2年。

  • 学习诉求： 大量的实际开发经验；足够复杂的业务场景；业内最新信息；

  • 工程技能：

    • 熟练开发语言（js/es6/ts、html/template、css/less/scss、nodejs、json等）
    • 熟练开发框架（react全家桶+antd、vue全家桶+element、angular+material等）
    • 熟练开发工具（IDE、shell、fiddler/charles、git/svn、mock等）
    • 熟练常用库（axios、jquery、lodash、moment等）

2、中级工程师

  • 阶段标准： 需要在原理上有更深入的理解。能够从较本质的层面分析和解决问题，需要具有从零搭建一个项目的能立，还要能够找出项目瓶颈和可优化的点。这时候就要触及那剩余的20%的知识了

  • 阶段分析： 与初级相比，知识广度上，不会有特别大的变化，但是深度上就要差出一个档次了。俗话说，魔鬼藏在细节中，中级这个阶段，我们就要直面魔鬼了。当我们对一个事物熟悉到一定程度时，一般都会将其抽象化，以方便我们了解本质，寻找规律，最后达到触类旁通的境界。古代圣贤归纳的“象数理易”四个阶段，便是对此最好的解读。所以，如果你隐约的能够将之前你觉得不相关的知识联系起来时，那么知识的深度就已经达到了标准。举个最简单的例子：网络层面的缓存与计算机结构中的内存原理，有多少相似的地方？当然，单是某几个自己最常用的知识点达到足够的深度，就已经称得上是一个合格的中级工程师了。整个过程的积累需要大约2-3年的时间。

  • 学习诉求： 足够深度的原理干货；自己模拟造轮子；业内最佳实践；

  • 工程技能：

    • 项目工程搭建及自动化（webpack/rollup/parcel/gulp等）
    • 性能优化（交互、缓存、网络、运行效率等）
    • 代码质量保证（eslint、stylelint、jest/mocha等）
    • 其他常用领域达到初级水平以上（网络、后端、数据库等）
    • 开始带人

3、高级工程师

  • 阶段标准： 在中级工程师的基础上，具有更好的抽象能力，透过表面看本质。此时已经在开发过程中积累了相当的经验，理解也比较深入，达到了触类旁通的层次，已不局限于框架和库，甚至是前端领域的约束，可以开始自己无中生有的造轮子了。另外，更重要的是对于团队的贡献，要能够成为一个团队的主心骨，明确团队的方向，整合整个团队的力量来做事情。

  • 阶段分析： 此时，自己已经有了多次触类旁通的经验，也就是说自己对于学习一个新知识应该深入到什么程度，已经有了一个比较明确的认知。那么此时的学习诉求便是能够高效的获取其他领域的足够深度的知识。从线到面，构建起一整套的知识系统。中级工程师只要一直积累便可水到渠成的达到这一步。不过，身为高级工程师，也要开始关注技术意外的东西了，比如过管理团队。就像一个初级工程师熟练使用了一个框架之后，要开始学习其他方面的知识一样。高级工程师也就是螺旋上升到了另一个层面，开始了另一个循环而已。到了这个层次，基本已经实现“技术自由”了，而且一定是公司里独当一面的中坚力量。整个过程需要持续3-5年的时间。

  • 学习诉求： 高效获取足够深度的知识；管理方面的知识；业内趋势的判断；

  • 工程技能：

    • 架构设计（UML）
    • 技术选型
    • 团队开发效率提升（公共组件、Travis CI、jenkins、gerrit/gitlab/Gogs、mock等的搭建）
    • 难题攻关
    • 项目管理（jira、asana、tpad、禅道等）
    • 其他常用领域达到中级水平以上（网络、后端、数据库、运维、分布式等）
    • 开始带团队

4、技术专家

  • 阶段标准： 在业内，要具备一定的技术影响力，以及“代表作”。所作所为可以影响整个公司，乃至整个行业。从流行的追逐者，变成了流行的创造者。当然，能力越大责任越大，公司的决策压力自然也要背负，此时已经不是管理单个团队了，而是对技术方向的全局把控，足够影响公司的战略甚至生存。

  • 阶段分析： 到了这个境界，已经不能够简单的归为技术类了。就像前端高级工程师，已经不仅仅局限于前端这个领域一样。能够达到这个境界，相信已经不需要太多旁人的指手画脚了，能量已经大到足够影响上万人甚至更多。说白了，就是处于金字塔顶端少数的存在。除非转型，那么这个阶段基本可以一直干了，而且是自己挑公司，做自己想做的事，甚至自己当老板。

  • 学习诉求： 国内外顶级article；业内痛点及瓶颈；行业及环境宏观分析；

  • 工程技能：

    • 技术影响力
    • 战略级技术架构
    • 跨部门项目推动
    • 英语

牛人语录

teambition创始人：

第一步是会用 jQuery，又从 jQuery 到 BackBone，把 BackBone 的源码全部读了一遍，其实没有完全读懂，真的看懂之后就觉得豁然开朗。 后来又从 BackBone 到 node.js，但是 node.js 就没有能力读源码了。 至于后端，刚开始是从 Python 入手的，因为 Python 是非异步编程，JS 是异步编程，所以当时把 node.js 的原理与 Python 仔细对照理解后觉得很震撼，我那时候也读了 socket.io 的源码。 总之，每一个都迅速补齐了我自己对软件架构和编程的理解，整个过程发生在 3 到 6 个月之间。 我持续编了两三年代码，在重视移动端之后，又去学了 iOS 和安卓。 在 Teambition 的第一个版本出来时，我一个人编写了 22 万行代码，还删过 30 万行代码。

面对质疑，怎么提升自己才是关键的，我们只要不断学习，凭实力说话，自然就能赢得一片天地

热爱 分享 紧跟潮流 思考问题的方式：如何运用自己掌握的知识和马上获取的知识解决每个问题，并花时间找为什么？

You Don't Know JS

进阶

原则：

  1. 阅读规范文档
  2. 阅读别人的代码
  3. 团队；投身在开源社区中，保持对开源项目的活跃贡献
  4. 造轮子（过程）
  5. 记录任何学习的东西（过程）

results matching ""

    No results matching ""