Sencha Touch 在移动设备中的应用_计算机新技术及应用.doc

计算机新技术及应用大作业 5 / 5 计算机新技术及应用大作业题目: Sencha Touch 在移动设备中的应用 学号： 学生姓名： 院系： 专业： 计算机科学与技术 班级： 2020年1月22日Sencha Touch在移动设备的应用摘要：当今时代，是一个移动Web的时代。Sencha Touch可以让你的Web App看起来像Native App，即网络应用程序在外观及用户体验上，非常接近于原生应用，它提供的绚丽的用户界面组件和丰富的数据管理功能全部基于最新的HTML5和CSS3的 WEB标准，全面兼容Android和Apple iOS设备。关键字： Web App HTML5Sencha TouchMobile引言：对于Mobile Web来说，现在是快速成长时代。由于采用了HTML5和CSS3技术，移动浏览器的性能加强了许多。同时，移动App的框架也扩展了，这意味着为移动设备创建丰富的互动的Web体验的可行性又提升了。对于Mobile Web的开发人员来说，切换框架代价很高，因为外观及用户体验等大部分功能都是新技术，以及这些新技术还在不断更新。Sencha Touch是第一个HTML5移动开发框架，Sencha Touch 2.0是Sencha Touch有史以来最大一次升级。我们最关注的是Sencha 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 Laboratory）正式发布了Web技术标准。目前，与Web相关的各种技术标准都由著名的W3C组织（World Wide Web Consortium）管理和维护。从技术层面看，Web架构的精华有三处：用超文本技术（HTML）实现信息与信息的连接；用统一资源定位技术（URI）实现全球信息的精确定位；用新的应用层协议（HTTP）实现分布式的信息共享。这三个特点无一不与信息的分发、获取和利用有关。其实，Tim Berners-Lee早就明确无误地告诉我们：Web是一个抽象的（假想的）信息空间。也就是说，作为Internet上的一种应用架构，Web的首要任务就是向人们提供信息和信息服务。回首Web前端开发的过去，第一个简单的，基于文本，包含几个链接的网站，一些小图片和毫无布局可言的标题与段落。然而，时代在进步，接下来出现了表格布局，以图片为主，但其JS代码满天飞，然后是DIV+CSS，代码和样式分离，出现了AJAX，且伴有浏览器兼容问题，最后是基于 CSS 的网页设计，采用语义文档，减少图片，更高效API。移动web服务，它基于移动互联网，但并不等同于移动互联网并做为一个概念。移动网络是指基于浏览器的Web服务，移动设备，如手机、掌上电脑或其它便携式工具连接到公共网络:不需要台式电脑，也没有一个固定的固定连接。然而，移动网络接入今天仍然存在着互操作性和可用性问题。 这是由于不兼容格式的大量信息在互联网上提供的移动设备和部分是由于物理尺寸的小屏幕的移动设备和其他设备的限制等多种原因造成 。屏幕大小，这使得它很难或根本不可能看到依赖于标准尺寸的台式电脑屏幕上的文字和图形。缺乏窗口，桌上型电脑，能够打开多个窗口并且在在时间允许上进行多重任务和轻松恢复到以前的页面。在移动网络中，只有一个网页在同一时间上进行显示。导航，最多的移动设备不使用类似鼠标的指针，而是单纯的向上和向下滚动功能与触摸设备，从而限制了灵活性的导航。成本，带宽的接入和收费的手机网络，远高于那些固定线路的互联网接入服务。面对众多的浏览器与平台，Web前端不再是以前那样简单的重复性工作。本文将要介绍的，是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 的框架，它是世界上第一个基于 HTML5 的 Mobile web 应用框架。Sencha Touch 框架可以让用户开发的 web 应用看起来像本地应用，它提供的绚丽的用户界面组件和丰富的数据管理功能全部都基于最新的 HTML5 和 CSS3 的 web 标准，并且全面兼容 Android 和 Apple iOS 等设备。Sencha Touch 的出现是 Mobile web 开发人员的福音，它提供的众多吸引人的特性让它成为目前业界最炙手可热的框架。值得我们注意的有以下几方面：1、基于最新的 web 标准HTML5，CSS3，JavaScript。整个库压缩和 gzip 后大约 120KB，通过禁用一些组件还会使它更小。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、Microsoft Silverlight，与Oracle JavaFX的需求，并且提供更多能有效增强网络应用的标准集。HTML5 可以让你摆脱对平台的依赖。用户打开浏览器，直接就可以访问你的应用，而不需要经过各种Store 的审核。其次，具有实时更新。通常平台的审核都需要七个工作日左右的时间，如果你发布之后发现问题怎么办？Web 方式就不存在这种问题。还有就是让人心动的 Write once, run anywhere? 没错，HTML5 可以实现Write once, run anywhere，但移动设备上的HTML5 开发对开发人员的技术有非常高的要求，不是一般的Web 前端人员能解决的，通常拥有这样技术的人才，工资水平也不会比Native 开发人员低多少。如果你仅仅是要开发一个移动设备上的网站，这会简单很多，但如果你希望模拟Native 应用，并且拥有较高的效率和优雅的用户体验，这就很有技术含量了。不要小看JavaScript 这类Web 开发语言，通常我的看法是越简单的语言越会体现出技术人员的水平，特别是规划设计能力。2、支持目前世界上最好的移动设备。Sencha Touch 目前支持 Apple iOS，Android 和 BlackBerry 等目前 3G 市场上最流行的移动设备，它为不同的设备定制了不同的主题，用户可以通过使用这些主题使 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 Touch 增加了一组自定义触摸事件，如 tap、double tap、swipe、tap and hold、pinch、rotate 等。Sencha Touch 2.0的性能优化，主要集中在 CSS 选择器与样式上面。好比说点击按钮的时候，又或者切换卡片（card transitions）的时候，就会明显地快很多，你会在载入和提交表单明显感觉到。必须承认，旧版的时候那效果的确比较慢的说，而在 Beta3 的时候，就会流畅很多了。记得当时我们发现这个问题的时候，排查出是冗余 CSS 规则的问题，于是我们用其他的样式去调整，在保证达到一致样式的同时而且极大地改进了性能。最后，为提供更佳的性能，我们依然对剩余的部分进行优化。例如 carousel 指示器在你点击后便会立即出现更新效果，而不是等待动画完成尽管消耗的时间一样，但在用户看起来就会感觉快了很多哦。性能乃 Sencha Touch 2 之一大目标，而且我们目前对现阶段的效果感到满意。4、数据集成。Sencha Touch提供了强大的数据包，通过 Ajax、JSONP、YQL 等方式用户可以很容易的从各种各样的数据源拿到数据并绑定到组件模板，写入本地离线存储。Sencha Touch 的一个最大特性就是提供了功能强大的数据包。在 Ext.data 包中提供了丰富的 API 实现对 AJAX，JSONP，YQL 等数据访问方式的支持，并提供了 API 供用户更简单方便的操作和展现 JSON 数据， XML 数据等。用户还可以扩展基础接口实现对更复杂数据的操作和访问。Ext.data 数据包中最基础的是 Ext.data.Model，它就像 Java 的 Object 类一样是定义所有对象的基础类，代表应用程序中的数据类型：用户，产品，销售等任何东西。除了这些之外，Sencha Touch的布局引擎更接近浏览器的CSS引擎。它下面几个方面有了很大的进步：启动时APP渲染和布局速度更快；屏幕旋转时屏幕的更新速度比1.x快了很多；布局引擎更小，下载速度更快。Sencha Touch2大幅地提高了App在布局方面的表现。点击导航时新屏幕可以更快的弹出，更流畅的用户体验，这其中最有创造性的是可以支持更多的设备。新的布局引擎大幅度提高了渲染速度，以至于我们需要用更快的相机才能计算它的变化时间。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%。Kitchen Sink是一个非常庞大App，通过实验证实他的每一个组件在大部分平台的加载时间都提高了2秒。Sencha Touch 2 使用了ExtJS 4 中功能强大的类系统。给我们提供了很多强大的功能包括智能类加载（在APP构建的时候智能的引用你需要的类），混合组件，配置应用和新引擎等其他特征。Sencha Touch2提供配置驱动组件。ST 2 在整个框架中都使用配置方式，所以当你看到一个类的配置时你可以随时改变配置属性，即使是这个组件已经被渲染。更完美的是，因为Set方法后面总是跟着相同的样式 ，当你看到配置的Set方法是你就知道哪些函数将被调用.例如，一个TextField 有一个label属性，当我们初始化它的时候我们就可以方便的修改它。配置项非常的实用，他提供了一个非常清晰API。在API文档中看到的所有Config options，都有一个Get和Set方法。Sencha Touch2对Android平台更好的支持。特别是在滚动效果和动画方面。在ST 1 时代，Android设备上滚动比较长的滚动条是会感觉到很慢，动画效果也很糟糕。Sencha Touch 2 提供了新的优化机制，在Android上能实现平滑的滚动和流畅的动画。在完成ST APP开发后，很多开发者都会问“怎样才能把我的APP展示给客户呢？”在很多情况下，通过Web方式开发和发布APP是很多开发者和客户期望的。当然把APP 上传到AppStore是让客户知道的最快方法。在Sencha Touch 2 中，开发和发布App到Android市场和iOS AppStore中变得非常容易。新的SDK 工具包含一个ST打包命令，他能让你轻松的打包你的App使之成为iOS的App 或是Android的APK。就是这么的简单，一条命令就能顺利的把APP发布到AppStore或是Android市场。Sencha Touch是 HTML5 Mobile 应用领域的领头羊，是目前为止最强大的移动平台开发框架，