(前端小白)从想从事前端开发岗到现在的一个月,我都做了些什么&&未来的打算
(前端小白)从想从事前端开发岗到现在的一个月,我都做了些什么&&未来的打算
了解这个行业的需求和Job Description
从2020年考研成绩出来的那刻就明白,应该要着手准备工作了,你越想逃避的越在你害怕来临的时候到来。
由于之前在大学学过网页设计和ASP.net,用Dreamweaver和VSCode写过一些前端网页,但是那时候基本上是自己拉表单出来,很少涉及大量代码的规范,只知道一些基本的标签和元素,会写一些超链接,但是什么交互,什么优化,代码复用,后期维护是什么都不会的,只是水一些课程。曾经有一次真诚的学习机会放在我面前,我没有珍惜,等我失去的时候我才后悔莫及,人世间最痛苦的事莫过于此。
行业需求
可以明确的是前端岗位还很缺人,缺的不是新人,而是能把底层原理玩的很明白的大牛,从尤雨溪开发的Vue框架就可看出,能看到最基础的人,才能玩转各种技术。这里附上尤大团队最近关于Vue.js开发的全英纪录片,优秀的人什么都是优秀的,连英语都说的这么好听呜呜呜
B站尤雨溪Vue.js纪录片(中英版)
虽然只有一个月的接触,但是却能感受到前端现在不仅仅是只会三大件(HTML+CSS+JavaSrcipt)就能找到一份还不错的工作了,还需要去熟练掌握各大前端框架(Vue/React/Angular)当然现在不是全部去学,我现在就只学Vue,但是一些国内外的大厂基本上用的都是React了。还有一些类库和前端工具以及版本管理比如Ajax,WEB Server,JQuery,BootStrap,NodeJS,Gulp,Webpack。
在我刚开始找工作的时候我很不以为然,觉得前端应该还挺好学的,发现去各大公司的职位描述上match时,那么多技术和项目经验都是我不够完善的,我比那些还没毕业就各种项目玩的飞起的人差的不是一星半点。我以前认为超级简单的简历制作都被身边人pass了不知道多少次,我不断修改和技术更新,现在终于可以不被一些公司一下子就pass了。现在就只差我的JS和Vue框架进阶了,yeah!!!fighting!
工作描述(Job Description)
一个月的时间,我投了近10家特别想去的公司,也海投了几十家不知名的小众公司,看了很多的工作描述才让我更加了解自己接下来要学习的技术。不得不说,看清楚工作描述还是很重要的。
随便找了一家自己投过的公司,其要求是:
本科以上学历;
扎实的JavaScript基础,熟悉ES6,熟悉TypeScript优先;
熟练使用vue/vue-router/vuex,能基于vue封装自己的UI组件;
熟练掌握的CSS3特性,能够使用CSS3完成各种网页特效制作和样式表现;
对前端工程化与模块化开发有一定了解;
熟悉Webpack、Node.js等自动化构建工具;
有electron开发项目经验者优先;
有微信公众号和微信小程序开发经验者优先;
代码风格良好,遵守规范,对代码的整洁、优化、可读性有所追求;
责任心强,良好的对外沟通和团队协助能力,主动好学,有技术热情;
根据一个职位的相关职位描述再去优化对应的简历是很重要的,HR 也会对简历上项目经验、实习或工作经验去问一些相关的问题,快速的筛选人才。
这一个月我都做了什么
学习前端技术,拓展技能树
制定自己近期的规划
学习HTML和CSS
学习HTML需要了解的一些知识点
- HTML 语义化( 不是很理解为什么面试总会问 )
- canvas
- 本地存储( localStorage、sessionStorage、cookie 的理解 )
- video 和 audio 的使用
- 应用缓存( cache manifest )
不只是div一把梭
学习CSS要了解的知识点
- 盒模型(标准 & IE )
- flex、float、Normal Flow 等的理解
- CSS 常用选择器
- 行内、内部、外部样式的区别
- CSS 层叠规则
- BFC 与 IFC 的了解
- CSS3 的 transform、transition、animation 等属性的运用了解
- 响应式布局的理解
学习JavaScript以及JavaScript(ES6)
- 闭包
- 原型链
- 作用域链
- 继承
- 类型转换
- this
- 作用域(ES6)
- 原型链以及继承(ES6)
- 动态作用域和词法作用域
- JavaScript执行机制
- promise&async
CSS & HTML & JavaScript 推荐书籍/网站
W3C 的 CSS&HTML 网络教程
《CSS 权威指南》
《CSS 揭秘》
《JavaScript 高级程序设计》
《你不知道的 JavaScript》上卷
ECMAScript 6 入门
学习Vue全家桶
如果 JQuery 的存在是是我们更加方便的操作 DOM,那么现在 MVVM 框架则是让我们从手动更新 DOM 的繁杂操作中解放出来。
至于 React 和 Vue 该学习哪一个,更多的还是看当下公司使用的是哪一个(也不是必然),一般大公司和国外的都是使用React。对于 Vue(React) 该如何使用其实不用多久就能上手,我们更应该关心的是他们背后的设计思想和实现原理。
一个公众号上了解的(侵权删):
感兴趣的可以看看这篇文章:
React or Vue: Which Javascript UI Library Should You Be Using?
以下是提炼的文中观点:
Vue的优势是:
- 模板和渲染函数的弹性选择
- 简单的语法和项目配置
- 更快的渲染速度和更小的体积
React的优势是:
- 更适合大型应用和更好的可测试性
- 同时适用于 Web 端和原生 App
- 更大的生态系统,更多的支持和好用的工具
Vue基础
- Vue的基本使用
- Vue的指令系统
- Vue的双向数据绑定
- 局部组件的创建和使用
- props和$emit
- 通过事件向子组件发送消息
- 全局组件的使用
- 具名插槽
- 过滤器
- watch
- 计算属性
- 组件的生命周期
Vue Router
- 获取DOM元素
- 给DOM元素添加事件的特殊情况
- 前端路由
- Vue Router 的基本使用
- 命名路由
- 嵌套路由
- 动态路由分配
- keep-alive在路由中的使用
- meta的基本使用
- 并发请求
- config
Vuex的使用和上线前的优化
Vuex的核心
- state
- mutations
- getters
- actions
- modules
axios和Webpack的使用
axios是什么
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
axios的特点
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应 (就是有interceptor)
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
axios安装
使用 npm:$ npm install axios
使用 bower:$ bower install axios
使用 cdn:<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Vue cli脚手架
2.x和3.x 都要先安装再去创建项目 有很多教程了
Vue 预渲染和SSR
服务端渲染的核心就在于:通过vue-server-renderer插件的renderToString()方法,将Vue实例转换为字符串插入到html文件。
我们使用服务端渲染是为了弥补单页面应用SEO能力不足的问题
因此,实际上我们第一次在浏览器地址栏输入url,并且得到返回页面之后,所有的操作仍然是单页面应用在控制。我们所做的服务端渲染,只是在平时返回的单页面应用html上增加了对应路由的页面信息,好让爬虫获取到而已**
明白了这一点,我就可以将项目一分为二,也就是分为服务端渲染和客户端渲染。服务端渲染就是项目一所做的,根据vue实例获取对应路由的seo信息,然后添加到返回的单页面应用html上;客户端渲染就是平时我们所熟悉的单页面应用,
Vue项目
目前还准备涉及,等再学两天就可以上手了!
积累面试经验和做好技术面的准备
收集了一些我自己觉得写的很好的前端面试经验和面试题目
另外自己这段时间的面试经验还没来得及整理。后续应该会更新
这里留给到时候的更新地址
接下来的学习任务
学习库工具和JavaScript基础+进阶
库工具
我们常用的有 JQuery、underScore、zepto、Moment 等
JQuery: 降低开发者操作 DOM 的复杂度
UnderScore: 提供实用的函数
Zepto: JQuery 的简化版
Moment: 日期和时间操作库
我们在学习库工具的时候,必定是需要回头看 JavaScript 基础的;这也就进一步夯实了基础。
JavaScript基础+进阶
浏览器工作原理
有博主说,刚开始工作头疼的是处理IE的兼容问题,所以了解浏览器工作原理是非常有用的。
通过了解浏览器工作原理,我们可以:
- 准确评估Web项目的可行性
- 更高维度审视页面
- 解决面试中遇到的绝大多数浏览器问题
计算机基础知识
- 页面渲染原理
- 浏览器安全问题
- 系统的优化页面
- TCP/IP三次和四次握手
- HTTP和HTTPS的区别
- 算法和数据结构(面试超级有用!!之前面的几个都是在这里栽了跟头):推一本书《学习 JavaScript 数据结构与算法》(第三版)
- 模块化+组件化+规范化(git使用和工作流程,API接口使用)
- Node js:Nodejs 在应用程序中的作用
Express 和 Koa 的区别
Nodejs 的底层运行原理、和浏览器的异同
Nodejs 非阻塞机制的实现原理
小结
总觉得自己还有很多很多没有学到的,但是一口是吃不下一个胖子的。就像20天前的我还简单的以为我不学JS,直接上手Vue全家桶就可以找到工作一样,但事实是JS才是最基础重要的,不要本末倒置,该学的怎么也逃不掉,就像之前逃避408,选择只考数据结构的研究生之路一样。 好吧,先这样咯,希望接下来的工作之路可以顺利点,拿到一个自己能够成长的offer!
部分引用:1.掘金 https://www.jianshu.com/p/065294e2711c
2.公众号:小生方勤