web

Posted 2020-08-02 梁娜

http://wiki.sdt-int.com/pages/viewpage.action?pageId=7078370

                 相比于后端开发而言（服务端），前端一向是百花齐放，百家争鸣的开源乐园，所以针对同一个问题会有很多办法和类库来解决。

• 大家在学习的过程中会遇到很多新技术和名词，请牢记自己这次学习的主要目的是什么，不要把精力分散到一些与此无关的技术上。

   

  初学者

  以下三种技术是前端中必不可少的技能，开发者应能够熟练掌握，可访问 Mozilla Web 技术文档 来学习。

  • HTML 入门
  • JavaScript 指南
  • CSS入门教程

  在对于这些技术有基本了解后，建议阅读 JavaScript生态圈现状：初学者地图 ，了解前端开发过程所使用的一些技术。

  毕业标准

  • 可独立完成包含有表单的 html 页面；
  • 针对表单可使用 javascript 进行合法性校验；
  • 针对表单可实现左标签右输入框的布局，且整体居中对齐的效果。

   

  Level 1 (普通)

  推荐使用 Facebook 开源的 React 作为前端渲染层，配合使用 Redux 作为集中状态管理的容器。

  • React 快速入门 | 
  • Redux 介绍与基础
  • ECMAScript 6 入门

  由于中文文档是从英文翻译而来，部分内容没有准确描述最新功能。建议英文比较好的开发者也可以浏览以下文章。

  • Learn Raw React — no JSX, no Flux, no ES6, no Webpack
  • Learn Raw React: Ridiculously Simple Forms
  • Learn ES2015
  • React Getting Started
  • Redux Intro & Basics

  针对 React，开发者需要理解 React 的虚拟 DOM 和可嵌套组件的概念，组件之间如何传递数据。

  针对 Redux，开发者需要掌握 Action、Reducer、Store 以及如何处理 Ajax 请求。

  针对 ES6，开发者只需要掌握箭头函数、解构赋值、let 和 const 部分即可。由于 React 对于 ES6 Class 的支持不完善，目前不推荐在项目中使用 ES6 Class。

  不建议在这个阶段花费很多时间去理解 Webpack, Babel 等技术，如果想实现所见即所得的显示效果，可借助现成模板来实现。

  毕业标准

  • 可独立完成 React 版本的 TodoMVC；
  • 可将上述项目改造为使用 Redux 存储状态；

   

  Level 2

  进入这个阶段的开发者应着重于以下方面。

  • 如何将 DCS/DMS 业务分解为合适的 React 组件；
  • 哪些状态应交由 Redux 统一管理，哪些是 React 组件的 State；
  • 如何完成单元测试和 E2E 测试；
  • 如何管理业务数据；
  • 如何复用基础数据；

  毕业标准

  • 可独立完成类似维修单管理的业务节点

   

  Level 3

  在这个阶段，开发者需要具有把握项目整体代码结构的能力。

  • 如何利用 Webpack 和 Babel 等一系列工具准备项目开发环境；
  • 如何实现服务端渲染；
  • 如何规划 Redux 的 Action 和 Reducer；
  • 如何克服 Immutable 不利于重构的问题；
  • 如何为未来可能发生的业务变更预留合适的定义；

  毕业标准

  • 可带领开发者完成小型项目的前端开发；