两年经验以下的web前端们需要注意什么?

简介: 前些年自己堆前端岗位的经验总结
从正式参与前端工作一眨眼两个年头了。我将这期间的经历经验分享出来希望能对某些同学有帮助,这就是写作的动力了,也算是补偿自己一个总结。当然这些全是个人观点,大神勿喷。

初入职场或将入职场

应聘

当然重点是首先如何争取到进入一家公司的机会。如果条件不是很好的同学(比如专业不是计算机相关,没有工作经验,前端知识来源自培训机构),应该切忌浮躁,大多数企业对于经验较少的新人看重的是这两点:1.人品2.学习态度
其次才是看技术基础,为什么呢?很简单,你愿意跟一个干了几年但懒懒散散上进心低的或者不好相处的人共事,还是一个虚心,学习态度好但是技术不是很好的人? 所以呢这些同学在准备应聘的时候不只是牢固基础,更重要的是在面试中展示自己上进心强,学习能力强的一面,给自己准备一个技术博客写点技术总结和心得,Github放点平时练习的小页面都可以,并在简历附上地址;还有就是保持谦虚和诚实,简历上就别太夸张啦。关于面试的心得就不多说网上很多。

下面唠叨一些同事相处需要注意的点,没兴趣的同学可以直接跳到下一大节。

称谓

对刚参加工作的应届生最大的变化就是环境,从无所不谈肆意青春的学校中走到看似庄严的办公楼,难免会有点忐忑。
首先是对同事的称呼,同职级的同事一般是直呼其昵称或者名字(如果有英文名更好),哪怕是带你的导师,哪怕是大你好几岁的同事。这样别人也不会太尴尬,聊天的时候也能平起平坐的聊到一起。慢慢就会适应这种关系了。对于领导,最好的办法就是别人叫啥你就跟着叫,有些领导还是不宜直呼名字哈哈。

请假

当请假的时候理由要简单自然,不要带着在学校里的调皮和稚气,比如之前有位朋友说他请假理由是"昨晚蚊子太多啦~",然后被领导训了;这种情况你完全可以说成"昨晚睡眠不好身体不太舒服",人之常情,领导一般会理解。请假的频率当然也不能太多,正真需要请的时候也要大胆去请,毕竟请假扣的是你自己的工资,当然是对公司没有什么损失的情况下你应该是理直气壮的。

团建

另外如果部门组织团建或者小群体自发去聚餐啥的最好是能去就去, 因为在工作时间你很少有机会跟一些人交流,待了两个月有些同事可能连部门里面某位同事的名字都叫不出。

不断调整对自己职位的认知

image.png

这一话题在前期就是对web前端这个职位的认知程度,说前期是因为你不可能干一辈子这行。

概念

web通俗的说就是网页,主体是由网页三剑客html+js+css及各种媒体和HTTP协议构成的技术应用。
前端是指在一个应用中的UI及其交互部分,有些人也把ios安卓叫做前端或者客户端开发。当然前端一般指web前端

技术栈

社会在进步,人们对某个职位的需求和要求也不断变化。近几年由于前端的学习门槛低和程序员薪酬较高等原因使从事和欲从事web前端的人猛增,并在技术岗位甚至所有岗位的竞争程度名列前茅。过去拿着Dreamweaver写页面已经是历史,只凭"HTML+CSS+JS"能混前端的日子也慢慢过去。
前端近几年的爆炸性发展已经促使着我们不得不随时准备接受新技术。

我们来回顾一下需要掌握或者了解的技术(不分先后顺序):

  1. HTML5(这个不用说了,肯定要熟练掌握)
  2. jQuery/Zepto (也不说了...)
  3. MV*框架 MVVM/MVC/MVP 框架,掌握一门,推荐Vue 其次是React
  4. 构建工具 (可以从Gulp入手,也了解下webpack
  5. CSS3 (一些常用新选择器,伪类伪元素,动画,媒体查询,flex布局等需掌握)
  6. CSS预处理工具 (掌握一门,推荐Less, 类似的还有sassStylus等)
  7. 模板引擎(掌握一门,MustacheHandlebarsJS,Jade,Ejs等);
  8. HTTPGet,Post的区别;HTTP headers请求头和响应头常见字段的作用;HTTP大体工作原理;常见状态码含义)
  9. Node.js & npm (合理利用npm的资源,node.js最好能用express,koa等去玩玩)
  10. PhantomJS (测试,爬虫,推荐库:Casperjs)
  11. ES6(即ES2015, 一些新特性新对象,比如比较重要的 Promise
  12. React native / weex (了解下跨平台开发)
  13. Linux ( 熟悉常用的linux操作,windows的同学可以下一个cgywin )
  14. 编辑器 (推荐VScode,其次sublime,Atom,webstorm,能装插件多装装有用好玩的插件)
  15. 版本管理工具Git必须掌握,其次是Svn
  16. Js基础(这个无论处在什么阶段都不能落下,包括对对象及原型继承,作用域等知识点的理解,可以看看js高级程序设计

前端还是后端

之前看到有的同学高喊“未来前端将会取代后端”这种毫无意义又自损形象的言论,很大程度是因为node.js的出现使得服务端上运行js不再是梦,我们可以使用js去编写后端程序了。但是既然写的是后端,它就是属于是后端的东西,我们可以这样认为:浏览器js是写前端程序的,而node.js可以编写服务端的。

image.png

更何况讨论前端后端的区分这个问题并没意思,老板要的是你怎么做出东西。世界上也不是只有node.js能写后端,并且不是所有的应用都适合用或者能用node.js写服务端。
所以当我们足够掌握了node.js并运用于项目,大可称自己为web开发,这样就无所谓前后端,毕竟这些的出现都是为了解决人们的问题。

学习方式

我看书的时候容易犯困,于是我失眠的时候就看看书...

image.png

后来发现这不是最适合我的学习方式,我更喜欢去一些社区看看好文章,因为这些都是别人把经验和知识压缩并展示出来的,是快速摄取知识的方式。
但也是因为网友们的文章水平不一,缺乏权威性,有些甚至是带有误导性的;另外文章的篇幅是有限制的,有些知识点讲的不够详细,使我们理解不够透彻和全面。所以书籍还是要看的,与其他学习途径相辅相成。并且要找到合适自己的学习方式。

这里推荐一些网站(当然还有很多,只推荐我觉得最好的几个,多了看不过来):

还可以在stack overflow,Github,知乎等站查找自己感兴趣的东西和灌灌水,这里都是不可多得的一片交流的天空。最好抽时间也写写文章,因为你自以为掌握的东西,在别人问起的时候或者要你写出来的时候就懵逼了,所以写出来让自己对所写内容更加清晰。

有同学肯定对学习具体的一门框架或者工具该如何学起有疑问。
答案是看它们的官方文档,有些比较亲民的文档会附有简单易懂的教程(比如vue.js的文档就很赞,并且有中文版),并且它们的api是最详细和权威的,这点毋容置疑。当然如果在看了文档后还不会使用甚至helloworld都没写出来的,就说明是对于他们的文档在阅读上出现了障碍,有可能是自己英文水平不好,也有可能是官方写的不够详细和通俗(当然这不能怪他们,能开源已经是一份心了)。这时候呢就去求助神通广大的网友们,Google一下看看别人怎么使用,总之,对于新框架的学习最好的还是不停的练习和查阅资料的迭代

属于jQuery的时代过去了吗

这节我们来单独聊聊这个近在眼前的话题。

image.png

近几年优秀的MVC/MVVM框架涌现出来,慢慢呈现出三足鼎立的局势,即 Angular,React,Vue。对于js开发者来说,这是一个巨大的进步。
尽管它们的存在并不与我们的旧霸主jQuery没有直接的对立关系,但人们出于用户带宽的和代码维护性等方面的考虑,很少把他们和jQuery放在一起使用,并且我们在大多数时候可以用MVVM的方式去实现jQuery基于DOM的编程方法要做的事情。这就暗示着"不是你死就是我亡"。
举个简单的例子,“显示一个元素”这个功能用jQuery来实现:

$("#el").show();

而使用MVVM是这样:

<div xx-show="isShow"></div>
xx.isShow = true;

但是我们如果只需要处理"显示元素"这类简单的问题的话,使用jQuery或者MVVM的方式都无所谓了。
当我们面临需要频繁的插入一大段含有js变量的HTML

//jQuery
var html= '<div class="panel panel-success">'+
                    '<div class="panel-heading text-center">'+
                        '<h3 role="button" data-toggle="collapse"aria-controls="content-banners-1" class="panel-title">{{title}}</h3>'+
                    '</div>'+
                    '<div class="collapse in" id="content-banners-1">'+
                        '<div class="panel-body">'+
                            '<div class="row">'+
                                '{{Content}}'+
                            '</div>'+
                            '<input type="hidden" id="upload-url">'+
                        '</div>'+
                    '</div>'+                    
                '</div>';

//然后做模板处理

//最后插入
$('#parent').html( html );

相比之下:

//MVVM

<!-- template -->
<div class="panel panel-success" xx-if="isShow">
...
<div  class="panel-title">{{title}} </div>
...
<div class="row">{{content}}</div>
...
//javascript
xx.title= 'title';
xx.content= 'hello,world!';
xx.isShow = true;

简洁性和可读性相形见绌。并且在越复杂的操作DOM的情况下,就能显示出MVVM的优势。另外在处理用户输入的等情况时候,双向绑定的便利就突出了。

我们虽然很支持去使用MVVM框架,但即便这样我们也不能下结论完全摒弃jQuery。有时候在浏览器兼容性考虑苛刻和对于一些兼写前后端的开发者来说, 学习成本低的Bootstrap + jQuery组合的地位还是有的。至此评定是否使用的MVVM的标准是:看项目是否允许和适合使用,兼容性有要求或者过于简单的没必要搭上这么重个东西,不然就小题大做,除此之外我们还是多去探索和尝试。
另外作为一名前端开发者,也要跟进时代的脚步,不能拉下对这些框架的学习,总会并且很快就有用到的时候。

合适的公司才是最好的公司

我们转回来谈谈观念上的东西。

image.png

很多年轻的程序员都想往互联网大公司跑,但是往往这些公司的要人标准都是自己达不到的,于是就比较焦急甚至怀疑自己。这样会影响自己在其他公司面试时的表现。
客观的说,大公司的福利、晋升、成长计划等制度还是比较完善的,并且如果公司的名号响当当,自己脸上也有光,再者大公司的产品成功概率还是相对高,开发者本身也有成就感。
不过在这种环境下,有些人就会变得懈怠,浑水摸鱼的也有。在较小的公司你的发挥空间会更大,并且会有机会去涉及更多东西,而不是大哥们给你写好的脚手架。
所以说,小公司一般能扩展你的技术深度,大公司则是广度
不过这不是一个老话题了,对于年轻的程序该去哪种规模的公司的讨论有很多。我觉得最重要的还是选择自己的合适的,当自己干着不爽并且有过交涉未能改善的话,就果断跳吧;
马云说过离职莫非两种原因:

  1. 干的不爽;
  2. 钱不够多.

我们应该学会去选择公司而不是被别人选择,如果不再愿意背着苦逼程序员的旗号的话。

非常感谢大家的阅读!!

相关文章
|
1月前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
58 3
|
1月前
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
24天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
32 6
|
1月前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
1月前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
1月前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
37 3
|
1月前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
49 2
|
2月前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
|
2月前
|
存储 前端开发 JavaScript
从 Web 2.0 到 Web 3.0:前端开发的历史与未来
【10月更文挑战第4天】本文探讨了从 Web 2.0 到 Web 3.0 的前端开发演变过程。Web 2.0 时代,前端开发者从静态网页设计走向复杂交互,技术框架如 jQuery、React 和 Vue 带来了巨大的变革。而 Web 3.0 以区块链技术为核心,带来了去中心化的互联网体验,前端开发者面临与区块链交互、去中心化身份验证、分布式存储等新挑战。文章总结了 Web 2.0 和 Web 3.0 的核心区别,并为开发者提供了如何应对新技术的建议,帮助他们在新时代中掌握技能、设计更安全的用户体验。
66 0
从 Web 2.0 到 Web 3.0:前端开发的历史与未来
|
1月前
|
监控 前端开发 JavaScript
前端技术探索:构建高效、可维护的Web应用
【10月更文挑战第23天】前端技术探索:构建高效、可维护的Web应用
54 0
下一篇
DataWorks