前言
笔者是一位「大三小生」编写本次文章的目的是以自身经历来探讨如何从零开始越早找准技术规划路线,并且少走弯路,当然最直接的原因是带我的实验室导师希望我在去阿里前端实习前留下一篇技术培养方案来更好地为同学们找清发展路线。
而培养顺不顺利的因素,个人认为最重要的是态度,以我自身而言,最重要的是持之以恒,哪怕少做而不能不做。关于持之以恒这个态度,我有以下几点思考和想法希望分享。
目标
首先我们需要将目标分为长期目标和短期目标。
- 长期目标:是最需要坚持的事情,拥有最高效益的事,也是最容易被遗忘忽略的事。长期目标以我近期为例:
- 1.学习阅读完 Vue 源码后需要整理完毕并输出文章。
- 2.编程代码网址每天需要做一道优化代码。
- 3.红宝书要第二遍输出。(总是忽略)
- 4.阅读文章。等等
- 这些事情是枯燥且难以坚持的,并且眼前效益非常之低。但却是你与常人拉开差距的一点一滴,一定要每天花点时间在你的长期目标上,通常是一点一点零碎的时间来淬炼自己。
- 短期目标:是需要自己在近期内要达到完成,这些目标通常需要耐得住寂寞来攻克,有一颗狠心。如前一阵子我的生活、学业、项目、面试、总结、软考、四六级、输出文章等等。
- 自己思考规划需要用多长时间,通常是需要一整片的时间来快速提升自我。
分块
有了自己的目标后,一定要记录下来,用自己手机备忘录或微信即可,每天打勾、画插等等。并且在无事的时间,要开始整理自己的时间碎片,将自己的目标进行优先级排序,一点点塞进自己的时间碎片中。
每天亦是如此,当然碰上突发情况,那就思考这些情况能否夹带着自身有意义的事情并输出!
持之以恒下来,不断地完成一个又一个的目标,这难道还不能成功?我也才大二上才意识到。
技术培养
自己学了很多杂七杂八的东西,发现很多事情和门路,并不能说无用,只能说是效率之低。我并不知道自己前端技术达到什么水平,但以我自身的经历认知来说,实习面试中技术方面应该问题不大,以下是我的前端技术规划的路线,以供参考。
技术培养方案仅以笔者规划的所在实验室前端技术培养为标准
基础培养
前端三大基础:HTML、CSS、JS
概念
HTML
百度百科:HTML 的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的 Internet 资源连接为一个逻辑整体。
CSS
百度百科:层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 HTML(标准通用标记语言的一个应用)或 XML 标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不 仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
JS
百度百科:JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发 Web 页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。
个人觉得上边的百度百科都有些抽象,简单以我个人举的假设来说,若前端是一个人。
HTML 则是人全身的身体结构。如躯干、四肢、脑袋等等等(用来区分什么是人)
CSS 则是人身上的的肤色、头发长短、五官如何、身高、体重、化妆等等(用来区分是什么人)
JS 则是人的各种行为,思想等等(用来区分人是什么)
那这么一说哪个更加重要就不用多提了吧。(JSJSJSJSJSJS)
程度
- HTML:学会用就行。不要死记硬背没用的,背下来也没用,边学边敲,敲出个完整的较为复杂的页面项目即可。
- CSS:入门很简单,深入很难,是一门艺术来的。个人觉得受个人的审美和天赋影响,入门阶段懂得如何翻阅查找和实现,与 HTML一样,能敲出一个完整的较为复杂的页面项目即可。
- JS:个人建议基础能打多牢就打多牢,当然实在啃不下来的内容就别硬啃了,后续回滚加深自我理解印象。个人觉得实现一个较完整的项目(功能点多且不复杂)如电商、后台管理系统、快递、外卖等即可。(可以在 HTML、CSS 的基础项目上实现)
时间
以我个人的时间,每天杂七杂八的事情和半天课程的时间来进行预算,若是全力冲刺,时间或许减半,当然还是根据适合自己的实际情况来说。
- HTML 基础知识:3~5 days,项目:4~5 days
- CSS 基础知识:5~6 days,项目:5~6 days
- JS 基础:25~35 days,项目:15~20 days(若是学精,将更多更多)
资源
我个人觉得前端发展实在太快,学习资源都以全面更新换代。以我两三年入门的三大基础,也仅仅是旧版内容,并非新版前沿技术内容。我个人还是推崇自己动手去查询近期更好的资源,以免只学到一知半解的基础知识。如实在找不到,再来参考我曾学过的内容。
资源个人希望是以视频为主,文档为辅。最重要的是自己的输出,也就是学习笔记的记录。(基础内容就那些,输出形式千变万化,找到适合自己的一个即可,无需纠结和太多的比较。)
视频:腾讯课堂、B站、极客、黑马、幕课、千锋、百度等等等
文档:菜鸟教程、W3School、MDN(官方专业)、语雀等等等
社区:Github(还不咋会用,正在学习)、掘金(我只熟悉这个)、stack overflow 、知乎、CSDN、博客园等等等
个人
- HTML + CSS:建议基础学完后要找一个案例来进行仿写(上列视频资源全都是,一查就有。)
- 2021权威HTML+CSS零基础入学 (我是看这个的)
- 【零基础】从入门到精通,一周掌握HTML+CSS网页开发 (看一半的)
- JS:Web前端开发JavaScript权威课堂
笔记资源
我个人放至百度云上,避免频繁和谐,那就放至公众号回复,若是被和谐了,直接公众号后台反馈,我会更新对应的链接。
关注公众号 前端鲨鱼哥 回复:「气球在校前端培养」
进阶培养
对于开发一个项目来说,关靠基础当然是不行的,需要借助其他额外的工具、框架、技能知识来更高效且规范地提升自己,开始锻炼获得可以参与开发项目的能力。
以下有几个领域是我个人经历过的,或者一开始忽视但却重要的地方。以下内容都是前端领域重要的,只是着眼从零起步的同学,优先级与效益程度。 故添加自己的推荐程度,也就是掌握程度(五颗星满星)。
个人目前有的资源:关注公众号「前端鲨鱼哥」回复:「气球在校前端培养」
以达到笔者所在实验室可入手企业级项目为参考标准
阅读书籍
推荐指数:??????(多一颗,因为自己也还在努力)
可以看一下这一篇文章:前端必备javascript书籍测评【含红宝书和绿皮书】
以个人角度推荐几本前端书籍
- 《JavaScript高级程序设计(第4版)》「红宝书」
- 关注公众号 前端鲨鱼哥 回复:「气球在校前端培养」
- 《javascript语言精粹与编程实践》「绿皮书」
- 《JavaScript权威指南》- 犀牛书
- 《Effective JavaScript》- 最近要开始阅读这一本书
- 关注公众号 前端鲨鱼哥 回复:「气球在校前端培养」
ECMAScript
推荐指数:?????
是 JavaScript 的一个标准,更是一种扩展能力,能更高效且优雅地处理 JS 逻辑。
程度
个人认为 ES 系列是以 ES6(ES2015) 作为标志性的版本,将 ES6 学习,并懂得如何在适合的场景下使用对应语法,达到优雅、简洁、高效的效果即可。是一个反复回滚,不断淬炼的知识点,个人还是觉得资源需要自己去查找更新更全资源较好。
资源
仅作个人参考
前端框架
推荐指数:?????
这不用说了吧,三大框架选其一,吃透至源码。先官方文档,再实战,最后源码。这个阶段看一遍官方文档,有个案例出来即可。
并且需要学习了解前端框架周边的官方生态 Vue 以及全家桶(vuex、vue-router 等等),知道在什么场景下可以使用它们。
资源
仅作个人参考
代码规范
推荐指数:????
了解一下如何约束好自己的代码规范,这点是一直不断完善的过程,尝试安装使用 ESLint 插件来规范化自己的代码格式。下列分享各大厂指定的前端规范文档或是官方的文档,自行选择。
资源
仅作个人参考
版本管理
推荐指数:?????
Git/SVN,现在主流的是分布式版本管理的 Git。做项目团队合作,必须学会熟练使用版本管理工具,尽可能命令行入手(面试)。
资源
- 教程:Git教程 – 廖雪峰
- 更全详细案例在 github 上的 git 教程查询
- 文章:【Git原理】-大大的小屋
仅作个人参考
UI 框架
推荐指数:????
不多 BB 除非你对 CSS 兴趣深厚,想手写 CSS,励志成为 CSS 大神!那就去使用 UI 框架,目前阶段会用就行。
- 常见主流的 UI 框架看这篇文章 前端有哪些ui框架? 根据需要选择其一即可。
资源
仅作个人参考
网络请求
推荐指数:????
AJAX 和 AXIOS 都需去了解。ajax 是网络请求 XMLHTTP 的前身,而 axios 是 ajax 的一层封装。了解明白是如何使用发送各种格式和方法的请求,简单原理是如何即可。顺便了解 Restful 的 api。
资源
网络请求内容,看网上资源文章即可。
仅作个人参考
HTTP
推荐指数:???
了解 HTTP 是为了根据网络请求更快更准地在项目中定位到问题所在。了解即可。
资源
文章
仅作个人参考
包管理器
推荐指数:??
npm/yarn,笔者目前常用是 npm,包管理工具会用了解就好。
资源
仅作个人参考
浏览器
推荐指数:??
前端始终绕不开浏览器,因此了解熟悉浏览器是必要的。
资源
看掘金上的文章,碎片化学习积累即可。
Web 网络安全
推荐指数:??
网络安全还是挺重要的,了解,若在适当业务场景下可以使用,那就不错了!
资源
文章:
仅作个人参考
构建工具
推荐指数:??
构建工具也就是打包工具,要先理解什么是打包工具,有什么作用。常用的为 Webpack,也有目前热门的 Vite 了解,说不定有自己需要配置的一天!
资源
- Webpack
- Vite
仅作个人参考
JS 类型检验
推荐指数:??
TypeScript 个人认为是前端日后的主流,了解其优点和作用即可
资源
仅作个人参考
CSS 预处理器
推荐指数:?
sass、less,了解即可。
资源
仅作个人参考
PWA
推荐指数:?
PWA 也就是渐进式 Web 应用程序,可以理解为持续不断的一种推送服务。根据项目业务需求,自行了解。
主流 PWA 应用框架
- WebSockets
- Storage
- Service Workers
仅作个人参考
多端应用
推荐指数:?
前端多端的主流应用框架,根据项目业务需求,自行了解。
移动端
- Vue
- Flutter
仅作个人参考
桌面端
Electron
仅作个人参考
项目培养
以个人实验室做企业级项目的标准来说,将前端基础学扎实,并且前端进阶 5 星掌握、4 星熟悉、3 星了解即可。
个人认为开始进行实验室的项目时,有以下几步可以熟悉项目及快速上手:
- 搭建好项目环境
- 跑动运行项目
- 阅读熟悉项目代码
- 掌握前后端分离(也就是实现后端接口,调取数据)
- 实现组件功能
- 实现页面功能
- 实现模块功能
- 总结评测回顾
初始化
个人分为两个阶段:搭建好项目环境和跑动项目,以个人实验室前端项目为例 Mac OS 电脑环境配置。
环境项目
时长:一天
开发
- Homebrew:Homebrew 是Mac OS 不可或缺的套件管理器。(记得替换镜像源)
- 安装:brew.sh/
- nvm:node 包管理器,方便我们切换不同的 node 版本来测试等
- node:安装 node 并不是要做 node.js 后端开发,而是 node 自带
npm
包管理器噢- 安装:利用 nvm 进行安装
- postman:前后端分离必备的接口调试工具。
- Navicat Premium:数据库必备的管理工具。
- 安装:上网找破解版叭!
- Webstrom / vscode / Hbuilder:个人推荐的选其一作为前端开发的 idea 编辑器
- 安装:破解版啥的也要自己找!
- Git:版本控制工具
文档
- WPS:word、excel、ppt、pdf、流程图……(有些功能需要会员)
- 安装:www.wps.cn/
- typora:md 文档,写技术文档、博客、记录等等**(强烈推荐)**
- 印象笔记:比较好用免费的笔记,个人也不清楚。
浏览器
- 谷歌:只推荐谷歌,不因为是大佬,更因为强大的开发者工具和谷歌插件。
开发者工具
- 谷歌开发者工具:页面调试
远程连接
- 向日葵:没用过不清楚,应该挺好的吧
- Microsoft Remote Desktop Beta:个人使用的连接 window 远程桌面
以上是个人日常使用和推荐的,其余个人不太了解的优秀工具,个人就暂不推荐
下列涉及实验室资源时,仅能提供思路。
跑动项目
时长:1h
拉取项目
利用 git 拉取远程仓库后台模版的项目
- 教程:Git教程 – 廖雪峰
安装项目框架
- cd 到项目根目录下
- npm install
- 在命令行下开始安装项目所需的插件包
- 这样既安装框架成功
- 若出现 timeout 超时错误,则是网速或镜像问题,可以切换下镜像源 cnpm。注意 cnpm 是 npm 的镜像,也就是说在 npm 最新版本的内容,cnpm 不一定同步更新,可能会造成不可知的错误。
跑动项目
-
npm run dev
- npm package.json 的命令
-
成功跑动该项目
阅读熟悉项目代码
时长:跑动项目后即可阅读,2 天左右(边进行下列内容,边阅读熟悉项目代码最好)
做一个文档,阅读熟悉每个文件夹的作用是什么即可,然后与学长学姐沟通交流。
代码规范
eslint
开启 esLint 将所有不规范的地方全部更改完善
如何配置对应的文件自行根据自己的编辑器解决 – 使用两个配置文件
方法
- 对应文件下右键修复
- 使用 npm 命令修复
修复不了就表示犯的是语义上的问题,自行根据报错信息更改。
不规范问题
写下我目前看到的很多不规范的问题,在对应真实项目下都需要改正,除非你自己项目可以自己定制规则。对应代码规范是前端大团队主流的。
JS
命名
-
小驼峰形式
update_time
❌updateTime
☑️
-
复数:如声明很多名字
let name = new Array()
❌let names = new Array()
☑️
-
常量:全大写
const toggleNumber = 3
❌const TOGGLE_NUMBER = 3
☑️
-
语义化:命名需要符合语义化,如果函数命名,可以采用加上动词前缀:
- can 判断是否可执行某个动作
- has 判断是否含有某个值
- is 判断是否为某个值
- get 获取某个值
- set 设置某个值
//是否可阅读 function canRead(){ return true; } //获取姓名 function getName{ return this.name } 复制代码
字符串
-
使用单引号声明字符串:双引号声明变量
const name = "jack"
❌const name = 'jack'
☑️
-
字符串模板
const str = 'How are you, ' + name + '?'
❌const str = How are you, ${name}?
☑️
数组
-
字面量赋值
const items = new Array()❌
const items = []
☑️
-
扩展运算符做浅拷贝
for
遍历❌const copyArr = [...arr]
☑️
-
数组解构:有需要的时候再用
- 下标提取❌
const [first, second] = arr
☑️
对象
- 字面量赋值
- 同上
- 扩展运算符
- 同上
- 对象解构赋值
- 同上
- 属性值缩写:如果有混合,缩写的写在开头
const obj = { lukeSkywalker: lukeSkywalker, }
❌const obj = { lukeSkywalker, }
☑️
函数
-
默认值:混合时,默认的参数放在最后
-
function createMicrobrewery(name = 'Jack') {}
☑️ -
解构语法
function createMenu(title, body, buttonText, cancellable) {}
❌function createMenu({ title, body, buttonText, cancellable })☑️
模块化
-
使用 ES 模块化
-
// ❌ const AirbnbStyleGuide = require('./AirbnbStyleGuide') module.exports = AirbnbStyleGuide.es6 复制代码
-
// ok import AirbnbStyleGuide from './AirbnbStyleGuide' export default AirbnbStyleGuide.es6 复制代码
-
// best import { es6 } from './AirbnbStyleGuide' export default es6 复制代码
-
-
使用默认导出
export default xx
Vue
-
Prop: 定义应该尽量详细,至少需要指定其类型。
-
// bad props: ['status'] // good props: { status: String } // better props: { status: { type: String, required: true, validator: function (value) { return ['syncing','synced','version-conflict','error'].indexOf(value) !== -1 } } } 复制代码
-
-
v-for 遍历必须添加 key
-
v-if 套 v-for
-
组件名使用大驼峰
- todoItem ❌
- TodoItem ☑️
重点
写注释!!写注释!!写注释!!写注释!!必要情况还要写注意事项!!
以上为个人项目中常用的代码规范问题
详情可参考这篇文章:code-review之前端代码规范
前后端分离
时长:半天
注意了!以下任何步骤,如当 api 不懂接,或不知道接哪个,每一步经自己思考操作后仍未解决,都需要问你的学长学姐!并且每一块都需要做好自己的笔记和记录!!不知道怎么做就慢慢做,不能不做。
接口文档
调试 api
- 根据接口 API 的文档进来编写。
- 利用 postman 根据接口文档来分别调试接通增删改查等接口,并且开始熟悉使用 postman 调试工具。
- 仿照模版中广告管理页面,新创一个页面从零到一参考实现整个广告管理页面,并且每个组件、方法做好注释,感悟等等
实现组件功能
时长:1天
根据师兄师姐指示布置的任务,参考他们的某个页面,进行一个个组件的实现,这一步就是自我实现代码,而非参考代码。
- 一个表格的展示
- 一个 dialog 的展示
- 表单
- 输入框
- 时间/日期选择器
- 单选框
- 多选框
- 开关
- 表单
- 按钮
- 布局
反正利用 element-ui 进行组件的实现,并且使用后端接口 API 实现前后端分离。
(这里更多调用过的是 GET 接口)最终呈现效果非假数据。
实现页面功能
时长:2天
组件都实现了,那就实现整个页面出来。包括 UI + 功能点,这里需要思考做出 2 个地方的优化,如 UI、功能点、业务逻辑如何简单优化。
这里就啥后端接口都需要实现了,POST、DELETE、PUT、GET、HEAD 等等。
实现模块功能
时长:根据学长学姐布置的业务模块需求,学长学姐自我评估。
一个业务需求肯定是一系列的功能点需求下来的,那么就需要我们封装页面组件和优化整个页面,避免冗余。
如一个业务模块为 系统管理 ,该模块下分为很多个功能点:管理账户、参数设置、下载设置、菜单设置、系统日志等等。而这一步就需要根据整个业务模块来进行实现,并思考如何优化。(因为当初实现时,或技术青嫩,或开发周期短,或事态紧急,肯定有很多地方需要优化!)
最后
最后熟悉了整个基础框架和项目后,负责的学长学姐也验收通过,以某种形式,总结整个过程中自己做了什么,遇到的困难,收获的内容,自我的感想,今后的期望。千万不要发蒙或者是让别人推动着你走,这样给予双方都是一种压力甚至”拖累”。
后端
关于后端其实个人并不能有太多见解和分享,简单说下个人开始的后端之历程吧。
node.js => koa.js => egg.js
培养学习与上述进阶方法一致
求职培养
在进入求职之前,希望你能基础打扎实,拥有一定的项目经验,有不断的阅读书籍和文章,不断地在社区中输入与输出。
求职培养没有办法评估出大概时间,是一个不断回滚跟进的过程。
本人利用课余时间大概为此准备了一年。而准备开始投递时候,个人认为需三星期时间准备左右。以下是个人经历,不代表是最好的,强烈建议同学们可以在各大社区查找相关内容资料。
面经
首先得清楚面试究竟问什么,我们要从哪里入手。也可以去各大招聘官网看一下,招聘内容来填充自己的思路等。然后清楚自己的目标,去社区看很多大佬的求职经历,舍弃不适合自己的,学习总结自己的求职规划和思路。
每一块内容做好自己的知识笔记,千万不要只为了刷面经而刷。一定要知道该内容的原理知识点到底是什么!不然面试官一问走运,二问发蒙,三问就崩。
这是个人整理的前端实习求职内容
以下是当时自己收集的面经等
个人了解的大佬们的前端面经公众号(无顺序排名)
- 《鲨鱼哥前端》:正在冲冲
- 《IQ前端》
- 《前端印象》
- 《前端从进阶到入院》
- 《前端历劫之路》
- 《三元同学》
- 《全栈修仙之路》
- 《大迁世界》
- 《秋风的笔记》
- 《前端食堂》
- 《TianTianUp》
- …等等等等
我个人觉得最好的办法还是进社区泡着,优秀的文章太多了,根本学不完,所以需要自我筛选,根据自身情况选择最合适自己的一套流程,不断地自我筛选一整套知识点,一点点整理补充,是一个持续不断地过程。
求职
因自己只经历了实习求职,故只能给前端实习的经验和方向以下是个人的实习的经历和感想:个人二本获得实习阿里 offer 经历 (关注和点赞)
简历
参考身边大佬的简历意见,还可以通过内推人的建议不断筛选优化。(这就是内推的好处之一)记得要不断不断地更新和优化。
个人使用过的简历模版网址
- CakeResume (个人使用的)
- 超级简历
文章
关于如何写好简历有几个文章是个人收获许多并且想分享的
投递
关于投递的优先级,在上方的文章个人有简单提及。
内推
讲讲我知道的几个渠道(按个人认为的顺序优先级)
- 身边朋友、老师、学长、学姐的资源内推
- 牛客:找内推人私聊等等
- 各大招聘公众号下最新动态文章有一些相关内推的资讯
- 技术交流群
- 社区中
- 比如在某求职文章下评论
- 发自己的求职动态,请求社区帮助
- 大厂一般会开讲视频、直播、动态等等,关注好公众号即可
个人
看这一篇 二本获得实习阿里 offer 经历-准备篇 | 创作者训练营第二期 我很详细的写了自己做了哪一些准备,文章里有个人认为的投递优先级考虑。
以下是个人投递的经历筛选和投递的经验
- 各官网招聘网址(以下顺序仅为记录中顺序)
- 是本人曾关注过的招聘公众号(以下顺序仅为公众号名顺序)
- 爱奇艺伯乐
- 阿里巴巴集团招聘
- 百度招聘
- 哔哩哔哩照片
- CVTE照片
- 滴滴招聘
- DJI大疆招聘
- 高德招聘
- 虎牙招聘
- 京东招聘
- 美团招聘
- OPPO招聘
- 拼多多招聘
- 平安科技招聘
- 深信服招聘
- 顺丰招聘
- 搜狐招聘
- 苏宁招聘
- 腾讯招聘
- 网易游戏互娱校园招聘
- 网易招聘
- 小红书招聘
- 小米招聘
- 一加招聘
- 有赞招聘
- 字节招聘
公众号更多的是知道招聘的最新动态和时间资讯
最后
获得一份心仪的 offer 确实不容易,需要不断的积累和总结。对应即将面试的公司,自己更要提前做好准备,去看近期对应的面经,说不定是同一位面试官呢!
不管成功与否,事后一定要总结和积累,并且要记住只有输出才能被人看到,没被人看到的四舍五入可以等于没“努力”。说不定面试官会在某个地方看到你成长的途径和路程呢,这是多幸运的事情。
在这,有几篇文章想分享一下
看完跳槽少说涨 5 K,前端面试从准备到谈薪完全指南(近万字精华)
最后想说,这些大佬成功是理所当然的,若不成功岂不心酸。所以加油吧,不管是
卷
或躺
,根据自己的情况来说,总不能说卷一辈子或者躺一辈子吧,但不要以此给自己借口,而仅苟于面前的得失和仅与周围的环境进行比较,欺骗自己是致命的。
总结
最后的最后嘀咕以下,技术需要兴趣 + 持之以恒。没有兴趣则需要找到动力,可以是恐惧、压力、焦虑、鼓励、欲望、满足感等等等。最后也没啥可说,感谢实验室的老师和学长们,以及遇到的任何人,无论是好是坏,总归让我明白清楚些什么。所以加油吧,总会成功的,没什么可以阻挡一个一直前进的侠客,哪怕如今只有你这个侠客一直在前进。
共勉说给自己听,不断走向个人的座右铭:需经得起繁华,且耐得住寂寞。
以上是根据个人经验与思考写给实验室中同学们的不完全规划培养指南,仅为参考意见。
若有改进或错误地方,经深思考虑明确后,直接推翻我即可。