前端路上
随着大前端的如火如荼的发展,前端不再是一个简简单单的写写页面、提交表单、写写交互(shit 其实很多工作还是跑不了这些),逐渐变成工程化(不说的这么牛逼的名词都不好意思跟别人说话)的问题。逐渐分离出很多种形态:行为交互、数据可视化以及延伸到跨平台webapp、hybrid的应用等等。但是追根溯源每个项目中的前端都会因项目而足见形成一套完备的开发、测试、发布的体系,当然这就上升到解决方案的高度了。从解决方案的角度来讲也是组织行业内已经成熟稳定、优秀的工具,给项目开发带来更便捷。
从解决方案角度而言当属百度的fis宣传和工具化上做的很好,我之前有使用过。我一直关注的阿里,也有前端的解决方案(Arale),我大概看了一眼,基本上从使用市场而言都是内部使用。好了前端解决方案神马的虽然帮了很多不知从何做起的项目带来了福音,但是依旧又很多约束,因为它们都是在这个如火如荼的时代诞生的,我不知道从头至尾的生产流程,也不知道除了提供扩展我还能不能改什么。所以在开始想着写各种代码的时候自然而言就放弃了所谓的解决方案,很多高深的东西我依然没有接触,拿来用只会让自己不了了之的用着牛刀来杀鸡。所以我也在不断的寻找好玩的工具让项目从一无所有到开始有几个工具撑撑场面(从个人的高度而言,我的眼界决定对现有项目前端工程化的局限性,虽然成长很慢但是依旧在学习的道路上)。
(补充:看过很多大牛们写的各种牛逼的工具,什么前端防火墙、线上线下数据分离、node前后端分离等一堆高深的东西确实很佩服啊==!)
那么说了这么多废话,我开始说正题,从0开始让项目武装起来。
1、seajs
代码越写越多,书也越看越多。随着时间的推移,我开始从漫无目的写function ***转变到写使用全局的命名空间,然后在看到的各种书上以及普及模块化的简介里,就会了解到为啥不能像以前那么写,什么项目变大、代码臃肿、代码冗余、外部资源命名冲突等等一堆问题会告诉自己,哦项目需要模块化的书写和管理各个细节功能,然后模块化这个成熟的体系(市场上已经成熟)进入了项目,seajs\requirejs都是比较火的模块化工具(这里又扯到了amd和cmd,以及他们的主要区别在于是否按照加载顺序去严格执行等).根据在项目中对requirejs和seajs的应用,最终由requirejs倒戈到了seajs,当然在不断的碰壁中,项目成功的完成了第一步,虽然代码依旧是jQuery库依赖下的面条体,但是经过一点点拆分,以及对js模式的小范围的使用,还是看到了一小撮的代码还算是满意的。
2、grunt
代码通过seajs不断的异步加载过来,但是对网站的整个请求数在不断的增加;对于资源请求优化在前端没那么火之前就有很多种解决办法了什么Combo、gzip等等一堆一堆的,当然网上特别火的grunt成了项目的首选,虽然需要很多人都诟病配置任务这种二逼的行为,但是不得不承认从个人角度我还是很喜欢的,它上面包含了很多包(ugliy、cssmin、jslint、autoprefixer等),可以干很多事情,此处省略1000字。
3、yslow
代码是写完了,也上线了,但是访问有点慢啊等等诸多原因啊,挨个看什么图片缓存从无到有,从协商缓存到不发起请求验证,但是这些都是根据什么断定出一堆问题呢,从网上看到了一堆网站测试工具,然后最后看到了雅虎的yslow,看起来还不错的样子,根据上边的23条规则测试了一下,根据实际情况改动了一番,测试暂时算是过了。
4、jasmine
这是啥,想说了,又不想说,这是前端测试用的,这个玩应在项目中大概的用了一下,但是苦于项目开发进度赶着走,没有时间专门去写测试用例啊,这玩应是一个bdd框架,当然也有tdd框架,这是两种不同行为的框架,自己去看吧。不想多说。虽然没有应用到项目中,但也是我在探索过程中的一部分,没应用上只能邪恶的说一句(鞭长莫及233333)
5、weinre
项目又上wap版本了(用的zepto库,当然也为之[采坑]、提bug),虽然有过wap开发经验,但是面对这各式各样的手机中的浏览器还有微信微博中的浏览器,最开始开发的时候信心满满的我被折腾的精疲力尽,项目wap从0开始,经过测试部门的不断折磨,我就开始反思如何能让wap开发和调试更方便的,我不想每次被测试部拽去告诉我这个按钮在某某浏览器下位置有问题,在那里不吸顶等等(当然这期间我也恶补了很多wap相关经验),然后找了一个140字节的cssdebug工具,虽然能大体描出各个元素的轮廓,满足我在样式的第一阶段调试,但是交互上的细节以及在各个平台上的经验不足依旧会采坑啊,之前有用过[听奏]大神的 MIHTool(ios平台) 这个工具,然后自己妄想这开发一个android上的web调试工具,虽然最后很失败的沦为了我平时js代码练习的app但是依旧没能阻止我继续找,后来看到了weinre,这个玩应好啊,图形化控制界面(虽然只有我自己在用)很不错,经过在不同手机上的n多浏览器的测试,最后决定就是它了,为wap调试带来了很多方便(虽然这期间我又写了一个网页的设备测试代码,但是还是被我抛弃了)。
6、console
说着这个,我深深的感觉到耻辱啊,搞了将近三年的web开发,在ie下的开发、解决问题都是靠经验解决,很多时候调试起来真心的恶心。后来看到淘宝console中的技能看到这个玩应,果断看了一遍代码又用到项目里了,感觉在ie下console变得如此清爽,虽然调试对我来说没有障碍可言,但是极大的方便了项目开发的其他人也是极好的。
7、Underscore等
这类的东西其实不必多言,很多项目开始越来越注重前端渲染这类型的东西也很多,只不过根据个人爱好决定用什么罢了
8、promise
promise是啥,很好玩的东西,有标准promise/A ;在jQuery1.6(不过在实现上和标准有出路)就有了,$.ajax等异步请求(jQuery1.8的animate也反悔promise对象)都返回这个家伙的实例,花时间看看这个绝对不吃亏。23333
还没写完,头大了放在下次写吧,都是自己的碎碎念,不想解释那么多,google一下都出来了,都是在不断武装项目的道路上遇到的..........