前端老鸟的这2年
2017-05-15 21:11
106 查看
摘要: 细算下来,楼主已经做前端7年了,也算前端老鸟了,随著经验的积累,楼主也造了很多轮子,也经历了很多事情,本文就记录下楼主这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/zhoushengmufc/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/zhoushengmufc/randomjson
realmock地址:https://github.com/zhoushengmufc/realmock
4,正则表达式工具:rline
楼主还自己写了一个js版的js 正则表达式工具,可以将正则表达式图形化
rline地址:https://github.com/zhoushengmufc/rline
5,es6官方标准文档翻译:
楼主目前在翻译 ECMAScript® 2016 语言规范 中文版
地址:https://github.com/zhoushengmufc/es6
总结:前端技术更新太快,楼主随着年龄上升,感觉精力没以前那么旺盛了,但是楼主还是和广大程序员同胞一样,尽力学习新东西,新技术,以跟上时代的步伐。前端不易,与君共勉。
细算下来,楼主已经做前端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/zhoushengmufc/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/zhoushengmufc/randomjson
realmock地址:https://github.com/zhoushengmufc/realmock
4,正则表达式工具:rline
楼主还自己写了一个js版的js 正则表达式工具,可以将正则表达式图形化
rline地址:https://github.com/zhoushengmufc/rline
5,es6官方标准文档翻译:
楼主目前在翻译 ECMAScript® 2016 语言规范 中文版
地址:https://github.com/zhoushengmufc/es6
总结:前端技术更新太快,楼主随着年龄上升,感觉精力没以前那么旺盛了,但是楼主还是和广大程序员同胞一样,尽力学习新东西,新技术,以跟上时代的步伐。前端不易,与君共勉。
相关文章推荐
- 把陪伴了自己2年半的大学时光的电脑卖掉了(昨天)
- 食品代理业2年心得
- 2008年6月16日--重出江湖2年了,找个豪迈的词做标题^^
- (五)2005年我的第一次软件行业创业,烧掉30万、2年时间打水漂的惨痛教训
- 2年java购物车分析
- 2年程序员该何去何从
- (七)2005年我的第一次软件行业创业,烧掉30万、2年时间打水漂的惨痛教训
- (十)2005年我的第一次软件行业创业,烧掉30万、2年时间打水漂的惨痛教训总结篇
- $薪水谈判指南$:如何做到2年7个月涨9次工资
- (一)2005年我的第一次软件行业创业,烧掉30万、2年时间打水漂的惨痛教训
- 抵制日货(中国人一年购买日本货的钱,足够维持小鬼子2年半的军费)
- 工作2年,反省与总结
- 面试了10个2年MySQL DBA工作经验
- 官员违纪情况通报时隔2年再现“通奸”表述
- 大学生创业容易挂掉的原因来自2年实际孵化工作的总结
- IT增值服务,客户案例(一)--山东青岛在职人士,2年.Net经验,转Java开发半年
- 陈曙光-java开发工程师-2年工作经验
- 如何面试有2年java工作经验的应聘人员
- 一个2年Android开发者的18条建议
- 来北京2年回顾