前端UI库SUI Mobile 不可不知的坑

背景介绍：

所在公司由于技术团队小，开发任务紧，领导把移动端的项目外包了。外包团队的工程师使用阿里前端团队出品的SUI Mobile的前端UI库来开发，所以，我也就理所当然地去学习官方文档（http://m.sui.taobao.org/）。

这个UI库，其实是山寨Framework7的。优点是足够地轻量级、且提供中文文档。缺点是由于核心开发人员已经离开阿里，本项目已经将近一年没有更新、无人维护了，基本没有形成社区。该作者离职后把SUIMobile项目改了名，叫做Light7(http://www.light7.cn/)，修复了部分bug。觉得SUI Mobile不错的，可以考虑使用Light7.

第一个坑：必须显式地调用$.init()方法。

官方文档里（http://m.sui.taobao.org/components/）有这么一句话：

如果没有这样显式地调用初始化方法的话，JavaScript脚本很有可能会不执行。当我拿到外包团队提交的代码的时候，我是崩溃的。因为有许多莫名其妙的bug。最后试着加了这段代码之后，发现JavaScript才正常地调用了。

第二个坑：建议全局禁用自带的路由$.config = {router: false}。

官方文档（http://m.sui.taobao.org/components/#router）上介绍说：

`Router默认开启，会自动拦截所有链接的Touch行为，如果希望一个链接走浏览器原生跳转而不使用router，可以在链接上增加class="external"或者自定义属性,如xxx。如果需要禁用路由功能,那么可以在 zepto 之后, msui 之前使用$.config = {router: false}来禁用.`

我遇到的情况是这样的：首页有个轮播，第一次进来首页可以正常播放。当用户从首页进到其他页面之后，通过顶部的返回按钮或者浏览器的后退键回到首页时，轮播是卡住的。调试代码后，发现返回后，js脚本是不执行的。试着全局禁用了路由之后，轮播可以自动播放了，js脚本都能正常执行了。

第三个坑：只支持Zepto.js 不支持jQuery。

众所周知，Zepto.js虽然比jQuery轻量，但基于jQuery的插件众多，可以为我们节省不少重复造轮子的精力。同时，jQuery效率更高，开发者也更熟悉jQuery的方法。然而SUI Mobile只支持Zepto.js，这就尴尬了。SUI Mobile在GitHub上有这个issue(https://github.com/sdc-alibaba/SUI-Mobile/issues/143)。

我们这个项目的外包团队也许是因为这个原因同时使用了Zepto.js 和jQuery两个类库。由于两个类库都是用“$”，会导致了莫名其妙的bug。所以，如果你也遇到这种情况，不得不使用两个库的时候，那么使用Zepto来替换这个UI库里提供的js方法中的“$”，来解决命名冲突。

当然，如果可以，建议使用Light7来代替SUI Mobile。因为Light7是支持jQuery的。