纯JS打造比QQ空间更强大的图片浏览器-支持拖拽、缩放、过滤、缩略图等
在线演示地址（打开网页后，点击商家图册）：
http://www.sport7.cn/cc/jiangnan/football5.html
先看一看效果图：
该图片浏览器实现的功能如下：
1. 鼠标滚轮缩放图片；
2. 鼠标拖动图片；
3. 点击放大/缩小图标可以切换为原始大小和最佳只存模式；
4. 点击左右箭头可以进行翻页；
5. 点击缩略图显示大图；
6. 缩略图支持左右箭头分页，自动分页到选中的图片；
7. 右侧图片过滤；
8. 按ESC键自动退出图片浏览器。
想知道怎么实现的？那的先看看页面都加载了哪些JS。首先使用chrome浏览器打开页面之后，按下F12，查看JS文件列表如下：
除了jQuery和jQueryUI和统计JS文件外，自己写的JS只有2个文件。ydx.core.js是整站通用JS文件，而schedule.js才是该页面JS。细心的你可能已经发现了，该页面除了包含非常强大的图片浏览器以外，还有功能复杂的预定功能。这么复杂的JS是如何架构的呢？答案就是grunt。
点击schedule.js 发现该文件已经被压缩混淆了。如下图：
是的，这是一个production站点的基本要求。
在我们的JS代码架构中，这个schedule.js由多个JS文件组合而成，每个JS源文件都小巧易读容易维护。看看grunt文件其中某一部分的配置吧：
... ...
company: {
index: [libs.publics.imageviewer, libs.publics.companyNavManager, libs.slider, libs.imageZoomer],
category: [libs.publics.imageviewer, libs.publics.companyNavManager, libs.slider, libs.imageZoomer],
schedule: [libs.publics.imageviewer, libs.publics.companyNavManager, libs.slider, libs.imageZoomer, libs.dropdown]
},
... ...
怎么样，是不是非常优雅？
如果你对架构超复杂JS项目（或页面）感兴趣，可以看看这个github开源项目：https://github.com/leotsai/mvcsolution。该项目拥有完整的使用grunt搭建超复杂JS项目的例子。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
