Tech Neo 创造一个纯粹高质的技术交流平台

挨踢部落故事汇(38)HTML标签都没有认全的人如何成为前端工程师?

传说中HTML标签都没有认全的前端工程师是怎么成功转行的?

Xel'Naga是一个传说中HTML标签都没有认全的前端工程师,是程序员界的一朵奇葩。在一次偶然的机会下,他莫名的走上前端开发这条路。在这之前他是一名新媒体小编,因为工作原因,接触过HTML和CSS,因为看中了程序员的工作前景,所以转行成为了一名前端工程师。

Xel\

Xel'Naga·前端开发工程师

自学转战前端开发

在转学习期间,Xel'Naga遇到了不少问题,加了很多的QQ学习群,买了许多的网络课程,然并卵。最主要的还是看书,每个人都有自己的代码风格,看视频最多可以学到一些常见的效果,而从书中可以学到很多的代码规范。其次就是文档,看文档是学习知识最好的途径,尤其是前端文档,基本上都是中文的,很方便。

Xel'Naga的学习路线:HTML,CSS正常学习,这个在W3Cschool就可完美的学完,这里着重的是HTML语义,CSS知道有啥就可以了,然后可以学习JavaScript了,推荐两本书《JavaScript DOM编程艺术》(可以学到很多代码规范)、《JavaScript高级程序设计》(传奇级别的神书,建议有空就翻,看到破)。后面就是应用之前学习的HTML和CSS,推荐看一下《响应式Web设计》和《CSS世界》(从这两本书中可以学习到如何去写页面)。最后就需要学习ES6规范,推荐《ES6 标准入门》这本书,然后就可以尝试着去学习框架了,前端三大框架各有各的优点,Xel'Naga学习的是vue.js,主要是vue.js对于初学者非常的友好,只需要使用vue-cli就可以快速搭建开发环境,而且文档是中文的,组件库也基本都是国内开发的,比如饿了么全家桶(element和mint-ui),再继续学习下去就可以去学习各种前端技术了,推荐看一下《现代前端技术解析》。

依靠薄弱的前端基础成功转行并跳槽

在这之后,Xel'Naga白天写稿,晚上写代码,就这样学习了不到一年的时间,去年5月份,他就职公司的前端同事辞职了,就在老板准备重新招一名前端的时候,他跟老板自荐:“我来吧”。就这样Xel'Naga获得了第一份前端开发的工作。虽然学习了很多,但是距离企业级开发还是有一段距离,经常出现各种错误,尤其是定位方面,直接使用定位可以很方便的搭建起网页的框架,但是维护起来十分的困难,在能使用流体布局的时候还是尽可能的使用流体布局。如何从学习到企业级开发没有什么靠谱的办法,只能是多写项目,积累经验。多向公司里经验丰富的人请教。

因为公司性质,是一个媒体公司,所以不是特别重视技术方面,技术部只有Xel'Naga在内的4个人,一个爬虫,两个PHP和他。工作也是特别轻松,在度过前两个月的生疏期之后,他越来越得心应手,有更多时间去学习,自学了SPA框架、Vue,但是项目中用不到。于是,在年底,Xel'Naga裸辞了,回到天津,找到了现在这份工作,入职第一天他就遇到了打击,npm报错。就这么一整天都在百度各种错误中度过。下班前,一位大佬(至今感激)对他说:看一下你的360隔离箱…原来罪魁祸首竟是360,文件被360误删了!卸载360之后就恢复了正常,代码也可以正常运行了。

测试与调试技巧

Xel'Naga在工作中遇到了很多棘手问题,其中让他记忆深刻的就是测试与调试,一个项目不只是写代码,然后上线。测试环节是一个项目的重中之重,作为一个自学的小前端来说,测试更多的是双屏显示器利用jet brains IDE Support一边写代码一边看效果,但是现在需要一个新的知识了。

刚开始真的很令人苦恼,人工测试的确很简单,再加上vue.js支持热加载功能,但是也要下不小的功夫,而且一旦需求发生更改,或者是修改一个小bug,都会造成一个严重的事情,那就是需要重新测试。在debug上面花费很长的时间,甚至有时候发生周一写完了代码,debug到周六日加班的现象。后来,Xel'Naga在公司前辈的建议下注意到了他从没有关注过的test。为此,他在网上搜索资料,去翻博客,最终解决了测试这个难啃的骨头。经过一段时间的使用,他发现这东西真神奇。

1、为此,Xel'Naga也是总结了一下前端测试的技巧:

单元测试,vue-cli在建立项目的时候已经建立好了单元测试骨架的组成与运行原理每个测试案例文件都会有一个describe块(Suite){第一个参数用来指示测试什么,第二个参数是一个匿名函数},至少有一个it块(Test-Case){第一个参数是对测试的描述(用来描述作用,一般都是should …… 翻译过来就是应该怎么怎么样)}接下来就需要对测试的结果进行判断,也就是所谓的“断言”,句式是expect([被检测的值]).to,详情可以看下面的代码:

  1. describe('HelloWorld.vue', () => { 
  2.   it('should render correct contents', () => { 
  3.     const Constructor = Vue.extend(HelloWorld) 
  4.     const vm = new Constructor().$mount() 
  5.     expect(vm.$el.querySelector('.hello h1').textContent) 
  6.       .toEqual('Welcome to Your Vue.js App') 
  7.   }) 
  8. }) 

单元测试也有一些钩子函数,分别是beforeEach,afterEach,before和after用于在多个场景进行同样的初始化操作。单元测试有个很重要的技术那就是仿真技术,仿真技术可以解决在前后端分离的情况下,存在某个组件开发完成,但是后端API没有开发的情况,同时也避免了测试污染数据库的情况。这其中运用到了一个强大的JS库——Sinon。Sinon可以使用测试替身替换掉依赖项,比如测试一段发送Ajax的代码,就可以把XMLHttpRequest对象替换成一个可以发送Ajax请求的测试替身。在这个过程中并没有XMLHttpRequest对象产生,而是被FakeXMLHttpRequest所替代。

2、接下来就是调试。Xel'Naga使用Vue-DevTools插件,这个插件有chrome版也有Firefox版,相信学习过Vue.js的小伙伴都被各种书籍安利过这款插件,真心的好用。这时通过npm run dev启动项目,也就是热加载,在热加载重新载入代码后可以直接在浏览器中启动断点。

总之,前端的技术在日益更新,大的方向也向着后端发展,只有走在前列才不会被时代所淘汰,这是一个前端工程师的时代,故而一起努力吧。最后希望前端的小伙伴可以一起交流,同时欢迎指正。

如果你也愿意分享你的故事,请加51CTO开发者QQ交流群 669592976联系群主小官,期待你精彩的故事!

51CTO开发者交流群⑧群669592976

 

  • 更新于 2018-04-16 09:17
  • 阅读 ( 4013 )

6 条评论

请先 登录 后评论
51CTO小官
51CTO小官

IT

45 篇文章

作家榜 »

  1. Snailclimb 58 文章
  2. 民工哥 50 文章
  3. 开始 47 文章
  4. 51CTO小官 45 文章
  5. 我们不一样 40 文章
  6. 床前明月光 39 文章
  7. 简书 28 文章
  8. 小白哥 25 文章