7C00.ME/houmu 2014-11-23

读get.moe代码

moe是个新的顶级域名,由日本的一家机构管理,get.moe 是其宣传网站。最近对full-page、responsive、single-page 等设计概念比较感兴趣,而get.moe主页具备了这些特点,网页比较简单,(非第三方库)代码也没有做压缩混淆,就把其主页扒了下来(wget -c -r -np -k -L -p http://get.moe),阅读其代码。

get.moe 主页是个静态网页,部分动态交互功能通过ajax实现,属于一个比较简单的SAP(single page application)。前端使用bootstrap框架,借助bootstrap轻松实现responsive。页头和页尾的背景效果,我一直好奇是怎么实现的,现在知道了可以通过这样的css实现:

background: url(some.jpg) no-repeat center top fixed;
background-size: cover;

网页图标采用了icon font的技术,这在bootstrap中也有使用,不过get.moe同时使用了三套方案:

我没有分析这三套方案是否都有实际作用(页面中的图标不到10种),这种做法不是很可取,因为图标字体的文件(.ttf/.woff/.eot/.svg)还是比较大的。到后面就会发现这个现象出现的原因还是很好解释的,因为主页也加载了很多实际没有使用上的第三方javascript库,包括至少5个多余的js文件以及更多的css文件和图片文件。从相关代码可以看出这些多余的库文件的主要功能是实现主页中的几个功能组件,然而,这些组件因为网页改版被移除以后,这些库文件却没有同时被移除。下表整理出了get.moe主页使用的第三方js库。

简单说明 生效
jquery 这个不用介绍了 Y
boostrap 这个也不用介绍了 Y
retina 如果是retina屏幕,则用[email protected]代替p.jpg,是nivo-lightbox的依赖 N
smoothscroll 使屏幕滚动更加平滑 Y
jquery.scrollTo 滚动到指定位置,是jquery.localScroll的依赖 Y
jquery.localScroll 点击hash ancher只在当前页面滚动而不刷新页面,用来构建导航栏 Y
owl.carousel 跑马灯效果插件 N
nivo-lightbox 点击图片放大显示 N
simple-expand 展开指定html元素显示 N
jquery.nav 随页面滚动导航栏活动状态改变 Y
jquery.fitvids 响应式显示视频播放器 N
jquery.ajaxchimp mailchimp的易用插件,mailchimp是国外一家邮件服务商 N

部分上面列出的第三方库还存在版本较低的问题,以及有些库由更好的替代者,比如用bootstrap的组件代替。当然这两个问题不是很重要。但是重复无效的库文件的问题出现在日本网站里面,也和一般印象中严谨的日本人形象不太一样。另外,一个比较有意思的地方时,首页的search功能使用了jsonp,而远端服务器(从路径来猜)是perl的CGI程序。貌似日本网站里面用perl的不少,早些时候看的原本日本人写的Web优化的书提到他们的网站也是perl写的,ruby之父Mats工作的公司也用perl,ruby本身也深受perl的影响。

光看是不行的,有机会模仿着自己做一个,嗯!