前端体系认识和我的技术栈——wsdchong

前端体系认识和我的技术栈

前言

从2020.3.12日我才开始系统接触前端。在此之前，只是简单了解前端的HTML、CSS、JavaScript。其他的vue、elementUI、node.js、ajax、webpack等都没去涉及过。

我当时在做毕业设计，题目是基于Java的在线小说发布系统。内容和前端、后端相关，于是边了解Java边了解前端，碰巧当时字节跳动校招，我被校招的前端开发工程师和Java后端开发工程师的岗位要求吸引了，由此入坑（快乐）。

1、2020届获得本科及以上学历，计算机相关专业；

2、精通HTML、CSS、JS，熟悉页面架构和布局，熟悉 HTML5/CSS3 等常用技术；

3、熟悉常用UI框架（如 Bootstrap/Pure/Kendo 等);

4、精通JavaScript、AJAX、DOM、jQuery等技术；

5、熟悉NodeJS，熟练使用 Grunt、Gulp、Webpack 等构建工具；

6、具备MVVM框架开发经验，如 React、VueJS、AngularJS 等；

7、良好的沟通和团队协作能力、热爱技术、责任心强、能推动技术框架的落地使用。

这篇前端体系认识是陆陆续续写的。内容有三，往期学习，前端认识，不仅仅是前端。是我从三月份到八月份的迭代认识，回顾反思。

往期的学习记录

第一阶段：认识（前端路线）

2020.3.10：做网站的学习路线：bootstrap、jQuery、ajax、json

2020.3.30：前后端发展----wsdchong：vue.js、sass、webpack

2020.4.13：前后端学习：基本功、技巧、工具

2020.4.21：前端后端知识体系理解–wsdchong：node.js后端、Java后端

2020.4.22：第一届前端早早聊笔记–wsdchong：业务与技术

2020.5.1：我的技术栈准备：阶段性分析。

2020.6.13：前端学习梳理——wsdchong：学习路线

第一阶段：浅层。从不懂到懂，了解了前端的全貌。慢慢积累认识。最关键的是写了《前端学习梳理》。

学习过程大概有一个月，从求职网站上、博客上、官网上、《前端早早聊》上看的消息，一点一点按照自己的理解补充到自己的理解体系中。

前端学习路线可以参考峰华的博客：想成为前端大神秒杀群雄？收下这份2020年最新前端学习路线！ 其中有一句博主的回复很到位：html css js三大件学好，React vue angular挑一个深入，打包，部署，性能优化掌握一下。

这篇博客有链接，可以参考，不过也不用全部都学，了解即可，能拿vue框架开发一个平台项目就可以进入一个公司实习，在实习的过程中，三大件、打包等就会疯狂提升，用问题驱动理解。

第二阶段：理解（从产品角度看前端）

2020.6.13：《前端技术架构与工程》之编程语言笔记：理解CSS（less、sass、postcss）、理解JavaScript（ES6新特性的意义）

2020.6.14：《前端技术架构与工程》之性能笔记：对HTTP协议、浏览器有了崭新的认识。

2020.6.16：前端三大件的学习——wsdchong：从编程语言、性能的角度认识HTML、CSS、JavaScript。

第二阶段：底层。从全貌到底层，了解了前端变化的原因。使得我能一通百通。最关键是看了《前端技术架构与工程》这本书。

学习时间大概是两个月。让我把设计、开发、测试、运维、架构等方面建立了全新的认识，运用知识的时候算是知其然也知其所以然。这本书是我认识的突破点。让我对编程语言的选择、性能优化等有了一个全面的了解。以此，我能过更快透过现象看到本质。

第三阶段：实践（vue框架）

2020.7.15：数据可视化学习笔记一——概述：公司的技术栈爬虫、spark、可视化、GIS；

2020.8.4：使用SVN更新自己的文档——wsdchong：团队协作SVN；

2020.8.4：mapbox的初次笔记——wsdchong：mapbox库的使用；

2020.8.8：2020最新版vscode格式化代码——wsdchong：vscode工具的使用；

2020.8.12：前端可视化echarts使用理解——wsdchong：echarts库的使用；

2020.8.12：vue+Cesium学习笔记——wsdchong：cesium库的使用；

第三阶段：实践。从底层到实践，将理论用到实践中。使得自己能产生效益。我在一家做智慧城市的公司做了可视化前端开发。

学习时间大概一个月。在工作中把所学的运用起来。果然实践出真知。理论的知识通过实践迅速应用，实践中遇到的问题补充到理论知识中。对前端”页面创建-静态实现-接口“的一个流程有了一个实践角度的认识。

从实践的角度来说。前端有两个最基础的功能，一是静态实现，运用框架和库把界面实现；二是通信，运用axios发送请求使界面能与后端交互。

此外就是后端服务搭建、存储、工程与协作。

前端体系认识

别人的前端体系

我找到这个前端体系认识是在实用角度出发的前端体系，毕竟学以致用。

不过从理论角度来说，前端的基础是HTML、CSS、JavaScript、HTTP协议，还有在这基础上的HTML5新特性（canvas）、CSS预处理语言（解决全局性、兼容性、响应式的问题）、ES6新特性（静态语言、箭头函数、promise）、以及计算机网络（浏览器原理、HTTP协议、安全、SEO）。

很显然，从理论角度去学前端，就会有许多需要去研究，但是却又不能很快上手，比较打击新生积极性。

而从实用角度去学前端，就像是使用黑盒，虽然不知道原理，但能达到效果。并且很快上手，大大提高新生学习积极性。

现在使用原生的要么是菜鸡，要么是大佬。正常项目都开始使用框架，因为框架里就把这些底层的东西封装好了，只需要照着官方文档使用即可，便于公司生产。（细节部分以后有机会再补充）

重点学习前端基础，要十分熟练。辅助了解工程与协作以及通信的axios，要能使用。服务部分、通信部分，以及存储部分要了解概念，知道作用。

参考：开课吧——web前端高级工程师

有一部分内容修改了。

前端基础

JavaScript进阶：ES6

vue全家桶：vue指令、组件、插件与过滤器、脚手架、vue-router、vuex、vue devtools、elementUI

服务

node.js：环境搭建、包管理器、搭建服务器、实现爬虫

koa2：koa-views、koa-router、koa-static

通信

同源：HTTP、XHR、ajax、axios

非同源：前后端分离开发、跨域解决方案、jsonp原理解析、cors跨域设置

存储

服务端存储：MongoDB、mysql

客户端存储：cookie、localstorage、sessionStorage、离线存储

工程与协作

git或SVN

vscode：格式化规范

vue CLI（封装了webpack）

前端基础部分（实用角度）

• 深刻认识到vue的两大特性——数据驱动视图、组件化；
• 理解vue指令、方法、生命周期，
• 熟练使用vue CLI、vue Router、vue组件通信（父子通信、兄弟通信、平行通信、vuex）、axios；
• 进阶：可扩展（解耦、组件化）、性能优化（资源压缩、懒加载、预加载、缓存）、安全（登录、反爬虫）
• 最后利用所学的做一个平台，如电商平台、博客平台、数据可视化平台等等。

在学习这部分的时候，多参考HTML、css、JavaScript，便于vue的使用。

我所认为的学习路线

• 理论部分：HTML（DOM）、CSS、JavaScript、HTTP（ajax）
• 框架部分：vue（指令、方法、生命周期）、vue CLI（webpack）、vue Router、组件通信（父子通信、兄弟通信、平行通信、vuex）、axios；
• 工具部分：SVN、vscode自动格式化、Chrome调试；

参加教程：

理论部分、框架部分内容写在最后的常用网站中。

工具

使用SVN更新自己的文档——wsdchong

2020最新版vscode格式化代码——wsdchong

Chrome调试我还没写。

入门

首先了解前端的学习路线，方便对前端有个总体认识，不用都会，但需要对常用到的名词了解。

然后参考别人的vue平台进行模仿。构建自己的知识理论结构。（万事开头难，许多人就是徘徊在前端门外，入门之后，就可以进入飞速成长阶段）

前期学习的内容有

理论部分：HTML（DOM、BOM）、CSS、JavaScript

框架部分：vue（指令、方法、生命周期）、vue CLI、vue Router、组件通信（父子通信、兄弟通信、平行通信、vuex）、axios；

工具部分：SVN、vscode自动格式化、Chrome调试；

熟练

查漏补缺，多使用别人的轮子，完善自己的项目（如前端实验台）。

熟练使用别人的轮子后，边研究理论基础（HTML、CSS、JavaScript、计网），尝试自定义别人的轮子。

做好自己造轮子。

我所认为的底层

前端的基础是HTML、CSS、JavaScript、HTTP协议，还有在这基础上的HTML5新特性（canvas）、CSS预处理语言（解决全局性、兼容性、响应式的问题）、ES6新特性（静态语言、箭头函数、promise）、以及计算机网络（浏览器原理、HTTP协议、安全、SEO）。

• HTML5新特性，如canvas、web storage等

• CSS预处理语言，解决CSS全局性、兼容性、无报错等的缺陷。如（less、scss、sass、postcss等），（CSS命名具有全局性，项目越大，命名越难），（各浏览器版本支持不同程度的CSS，导致需要写多套CSS）；

• ES6，解决JavaScript动态类型（大项目中用静态类型易报错）、同步（promise）的JavaScript新标准。Basel使得前端工程师可以使用ES6,（它可以把ES6转化成ES5）

• 计算机网络，如常用的HTTP协议。内容有许多。

不仅仅是前端

前端是不能脱离其他分支独立的，所以其他也需要补充。

参考：《前端技术架构与工程》初次笔记——wsdchong

《前端技术架构与工程》之工程思维与服务支撑笔记

从一个产品的生产角度来看，开发过程有：业务需求-产品策划-UI设计（项目架构）-前后端开发-测试-部署。

所以前端还需要了解（了解即可，一下基本概念，方便降低沟通成本）：

• 业务需求（看自己公司面对的用户群体，了解用户群体的业务需求，如外卖、公司OA、智慧城市、遥感、土木等）
• 产品策划：可行性分析、需求分析、设计、开发、测试、交付；
• UI设计：视觉（光影、色彩、动静）、数字图像（RGB）；
• 项目架构：技术架构、工程架构
• 后端：数据库、服务器
• 测试：黑盒、白盒、自动化测试
• 部署：服务器、监测。

我的技术栈

从开发角度

• 业务需求：无，了解部分GIS，但是不够用。
• 产品策划：学过《软件工程》这门课，用其中的思想设计自己的毕业设计。
• UI设计：学过美工，Photoshop。
• 项目架构：来源于《前端技术架构与工程》，对编程语言、性能这两部分十分感兴趣；
• 前端：vue框架、echarts、mapbox
• 后端：SSM框架、mysql
• 测试：黑盒测试
• 部署：Linux

从自身角度

• 编程方面：C语言、面向对象（C++）、JAVA、操作系统、离散数学、数据结构、算法分析、设计模式；软件工程、计算机图形学OpenGL、图像处理openCV 、三维游戏设计（DirectX）
• 计算机知识：导论、计算机组成原理、计算机网络
• 数据库方面：数据库系统概论
• 自学：web前端（三大件+vue）、Java后端（SSM）
• 美工方面：图像处理（Photoshop）、影视基础（PR）、三维软件（3ds max）、动画原理（Maya）、游戏引擎（unity3D）、虚拟现实（VR）
• 工具方面：vscode、Chrome、SVN、git、eclipse、IDEA、MySQL、navicat、Android studio、Hbuild
• JavaScript库：echarts、mapbox、elementUI
• 擅长：记录、归档、风险防范。
• 未来着手信息。

常用到的网站

搜索网站

百度：虽然有广告，但是资源很多；

bing：没有广告

Chrome：中文搜索没百度好用，不过搜索bug可以找到解决方法的网站。

百度翻译：虽然有翻译软件，但用后，我的电脑会卡，所以干脆用翻译网站。

有道翻译：和百度翻译一样。常用于翻译报错、命名、中文转英文。

同步代码的网站

git：大名鼎鼎，不过国内访问有些慢。

gitee：国内特别好使用。速度快。

互联网资讯网站

git trending：我经常用来找vue项目，参考学习。

coschina：前沿的资讯

牛客网：刷刷题，看看面经汇总，看看内推。虽然很多人推荐LeetCode，不过我先接触的牛客网。

技术文档网站

HTML+CSS+JavaScript理论部分（按使用频率）

菜鸟教程：国内的，很简洁。我比较常用

w3school：国外的，很简洁。我比较常用

w3cschool：国内的，有广告，不过内容框架很丰富，便于入门。

MDN：官方的，权威。不过不怎么简洁。

框架部分

vue官网：要结合一个已有的项目学，才能更好的掌握，官网上只是给一些例子。

vue教程 ：便于初学者参考的文档，不过建议看视频+官网学习比较好。光看教程，不太好入门。

vue API：入门后，多看看，便于更好的使用vue。

vue 风格指南：便于养成良好的vue代码书写

vue CLI：官方文档

vue loader：运行用户使用单文件组件的格式撰写vue组件。

vue devtools：vue专属调试，Chrome调试结合这个调试很舒服。

vue router：vue的路由。结合组件通信使用。

vuex：有些视频说，涉及大项目用组件通信好，vuex比较难用。

vue SSR：vue服务端渲染的官网说明文档

JavaScript库（可以自定义）

echarts：做可视化图表

mapbox：做地图可视化

elementUI：做页面

前端可视化echarts使用理解——wsdchong

mapbox的初次笔记——wsdchong

vscode插件官方文档

参考文章：2020最新版vscode格式化代码——wsdchong

vetur：官方文档。代码高亮、emmet语法支持、语法错误校验检查、代码提醒、格式化vue。
vetur集成了prettier，让.vue文件中不同的块使用不同的格式化方案，template标签调用 html 格式化工具，script标签调用 JavaScript 格式化工具，style标签使用style格式化工具。

ESlint：官方文档。代码检验。

prettyhtml：官方文档。为vue或纯HTML模板等提供通用格式化的工具。

pretties：官方文档。代码格式化工具，能够解析代码，使用用户设定的规则格式化规范的代码。

stylus-supremacy：官方文档。用于格式化stylus文件的node.js模块。

我常用的工具的网站

参考文章：我常用的工具及下载地址——wsdchong

• vscode、chrome、node.js

• git、GitHub for desktop、tortoiseSVN

• sublime、typora、snipaste

• 云骑士、火绒、bandzip、adobe Reader、PotPlayer

• eclipse、IDEA、MySQL、navicat

• FSCapture、everything、光影魔术手

• Photoshop、premise

• 3ds max、maya

• unity、Android studio

我常用的技术视频学习网站

• 网易云课堂：我以前常用，有些课程质量不错。
• 哔哩哩哔：我现在常用，万能，找不到资源的时候，搜索一下，总能意想不到。
• 慕课网：分类明确。

我常用的软件

• 系统自带浏览器：不懂就搜，反复看总结收藏的。
• CSDN：本命博客，虽然有些人吐槽，csdn有许多不足的地方，但是我觉得满足我的需求。
• 知乎：虽然有不少言论是装逼，不过可以参考。
• 36氪：看互联网相关的瓜。

不怎么常用了：

• 虎嗅：和36氪一样，吃互联网的瓜。不过先使用的36氪，所以虎嗅没怎么用。
• 微博：看热搜，不过大多不感兴趣，因为女朋友才看的微博
• 贴吧：我玩游戏常去的软件，有不少游戏攻略。不过和技术相关的很少，技术交流主要集中在博客上。
• 掘金：有段时间经常去，不过先使用的csdn，所以掘金用得很少。
• 简书：收藏各种资源网站、资源工具。技术交流没有很垂直。

最后推荐一下（互联网上的资源还有许多，我就不一一列举了）

我GitHub上的starts

vue相关开源项目库汇总

我gitee上的starts

jiujin

点击有惊喜。

最后还有一句话送给自己：用90%的精力做好10%的事。

写此博客与大家共同参考。不足的地方欢迎大家补充，错误的地方欢迎大家纠错。

更新地址：GitHub

更多内容请关注：CSDN、GitHub、掘金