（1）Zepto.js http://zeptojs.com/
jQuery 絕對(duì)是最流行的類庫(kù)，但是現(xiàn)在對(duì)它的批評(píng)是越來越多，主要問題是它的大小，即使版本2.0中去除了對(duì)于 IE6，IE7和 IE8的支持，但是仍舊體積比較大，特別對(duì)于移動(dòng)設(shè)備來說。 相比人們開始更加關(guān)注 Vanilla JS http://vanilla-js.com/，它對(duì)于 DOM 處理以外的內(nèi)容更快，更高效。 對(duì)于 Hybrid App 來說，Zepto.js 可能更加合適，因?yàn)樗轻槍?duì)移動(dòng) WebKit 開發(fā)，顯得更輕量級(jí)。
（2）FastClick https://github.com/ftlabs/fastclick
基于 Webkit 的瀏覽都存在 click 事件300 ms 延遲，而 FastClick 能夠移除這個(gè)延遲加速 Touch事件。還有 Tappable，也是不錯(cuò)的選擇。
Js 代碼
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
FastClick.attach(document.body);
}（3）iScroll https://github.com/cubiq/iscroll
固定高度的容器內(nèi)滾動(dòng)內(nèi)容，針對(duì) jQuery Mobile 還有一個(gè) iScroll wrapper 叫 iScrollview
Html 代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<link rel="stylesheet" type="text/css" href="lib/jquery.mobile/jquery.mobile-1.4.1.min.css" />
<link rel="stylesheet" type="text/css" href="lib/jquery.mobile.iscrollview/jquery.mobile.iscrollview.css" />
<link rel="stylesheet" type="text/css" href="lib/jquery.mobile.iscrollview/jquery.mobile.iscrollview-pull.css" />
<title>Cordova Sample</title>
<style>
.ui-content {
padding: 0 !important;
}
.ui-listview {
margin: 0 !important;
}
.example-wrapper, .example-wrapper div.iscroll-scroller {
width: 100% !important;
}
</style>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header">
<h1>Index page</h1>
</div>
<div data-role="content">
<div class="example-wrapper" data-iscroll>
<ul data-role="listview">
<li><a href="#">Some link</a></li>
<li><a href="#">Some link</a></li>
<li><a href="#">Some link</a></li>
<li><a href="#">Some link</a></li>
<li><a href="#">Some link</a></li>
<li><a href="#">Some link</a></li>
<li><a href="#">Some link</a></li>
<li><a href="#">Some link</a></li>
<li><a href="#">Some link</a></li>
<li><a href="#">Some link</a></li>
<li><a href="#">Some link</a></li>
<li><a href="#">Some link</a></li>
<li><a href="#">Some link</a></li>
<li><a href="#">Some link</a></li>
<li><a href="#">Some link</a></li>
<li><a href="#">Some link</a></li>
<li><a href="#">Some link</a></li>
<li><a href="#">Some link</a></li>
<li><a href="#">Some link</a></li>
<li><a href="#">Some link</a></li>
<li><a href="#">Some link</a></li>
<li><a href="#">Some link</a></li>
<li><a href="#">Some link</a></li>
<li><a href="#">Some link</a></li>
<li><a href="#">Some link</a></li>
<li><a href="#">Some link</a></li>
<li><a href="#">Some link</a></li>
<li><a href="#">Some link</a></li>
<li><a href="#">Some link</a></li>
<li><a href="#">Some link</a></li>
<li><a href="#">Some link</a></li>
<li><a href="#">Some link</a></li>
</ul>
</div>
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="lib/jquery.mobile/jquery.mobile-1.4.1.min.js"></script>
<script type="text/javascript" src="lib/iscroll/iscroll.js"></script>
<script type="text/javascript" src="lib/jquery.mobile.iscrollview/jquery.mobile.iscrollview.js"></script>
</body>
</html>http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/8.1.png" alt="picture8.1" />
（4）Hammer.js http://eightmedia.github.io/hammer.js/
多點(diǎn)觸控
Js 代碼
var hammer = new Hammer(document.getElementById("container"));
hammer.ondragstart = function(ev) { };
hammer.ondrag = function(ev) { };
hammer.ondragend = function(ev) { };
hammer.ontap = function(ev) { };
hammer.ondoubletap = function(ev) { };
hammer.onhold = function(ev) { };
hammer.ontransformstart = function(ev) { };
hammer.ontransform = function(ev) { };
hammer.ontransformend = function(ev) { };（5）Handlebars http://handlebarsjs.com/
Ember.js 使用的是 Handlebars 模板引擎。
Html 代碼
<div id="menu-placeholder"></div>
<script id="menu-template" type="text/x-handlebars-template">
<ul>
{{#each menu}}
<li><a href="{{link}}">{{name}}</a></li>
{{/each}}
</ul>
</script>
<script type="text/javascript">
(function() {
// Grab the HTML source that needs to be compiled
var menuSource = document.getElementById( 'menu-template' ).innerHTML;
// Compiles the source
var menuTemplate = Handlebars.compile( menuSource );
//Data that will replace the handlebars expressions in our template
var menuData = {
menu: [
{ name: "Link 1", link: "http://google.com" },
{ name: "Link 2", link: "http://yahoo.com" },
{ name: "Link 3", link: "http://youtube.com" },
{ name: "Link 4", link: "http://twitter.com" },
]
};
// Process Template with Data
document.getElementById( 'menu-placeholder' ).innerHTML = menuTemplate( menuData );
})();
</script>說到 Ember.js 就應(yīng)該提提 AngularJS http://angularjs.org/ 它是 Google 開發(fā)的 JavaScript MVW Framework，這里有一些參考資料：http://www.iteye.com/news/28651-AngularJS-Google-resource MVC 框架層數(shù)不窮，TodoMVC 使用各種 JavaScript MV框架實(shí)現(xiàn)同一個(gè)應(yīng)用 Todo，可以幫助你挑選合適的MV框架。
（6）Q.js https://github.com/kriskowal/q
Q.js 是 Promises/A+規(guī)范的一個(gè)實(shí)現(xiàn)，將嵌套異步序列（Pyramid of Doom）轉(zhuǎn)化為類似同步的序列。 比如，嵌套異步序列：
Js 代碼
step1(function (value1) {
step2(value1, function(value2) {
step3(value2, function(value3) {
step4(value3, function(value4) {
// Do something with value4
});
});
});
});改造后：
Js 代碼
Q.fcall(promisedStep1)
.then(promisedStep2)
.then(promisedStep3)
.then(promisedStep4)
.then(function (value4) {
// Do something with value4
})
.catch(function (error) {
// Handle any error from all above steps
})
.done();當(dāng)然也還有很多其他的實(shí)現(xiàn)，比如：
參考：
PhoneGap 應(yīng)用開發(fā)的那些坑爹事兒
Phonegap 踩過的坑
Android Hybrid App 四大坑
別闖進(jìn) Hybrid App 的誤區(qū)
Hybrid App 開發(fā)實(shí)戰(zhàn)
Mobile Web App Checklist
掃碼關(guān)注鍍金池微信號(hào)
手機(jī)訂課，優(yōu)惠多多