在線演示地址（打開網頁后，點擊商家圖冊）：
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項目的例子。