HTML5+Mobile App开发全攻略：从Boilerplate到MVC框架

本文档是一份由Adam Lu（@adamlu）撰写的指南，名为“一步一步开发HTML5+Mobile+Apps”，旨在详细介绍如何利用HTML5技术构建移动应用程序的过程。HTML5作为一种强大的前端开发工具，因其跨系统、平台和浏览器的优势，正越来越多地被开发者用于移动应用开发，尤其是在与Native应用竞争的环境中。 首先，文章探讨了HTML5开发移动应用的原因，包括其特性丰富度，能够实现跨平台兼容，易于扩展，减少了开发成本，并指出支持HTML5的移动浏览器如Chrome、Firefox等，使得HTML5WebApps成为可能。此外，还提到了基于HTML5应用的服务器端架构，建议采用类似于传统Web架构的设计，例如RESTful API，利用JavaScript处理状态管理和数据交互。 在前端架构方面，文档介绍了Boilerplate的核心组成部分，包括： 1. HTML部分： - Mobile viewport标签：确保网页在不同设备上的正确缩放。 - Homescreen icon set：优化应用图标，以便于添加到手机主屏幕。 - iOS web app特有的元标记：提高应用的沉浸式体验。 2. CSS部分： - Reset CSS：消除浏览器默认样式，统一UI样式。 - CSS Font：选择合适的字体库，提升视觉效果。 3. JavaScript部分： - 基础类库选择：如Zepto、YUI或jQuery，提供基础DOM操作和事件处理。 - 功能类库：例如Hammer.js用于触控事件，iScroll用于滚动功能。 接下来，文章着重介绍了开发过程中使用的HTML5移动开发框架，包括PhoneGap、Trigger.io、AppMobi和AppAccelerator。这些框架允许开发者将HTML、CSS和JavaScript代码打包成原生应用，同时利用WebView在移动设备上运行。 客户端的模型-视图-控制器（MVC）模式也被讨论，比如Backbone.js、YUI App Framework和Knockout.js结合Backbone.js的使用。对于与RESTful API的集成，文中提到如何通过定义特定的HTTP方法（如POST、GET、PUT和DELETE）来对应CRUD操作，如创建entity时发送POST请求，更新entity时发送PUT请求。 这篇文档提供了开发HTML5移动应用的详细步骤，涵盖了从Boilerplate设置、选择合适的工具到构建实际应用架构的全面指导，是希望从事HTML5移动开发的工程师的实用参考资源。