关于移动web框架的研究_$(document).on( "pagecreate", "#pageone", function-CSDN博客

本文链接：https://blog.csdn.net/baidu_27575469/article/details/73188287

当前移动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	在页面切换后老页面隐藏之后，触发的事件。
pageinit	1.4.0 版本后已废弃，使用 pagecreate 替代。在页面页面初始化时，触发的事件。
pageload	1.4.0 版本后已废弃，使用 pagecontainerload 替代。在页面完全加载成功后触发。
pageloadfailed	1.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