背景介紹：

所在公司由于技術(shù)團(tuán)隊(duì)小，開發(fā)任務(wù)緊，領(lǐng)導(dǎo)把移動(dòng)端的項(xiàng)目外包了。外包團(tuán)隊(duì)的工程師使用阿里前端團(tuán)隊(duì)出品的SUI Mobile的前端UI庫來開發(fā)，所以，我也就理所當(dāng)然地去學(xué)習(xí)官方文檔（http://m.sui.taobao.org/）。

這個(gè)UI庫，其實(shí)是山寨Framework7的。優(yōu)點(diǎn)是足夠地輕量級(jí)、且提供中文文檔。缺點(diǎn)是由于核心開發(fā)人員已經(jīng)離開阿里，本項(xiàng)目已經(jīng)將近一年沒有更新、無人維護(hù)了，基本沒有形成社區(qū)。該作者離職后把SUIMobile項(xiàng)目改了名，叫做Light7(http://www.light7.cn/)，修復(fù)了部分bug。覺得SUI Mobile不錯(cuò)的，可以考慮使用Light7.

第一個(gè)坑：必須顯式地調(diào)用$.init()方法。

官方文檔里（http://m.sui.taobao.org/components/）有這么一句話：

如果沒有這樣顯式地調(diào)用初始化方法的話，JavaScript腳本很有可能會(huì)不執(zhí)行。當(dāng)我拿到外包團(tuán)隊(duì)提交的代碼的時(shí)候，我是崩潰的。因?yàn)橛性S多莫名其妙的bug。最后試著加了這段代碼之后，發(fā)現(xiàn)JavaScript才正常地調(diào)用了。

第二個(gè)坑：建議全局禁用自帶的路由$.config = {router: false}。

官方文檔（http://m.sui.taobao.org/components/#router）上介紹說：

`Router默認(rèn)開啟，會(huì)自動(dòng)攔截所有鏈接的Touch行為，如果希望一個(gè)鏈接走瀏覽器原生跳轉(zhuǎn)而不使用router，可以在鏈接上增加class="external"或者自定義屬性,如xxx。如果需要禁用路由功能,那么可以在 zepto 之后, msui 之前使用$.config = {router: false}來禁用.`

我遇到的情況是這樣的：首頁有個(gè)輪播，第一次進(jìn)來首頁可以正常播放。當(dāng)用戶從首頁進(jìn)到其他頁面之后，通過頂部的返回按鈕或者瀏覽器的后退鍵回到首頁時(shí)，輪播是卡住的。調(diào)試代碼后，發(fā)現(xiàn)返回后，js腳本是不執(zhí)行的。試著全局禁用了路由之后，輪播可以自動(dòng)播放了，js腳本都能正常執(zhí)行了。

第三個(gè)坑：只支持Zepto.js 不支持jQuery。

眾所周知，Zepto.js雖然比jQuery輕量，但基于jQuery的插件眾多，可以為我們節(jié)省不少重復(fù)造輪子的精力。同時(shí)，jQuery效率更高，開發(fā)者也更熟悉jQuery的方法。然而SUI Mobile只支持Zepto.js，這就尷尬了。SUI Mobile在GitHub上有這個(gè)issue(https://github.com/sdc-alibaba/SUI-Mobile/issues/143)。

我們這個(gè)項(xiàng)目的外包團(tuán)隊(duì)也許是因?yàn)檫@個(gè)原因同時(shí)使用了Zepto.js 和jQuery兩個(gè)類庫。由于兩個(gè)類庫都是用“$”，會(huì)導(dǎo)致了莫名其妙的bug。所以，如果你也遇到這種情況，不得不使用兩個(gè)庫的時(shí)候，那么使用Zepto來替換這個(gè)UI庫里提供的js方法中的“$”，來解決命名沖突。

當(dāng)然，如果可以，建議使用Light7來代替SUI Mobile。因?yàn)長(zhǎng)ight7是支持jQuery的。