关于移动web框架的研究

来源：互联网发布：pose studio软件下载编辑：程序博客网时间：2024/05/16 14:01

当前移动web应用非常流行，可用的开发框架也是非常多。在简单的查阅了一些相关资料后，决定对比较著名的移动web开发框架进行总结和实验。移动web框架大都来自web开发，技术上也比较成熟。在国外主要有JQuery Mobile ，Sencha Touch等，国内互联网巨头BAT们也有自己研发的移动web框架EFE，Spirit等。

JQuery Mobile

因为对JQuery有先前的学习研究，所以先研究了JQuery Mobile。jQuery Mobile 是用于创建移动 Web 应用的前端开发框架。可以应用于智能手机与平板电脑。JQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页，同时具有更好的可移植性，解决了设备的兼容性问题。

使用 jQuery内核,你不需要在电脑上安装任何东西;仅需要在你的网页中加载以CSS库和JavaScript库就能够使用 jQueryMobile

<head><!-- meta使用viewport以确保页面可自由缩放 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 引入 jQuery Mobile 样式 --><link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"><!-- 引入 jQuery 库 --><script src="http://code.jquery.com/jquery-1.11.3.min.js"></script><!-- 引入 jQuery Mobile 库 --><script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script></head>

JQuery Mobile开发和web开发有很多相近之处，所以主要研究了移动web的主题和响应事件。

主题样式：

jQuery Mobile 提供了 2 种不同的主题样式, 从 "a" 到 "b" - 每一种主题的按钮，工具条，内容块等等颜色都不一致，每个主题的视觉效果也不一样。

通过设置元素的data-theme属性可以自定义应用的外观。这里尝试一下主题b的风格演示

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"><script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script><script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script></head><body><div data-role="page" id="pageone" data-theme="b">  <div data-role="header">    <h1>页面头部</h1>  </div>  <div data-role="main" class="ui-content">    <p>黑色主题样式</p>    <a href="#" class="ui-btn">超链接按钮</a>    <label for="fullname">输入框:</label>      <input type="text" name="fullname" id="fullname" placeholder="请输入内容">        <label for="switch">切换开关:</label>      <select name="switch" id="switch" data-role="slider">        <option value="on">On</option>        <option value="off" selected>Off</option>      </select>  </div>  <div data-role="footer">    <h1>页面底部</h1>  </div></div></body></html>

效果展示：

通过修改 CSS 文件来添加或编辑新主题(如果你已经下载了 jQuery Mobile)。你只需要拷贝样式模块，然后重命令字母类名（c-z）,并在样式中添加你喜欢的颜色和字体。可以在 HTML 文档中添加主题的新样式，工具条添加类： ui-bar-(a-z) ，文本内容添加类: ui-body-(a-z) ,页面添加类：ui-page-theme-(a-z) 。

响应事件：

在jQuery Mobile你可以使用任何标准的JQuery事件。除此之外, jQuery Mobile也提供了针对移动端浏览器的事件：触摸事件（当用户触摸屏幕时触发），滑动事件（当用户上下滑动时触发），定位事件（当设备水平或垂直翻转时触发），页面事件（当页面显示，隐藏，创建，加载或未加载时触发）。

在 jQuery Mobile 中, 使用pageinit 事件来设置代码脚本在DOM元素加载完成后开始执行，所以要在任何新页面加载并创建是执行脚本，就需要绑定pageinit事件。这里是一个点击标签会消失的示例：

<script>$(document).on("pagecreate","#pageone",function(){  $("p").on("click",function(){    $(this).hide();  });                       });</script>

长按消失示例：

<script>$(document).on("pagecreate","#pageone",function(){  $("p").on("taphold",function(){    $(this).hide();  });                       });</script>

滑动检测：

$(document).on("pagecreate","#pageone",function(){  $("p").on("swipe",function(){    $("span").text("滑动检测!");  });                       });

JQuery用on（）方法绑定各种事件，下面举例
navigate 包裹了 hashchange 和 popstate 的事件orientationchange方向改变事件,在用户垂直或者水平旋转移动设备时触发。pagebeforechange在页面切换之前，触发的事件。使用$.mobile.changePage()来切换页面，此方法触发2个事件，切换之前的pagebeforechange事件，和切换完成后pagechange（成功）或者pagechangefailed（失败）。pagebeforecreate页面初始化时，初始化之前触发。pagebeforehide在页面切换后旧页面隐藏之前，触发的事件。pagebeforeload在加载请求发出之前触发pagebeforeshow在页面切换后显示之前，触发的事件。pagechange在页面切换成功后，触发的事件。使用$.mobile.changePage()来切换页面，此方法触发2个事件，切换之前的pagebeforechange事件，和切换完成后pagechange（成功）或者pagechangefailed（失败）。pagechangefailed在页面切换失败时，触发的事件。使用$.mobile.changePage()来切换页面，此方法触发2个事件，切换之前的pagebeforechange事件，和切换完成后pagechange（成功）或者pagechangefailed（失败）。pagecontainerbeforeload在载入任何请求前触发pagecontainerload在页面成功载入并插入 DOM 后触发pagecontainerloadfailed页面载入失败时触发pagecreate在页面创建成功之后，触发的事件,但增强完成之前。pagehide在页面切换后老页面隐藏之后，触发的事件。pageinit1.4.0 版本后已废弃，使用 pagecreate 替代。在页面页面初始化时，触发的事件。pageload1.4.0 版本后已废弃，使用 pagecontainerload 替代。在页面完全加载成功后触发。pageloadfailed1.4.0 版本后已废弃，使用 pagecontainerloadfailed 替代。如果页面请求失败触发。pageremove在窗口视图从 DOM 中移除外部页面之前触发。pageshow在过渡动画完成后，在"到达"页面触发。scrollstart当用户开始滚动页面时触发。scrollstop当用户停止滚动页面时触发。swipe当用户在元素上水平滑动时触发。swipeleft当用户从左划过元素超过 30px 时触发。swiperight当用户从右划过元素超过 30px 时触发。tap当用户敲击某元素时触发。taphold当元素敲击某元素并保持一秒时触发。throttledresize启用可标记 #hash 历史记录updatelayout由动态显示/隐藏内容的 jQuery Mobile 组件触发。vclick虚拟化的 click 事件处理器vmousecancel虚拟化的 mousecancel 事件处理器vmousedown虚拟化的 mousedown 事件处理器vmousemove虚拟化的 mousemove 事件处理器vmouseout虚拟化的 mouseout 事件处理器vmouseover虚拟化的 mouseover 事件处理器vmouseup虚拟化的 mouseup 事件处理器

对于其他的移动web开发框架只是做了简单的了解，有机会再体验一下。下面做简单的介绍：

Sencha Touch

Sencha Touch可以让你的Web App看起来像Native App。美丽的用户界面组件和丰富的数据管理，全部基于最新的HTML5和CSS3的 WEB标准，全面兼容Android和Apple iOS设备。基于最新的WEB标准，支持世界上最好的设备。Beta版兼容Android和iOS，Android上的开发人员还可以使用一些专为Android定制的主题。增强的触摸事件。在touchstart、touchend等标准事件基础上，增加了一组自定义事件数据集成，如tap、swipe、pinch、rotate等。数据集成。提供了强大的数据包，通过Ajax、JSONp、YQL等方式绑定到组件模板，写入本地离线存储。

KISSY（阿里）

KISSY 是一款跨终端、模块化、高性能、使用简单的 JavaScript 框架。除了完备的工具集合如 DOM、Event、Ajax、Anim 等，它还提供了经典的面向对象、动态加载、性能优化解决方案。作为一款全终端支持的 JavaScript 框架，KISSY 为移动终端做了大量适配和优化，让你的程序在全终端均能流畅运行。

kissy的API简单易读，上手也比较容易

这里附上doc地址：http://docs.kissyui.com/1.4/docs/html/coms.html

Spirit（腾讯）

Spirit 并不是一个具体的框架或者工具，但是她是移动端一系列解决方案的整合与聚拢。她是腾讯 Alloyteam 开发团队在移动开发项目中通过大量实践、归纳、总结提炼而成，最终沉淀下来的一个体系，真正建立一套移动 Web 开发的集成解决方案。Spirit 主要由5个部分组成：移动 Web 开发规范、JM、JMUI、Mobug、Mars。

地址：http://alloyteam.github.io/Spirit/

GMU（百度）

GMU（Global Mobile UI）是百度前端通用组开发的移动端组件库，具有代码体积小、简单、易用等特点，组件内部处理了很多移动端的bug，覆盖机型广，能大大减少开发交互型组件的工作量，非常适合移动端网站项目。

项目开源基于BSD协议，支持商业和非商业用户的免费使用和任意修改：https://github.com/fex-team/GMU

阅读全文

0 0