2017年前端工作小结,个人踩坑之旅,前端学习者的杂谈

·  阅读 6018

工作差1月就要满一年了,这一年中水平并没有直接性的提升,以至于初学前端时无法探究的诸多问题,依旧没有头绪,但工作就是的一次次跳坑和爬坑,它终究是带给了我一些...

关于工作,在一家创业公司(没人带-_-),日常开发vue,react,react-native,微信小程序(目前)项目

关于技术栈,杂而不精没救了...目前沉迷typescript

关于css

写多少项目就得写多少css,我曾一度轻视它,认为实现预期效果便是大胜利,滥用各类选择器,命名杂乱无章,为了解决bug,而写入行内式,然后在工作中顺利的发展成为一名css上的残障人士,偶尔面对曾经写过的css,总是无语凝噎,但这种情况在近期得到了控制。

  • BEM命名法:在初学前端时,我一直以为自己正确的使用了它,但总是写出无法控制,或者混乱不堪的代码,以至于我在一段时间里放弃了它转而采用了其他方式(css-module,css in js),直到真正的花时间去理解后,才发现原来可以写出简明易懂且结构化的命名,当然,配合css-module使用效果更佳。
  • flex与grid:flex解决了普遍意义上的元素定位问题而grid则是在二维布局上给出了更为优秀的解决方案,在移动端等不存在过多兼容性问题的平台上,能大量简化代码,可以算是生产力上的提升(grid兼容性不佳,但可以在个人项目中使用)。

主要是以上两点解决了我个人的部分疑惑,当然实际上用于解决问题的技术远远不只,例如,淘宝rem布局方案,解决了移动端适配问题,使用less,sass,使用css原生变量....

关于javascript

作为前端,对于javascript爱恨交加,可以直接的说它是Bad language,但唯一让人不那么悲观的是,它正在突飞猛进的发展,正在不断完善。

相对于css来说,js的学习之路其实还算有趣,在工作中陆陆续续买了一些书,本想深入学习可惜都是有始无终(高程,js设计模式,高性能js,深入react...),可以算的上是悲伤的故事,日常沉迷动漫游戏,唯一值得庆幸的是零碎时间里看了些电子书,其中阅读后收获最大的是《You-Dont-Know-JS》

第一次看《You-Dont-Know-JS》是初学前端那会,当时花了一个月断断续续的勉强看完(跳了很多代码),后面重新捡起来看是去年年末,花了2周,看完后莫名的有种豁然开朗的感觉。虽然作者在书中夹带了一些个人立场,但无可否认书是好书,取自己需要的知识便好,虽然书中很多内容可能偏向于理论,但很有趣不是吗

有一个问题一只困扰我,是一本书读多次还是多次读不同的书效果好...

javascript中的代码命名曾一度困扰我,现在依旧。变量的命名无非是明确意义,但函数命名呢?对函数命名的犹豫不决导致不同项目中,截然不同的命名风格,简直糟糕透了。于是给自己添加一些约定(个人意义上的)

  • 命名必须由4个部分组成,是否私有(私有加_),事件类型,事件描述,事件状态(状态允许为空),例如handleUserDel,onTouchMove, routeHome, _processDateToString
  • 事件类型的区分,非私有的绑定事件中区分类型的主要依据是事件的真实动作,route表示这将是一个调用路由跳转的函数,handle表示处理用户事件,on表示监听事件...,可能会容易把handle和on搞混了,简单的区分原则是,当用户主观上直到自己当前所进行的操作时,那么就是handle,比如一个删除按钮,用户点击前,知道这个操作将会发生的后续动作。非主观时,例如用户无意识的点击了网页某处,然后弹出一个万恶的弹窗广告,那么就是on。

以下为其他碎碎念,带偏见的技术推荐,瞎扯。

  • 关于前端框架,vue,react,angular。

    • 站在公司的立场上,小公司使用vue可以做到利益最大化,入门简单,招人简单,模板开发。站在一个好学的前端的立场上,react与angular优先,当然并不是贬低vue。
    • vue我只提到了入门简单,但是它不易精通,不易优化(个人见解),精通怎么定义呢,理解它的双向绑定并不困难,网上相关资料一堆,但是理解后呢...路漫漫,vue入门简单导致的另一个问题是社区并不活跃,愿意开源的或是有能力开源的开发者在vue广大用户中占比太少。
    • react是个好东西,虽然精通遥遥无期,但奈何日常写着爽,react虐我千百遍我待它如初见(css in js 都是异端)。
    • angular,有点兴趣,顺便实践typescript就学学,顺便学点设计模式之类的,挺好。(本来对angular没任何兴趣,但之前那次大漠vs尤大的时候,感觉被强行被动安利了一波,然后查了相关资料,感觉不错....)
  • 关于typescript,第一次听说ts我是带着偏见看待它的,感觉无非是给js加了类型,最后还是得编译为js没什么大不了的,可能学了它后面就过时了,还不如学好js,es6天下第一....然后不知道是哪天,尝试性的学了下,于是就跳不出来了....ts天下第一,学js都应该试试ts....优缺点如下,自行选择

    • vscode原生对ts有着无敌的支持,智能提示等
    • 解决了开发中的痛点
    • 学习ts能够为像我这样纯粹的前端(非科班or非后端转前端)提供一个渐进式的,接触一些其他领域的途径,如泛型,接口,抽象类之类平时没机会接触概念,虽然现在Symbol.iterator也可以算是接口但终归不完全是。
    • 能够修正对于面对对象的一些错误概念(个人主观意见)
    • 配合node还行
    • 缺点我简单列一下,1.学习成本高,2.文档烂,3.文档很烂
  • 关于immutable,redux,vuex,mobx, lodash

    • immutable解决了在react,vue之类框架中,数据更新的一些问题。例如更新react数组中某对象的值,有学习的价值,但我懒得看文档,一直处于光用不看的程度....导致了一堆问题,以至于某些项目中放弃使用了。
    • redux,vuex,mobx,三个都是flux架构的具体实现,用到什么学什么就好了。
    • lodash作为一个优秀的函数工具库,一直试图去看源码学习,因为懒癌犯了于是拖到今天,已被列入今年学习计划中。
  • 关于webpack,虽然看不懂,但修修改改还有必要的。且行且学,愿它被取代...

  • node从一开始的红红火火到现在的归于冷静,在我眼里是node未来的稳定发展的。

    • koa2是目前在学的框架,虽然很基础,但胜在易于理解,且行且学。
    • mongodb是异端,可以学,但没必要深入,有那时间学mysql就好了。
    • node写爬虫其实是一件很有趣的事情,值得尝试。
  • v8,作为一名有追求的前端,学习v8的相关内容会对代码更加深刻,并且可以对代码进行一定的优化,以下仅作为抛砖引玉,感兴趣可以了解。

    • 去优化(v8会多次对动态改变参数类型的函数进行去优化操作)
    • Hidden Class (尽可能避免在class外部添加属性,会打乱v8内部维护的快速查找的hidden calss关系,而降级到哈希)
    • gc
  • python 曾经花过一个月看完了python教程,也算简单入个门,后续发现,实际意义上对前端来说,花这时间去学node或者ts,获得的收益会大得多,即使是学java也比学python好,原因是es6和python相似度过高,学习python所收获的远没有想象中那么高。

零零碎碎写到现在花了一个多小时,流水账就是好写,最后附带下未来的技术展望,以及学习路线。

  • 学习typescript=>学习设计模式=>有机会的话看看一些相关框架的源码=>学习node
  • 2018计划产出:个人博客,前端react,管理端angular,后端koa2