前端老鸟的这2年

细算下来,楼主已经做前端7年了,也算前端老鸟了,随著经验的积累,楼主也造了很多轮子,也经历了很多事情,本文就记录下楼主这2年在技术上的一些积累。

楼主按从页面到组件,到工具化的东西一一陈诉

1,页面开发:前端自适应方案adaptive.js及px-rem工具

楼主之前一直在做webapp,解决页面自适应问题首当其冲,楼主当时选择了rem了,网上的资料很多都是和淘宝的flexible思路一致,其最大缺点是计算不方便,楼主当时想了一个解决方案,让设计图的1px对应0.01rem,这样开发起来就非常方便,后来就开发了adaptive.js。楼主2年前做这个的时候,还没有这么计算的,现在网上已经很多了。

关于adaptive.js可以查看:adaptive.js

虽然计算很方便,但是还会遇到很多问题,比如如何兼容px为单位的外部组件,如何更加方便地只需要输入px就转换为rem。楼主当时项目构建采用的是webpack,就开发了一个webpack loader工具,px-rem,它可以实时转换px到rem。它还可以将静态的css中的px按一定规则转换为rem。

px-rem地址:https://github.com/finance-sh/px-rem

2,组件:H5万能选择器iosselect

前端开发,组件必不可少,楼主从jquery,zepto,backbone,angular,react一路走来,各种轮子造了不少,重复的轮子就不一一介绍了,这里重点介绍下iosselect。当年设计师要求我在H5中实现ios中滚动控件的效果,楼主当时就懵比了,后来楼主借用iscroll造出这个轮子,后来又不断完善,使其支持多种场景,包括地址选择,时间选择,日期选择,高度可定制。而且能应用于各种js框架中,所以我称它为万能选择器。

iosselect地址:https://github.com/zhoushengmufc/iosselect

3,前后端分离方案:realmock

前后端分离有助于提高开发速度,虽然现存的前后端分离方案也有很多,但是都不符合楼主的胃口,于是楼主显示开发了一个json生成工具:randomjson。它用来生成随机json,可以快速生成不同的数据,生成大量的数组,生成指定大小的图片,降低我们mock数据时的手动输入量。基于randomjson和express,楼主总结了一个解决方案,realmock,它借住与express,可以根据条件返回不同的数据,可以模拟接口返回延时,也可以返回不同的http状态。而且都是前端js,对于前端开发者来说,非常容易上手。

randomjson地址:https://github.com/finance-sh/randomjson

realmock地址:https://github.com/zhoushengmufc/realmock

4,正则表达式工具:rline

楼主还自己写了一个js版的js 正则表达式工具,可以将正则表达式图形化

rline地址:https://github.com/finance-sh/rline

5,es6官方标准文档翻译:

楼主目前在翻译 ECMAScript? 2016 语言规范 中文版

地址:https://github.com/zhoushengmufc/es6

总结:前端技术更新太快,楼主随着年龄上升,感觉精力没以前那么旺盛了,但是楼主还是和广大程序员同胞一样,尽力学习新东西,新技术,以跟上时代的步伐。前端不易,与君共勉。

时间: 2024-08-26 16:09:56

前端老鸟的这2年的相关文章

前端进阶之路:如何高质量完成产品需求开发

写在前面 作为一个互联网前端老鸟,这么些年下来,做过的项目也不少.从最初的我的QQ中心.QQ圈子,到后面的QQ群项目.腾讯课堂.从几个人的项目,到近百号人的项目都经历过. 这期间,实现了很多的产品需求,也积累了一些经验.这里稍作总结,希望能给新入行的前端小伙伴们一些参考. 做好需求的关键点 要说如何做好一个需求,展开来讲,可以写好几篇文章,这里只挑重点来讲. 最基本的,就是把握好3W:what.when.how. what:做什么? when:完成时间? how:如何完成? 需求场景假设 为了下

大咖云集!IMWebConf 2017 前端大会即将在深圳盛大开幕

2017年火热的夏季,一年一度的IMWebConf强势来袭!9月16日,深圳科兴国际会议中心,我们将全心全意打造一场前端盛宴,恭候各位的光临. 作为一名前端老鸟,笔者有幸也参与了本次的大会的主题分享<WebAssembly:面向未来的web开发>.IMWEBConf 向来质量高.干货多,这次大会更是大手笔,请来了来自W3C.谷歌.微软.阿里.百度等企业的技术专家,相信不会令你失望. 聪明的前端开发者已经认识到,前端领域正发生着一场变革.各种新型框架悄然降世,Node.js的风暴越发猛烈,站在浪

工作N年,薪资倒挂,被应届生瞧不起,这都是有原因的

很多技术群里的coder都直呼:前端变化快,应届生学个Vue3.0 Angular6.0就弯道超车了,像我们这些岁数大的,跟不上.学不动了... 对于这种声音,我也想写一首打油诗送给你们: 开局一把梭,一刀999 什么功能全现实,狂喊666 结果api一变,下届居然超车了! 以为自己入错行,改行从头练小号,大呼呦呦呦 首先,为什么学个vue3.0 angular6.0这种东西就弯道超车了? 也就是说工作了 n 年了.还在框架的api上纠结呢? 框架每一次大升级,你前面的知识就清零了,就跟应届生一

作为一名初级前端小白,写在年初的一些话

刚开始,还是吐槽一下这个标题吧···原本是打算写在年末的(也就是昨天),奈何大年夜的太忙(2.6才在回家的路上,第二天就大年三十了,基本没什么时间写这篇吐槽了,又熬不动夜),所以就拖到今天了. 其实最初,还是想讲一下从大学刚毕业(2015.06滚出校园),到2016年,新的一年,这一段时间的感受吧. [不忘初心] 好吧,不管是学校里的经历,还是毕业后找工作多么多么辛苦就不废话了(毕竟高中没好好学习,大学是普通的二本,然后大学后又是没好好学习,讲好听点就是拖延症,讲实话就是懒,没长记性),回顾那4

学习前端编程之前的一些建议

这篇文章是对于编程小白新手来说的,对于已经在编程路上蹦跶的菜鸟,老鸟,大牛,请忽略~~哈哈! 1.打字速度是必备的素养! a) 打字速度是必备的素养! b) 可以使用市面上常见的打字练习工具,比如金山打字通等.不要练习中文打字,只练习英文打字就行了.英文文章一定要练习到每分钟100字母以上. 2.认识单词: 学习前端将来会学到很多新的单词,新的单词也不要慌,及时查询出来就行了,安装有道词典可以为我们节约很多的时间. 3.将学习当成兴趣: 把学习当游戏.我们都喜欢游戏,把学习融合到游戏里,从游戏里

移动web前端小结

原文地址:http://blog.csdn.net/small_rice_/article/details/22690535 在智能手机横行的时代,作为一个web前端,不会编写移动web界面,的确是件悲催的事情.当公司准备做一个微信的微网站时,作为一个多年经验的web前端码农,我迷茫了,真心不知道从何下手. 接下来就是搜一堆教程,然后开始编写代码,三天后,我的第一个移动端web页面编写完成. 回头想想,移动端的web页面代码编写远没有我想的那样复杂(可能是我做的这个项目比较简单的缘故).但是就入

我的三年前端之路

弹指一挥间,毕业已经三年了,昔日的小鲜肉变成上了年纪的小伙子,真是有些猝不及防.站在时间的分岔口,思绪万千.从事了三年的前端工程师,这一路是如何走来的呢,在此做个总结,也给初入前端的新手一点参考. 在国企晃了一年 在大学期间,我的技术并不算突出,资质平平.以至于参加百度.360的校招都被刷了.所以毕业后就进入了北大方正这样的大型国企.希望能从大企业中习得一套软件开发之法. 这期间我完成了从学生到软件工程师的转变,知道了标准的软件开发流程是怎么回事.简单说就是“步入社会”了. 我的岗位是前端工程师

框架是如何炼成的 —— 揭秘前端顶级框架的底层实现原理

译者注:本文原文 Revealing the Magic of JavaScript ,原标题“揭秘JavaScript魔法”,本文深入浅出,揭示了几个前沿框架如jQuery.angularJs.EmberJs和React的几个核心功能点的实现技巧,无论是对前端菜鸟还是老鸟,相信都会有一定的启迪.鄙人精力和能力有限,如有错误或生涩之处,还请指出和多多包涵. 我们每天都使用大量的前端库和框架,这些各种各样的库和框架已经成为我们日常工作的一部分,我们之所以使用他们,是因为我们不想重新造轮子,即使我们

web前端 | 一条“不归路” - 学习路线

本文属于职业解惑系列,读完此文要么生,要么死.要么充满斗志,要么颓废放弃. 没错,此文的观点可以让你极端,但极端的选择,完全取决于你个人! 付出就有回报,做好现在,技术只是为了改变生活!-- 小北哥哥 好的,我x装完了,情怀也写好了,那么我们进入[相守]的话题. 由于前两篇[前端开发]文章,得到不少赞同和转发,应该也帮助了不少刚入门感兴趣的童鞋更好的入坑.更不少人留言说 "根据你的文章罗列的书单都买了"(看来这类小伙子 小姑娘求知欲是真的很强,潜力很大). 当然大牛或者老鸟是不屑一顾的