360SDN.COM

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

来源:  2018-03-29 10:13:16    评论:0点击:

来源:FrankWang0909

背景介绍:

所在公司由于技术团队小,开发任务紧,领导把移动端的项目外包了。外包团队的工程师使用阿里前端团队出品的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的



作者:FrankWang0909
链接:https://www.jianshu.com/p/bf63b9a6355d
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权