《SenchaTouch在移动设备中的应用计算机新技术及应用大作业》由会员分享，可在线阅读，更多相关《SenchaTouch在移动设备中的应用计算机新技术及应用大作业（5页珍藏版）》请在金锄头文库上搜索。
1、 计算机新技术及应用大作业题目: Sencha Touch 在移动设备中的应用 学号： 学生姓名： 院系： 专业： 计算机科学与技术 班级： 2017年7月29日计算机新技术及应用大作业 2 / 5Sencha Touch 在移动设备的应用摘要：当今时代，是一个移动 Web 的时代。Sencha Touch 可以让你的 Web App 看起来像Native App，即网络应用程序在外观及用户体验上，非常接近于原生应用，它提供的绚丽的用户界面组件和丰富的数据管理功能全部基于最新的 HTML5 和 CSS3 的 WEB 标准，全面兼容 Android 和 Apple iOS 设备。关键字： Web
2、 App HTML5 Sencha Touch Mobile引言：对于 Mobile Web 来说，现在是快速成长时代。由于采用了 HTML5 和 CSS3 技术，移动浏览器的性能加强了许多。同时，移动 App 的框架也扩展了，这意味着为移动设备创建丰富的互动的 Web 体验的可行性又提升了。对于 Mobile Web 的开发人员来说，切换框架代价很高，因为外观及用户体验等大部分功能都是新技术，以及这些新技术还在不断更新。Sencha Touch 是第一个 HTML5 移动开发框架，Sencha Touch 2.0 是 Sencha Touch 有史以来最大一次升级。我们最关注的是 Sench
3、a Touch 的性能，致力于让基于 Sencha Touch 开发的 APP 能在更多的平台上快速运行。正文：纵观前端技术的发展过程，Web 的前身是 1980 年 Tim Berners-Lee 负责的Enquire（Enquire Within Upon Everything 的简称）项目。1990 年 11 月，第一个 Web 服务器 nxoc01.cern.ch 开始运行，Tim Berners-Lee 在自己编写的图形化 Web 浏览器WorldWideWeb上看到了最早的 Web 页面。1991 年，CERN（European Particle Physics Laborator
4、y）正式发布了 Web 技术标准。目前，与 Web 相关的各种技术标准都由著名的W3C 组织（World Wide Web Consortium ）管理和维护。从技术层面看，Web 架构的精华有三处：用超文本技术（HTML）实现信息与信息的连接；用统一资源定位技术（URI）实现全球信息的精确定位；用新的应用层协议（HTTP）实现分布式的信息共享。这三个特点无一不与信息的分发、获取和利用有关。其实，Tim Berners-Lee 早就明确无误地告诉我们：Web 是一个抽象的（假想的）信息空间。 也就是说，作为 Internet 上的一种应用架构， Web 的首要任务就是向人们提供信息和信息服务。
5、回首 Web 前端开发的过去，第一个简单的，基于文本，包含几个链接的网站，一些小图片和毫无布局可言的标题与段落。然而，时代在进步，接下来出现了表格布局，以图片为主，但其 JS 代码满天飞，然后是 DIV+CSS，代码和样式分离，出现了 AJAX，且伴有浏览器兼容问题，最后是基于 CSS 的网页设计，采用语义文档，减少图片，更高效 API。移动 web 服务，它基于移动互联网，但并不等同于移动互联网并做为一个概念。移计算机新技术及应用大作业 3 / 5动网络是指基于浏览器的 Web 服务，移动设备，如手机、掌上电脑或其它便携式工具连接到公共网络:不需要台式电脑，也没有一个固定的固定连接。然而，移
6、动网络接入今天仍然存在着互操作性和可用性问题。 这是由于不兼容格式的大量信息在互联网上提供的移动设备和部分是由于物理尺寸的小屏幕的移动设备和其他设备的限制等多种原因造成 。屏幕大小，这使得它很难或根本不可能看到依赖于标准尺寸的台式电脑屏幕上的文字和图形。缺乏窗口，桌上型电脑，能够打开多个窗口并且在在时间允许上进行多重任务和轻松恢复到以前的页面。在移动网络中，只有一个网页在同一时间上进行显示。导航，最多的移动设备不使用类似鼠标的指针，而是单纯的向上和向下滚动功能与触摸设备，从而限制了灵活性的导航。成本，带宽的接入和收费的手机网络，远高于那些固定线路的互联网接入服务。面对众多的浏览器与平台，Web
7、 前端不再是以前那样简单的重复性工作。本文将要介绍的，是 Sencha 公司出品的 Sencha Touch，它是世界上第一个基于 HTML5 的 Mobile web 应用框架。现已推出到 2.1 版本。Sencha 的前身是 ExtJS, 2010 年 ExtJS 改名为 Sencha。 ExtJS 是一个基于 JavaScript 编写的 Ajax 框架，它功能强大，界面美观，是基于 Ajax，DHTML，DOM 等技术开发 web 应用的一个非常成熟的框架。 Sencha Touch 是 ExtJS 整合 JQTouch、Raphal 库而推出的适用于最前沿 Touch web 的框架
8、，它是世界上第一个基于 HTML5 的 Mobile web 应用框架。Sencha Touch 框架可以让用户开发的 web 应用看起来像本地应用，它提供的绚丽的用户界面组件和丰富的数据管理功能全部都基于最新的 HTML5 和 CSS3 的 web 标准，并且全面兼容 Android 和 Apple iOS 等设备。Sencha Touch 的出现是 Mobile web 开发人员的福音，它提供的众多吸引人的特性让它成为目前业界最炙手可热的框架。值得我们注意的有以下几方面：1、基于最新的 web 标准HTML5，CSS3，JavaScript。整个库压缩和 gzip 后大约 120KB，通过
9、禁用一些组件还会使它更小。HTML5 是用于取代 1999 年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本，现在仍处于发展阶段，但大部分浏览器已经支持某些 HTML5 技术。HTML 5有两大特点：首先，强化了 Web 网页的表现性能。其次，追加了本地数据库等 Web 应用的功能。广义论及 HTML5 时，实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application， RIA)，如 Adobe Flash、
10、Microsoft Silverlight，与 Oracle JavaFX的需求，并且提供更多能有效增强网络应用的标准集。HTML5 可以让你摆脱对平台的依赖。用户打开浏览器，直接就可以访问你的应用，而不需要经过各种 Store 的审核。其次，具有实时更新。通常平台的审核都需要七个工作日左右的时间，如果你发布之后发现问题怎么办？Web 方式就不存在这种问题。还有就是让人心动的 Write once, run anywhere? 没错，HTML5 可以实现 Write once, run anywhere，但移动设备上的 HTML5 开发对开发人员的技术有非常高的要求，不是一般的 Web 前端人
11、员能解决的，通常拥有这样技术的人才，工资水平也不会比 Native 开发人员低多少。如果你仅仅是要开发一个移动设备上的网站，这会简单很多，但如果你希望模拟 Native 应用，并且拥有较高的效率和优雅的用户体验，这就很有技术含量了。不计算机新技术及应用大作业 4 / 5要小看 JavaScript 这类 Web 开发语言，通常我的看法是越简单的语言越会体现出技术人员的水平，特别是规划设计能力。2、支持目前世界上最好的移动设备。Sencha Touch 目前支持 Apple iOS，Android 和 BlackBerry 等目前 3G 市场上最流行的移动设备，它为不同的设备定制了不同的主题，用
12、户可以通过使用这些主题使 web 应用在移动设备上的展现更华丽。 Sencha Touch 的目标是成为一个跨平台的框架，并支持和兼容更多的移动设备。Sencha Touch 2.0 是Sencha Touch 有史以来最大一次升级，致力于让基于 Sencha Touch 开发的 APP 能在更多的平台上快速运行。App 能在小组件初始化渲染，局部和设备转动时重新局部等情况下快速的运行。Sencha Touch 2.0 Beta3 支持 Android Chrome 和 Kindle Fire。3、增强的触摸事件。除了 touchstart，touchend 等标准事件基础外，Sencha T
13、ouch 增加了一组自定义触摸事件，如 tap、double tap 、 swipe、tap and hold、pinch、rotate 等。Sencha Touch 2.0 的性能优化，主要集中在 CSS 选择器与样式上面。好比说点击按钮的时候，又或者切换卡片（card transitions）的时候，就会明显地快很多，你会在载入和提交表单明显感觉到。必须承认，旧版的时候那效果的确比较慢的说，而在 Beta3 的时候，就会流畅很多了。记得当时我们发现这个问题的时候，排查出是冗余 CSS 规则的问题，于是我们用其他的样式去调整，在保证达到一致样式的同时而且极大地改进了性能。最后，为提供更佳的性
14、能，我们依然对剩余的部分进行优化。例如 carousel 指示器在你点击后便会立即出现更新效果，而不是等待动画完成尽管消耗的时间一样，但在用户看起来就会感觉快了很多哦。性能乃 Sencha Touch 2 之一大目标，而且我们目前对现阶段的效果感到满意。4、数据集成。Sencha Touch 提供了强大的数据包，通过 Ajax、JSONP、YQL 等方式用户可以很容易的从各种各样的数据源拿到数据并绑定到组件模板，写入本地离线存储。Sencha Touch 的一个最大特性就是提供了功能强大的数据包。在 Ext.data 包中提供了丰富的 API 实现对 AJAX，JSONP ，YQL 等数据访问
15、方式的支持，并提供了 API 供用户更简单方便的操作和展现 JSON 数据， XML 数据等。用户还可以扩展基础接口实现对更复杂数据的操作和访问。Ext.data 数据包中最基础的是 Ext.data.Model，它就像 Java 的 Object 类一样是定义所有对象的基础类，代表应用程序中的数据类型：用户，产品，销售等任何东西。除了这些之外，Sencha Touch 的布局引擎更接近浏览器的 CSS 引擎。它下面几个方面有了很大的进步：启动时 APP 渲染和布局速度更快；屏幕旋转时屏幕的更新速度比1.x 快了很多；布局引擎更小，下载速度更快。Sencha Touch2 大幅地提高了 App
16、 在布局方面的表现。点击导航时新屏幕可以更快的弹出，更流畅的用户体验，这其中最有创造性的是可以支持更多的设备。新的布局引擎大幅度提高了渲染速度，以至于我们需要用更快的相机才能计算它的变化时间。Kitchen Sink buttons 在 1.X 和在 2.0 上的运行时间比较，Sencha Touch1 比 Sencha Touch2 慢了 1/4。这说明 Sencha Touch2 有更健壮，更聪明的内核。ExtJS4 中很多新的变化都同时应用到 ST 2 中，类的配置是核心结构，提高了清晰的 Get 和 SetAPI，你可以方便的修改类配置。Sencha Touch2 有更快的启动时间。我们发现 ST 2 的启动时间在大部分平台上提高了 10%到 25%。Kitche
