[b](1)Zepto.js[/b] [url=http://zeptojs.com/]http://zeptojs.com/ [/url]
jQuery绝对是最流行的类库,但是现在对它的批评是越来越多,主要问题是它的大小,即使版本2.0中去除了对于IE6,IE7和IE8的支持,但是仍旧体积比较大,特别对于移动设备来说。 相比人们开始更加关注Vanilla JS http://vanilla-js.com/,它对于DOM处理以外的内容更快,更高效。 对于Hybrid App来说,Zepto.js可能更加合适,因为它是针对移动 WebKit 开发,显得更轻量级。
[b](2)FastClick[/b] [url=https://github.com/ftlabs/fastclick]https://github.com/ftlabs/fastclick [/url]
基于Webkit的浏览都存在click事件300ms延迟,而FastClick能够移除这个延迟加速Touch事件。还有[url=https://github.com/cheeaun/tappable]Tappable[/url],也是不错的选择。
[b](3)iScroll[/b] [url=https://github.com/cubiq/iscroll]https://github.com/cubiq/iscroll[/url]
固定高度的容器内滚动内容,针对jQuery Mobile还有一个iScroll wrapper叫[url=https://github.com/watusi/jquery-mobile-iscrollview]iScrollview[/url]
[img]http://dl2.iteye.com/upload/attachment/0094/2100/0dbb2d41-ab53-3e67-a260-7b3f9aa61b4d.png[/img]
[b](4)Hammer.js[/b] [url=http://eightmedia.github.io/hammer.js/]http://eightmedia.github.io/hammer.js/[/url]
多点触控
[b](5)Handlebars[/b] [url=http://handlebarsjs.com/]http://handlebarsjs.com/[/url]
[url=http://emberjs.com/]Ember.js[/url]使用的是Handlebars模板引擎。
说到Ember.js就应该提提[b]AngularJS[/b] [url=http://angularjs.org/]http://angularjs.org/[/url] 它是Google开发的JavaScript MVW Framework,这里有一些参考资料:[url=http://www.iteye.com/news/28651-AngularJS-Google-resource]http://www.iteye.com/news/28651-AngularJS-Google-resource[/url] MVC框架层数不穷,[url=http://todomvc.com/]TodoMVC[/url] 使用各种JavaScript MV*框架实现同一个应用Todo,可以帮助你挑选合适的MV*框架。
[b](6)Q.js[/b] [url=https://github.com/kriskowal/q]https://github.com/kriskowal/q[/url]
Q.js是[url=http://promises-aplus.github.io/promises-spec/]Promises/A+规范[/url]的一个实现,将嵌套异步序列(Pyramid of Doom)转化为类似同步的序列。
比如,嵌套异步序列:
改造后:
当然也还有很多其他的实现,比如:
[list]
[*]Async.js https://github.com/caolan/async
[*]RSVP.js https://github.com/tildeio/rsvp.js
[*]when.js https://github.com/cujojs/when
[*]AngularJS的$q https://docs.angularjs.org/api/ng/service/$q
[/list]
参考:
[url=http://ftqq.com/category/webformobile/]PhoneGap应用开发的那些坑爹事儿[/url]
[url=http://snoopyxdy.blog.163.com/blog/static/60117440201432491123551/]Phonegap踩过的坑[/url]
[url=http://blog.meathill.com/tech/app/web/traps-in-developing-android-hybrid-app.html]Android Hybrid App四大坑[/url]
[url=http://www.infoq.com/cn/articles/hybridapp-misunderstanding]别闯进Hybrid App的误区[/url]
[url=http://www.infoq.com/cn/articles/hybrid-app-development-combat]Hybrid App开发实战[/url]
[url=http://www.luster.io/blog/9-29-14-mobile-web-checklist.html]Mobile Web App Checklist[/url]
jQuery绝对是最流行的类库,但是现在对它的批评是越来越多,主要问题是它的大小,即使版本2.0中去除了对于IE6,IE7和IE8的支持,但是仍旧体积比较大,特别对于移动设备来说。 相比人们开始更加关注Vanilla JS http://vanilla-js.com/,它对于DOM处理以外的内容更快,更高效。 对于Hybrid App来说,Zepto.js可能更加合适,因为它是针对移动 WebKit 开发,显得更轻量级。
[b](2)FastClick[/b] [url=https://github.com/ftlabs/fastclick]https://github.com/ftlabs/fastclick [/url]
基于Webkit的浏览都存在click事件300ms延迟,而FastClick能够移除这个延迟加速Touch事件。还有[url=https://github.com/cheeaun/tappable]Tappable[/url],也是不错的选择。
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
FastClick.attach(document.body);
}
[b](3)iScroll[/b] [url=https://github.com/cubiq/iscroll]https://github.com/cubiq/iscroll[/url]
固定高度的容器内滚动内容,针对jQuery Mobile还有一个iScroll wrapper叫[url=https://github.com/watusi/jquery-mobile-iscrollview]iScrollview[/url]
<!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>
[img]http://dl2.iteye.com/upload/attachment/0094/2100/0dbb2d41-ab53-3e67-a260-7b3f9aa61b4d.png[/img]
[b](4)Hammer.js[/b] [url=http://eightmedia.github.io/hammer.js/]http://eightmedia.github.io/hammer.js/[/url]
多点触控
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) { };
[b](5)Handlebars[/b] [url=http://handlebarsjs.com/]http://handlebarsjs.com/[/url]
[url=http://emberjs.com/]Ember.js[/url]使用的是Handlebars模板引擎。
<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就应该提提[b]AngularJS[/b] [url=http://angularjs.org/]http://angularjs.org/[/url] 它是Google开发的JavaScript MVW Framework,这里有一些参考资料:[url=http://www.iteye.com/news/28651-AngularJS-Google-resource]http://www.iteye.com/news/28651-AngularJS-Google-resource[/url] MVC框架层数不穷,[url=http://todomvc.com/]TodoMVC[/url] 使用各种JavaScript MV*框架实现同一个应用Todo,可以帮助你挑选合适的MV*框架。
[b](6)Q.js[/b] [url=https://github.com/kriskowal/q]https://github.com/kriskowal/q[/url]
Q.js是[url=http://promises-aplus.github.io/promises-spec/]Promises/A+规范[/url]的一个实现,将嵌套异步序列(Pyramid of Doom)转化为类似同步的序列。
比如,嵌套异步序列:
step1(function (value1) {
step2(value1, function(value2) {
step3(value2, function(value3) {
step4(value3, function(value4) {
// Do something with value4
});
});
});
});
改造后:
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();
当然也还有很多其他的实现,比如:
[list]
[*]Async.js https://github.com/caolan/async
[*]RSVP.js https://github.com/tildeio/rsvp.js
[*]when.js https://github.com/cujojs/when
[*]AngularJS的$q https://docs.angularjs.org/api/ng/service/$q
[/list]
参考:
[url=http://ftqq.com/category/webformobile/]PhoneGap应用开发的那些坑爹事儿[/url]
[url=http://snoopyxdy.blog.163.com/blog/static/60117440201432491123551/]Phonegap踩过的坑[/url]
[url=http://blog.meathill.com/tech/app/web/traps-in-developing-android-hybrid-app.html]Android Hybrid App四大坑[/url]
[url=http://www.infoq.com/cn/articles/hybridapp-misunderstanding]别闯进Hybrid App的误区[/url]
[url=http://www.infoq.com/cn/articles/hybrid-app-development-combat]Hybrid App开发实战[/url]
[url=http://www.luster.io/blog/9-29-14-mobile-web-checklist.html]Mobile Web App Checklist[/url]