唯品会前端分享小结

前言

听说周六很多的技术分享会如火如荼地举行，有幸参加了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

接着打开PS，按照如下打开插件

2014.11.3更新：关于cc版本的PC，黎sir建议直接在Plug-ins文件夹下新建一个panels目录文件夹，然后把上面的vtool工具包解压之后放进去。假如不行那就看看你是否安装的是快速版本的。

打开之后界面如下：

选项很少加起来才9个选项，对于选择恐惧症的人多少可以缓解一下。

图层生成图片，该属性可以让某个图层或者多个图层的图标一键另存为web图标，假如你你需要保存PS中的图标，那么直接选择该图标所在层，点击图层生成图片，然后设置好路径即可，并且你不用知道PS中的图标具体尺寸是多少，因为Vtool会记录下每一个点，然后输出。小菊花妈妈再也不用担心我的数学不过关了，当然这里有一个局限，就是不能选择文件夹输出，要把图标合并在一个图层然后再输出，其他的都OK。

文档生成图片，该按钮是以图片格式导出整个文件，用于拼图的生成，但是我怎么点都不为所动，估计是我长得太对得起中国人民了。。

记录路径，该按钮是控制之前我们用过的路径，下次无需设置。

从选区生成，该按钮可以让我们设置指定某个选区输出，在PS中快捷键是M是选择选区。

接下来是各种格式的选择，我们都知道图标一般色彩没有这么丰富，为了控制其体积，一般我们都采用了png8、24，当然也最常用的jpg选择。

导入图标，该按钮可以自由导入图标。

替换图标，该属性是对于更换网站某个图标而用到，便于维护网站各种杂乱图标疑难杂症用到。假设我们的网站之前的图标图片是这样

对应的css如下

<span class="css-class" style="color: rgb(0, 153, 0);"><span class="before">.</span>im-com</span><span class="paren css-block-open">{</span>
	<span class="builtin css-declaration-kw" style="color: rgb(91, 161, 207);">display<span class="after">:</span></span>inline-block;
	<span class="builtin css-declaration-kw" style="color: rgb(91, 161, 207);">width<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 153, 0);">72<span class="after" style="font-weight: bold;">px</span></span>;
	<span class="builtin css-declaration-kw" style="color: rgb(91, 161, 207);">height<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 153, 0);">72<span class="after" style="font-weight: bold;">px</span></span>;
	<span class="builtin css-declaration-kw" style="color: rgb(91, 161, 207);">background-image<span class="after">:</span></span> url(<span class="builtin css-declaration-kw" style="color: rgb(91, 161, 207);">http<span class="after">:</span></span><span class="comment comment-line" style="position: relative; z-index: 3; color: rgb(204, 34, 34);"><span class="before" style="color: rgb(187, 170, 170);">//</span>img.xiaoho.com/2014/09/ico.png);</span>
	<span class="builtin css-declaration-kw" style="color: rgb(91, 161, 207);">background-repeat<span class="after">:</span></span> no-repeat;
<span class="paren css-block-close">}</span>
<span class="css-class" style="color: rgb(0, 153, 0);"><span class="before">.</span>ico-1</span><span class="paren css-block-open">{</span><span class="builtin css-declaration-kw" style="color: rgb(91, 161, 207);">background-position<span class="after">:</span></span>0 0;<span class="paren css-block-close">}</span>
<span class="css-class" style="color: rgb(0, 153, 0);"><span class="before">.</span>ico-2</span><span class="paren css-block-open">{</span><span class="builtin css-declaration-kw" style="color: rgb(91, 161, 207);">background-position<span class="after">:</span></span>0 <span class="css-length" style="color: rgb(0, 153, 0);">-72<span class="after" style="font-weight: bold;">px</span></span>;<span class="paren css-block-close">}</span>
<span class="css-class" style="color: rgb(0, 153, 0);"><span class="before">.</span>ico-3</span><span class="paren css-block-open">{</span><span class="builtin css-declaration-kw" style="color: rgb(91, 161, 207);">background-position<span class="after">:</span></span>0 <span class="css-length" style="color: rgb(0, 153, 0);">-146<span class="after" style="font-weight: bold;">px</span></span>;<span class="paren css-block-close">}</span>
<span class="css-class" style="color: rgb(0, 153, 0);"><span class="before">.</span>ico-4</span><span class="paren css-block-open">{</span><span class="builtin css-declaration-kw" style="color: rgb(91, 161, 207);">background-position<span class="after">:</span></span>0 <span class="css-length" style="color: rgb(0, 153, 0);">-218<span class="after" style="font-weight: bold;">px</span></span>;<span class="paren css-block-close">}</span>

但是后来需需要调整图标，不想要之前的图标了，并且顺序和位置都有所调整，那么好，这个时候，按照之前我们的做法就是要一个个对准图标，然后再算出具体是距离X多少，Y多少，然后在css更改。但是现在你不需要这么做了，随便调整图标位置然后点击以下替换按钮，这时候它会提示你替换先前css文件，比如图标图片PM给最后更改是这样

请不要吐槽PM好嘛，他也是为老板的客户工作。。。

我们点击按钮替换图标，然后替换掉原来的css文件，那么接下来css就会变成这样

<span class="css-class" style="color: rgb(0, 153, 0);"><span class="before">.</span>ico-1</span><span class="paren css-block-open">{</span><span class="builtin css-declaration-kw" style="color: rgb(91, 161, 207);">background-position<span class="after">:</span></span>0 0;<span class="paren css-block-close">}</span>
<span class="css-class" style="color: rgb(0, 153, 0);"><span class="before">.</span>ico-2</span><span class="paren css-block-open">{</span><span class="builtin css-declaration-kw" style="color: rgb(91, 161, 207);">background-position<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 153, 0);">-134<span class="after" style="font-weight: bold;">px</span></span> <span class="css-length" style="color: rgb(0, 153, 0);">-81<span class="after" style="font-weight: bold;">px</span></span>;<span class="paren css-block-close">}</span>
<span class="css-class" style="color: rgb(0, 153, 0);"><span class="before">.</span>ico-3</span><span class="paren css-block-open">{</span><span class="builtin css-declaration-kw" style="color: rgb(91, 161, 207);">background-position<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 153, 0);">-272<span class="after" style="font-weight: bold;">px</span></span> <span class="css-length" style="color: rgb(0, 153, 0);">-150<span class="after" style="font-weight: bold;">px</span></span>;<span class="paren css-block-close">}</span>
<span class="css-class" style="color: rgb(0, 153, 0);"><span class="before">.</span>ico-4</span><span class="paren css-block-open">{</span><span class="builtin css-declaration-kw" style="color: rgb(91, 161, 207);">background-position<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 153, 0);">-423<span class="after" style="font-weight: bold;">px</span></span> <span class="css-length" style="color: rgb(0, 153, 0);">-226<span class="after" style="font-weight: bold;">px</span></span>;<span class="paren css-block-close">}</span>

不过这里需要注意2点：你替换的图标必须是在画布内，假如你的图标框框超过画布，那么软件就会提示出“你的切图已经超过了画布”，因为该工具是管理图标工具，建议直接改成你的图标已经超过画布更加明了~；第二就是你替换的图标的图层必须和你css类一样，比如我的css类为分别是ico-1，ico-2，ico-3，ico-4，那么对应的图标必须是也是ico-1，ico-2，ico-3，ico-4，否则也是提示出类与图层名称不相符合。

当然，你也可以轻戳这里 ：Vtools高效图标管理工具

原本需要人手工调试的图标现在完全交给工具来实现，那么剩下的时间可以做有意义的事情，相信用不了多久 你就会升职加薪当上总经理出任CEO迎娶白富美走向人生巅峰想想还有点小激动

一句话点评：此工具适合经常性更新网站图标又想抽空泡软妹的童鞋使用，学习成本几乎为0，易上手。优点：更新神速，缺点：更新太快了，PM说你不称职….开玩笑，缺点就是只适用图标类的图片。我擦，好像不止一句话了。。。

No Zuo No Die, Why not try?–做更好的前端

这是黄老湿分享出的观点，我感觉老湿这个昵称有点蹩脚，因此以后统称sir。

在这里不提任何的demo，仅仅是从想法上去分享一下

因为黄sir是位重构师，跟我的是一样的职业，所以对此很有期待。但是写这篇文章的时候已经是周一晚上，我的脑子已经不怎么好使能记起来的东西不是很多了。假如让我概括他的分享重点，我觉得是细节+优化。砍掉一些冗长的标签和css类名，让标签更加符合审美，css更易后来人懂。比如我现在写一个css文件，是带我私人性和随意性比较高的css，但是假如团队按照我现在的写法来继续写，假如我离职了，新进来的同事会觉得怎么前辈写的东西乱七八糟，于是乎自己又按照自己所谓的标准来写标签和css，那么日后维护起来就会很麻烦，因为有些css是公用的你又不能碰。所以必须要有规范来规范整个团队的书写规范，这样保证以后的同事进来就知道我们到底是怎么写css的。

所以，黄sir就根据bootcss等现代国外主流css框架来命名css，三网格、公用模块x-mod-x、图片模块x-pic-x、按钮模块x-btn-x，不得不说这样的命名确实是很普遍也很流行，比较感觉高大上。国外的大型框架都是这么来着，从最开始的各种css命名，到了按照对象命名，再到按照功能和服务来划分，整个系统下来简直是美得一塌糊涂。但是我在想一个问题，是不是所有的国外大型css框架都适用于我们国内的网站？我觉得起码不是全部，起码小型网站没有整必要这么大的css进去，所以有必要精简。

黄sir在这里也提到了他的思想：能精简就精简。这是在重构之后最必要也是必须要做的，用最短的代码还原设计图。代码必须高效重复利用，而不是每个css类都要重写一遍，这样不仅增加了人力和精力，更是把时间浪费在不断重复昨天的工作之上，这是很不明智的，黄sir很赞。

说下css重复利用的问题，我们都知道假如css在html只能重复使用一次，并不是说能很好的利用到css这个强大语言，最多只能说做到样式和标签分离。css的强大之处就是重复、重复、重复再重复地无间断利用，只要有HTML的地方就有css的存在，除非有一天再来一次变革文本语言。那么假如那一天还没有到来，我想作为重构师的我们就要不断使得自己所写的css能在项目中重复使用，这并不是偷懒，也不是投机而是高效。当然要区分好命名，这样在修改的时候以至于全站不错位。

对于这个css重复使用的，主流的框架做得很不错，只不过我们看看有变通一下变成我们自己的东西，精简一下其代码，然后为我们服务。张老师就是一个典范，他的高效布局quickLayout就是一个典范，不过对于它的使用应该是建立在自己的项目上来，从实际出发。

一句话点评：像素化的重构师，用实践去践行别人说的东西，而不仅仅停留在表层。

朴实前行–模块化重构之旅

这是刘sir分享，当然我觉得人比照片要帅多点。。。

刘sir说话很有风趣，起码我觉得比我大学教我们计算机老师风趣很多，让原本平淡无味的讲课增添了一个很好的调剂。作为讲师，我觉得这个起码可以打80+，能带动整体气氛，娱乐大家。

从LOL开始说起后端和前端的游戏之旅，别没事看见人就干！这句话就用到了刚刚前面的大框架上，别总觉得大框架都是好的，都是实用的，其实也不见得是，因为那是前辈的高度，我们还只是在会使用的基础，而对于其理解还有待考究。所以，一开始什么都堆叠高上大的东西未见得是一件好事，因为还有更深的吭给我们去埋，然后继续爬起来，再跌，再怕，经过反复几回之后我们才能得到另外一个层次。

所以对于框架化的今天我们不得不反省，我们这么利用他们，但是我们到底懂了么？是真的懂了，还是只是说会这么一丢丢？假如失去了这些框架，那我们用原生JS的能否也可以优化到极致？我不懂，因为我压根不会JS，所以没有发言权。

样式和标签分离，前端和后端分离，样式去控制页面显示效果，后端提供数据给前端，前端控制页面特效。而不是后端抢前端，前端抢css，前端攻城师找后端改代码时，后端不至于我很忙的介样的话。。。做到三者分离，然后在性能上发挥各自语音的强大作用，那么自然构成了一个相对流畅的页面。

结语

写着写着又到了1点钟，最近一段时间睡觉都很早，基本不会超过12点半，尽量不透支自己的身体。健康是最重要，其他次之。

对于周六的唯品会前端分享会收货颇丰，也许是第一次参加的原因，估计之后参加多了多少也会盲目，这应该叫边际效应。但是不管怎么说，多学习前辈们的踩过的吭是为了站在他们身上达到自己的一个度。

看过css森林的文章，别人是这么评价他，当别人在讨论css怎么写的时候他去研究了css框架，当别人讨论框架的时候他去研究了css性能，当别人研究性能的时候他去研究了X，这个X具体是什么我大致忘记了，我想说的是：在大家都讨论框架化易用性的今天，我们是否可以去框架化，精简符合自己的框架？框架是有，但是不需要太乱太杂，找到符合自己实际的，别动不动就上twitter级别框架，那是我们网站的访问级别么？

说到这里，晚安。