欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 >

唯品会前端分享小结

发布时间:2015-07-24  编辑:杨雨个人博客网站   点击:   

传闻周六许多的技能分享会风起云涌地进行,有幸介入了1/N个,同时,我会欠盛意思地跟你说,这是我第一次介入这类勾当,真的没有像VIP家权兄逗你..

唯品会前端分享小结

我要声明:下面一开始会有一些前奏(你懂的),然后才会进入正题,若是你不想有前奏的人,直接进入正题,那么我就不送你了,

本次从大深圳大老远跑去广州荒村(芳村)花海街20号唯品会的总部谛听他们的前端分享会,受益匪浅,暗示要进修的对象尚有许多许多。为此,在坐车返来的路上,我就在想必要写一篇文章来归纳一下别人讲过的一些履历,总结一下先进走过的坑,让本身跳入其它一个坑。好吧,我暗示不如VIP行政MM这么能在大讲台上精确无误地说到9分30秒,然后咔嚓,由于码到这段笔墨的时辰,着实已颠末尾10分钟了。。。

走入唯品会

在查找怎么去唯品会的时辰在街边十字路口的处所望见了一家粥店,广州的粥是全京城出了名的,以是带着好奇心去点了一碗。6.5一碗鱼片粥,3.5糯米鸡老板外送一份不知道名字的点心,正好10块钱,我只想说这有肉有菜的尼玛比大深圳自制多了。我为什么写这段为开头,后头我会提到。

唯品会在专门的摆渡车去公司,但更喜好徒步,因此我本身找已往了,确实很挺好找,路口拐角处就有一个标识牌

唯品会前端分享小结

再往前300M阁下就到了大门,虽说是大门,可是着实不大,并没有想象那么雄伟壮观。以其说大门,还不如说是一个大学宿舍大门,大门前线不到10M处即是一条江详细叫什么江,不得而知,我在想,放工之后唯品会的措施员会不会放弃这么美妙的坏境,回身回家写代码??。扫描二维码进入到了办公区,出此刻我面前的如下

左侧为他们的口号

唯品会前端分享小结

正扑面是他们的办公大楼

唯品会前端分享小结

说真话,到今朝为止我还没有确定是不是办公大楼,由于他们的楼层其实太矮….像天天都挤着电梯上楼的楼猪长短常倾慕妒忌恨的!(唯品会的童鞋你们不要笑)

在MM处挂号完之后领了一份小贺卡然后左拐右拐右拐到了会场,然后我就反悔方才我XX无聊喝什么粥

唯品会前端分享小结

此图片来历渣浪@前端圈,以是有了第一次,那么第二次去介入分享会,我最少不怕我饿着肚子去介入哈,下战书茶有木有!

然后到了会场,由于我来的时辰大厅已经坐满人了,以是找了一个空位直插,好了,列位观众,下面才是技能分享会,前面都是YY。

技能分享会

此次分享会有3个主讲高朋,别离来自商品展示组的黎嘉尧、社区组的黄家权、下单付出组的刘畅临,他们别离讲授了一些在现实操纵中所碰着的题目,然后通过本身的方法去办理它。一个器材,一个重构,一个前后端团结。

基于Photoshop插件-Vtools

这是来自商品展示组的黎嘉尧

唯品会前端分享小结

在先容这款器材之前,黎老湿先是摆列了我们前端工程师们天天必要做的事变就是不绝地一再切图,切图再切图。并且许多都是纯手动的切图(我冷静地认可了),为此我们天天都要一再做统一件繁琐无聊的工作,我想任何一个四肢健全智商过1的人城市认为这项事变几多会有点无聊,虽然你说你天天切10000次的1×1像素点不无聊,那我无言以对。

虽然网上会有各类css sprite在线合成器材可能PS插件可以到达图片合成结果,可是偶然辰要依靠收集情形,好比这款css图片拼合天生器,你在有收集的时辰是可以用的,若是没有收集的时辰呢,会奈何,虽然不能用了!

为此黎老湿专门开拓了一个叫做Vtools器材,对付此器材他是这么先容的 “高端大气的事变流的拼图,很利便,也很粗暴”,此器材给前端攻城师们带来新的血液,不必要大量一再地一再再一再劳动,用最小的器材做更多的工作(有点像write less do more的节拍),虽然维护起来传闻也是方才的,当改变一个图标时,不必要你一个个计较每个像素到底移动了几多,X位移,Y位移。你只需点击一下按钮足够!

在教室上黎老湿讲诉了这款器材降生以及PS底层框架姿势,固然我愣是没有听懂他在讲什么,但当他说是基于Javascript写的,那我就或许懂了,原本这Vtools是基于javascript写的一个剧本器材,不外它是叫JSX(先生我算是听好课了么?)

接着先生在讲讲其事变流程和它所实现的成果包罗了图标天生,天生拼图,尚有最重要的替代坐标成果。虽然现场少不了demo,嗦嗦嗦一下上面的成果已经所有搞定,确实看上去很高峻上,固然就是界面轻微丑了一丢丢,可是对象照旧很赞的。同时,先生也说到Vtools着实只是整合了PS中图标的一些操纵,好比说A图标要放在0,0,B图标通过V键拖动到32,32处,可是对付Vtools来说,着实都是一键就完成的工作,它就是是砍掉了中间的一个环节。这就比云云刻的互联网品牌的故事:切掉中间商,直接从厂家——客户手中,镌汰层级环节,让风来得更大一点,这样猪也可以飞上天了。下面是我做的一个Vtools事变表示图

唯品会前端分享小结

省掉中间的各类操纵,然后就自动天生我们必要的图标css sprite。事变道理应该就是这样,那么是不是这样,我们照旧来实地操纵一下。以是我就去群里下了文件本身实地操纵一下,若是有需求的童鞋可以直接下载我打包好的。Vtools下载,然后放在Adobe Photoshop CS6\Plug-ins\Panels下,接着打开PS~~交换群企鹅:154532253

打开之后界面如下:

唯品会前端分享小结

选项很少加起来才9个选项,对付选择惊骇症的人几多可以缓解一下。

本文地址:http://itbyc.com/web/2664.html
转载请注明出处。
分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1