Cordova 3.x 基础（8） -- 几个不可或缺的lib

原文：http://rensanning.iteye.com/blog/2021720

（1）Zepto.js http://zeptojs.com/
jQuery绝对是最流行的类库，但是现在对它的批评是越来越多，主要问题是它的大小，即使版本2.0中去除了对于IE6，IE7和IE8的支持，但是仍旧体积比较大，特别对于移动设备来说。 相比人们开始更加关注Vanilla JS http://vanilla-js.com/，它对于DOM处理以外的内容更快，更高效。 对于Hybrid App来说，Zepto.js可能更加合适，因为它是针对移动 WebKit 开发，显得更轻量级。

（2）FastClick https://github.com/ftlabs/fastclick
基于Webkit的浏览都存在click事件300ms延迟，而FastClick能够移除这个延迟加速Touch事件。还有Tappable，也是不错的选择。

Js代码  

  1. document.addEventListener(‘deviceready‘, onDeviceReady, false);
  2. function onDeviceReady() {
  3. FastClick.attach(document.body);
  4. }

（3）iScroll  https://github.com/cubiq/iscroll 
固定高度的容器内滚动内容，针对jQuery Mobile还有一个iScroll wrapper叫iScrollview

Html代码  

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="format-detection" content="telephone=no" />
  6. <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
  7. <link rel="stylesheet" type="text/css" href="lib/jquery.mobile/jquery.mobile-1.4.1.min.css" />
  8. <link rel="stylesheet" type="text/css" href="lib/jquery.mobile.iscrollview/jquery.mobile.iscrollview.css" />
  9. <link rel="stylesheet" type="text/css" href="lib/jquery.mobile.iscrollview/jquery.mobile.iscrollview-pull.css" />
  10. <title>Cordova Sample</title>
  11. <style>
  12. .ui-content {
  13. padding: 0 !important;
  14. }
  15. .ui-listview {
  16. margin: 0 !important;
  17. }
  18. .example-wrapper, .example-wrapper div.iscroll-scroller {
  19. width: 100% !important;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <div data-role="page" id="index">
  25. <div data-role="header">
  26. <h1>Index page</h1>
  27. </div>
  28. <div data-role="content">
  29. <div class="example-wrapper" data-iscroll>
  30. <ul data-role="listview">
  31. <li><a href="#">Some link</a></li>
  32. <li><a href="#">Some link</a></li>
  33. <li><a href="#">Some link</a></li>
  34. <li><a href="#">Some link</a></li>
  35. <li><a href="#">Some link</a></li>
  36. <li><a href="#">Some link</a></li>
  37. <li><a href="#">Some link</a></li>
  38. <li><a href="#">Some link</a></li>
  39. <li><a href="#">Some link</a></li>
  40. <li><a href="#">Some link</a></li>
  41. <li><a href="#">Some link</a></li>
  42. <li><a href="#">Some link</a></li>
  43. <li><a href="#">Some link</a></li>
  44. <li><a href="#">Some link</a></li>
  45. <li><a href="#">Some link</a></li>
  46. <li><a href="#">Some link</a></li>
  47. <li><a href="#">Some link</a></li>
  48. <li><a href="#">Some link</a></li>
  49. <li><a href="#">Some link</a></li>
  50. <li><a href="#">Some link</a></li>
  51. <li><a href="#">Some link</a></li>
  52. <li><a href="#">Some link</a></li>
  53. <li><a href="#">Some link</a></li>
  54. <li><a href="#">Some link</a></li>
  55. <li><a href="#">Some link</a></li>
  56. <li><a href="#">Some link</a></li>
  57. <li><a href="#">Some link</a></li>
  58. <li><a href="#">Some link</a></li>
  59. <li><a href="#">Some link</a></li>
  60. <li><a href="#">Some link</a></li>
  61. <li><a href="#">Some link</a></li>
  62. <li><a href="#">Some link</a></li>
  63. </ul>
  64. </div>
  65. </div>
  66. <div data-role="footer">
  67. <h1>Footer</h1>
  68. </div>
  69. </div>
  70. <script type="text/javascript" src="cordova.js"></script>
  71. <script type="text/javascript" src="lib/jquery/jquery-1.11.0.min.js"></script>
  72. <script type="text/javascript" src="lib/jquery.mobile/jquery.mobile-1.4.1.min.js"></script>
  73. <script type="text/javascript" src="lib/iscroll/iscroll.js"></script>
  74. <script type="text/javascript" src="lib/jquery.mobile.iscrollview/jquery.mobile.iscrollview.js"></script>
  75. </body>
  76. </html>

（4）Hammer.js http://eightmedia.github.io/hammer.js/ 
多点触控

Js代码  

  1. var hammer = new Hammer(document.getElementById("container"));
  2. hammer.ondragstart = function(ev) { };
  3. hammer.ondrag = function(ev) { };
  4. hammer.ondragend = function(ev) { };
  5. hammer.ontap = function(ev) { };
  6. hammer.ondoubletap = function(ev) { };
  7. hammer.onhold = function(ev) { };
  8. hammer.ontransformstart = function(ev) { };
  9. hammer.ontransform = function(ev) { };
  10. hammer.ontransformend = function(ev) { };

（5）Handlebars http://handlebarsjs.com/ 
Ember.js使用的是Handlebars模板引擎。

Html代码  

  1. <div id="menu-placeholder"></div>
  2. <script id="menu-template" type="text/x-handlebars-template">
  3. <ul>
  4. {{#each menu}}
  5. <li><a href="{{link}}">{{name}}</a></li>
  6. {{/each}}
  7. </ul>
  8. </script>
  9. <script type="text/javascript">
  10. (function() {
  11. // Grab the HTML source that needs to be compiled
  12. var menuSource = document.getElementById( ‘menu-template‘ ).innerHTML;
  13. // Compiles the source
  14. var menuTemplate = Handlebars.compile( menuSource );
  15. //Data that will replace the handlebars expressions in our template
  16. var menuData = {
  17. menu: [
  18. { name: "Link 1", link: "http://google.com" },
  19. { name: "Link 2", link: "http://yahoo.com" },
  20. { name: "Link 3", link: "http://youtube.com" },
  21. { name: "Link 4", link: "http://twitter.com" },
  22. ]
  23. };
  24. // Process Template with Data
  25. document.getElementById( ‘menu-placeholder‘ ).innerHTML = menuTemplate( menuData );
  26. })();
  27. </script>

说到Ember.js就应该提提AngularJS http://angularjs.org/ 它是Google开发的JavaScript MVW Framework，这里有一些参考资料：http://www.iteye.com/news/28651-AngularJS-Google-resource MVC框架层数不穷，TodoMVC使用各种JavaScript MV*框架实现同一个应用Todo，可以帮助你挑选合适的MV*框架。

（6）Q.js https://github.com/kriskowal/q 
Q.js是Promises/A+规范的一个实现，将嵌套异步序列（Pyramid of Doom）转化为类似同步的序列。 
比如，嵌套异步序列：

Js代码  

  1. step1(function (value1) {
  2. step2(value1, function(value2) {
  3. step3(value2, function(value3) {
  4. step4(value3, function(value4) {
  5. // Do something with value4
  6. });
  7. });
  8. });
  9. });

改造后：

Js代码  

  1. Q.fcall(promisedStep1)
  2. .then(promisedStep2)
  3. .then(promisedStep3)
  4. .then(promisedStep4)
  5. .then(function (value4) {
  6. // Do something with value4
  7. })
  8. .catch(function (error) {
  9. // Handle any error from all above steps
  10. })
  11. .done();

当然也还有很多其他的实现，比如：

  • 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

参考： 
PhoneGap应用开发的那些坑爹事儿 
Phonegap踩过的坑 
Android Hybrid App四大坑 
别闯进Hybrid App的误区 
Hybrid App开发实战 
Mobile Web App Checklist

时间： 2024-10-11 08:54:03

Cordova 3.x 基础（8） -- 几个不可或缺的lib的相关文章

Cordova 3.x 基础（3） -- 调试Debug工具

Cordova 3.x 基础(3) -- 调试Debug工具 (1)Ripple Emulator 是基于Google Chrome的移动应用模拟器,已经捐赠给了ASF.Apache Ripple:http://ripple.incubator.apache.org/ Chrome Webstore安装地址: https://chrome.google.com/webstore/detail/geelfhphabnejjhdalkjhgipohgpdnoc 安装Ripple Emulator 引

Cordova 3.x 基础（1） -- 环境搭建（Windows / Android）

Cordova 3.x 基础(1) -- 环境搭建(Windows / Android) Mobile App分为三大类:Native App,Hybrid App,Web App.其中Hybrid App介于Native App和Web App之间,它能兼顾Native App的良好用户体验及强大的功能并具有Web App跨平台快速开发的优势.缺点在于依赖于各平台的WebView,WebView的性能好坏直接决定了Hybrid App的性能. 目前国内外的Hybrid App开发框架很多,比较

Cordova 3.x 基础（5） -- 配置文件config.xml

原文:http://rensanning.iteye.com/blog/2019331 首先要注意的是:从3.3版本以后已经把www/config.xml移动到了根目录下. 在config.xml中定义的东西应该适应所有平台.在build工程的是时候,会看到“Generating config.xml from defaults for platform "android"”这样的字样,他会生成各个平台的config.xml. 生成的文件: Android:MyProject/plat

Cordova 3.x 基础（6） -- Sample工程解析

原文http://rensanning.iteye.com/blog/2020843 (1)通过Cordova CLI创建Cordova工程 最简化创建应用: 引用 cordova create app1 ***默认使用package名:io.cordova.hellocordova.应用名:HelloCordova. 指定package名和应用名: 引用 cordova create app2 com.rensanning.app.cordova CordovaSample ***也可以单独只

Cordova 3.x 基础（7） -- Native API的使用

原文:http://rensanning.iteye.com/blog/2021619 移动设备的Hardware接口包括:Accelerometer.Camera.Capture.Compass.Connection.Contacts.Device.Native Events.File.Geolocation.Notification.Storage.Gestures/Multitouch.Messages/Telephone.Bluetooth.NFC.Vibration.Cordova的N

Cordova 3.x 基础（2） -- 应用图标icon和启动页面SplashScreen

原文:http://rensanning.iteye.com/blog/2017380 最新版Cordova CLI已经支持在config.xml中配置<splash> 和 <icon>,CB-2606, CB-3571 Add support for <icon>, <splash>.设置如下: Xml代码   <platform name="android"> <icon src="res/android/

Cordova 3.x 基础（1） -- 环境搭建（Windows / Android）（转）

原文地址:http://rensanning.iteye.com/blog/2016364 CordovaPhoneGap Mobile App分为三大类:Native App,Hybrid App,Web App.其中Hybrid App介于Native App和Web App之间,它能兼顾Native App的良好用户体验及强大的功能并具有Web App跨平台快速开发的优势.缺点在于依赖于各平台的WebView,WebView的性能好坏直接决定了Hybrid App的性能. 目前国内外的Hy

ionic cordova plugin 安装和使用

注意事项 ionic1需要ng-cordova plugin的使用都需要放到deviceready事件的回调中, 设备准备好了才能设备交互 plugin只有在真机上才有效果, 模拟器(部分)和browser中是无效的 插件安装 官网Doc - http://cordova.apache.org/docs/en/latest/guide/cli/index.html#add-plugins ionic cordova plugin add cordova-plugin-camera 插件的引入 i

Github连击200天(1)——ShowCase

今天是我连续泡在Github上的第200天,也是蛮高兴的,终于达了: 故事的背影是: 去年国庆完后要去印度接受毕业生培训--就是那个神奇的国度.但是在去之前已经在项目待了九个多月,项目上的挑战越来越少,在印度的时间又算是比较多.便给自己设定了一个长期的goal,即100~200天的longest streak. 或许之前你看到过一篇文章让我们连击,那时已然140天,只是还是浑浑噩噩.到了今天,渐渐有了一个更清晰地思路. 先让我们来一下ShowCase,然后再然后,下一篇我们再继续. 一些项目简述