[2021-02-28]前端知识一个月速成经验
[2021-02-28]前端知识一个月速成经验
最近进行了为期将近一个月的前端知识学习，目标是掌握当前业界最新的前端技能，完成一个纯前后端分离的小系统；前端使用React开发，接口层使用Node.js进行转发，服务后台是云服务。由应用开发工作转前端开发工作，边学习边开发，中间阅读了不少材料，其中有一些自己觉得挺好，而且都是免费的资源，所以整理成册，方便自己回顾，也方便有类似需求的其他人。
下图的技能地图来源于网上，供进阶学习参考。
近几年，前端技术栈的发展非常快，社区上有各种各样的组件、工具提供使用，编程思想也跟以前Jquery直接操作DOM的方式截然不同，代码复用的粒度也由难复用到UI组件复用再到交互行为复用。如果你看到这些变化时表示比较蒙，我觉得蛮正常的，一个月前听前端同事这样描述的时候，我也是一脸懵逼。由于涉及的知识点还有工具很多，学习曲线在起初阶段非常陡峭，我比较幸运能得到不少有丰富经验的前端同事指导，学习虽然累，但还算顺利。正因为前端技术目前还处于更新较快的阶段，所以本文中介绍的一些文章、视屏等学习素材，建议读者尽量在每年都找类似的、较新的来学习，以免走弯路。
先讲讲开始学习之前需要有的背景知识：
- html
- css
- js
HTML
掌握基础的HTML常用标签即可。这部分不需要花费太多精力，如果在学校有接触过，就基本足够了。如果之前完全没有接触过，那阅读一下w3school的简易教程也足够。学习的时间投入大约是6小时，动手能写出一个HTML页面为止。针对HTML，有几点总结性的经验可以分享给你：
- 可以看这个网页上的教程进行学习https://www.w3school.com.cn/html/index.asp
- HTML中文意思是超文本标记语言，定义了网页内容的含义和结构。就是说在编写页面时，不同的元素应当使用相应含义的标签进行包裹，而不是一律使用div标签。比如HTML5的一些新标签：header nav footer canvas datalist article mark，都是具备含义的。
- HTML应当只处理信息结构及信息，一定不要因为布局而滥用标签。也就是不写不包含任务信息项的HTML标签。
- 需要了解内联元素、块级元素、内联块元素这三个概念
- 必须确保自己懂得怎么编写一个FORM表单
CSS
需要结合前面HTML的知识来学习，同样也不需要学习得很深入。实质上，现在的前端工程都复用比较完整的UI库进行开发，对于UI和UI上的动画效果，还有浏览器兼容性，大多数是不需要关注的。日常关注最多的是布局方面的问题，因为UI组件配备之后，根据交互稿用合适的布局把元素展示出来才是最经常要做的工作。由于要结合HTML的知识做点小练习，所以这个环节花上18个小时还是蛮有必要的。同样有几点总结性的经验分享给你：
- 可以看这个网页的教程进行学习 https://www.w3school.com.cn/css/index.asp
- 要清楚CSS的盒子模型：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model
- CSS选择器：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors
- 需要重点看看关于布局的知识点：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout
- 需要了解弹性容器的知识点：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
- 对网格布局有了解 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout
- 对媒体查询有所了解 https://developer.mozilla.org/zh-CN/docs/Web/CSS/%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2
JS
前端知识中的核心，如果你拥有某一门语言的编程经验，那这个阶段你只需要了解一下JS的语法特点，也是看很基础的知识点即可。如果你完全没有其他语言的编程经验，那学习JS这里，就得花大功夫了。同样有几点总结性的经验分享给你：
- 如果完全的0经验，建议照着这个教程，好好把编程语言熟悉一下：https://www.w3school.com.cn/js/index.asp 预估课时在48小时左右。也可以看这个视屏：
- 除了基本语法知识以外，还需要了解这些知识点：
- 原型链：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
- 箭头函数 ：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions
- 闭包 ：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures
- 类 ：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes/constructor
- 事件循环：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/EventLoop
如果前端知识很薄弱，那前面这些基础知识的学习可能需要花上不少时间。由于我本身已经在应用开发岗位工作多年，已经积累了比较多上面三块内容的知识，所以学习起来会快一点。加上补齐这些基础知识的开销，估计要加多半个月到一个月的学时才可以完成。
接着继续介绍学习业界新前端知识所经历的学习过程：
- Node.js
- TypeScript
- Koa
- ES6若干新的特性
- React
- 练手项目
开篇的时候有提到，学习目标是要做一个前后端分离的项目，中间层使用Node.js进行接口转发，所以我开头就学习了Node.js的知识，然后由Node.js引起了对TypeScript的关注，进而学习了TypeScript的相关语法。Node.js主要用于完成Rest API的开发，需要用到一些现成的框架做辅助，所以又学习了KOA。阅读Koa源码的时候发现对ES6的新特性非常陌生，所以补充了ES6的一些知识点，最后我才学习React。假设你的需求是纯前端，那你也可以直接学习React，不过很快你也同样会接触到ES6的一些新特性，所以应该马上也会学到ES6的内容。而Node.js、TypeScript、ES6、KOA的学习，可以基于你学习过程中遇到的问题来调整优先顺序，比如确实因为太多ES6的语法不熟悉，可以在Node.js学习的过程中直接并行学习ES6。
穿插一个题外话，javascript编程语言的活跃度正在逐年上升，对于计算密集型的需求来说，虽然具有先天性的不足，但是对于传统行业的技术选型来说却有得天独厚的优势。我个人的理解是，随着云服务的成熟，很多计算密集型的功能将会得到很好的云化，企业的IT建设会尽量靠近云化，然后在云的基础上包装一层接口的聚合层，然后定制出一份个性化的交互界面，进而完成业务的互联网化建设。对于传统企业而言，很多的工作会集中在接口聚合层和交互界面上，而JavaScript可以很好完成这两块需求，而且统一了研发人员的技术栈，人力资源管理简单，生产效率高。
Node.js
直接从官网的教程开始的话会比较慢，推荐看视频教程：https://www.bilibili.com/video/BV11t411k79h
视频教程中包含IDE的一些使用技巧，还有很多Node.js的核心知识点，官方文档则要么基础知识点介绍过短，要么进阶知识点太多，导致学习进度会很慢。视频教程看起来是一个培训机构发出来的福利资源，听教程的时候可以两倍速播放，平时公交车上、地铁上、班车上都可以抓紧时间停，攒几个视频之后，挑选一个视频中合适的案例自己下手编码实现一下，实现过程中又可以返回视频的内容重新复习，扎实基础也增加自己对Node.js的熟悉程度，这对于马上要着手写项目非常有帮助。
TypeScript
javascript用作服务器端语言时，最大的一个短板在于弱类型，这是执行性能、错误处理的问题根源。Typescript为JavaScript IDE和实践提供静态检查、泛型等能力，提供了一些语法糖更方便地实践面向对象编程，这些对于构建大型业务系统是很有帮助的，而且在看Node.js还有Koa的一些开源项目时，经常涉及到TypeScript知识点。同理在基础学习阶段直接看官方文档还是效率太低，推荐看视频教程：
Koa
类比Java、PHP、Python的web开发，语言提供的都是底层低粒度的能力，一般都要基于一个成型的框架进行项目开发，这样可以省去很多处理http协议信息、参数获取、路由、数据库、日志、告警等一大系列的工作项。而Koa就是基于Node.js实现的一个开源的Web开发框架，在前面Node.js的学习你很可能会接触到Koa的基本介绍，所以在这一步学习Koa的时候，其一看的得是Koa的官网，其二要看Koa的源码，其三要看Koa的样例代码，做完这三个任务，你可以信心满满地开始接口层的开发任务了。
- Koa官网：https://koa.bootcss.com/
- Koa源码：https://juejin.cn/post/6855129007508488206
- Koa examples：https://github.com/koajs/examples
ES6
关于ES6目前最好的资源阮一峰的中文书：https://es6.ruanyifeng.com/，但是实际上也不需要通篇阅读，我觉得以下几个知识点需要好好琢磨：let 和 const 命令、数组的解构赋值、模板字符串、展开运算符、Symbol、Promise对象、Gennerator、asyne/await、Module、数据结构（Set、Map），学习过程的要点不是看视频，而是要自己动手体会例子和跟有前端经验的同学交流。关于ES6的知识非常重要，这影响阅读代码、编写代码的顺畅程度。
React
终于到最后才开始React的学习，到这里的时候你可能已经经历了大概半个月的学习了。如果你身边没有资深前端同学的话，这个时间可能还会更长。而接下来的半个月就是集中精力学习React。学习React可以先看视频，然后阅读React的关键章节，最后找练手的项目进行实践。
- 视频：
- 官网的关键章节：
- State & 生命周期：https://react.docschina.org/docs/state-and-lifecycle.html
- React哲学：https://react.docschina.org/docs/thinking-in-react.html
- Context：https://react.docschina.org/docs/context.html
- 高阶组件：https://react.docschina.org/docs/higher-order-components.html
- Render Props：https://react.docschina.org/docs/render-props.html
- Hook概览：https://react.docschina.org/docs/hooks-overview.html
- 自定义Hook：https://react.docschina.org/docs/hooks-custom.html
- Hook API索引：https://react.docschina.org/docs/hooks-reference.html
- 练手项目：可以闭卷做视频教程的案例或者自己在github上找开源项目，最好的是工作中恰巧有一个小型线上系统供你实操。
小插曲
工作了这么多年，在以前Jquery的年代，自觉对前端知识非常熟悉。然而离开前端领域做了3年大数据相关的开发工作之后，猛然回头，前端的技术栈已经天翻地覆。在陡峭的学习曲线面前，几次想着放弃，想着自己可能不是学习前端知识的料，因为有太多细枝末节，太多的工具，太多的名词需要去了解了。而且Javascript很多新特性的编写方法跟后端语言的差别还蛮大的，同样功能的工具包有N个替代方案，方案出现的时间还都密集集中在最近的3～5年，比如时间处理函数包，就有很多种选项，就为这么简单的时间处理就得在阅读别人代码的时候各种翻阅资料。虽然很累很烦躁，但一直有一个癖好推动着我要跟上节奏，补补前端知识。这个癖好就是——喜欢倒腾点小工具、小软件、小系统。