惟品会前端分享小结

2022年05月14日 阅读数:2
这篇文章主要向大家介绍惟品会前端分享小结,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

前言

据说周六不少的技术分享会如火如荼地举行,有幸参加了1/N个,同时,我会很差意思地跟你说,这是我第一次参加这类活动,真的没有像VIP家权兄逗你..javascript

我要声明:下面一开始会有一些前奏(你懂的),而后才会进入正题,假如你不想有前奏的人,直接进入正题,那么我就不送你了,飞机票在这里css

本次从大深圳大老远跑去广州荒村(芳村)花海街20号惟品会的总部倾听他们的前端分享会,受益不浅,表示要学习的东西还有不少不少。为此,在坐车回来的路上,我就在想须要写一篇文章来概括一下别人讲过的一些经验,总结一下前辈走过的坑,让本身跳入另一个坑QQ表情笑。好吧,我表示不如VIP行政MM这么能在大讲台上准确无误地说到9分30秒,而后咔嚓,由于码到这段文字的时候,其实已通过了10分钟了。。。html

走入惟品会

在查找怎么去惟品会的时候在街边十字路口的地方看见了一家粥店,广州的粥是全国都出了名的,因此带着好奇心去点了一碗。6.5一碗鱼片粥,3.5糯米鸡老板外送一份不知道名字的点心,正好10块钱,我只想说这有肉有菜的尼玛比大深圳便宜多了。我为何写这段为开头,后面我会提到。前端

惟品会在专门的摆渡车去公司,但更喜欢徒步,所以我本身找过去了,确实很挺好找,路口拐角处就有一个标识牌java

再往前300M左右就到了大门,虽然说是大门,可是其实不大,并无想象那么宏伟壮观。以其说大门,还不如说是一个大学宿舍大门,大门前方不到10M处即是一条江具体叫什么江,不得而知,我在想,下班以后惟品会的程序员会不会放弃这么优美的坏境,转身回家写代码??QQ表情。扫描二维码进入到了办公区,呈如今我眼前的以下git

左侧为他们的标语程序员

正对面是他们的办公大楼github

说实话,到目前为止我尚未肯定是否是办公大楼,由于他们的楼层实在过矮….像天天都挤着电梯上楼的楼猪是很是羡慕嫉妒恨的!(惟品会的童鞋大家不要笑)web

在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个选项,对于选择恐惧症的人多少能够缓解一下。QQ表情

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

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

记录路径,该按钮是控制以前咱们用过的路径,下次无需设置。

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

接下来是各类格式的选择,咱们都知道图标通常色彩没有这么丰富,为了控制其体积,通常咱们都采用了png八、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级别框架,那是咱们网站的访问级别么?

说到这里,晚安。