你对RhoMobile + JqueryMobile + KnockoutJS有什么经验？

Question

我和我的团队一直在使用RhoMobile + JqueryMobile + KnockoutJS为我们的组织构建几个跨平台(BlackBerry，Android，iOS)的移动应用程序。考虑到目前跨平台移动应用程序开发的现状，这种开发经验是可以接受的。当在移动设备上使用该应用程序时，挫败感开始显现。性能问题是我们目前的头号痛点。我不希望这是一场大喊大叫，但我想知道其他人做了什么来缓解性能问题。具体地说，BlackBerry设备上的性能问题。我试过solutions recommended in the RhoMobile docs了。也许社区还可以提供其他提示。我很感谢你能提供的任何反馈。

Answer 1

我只有Jquery mobile的经验，虽然我喜欢它带来的快节奏开发，但如果我有时间，我总是会编写一个本机应用程序。由于Safari对CSS3的支持，Jquery移动应用程序在iOS设备上运行得最好。像幻灯片这样的动画在安卓浏览器上是相当不稳定的，在黑莓浏览器上则是彻头彻尾的低劣。

除此之外，Jquery mobile的工作原理是基本不会切换页面。每次您请求一个新页面(通过超链接或其他方式)时，它都会通过AJAX请求获取该页面并将其插入到当前页面的DOM中(您可以显式地请求不发生这种情况，但这样您就不能‘滑动’到另一个页面)。这种形式的导航在长时间的导航链之后会产生问题。更不用说，你必须非常小心，整个应用程序中的两个元素不能共享相同的id。

我把这个Jquery移动应用程序作为一个学校项目的演示，所以它满足了我所需要的目的:快速开发，并作为概念的证明。

然而，对于我自己公司的产品，我们正在开发移动应用程序，我永远不会去做任何事情，除非是原生应用程序。它确实需要更长的时间来开发，所以这取决于您的需求。

添加到您的评论中的：

Jquery Mobile所做的任何事情都不能仅靠Jquery来完成。但是，使用jquery，如果你添加CSS3动画，使用单DOM导航风格等等，你会遇到同样的问题。问题不在于Jquery mobile。问题是，很少有移动浏览器可以处理Jq mobile使用的效果。就像我说的，iPhone做得很好。这部分是因为Safari3的CSS3实现，主要是因为iOS将UI线程优先于后台工作线程。

Answer 2

1. 将box-shadow和text-shadow从CSS中删除，这会使页面变得相当慢。
2. 您还可以将-hover和-down类设置为与它们的派生类相同，以便在滚动时轻触元素(如listview链接)时，浏览器不必重新绘制页面(这会使我的Android2.3设备上的滚动更加流畅)。<代码>H29<代码>G210

要移除阴影，请执行以下操作：

.ui-shadow,
.ui-btn-up-a,
.ui-btn-hover-a,
.ui-btn-down-a,
.ui-body-b,
.ui-btn-up-b,
.ui-btn-hover-b,
.ui-btn-down-b,
.ui-bar-c,
.ui-body-c,
.ui-btn-up-c,
.ui-btn-hover-c,
.ui-btn-down-c,
.ui-bar-c,
.ui-body-d,
.ui-btn-up-d,
.ui-btn-hover-d,
.ui-btn-down-d,
.ui-bar-d,
.ui-body-e,
.ui-btn-up-e,
.ui-btn-hover-e,
.ui-btn-down-e,
.ui-bar-e,
.ui-overlay-shadow,
.ui-shadow,
.ui-btn-active,
.ui-body-a,
.ui-bar-a {
    text-shadow: none;
    box-shadow: none;
    -webkit-box-shadow: none;
}

要使-hover类相同，您需要更改样式，如下所示：

.ui-btn-hover-a {
    border: 1px solid       #000 ;
    background:             #444444 ;
    font-weight: bold;
    color:                  #fff ;
    text-shadow: 0  -1px  1px  #000 ;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #666 ), to( #444 )); 
    background-image: -webkit-linear-gradient( #666 , #444 ); 
    background-image:    -moz-linear-gradient( #666 , #444 ); 
    background-image:     -ms-linear-gradient( #666 , #444 ); 
    background-image:      -o-linear-gradient( #666 , #444 ); 
    background-image:         linear-gradient( #666 , #444 );
}

与它的派生函数相同(在本例中是.ui-btn-up-a)：

.ui-btn-hover-a {
    border: 1px solid       #222 ;
    background:             #333333 ;
    font-weight: bold;
    color:                  #fff ;
    text-shadow: 0  -1px  1px  #000 ;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #555 ), to( #333 )); 
    background-image: -webkit-linear-gradient( #555 , #333 ); 
    background-image:    -moz-linear-gradient( #555 , #333 ); 
    background-image:     -ms-linear-gradient( #555 , #333 ); 
    background-image:      -o-linear-gradient( #555 , #333 ); 
    background-image:         linear-gradient( #555 , #333 );
}

您也可以对元素上发生tap事件时触发的-down类执行此操作：

.ui-btn-down-a {
    border: 1px solid       #222 ;
    background:             #333333 ;
    font-weight: bold;
    color:                  #fff ;
    text-shadow: 0  -1px  1px  #000 ;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #555 ), to( #333 )); 
    background-image: -webkit-linear-gradient( #555 , #333 ); 
    background-image:    -moz-linear-gradient( #555 , #333 ); 
    background-image:     -ms-linear-gradient( #555 , #333 ); 
    background-image:      -o-linear-gradient( #555 , #333 ); 
    background-image:         linear-gradient( #555 , #333 );
}

下面是一个指向jQuery Mobile1.0CSS样式表的非缩小版本的链接：http://code.jquery.com/mobile/latest/jquery.mobile.css