PhoneJS - HTML5 JavaScript 移动开发框架

引言

您知道，现在有很多用于移动应用开发的框架，其中越来越多的框架都基于 HTML5。这些下一代工具可以帮助开发者创建手机和平板电脑的移动应用，而无需学习原生 SDK 或 Objective-C 或 Java 等编程语言所带来的陡峭学习曲线。对于世界各地的无数开发者来说，HTML5 代表着跨平台移动应用开发的未来。

但问题是为什么？为什么 HTML5 变得如此流行？

HTML5 的广泛采用与自带设备（BYOD）运动的兴起有关。BYOD 意味着开发者不能再将应用程序的使用限制在单一平台，因为消费者希望他们的应用程序能在他们日常使用的设备上运行。HTML5 允许开发者使用单一代码库面向多个设备，并提供与原生解决方案非常相似的体验，而无需编写多个应用程序、使用多种语言或 SDK。现代 Web 浏览器的发展意味着 HTML5 可以提供跨平台、多设备解决方案，其行为和体验可以与“原生”应用程序相媲美，以至于有时很难区分是使用原生开发工具编写的应用程序还是使用 HTML 编写的。

多平台支持、上市时间和较低的维护成本只是 HTML/JavaScript 内在优势中的几项。它的优势不止于此。HTML 规避新兴技术（如 WinRT、ChromeOS、FirefoxOS 和 Tizen）的长期风险的能力是无与伦比的。简单地说，唯一能在所有这些平台上运行的代码就是 HTML/JavaScript。

有没有代价？是的，当然，原生应用消耗的内存更少，并且用户体验更快或更具响应性。但在 Web 应用可以工作的任何情况下，您都可以更进一步，创建一个移动 Web 应用，甚至是一个打包的应用程序商店应用，从单一代码库为多个平台构建。PhoneJS 让您快速入门。

PhoneJS 用于您的下一个移动项目

PhoneJS 是一个跨平台 HTML5 移动应用开发框架，它被设计成通用、灵活和高效。PhoneJS 是一个单页应用程序（SPA）框架，具有视图管理和 URL 路由功能。它的布局引擎允许您将导航与视图分离，因此可以在不同的平台或设备类型上以不同的方式呈现相同的应用程序。PhoneJS 包含丰富的触控优化 UI 小部件集合，内置了适用于当今最流行移动平台（包括 iOS、Android 和 Windows Phone 8）的样式。

为了更好地理解 PhoneJS 开发的原理以及如何创建和发布平台商店中的应用程序，让我们来看一个简单的演示应用程序，名为 TipCalculator。此应用程序根据餐厅账单计算应付小费金额。此应用程序的完整源代码 在此处可用。

该应用程序可以在 AppStore、Google Play 和 Windows Store 中找到。

PhoneJS 应用程序布局和路由

TipCalculator 是一个用 HTML5 构建的单页应用程序（SPA）。起始页是 index.html，包含标准的 meta 标签以及 CSS 和 JavaScript 资源的链接。它包含对 JavaScript 文件 index.js 的脚本引用，您可以在其中找到配置 PhoneJS 应用框架逻辑的代码。

TipCalculator.app = new DevExpress.framework.html.HtmlApplication({
    namespace: TipCalculator,
    defaultLayout: "empty"
});

在此部分中，我们必须指定应用程序的默认布局。在本例中，我们将使用最简单的选项，即 empty 布局。更高级的布局可在以下图像中找到，并提供对交互式导航样式的完整支持。

PhoneJS 使用许多服务器端框架支持的成熟布局方法，包括 Ruby on Rails 和 ASP.NET MVC。有关视图和布局的详细信息，请参阅 我们的在线文档。

要配置 SPA 中的视图路由，我们必须在 index.js 中添加一行额外的代码。

TipCalculator.app.router.register(":view", { view: "home" });

这将注册一个简单的路由，该路由从 URL（来自 URL 的哈希段）中检索视图名称。默认情况下使用 home 视图。每个视图都在其自己的 HTML 文件中定义，并像这样链接到主应用程序页面 index.html。

<link rel="dx-template" type="text/html" href="views/home.html" />

PhoneJS ViewModel

ViewModel 是视图使用的数据和操作的表示。每个视图都有一个函数，其基本名称与视图本身相同，并返回该视图的 ViewModel。对于 home 视图，views/home.js 脚本定义了 home 函数，该函数创建相应的 ViewModel。

TipCalculator.home = function(params) {
    ...
};

小费计算算法使用三个输入参数：账单总额、分摊账单的人数以及小费百分比。这些变量被定义为可观察对象（observables），它们将绑定到相应的 UI 小部件。

注意：可观察对象功能由 Knockout.js 提供，它是 PhoneJS 中 ViewModel 的一个重要基础。您可以在 此处 了解更多关于 Knockout.js 的信息。

这是 home 函数中用于初始化变量的代码。

var billTotal = ko.observable(),
    tipPercent = ko.observable(DEFAULT_TIP_PERCENT),
    splitNum = ko.observable(1);

小费计算的结果由四个值表示：totalToPay、totalPerPerson、totalTip 和 tipPerPerson 。每个值都是一个 依赖可观察对象（计算值），当其定义中使用的任何可观察对象发生更改时，它都会自动重新计算。同样，这是标准的 Knockout.js 功能。

var totalTip = ko.computed(...);
var tipPerPerson = ko.computed(...);
var totalPerPerson = ko.computed(...);
var totalToPay = ko.computed(...);

为了举例说明 ViewModel 中的业务逻辑实现，让我们更仔细地看一下可观察对象 totalToPay。

总支付金额通常会四舍五入。为此，我们有两个函数 roundUp 和 roundDown，它们会更改 roundMode（另一个可观察对象）的值。这些更改会导致 totalToPay 重新计算，因为 roundMode 在与 totalToPay 可观察对象关联的代码中使用。

var totalToPay = ko.computed(function() {
    var value = totalTip() + billTotalAsNumber();

    switch(roundMode()) {
        case ROUND_DOWN:
            if(Math.floor(value) >= billTotalAsNumber())
                return Math.floor(value);
            return value;

        case ROUND_UP:
            return Math.ceil(value);
        default:
            return value;
    }
});

当视图中的任何输入参数发生更改时，都应禁用四舍五入，以便用户可以看到精确值。为此，我们订阅了 UI 绑定可观察对象的更改。

billTotal.subscribe(function() {
    roundMode(ROUND_NONE);
});

tipPercent.subscribe(function() {
    roundMode(ROUND_NONE);
});

splitNum.subscribe(function() {
    roundMode(ROUND_NONE);
});

完整的 ViewModel 可以在 home.js 中找到。它代表了典型 ViewModel 的简单示例。

注意：在更复杂的应用程序中，实现将 ViewModel 与视图实现文件分开的结构可能很有用。换句话说，像 home.js 这样的文件不必包含实现 ViewModel 的代码，而是可以调用其他地方的辅助函数来实现此目的。在本教程中，我们尽量保持结构简单。

PhoneJS 视图

现在我们来看看位于 view/home.html 文件中的视图标记。根 div 元素代表一个名为“home”的视图。其中有一个 div 包含一个名为“content ”的占位符标记。

<div data-options="dxView : { name: 'home' }">
     <div data-options="dxContent : { targetPlaceholder: 'content' }">
         ...
     </div>
</div>

工具栏位于视图的顶部。

<div data-bind="dxToolbar: { items: [ { align: 'center', text: 'Tip Calculator' } ] }"></div>

dxToolbar 是一个 PhoneJS UI 小部件。它使用 Knockout.js 绑定在标记中使用。

工具栏下方出现一个字段集。要显示字段集，我们使用 PhoneJS 理解的两个特殊 CSS 类：dx-fieldset 和 dx-field。字段集包含一个用于账单总额的文本字段以及两个用于小费百分比和用餐人数的滑块。

<div data-bind="dxNumberBox: { value: billTotal, placeholder: 'Type here...', valueUpdateEvent: 'keyup',min: 0 }">
</div>

<div data-bind="dxSlider: { min: 0, max: 25, step: 1, activeStateEnabled: true, value: tipPercent }"></div>

<div data-bind="dxSlider: { min: 1, step: 1, max: 10, activeStateEnabled: true, value: splitNum }"></div>

编辑器下方显示两个按钮（dxButton），允许用户对总支付金额进行四舍五入。剩余的视图显示用于计算结果的字段集。

<div class="round-buttons">
    <div data-bind="dxButton: { text: 'Round Down', clickAction: roundDown }"></div>
    <div data-bind="dxButton: { text: 'Round Up', clickAction: roundUp }"></div>
</div>

<div id="results" class="dx-fieldset">
    <div class="dx-field">
        <span class="dx-field-label">Total to pay</span>
        <span class="dx-field-value" style="font-weight: bold" data-bind="text: Globalize.format(totalToPay(), 'c')"></span>
    </div>
    <div class="dx-field">
        <span class="dx-field-label">Total per person</span>
        <span class="dx-field-value" data-bind="text: Globalize.format(totalPerPerson(), 'c')"></span>
    </div>
    <div class="dx-field">
        <span class="dx-field-label">Total tip</span>
        <span class="dx-field-value" data-bind="text: Globalize.format(totalTip(), 'c')"></span>
    </div>
    <div class="dx-field">
        <span class="dx-field-label">Tip per person</span>
        <span class="dx-field-value" data-bind="text: Globalize.format(tipPerPerson(), 'c')"></span>
    </div>
</div>

这完成了创建使用 PhoneJS 的简单应用程序所需文件的描述。正如您所见，这个过程简单、直接且直观。

启动、调试和构建商店应用

启动和调试 PhoneJS 应用就像其他任何基于 HTML5 的应用一样。您必须将包含 HTML 和 JavaScript 源文件的文件夹以及任何其他必需的文件部署到您的 Web 服务器。由于架构模型没有服务器端组件，因此只要 Web 服务器能够通过 HTTP 提供文件访问，使用哪个 Web 服务器并不重要。部署后，您可以通过简单地导航到应用程序的起始页 URL，在设备、模拟器或桌面浏览器中打开应用程序。

如果您想在桌面浏览器中以手机或平板电脑的显示方式查看应用程序，您需要覆盖浏览器中的 UserAgent。幸运的是，使用现代浏览器附带的开发者工具很容易做到这一点。

如果您不想修改 UserAgent 设置，可以使用 Ripple Emulator 来模拟多种设备类型。

此时，您已经有了一个 Web 应用程序，它可以在移动设备上的浏览器中运行，并且看起来像原生应用程序。现代移动浏览器提供对本地存储、位置 API、摄像头的访问，因此您的应用程序很可能已经具备了它所需的一切。

使用 PhoneJS 和 PhoneGap 创建商店就绪型应用程序

但如果需要访问浏览器不提供的设备功能怎么办？如果您想要一个在应用商店中的应用程序，而不仅仅是一个网页怎么办？那么您将不得不创建一个混合应用程序，而这种应用程序的实际标准是 Apache Cordova，也称为 PhoneGap。

每个平台的 PhoneGap 项目都是一个原生应用程序项目，它包含 WebView（浏览器控件）和一个“桥”，该桥允许 WebView 中的 JavaScript 代码访问 PhoneGap 库和插件提供的原生函数。

要使用它，您需要拥有您要定位的每个平台的 SDK，但您不需要了解原生开发的细节，只需将 HTML、CSS、JS 文件放在正确的位置，并指定应用程序的属性，如名称、版本、图标、启动屏幕等。

要能够发布您的应用程序，您需要注册成为相应开发门户的开发者。这个过程对于每个商店都有详细的文档，并且超出了本文的范围。之后，您将能够获得签名应用程序包的证书。

需要为每个平台安装 SDK 听起来很有挑战性——尤其是在 HTML5/JS 方法的“一次编写，随处运行”的承诺之后。但这是构建混合应用程序并掌控一切所需付出的一小部分代价。但仍然有几个服务和产品可以为您解决这个问题。

其中一个是由 Adobe 提供的在线服务——PhoneGap Build，它允许您免费构建一个应用程序（要构建更多，您需要付费账户）。如果您拥有所有必需的平台证书文件，该服务只需点击几下鼠标即可为所有支持的平台构建您的应用程序。您只需要准备应用程序描述、宣传和信息内容以及图标，以便将您的应用程序提交到各个商店。

对于 Visual Studio 开发者，DevExpress 提供了一个名为 DevExtreme（包含 PhoneJS）的产品，该产品可以直接在 Microsoft Visual Studio IDE 中为 iOS、Android 和 Windows Phone 8 构建应用程序。

总而言之，如果您需要一个在移动设备上看起来和感觉像原生应用的 Web 应用程序，那么您需要 PhoneJS——它包含了构建触控式、原生外观 Web 应用程序所需的一切。如果您想更进一步，并从 JavaScript 代码访问联系人列表或摄像头等设备功能，那么您将需要 Cordova（也称为 PhoneGap）。PhoneGap 还允许您将 Web 应用程序编译成原生应用程序包。如果您不想为每个目标平台安装 SDK，可以使用 PhoneGapBuild 服务来构建您的包。最后，如果您拥有 DevExtreme，可以在 Visual Studio 中直接构建包。