前言听说周六很多的技术分享会如火如荼地举行，有幸参加了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~~交流群企鹅： 打开之后界面如下：
选项很少加起来才9个选项，对于选择恐惧症的人多少可以缓解一下。
图层生成图片，该属性可以让某个图层或者多个图层的图标一键另存为web图标，假如你你需要保存PS中的图标，那么直接选择该图标所在层，点击图层生成图片，然后设置好路径即可，并且你不用知道PS中的图标具体尺寸是多少，因为Vtool会记录下每一个点，然后输出。小菊花妈妈再也不用担心我的数学不过关了，当然这里有一个局限，就是不能选择文件夹输出，要把图标合并在一个图层然后再输出，其他的都OK。 文档生成图片，该按钮是以图片格式导出整个文件，用于拼图的生成，但是我怎么点都不为所动，估计是我长得太对得起中国人民了。。 记录路径，该按钮是控制之前我们用过的路径，下次无需设置。 从选区生成，该按钮可以让我们设置指定某个选区输出，在PS中快捷键是M是选择选区。 接下来是各种格式的选择，我们都知道图标一般色彩没有这么丰富，为了控制其体积，一般我们都采用了png8、24，当然也最常用的jpg选择。导入图标，该按钮可以自由导入图标。 替换图标，该属性是对于更换网站某个图标而用到，便于维护网站各种杂乱图标疑难杂症用到。假设我们的网站之前的图标图片是这样
对应的css如下.im-com{ display:inline- width:72 height:72 background-image: url(/2014/09/ico.png); background-repeat: no-}.ico-1{background-position:0 0;}.ico-2{background-position:0 -72}.ico-3{background-position:0 -146}.ico-4{background-position:0 -218}但是后来需需要调整图标，不想要之前的图标了，并且顺序和位置都有所调整，那么好，这个时候，按照之前我们的做法就是要一个个对准图标，然后再算出具体是距离X多少，Y多少，然后在css更改。但是现在你不需要这么做了，随便调整图标位置然后点击以下替换按钮，这时候它会提示你替换先前css文件，比如图标图片PM给最后更改是这样
请不要吐槽PM好嘛，他也是为老板的客户工作。。。 我们点击按钮替换图标，然后替换掉原来的css文件，那么接下来css就会变成这样.ico-1{background-position:0 0;}.ico-2{background-position:-134px -81}.ico-3{background-position:-272px -150}.ico-4{background-position:-423px -226}不过这里需要注意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级别框架，那是我们网站的访问级别么？说到这里，晚安。本文地址： /?p=839
最新教程周点击榜
微信扫一扫16484&结果
11231&结果
14051&结果
75686&结果
30737&结果
唯品会广告
我图网提供精品流行唯品会广告素材下载，设计作品简介： 唯品会广告,模式：RGB格式高清大图，使用软件为软件： Photoshop CS5(.PSD)
唯品会广告图片下载
天猫首页广告图
设计鞋子衣服
【本作品下载内容为:"唯品会广告"模板，其他内容仅为参考。】
【声明】未经权利人许可，任何人不得随意使用本网站的原创作品（含预览图）,否则将按照我国著作权法的相关规定被要求承担最高达50万元人民币的赔偿责任。
猜你喜欢：
唯品会广告
审核通过后，系统会直接将我图币发放到您的账户。
目前奖励范围只包含以下三个原因：
盗版/重复的作品：
指该作品与站内已有作品相同或相似度较高。举报
该作品需提供相似作品的链接。
违反法律法规的作品：
指该作品含有国家或政府颁发的证件或含有色情、淫秽、赌博、贩毒、暴力、凶杀、反动、泄漏国家秘密、危害国家安全等违法不良信息的作品。
侵犯版权的作品：
指该作品含有他人已注册版权内容的作品，如含有迪斯尼，喜洋洋等已注册版权内容的作品。
欢迎您参与举报，与我们一起维护网站作品的纯净！
重复/盗版的作品
违反法律法规的作品
侵犯版权的作品
请提供原作品链接(必填)
专注正版设计作品交易平台
我图网为1900万位老板，设计师，白领，老师，
行政后勤，管理人员等提高工作效率
在线客服:咨询热线:400-600-8526【求助】怎么屏蔽唯品会的推送_三星s4吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：141,218贴子：
【求助】怎么屏蔽唯品会的推送收藏
安装了唯品会，每天都有消息推送，有时候一天还好多次，请问各位大神怎么能屏蔽啊！！！
神牛摄影器材--为专业摄影者打造,你值得拥有!
我要发大招了，闪光弹　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　终于，光线暗了，只见写着：“手机党不会恨我吧　　→→→　因爱而美，为爱而生。高端而不失典雅，纤薄而不低调。没错，我就我，响亮而奢华，我为自己代言。　　　　　→→→　因爱而美，为爱而生。高端而不失典雅，纤薄而不低调。没错，我就我，响亮而奢华，我为自己代言。　　　　　→→→　因爱而美，为爱而生。高端而不失典雅，纤薄而不低调。没错，我就我，响亮而奢华，我为自己代言。　　　
有同样困扰，还有淘宝、当当、ireader之类
后台自启明明已经关掉，为毛还总是推送那些广告。。就因为这条，让我决定，今生不再用第二台三星机，后台广告太多了
长按通知栏推送的广告，会出现程序字样，点进去，把勾勾去掉，即可。
3楼傻逼死了 就不会推送了〖国家高级烹调师〗
设置里面找到唯品会的应用，把通知推送那个勾点掉
限制背景数据试试
卸载　〖国家高级烹调师〗–GT-i9507v
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或