原文：Tailoring Your Ext JS 5 Application for a Multi-Device World

概述

鑒于當(dāng)今設(shè)備和表單因素的擴(kuò)散，要針對(duì)所有這些可能性來(lái)優(yōu)化應(yīng)用程序已經(jīng)變得越來(lái)越復(fù)雜。雖然可以使 用CSS響應(yīng)這些環(huán)境條件，但典型的，如Ext JS應(yīng)用程序這樣，還是要包含大量的Javascript。在某些情況下，使用javascript來(lái)針對(duì)設(shè)備細(xì)節(jié)進(jìn)行編碼可能很簡(jiǎn)單，但也可能很快就會(huì) 失控。好消息是，在Ext JS 5.1，提供了幾個(gè)功能強(qiáng)大的工具來(lái)管理這種復(fù)雜性。

在先前的文章已經(jīng)介紹了許多這樣的技術(shù)。這有助于去了解與比較他們之間的異同，以便于選擇適合的工具來(lái)完成手頭的工作。

內(nèi)聯(lián)技術(shù)

要理解這些工具的最好方式就是通過(guò)一個(gè)簡(jiǎn)單的示例。下面假設(shè)需要針對(duì)不同的設(shè)置對(duì)面板定義不同的標(biāo)題。對(duì)于某些 設(shè)備的面板，在有足夠的空間，因而更長(zhǎng)的、描述性的標(biāo)題更適合，而毒藥小屏幕，則縮寫的標(biāo)題更適合。本練習(xí)的目的不在于講解如何使用最好的方式來(lái)完成這個(gè) 特定的目標(biāo)，而是要確保所采取的技術(shù)不會(huì)被更復(fù)雜的示例的細(xì)節(jié)所掩蓋。

platformConfig

屬性platformConfig是在Ext JS 5.1中新添加的，可以在類定義中使用，或者可以基于當(dāng)前平臺(tái)或設(shè)備分類在創(chuàng)建類的實(shí)例時(shí)的配置對(duì)象中使用。在視圖中使用時(shí)可能類似以下代碼：

Ext.define('App.view.summary.Manufacturing',?{extend:?'Ext.panel.Panel',?title:?'Mfg?Summary',?platformConfig:?{desktop:?{title:?'Manufacturing?Summary'}}});

以上代碼和下面的直接方法具有相同的效果：

Ext.define('App.view.summary.Manufacturing',?{extend:?'Ext.panel.Panel',?title:?testForDesktop???'Manufacturing?Summary':?'Mfg?Summary' });

以上代碼不是讓你去比較platformConfig和三樣運(yùn)算符的優(yōu)缺點(diǎn)，而是讓你去了解platformConfig是如何被聲明為了類的一部分的。因此，該方法的工作是與基類無(wú)關(guān)的。使用platformConfig而不使用內(nèi)聯(lián)邏輯的一個(gè)原因是這樣可以保證視圖作為一個(gè)純數(shù)據(jù)可以被安全被定義為JOSN格式。

還可以使用platformConfig來(lái)配置實(shí)例：

Ext.define('App.view.summary.Manufacturing',?{extend:?'Ext.panel.Panel',?items:?[{xtype:?'panel',?platformConfig:?{desktop:?{title:?'Manufacturing?Summary'},'!desktop':?{title:?'Mfg?Summary'}}}]});

也可以將上面代碼直接轉(zhuǎn)換為：

Ext.define('App.view.summary.Manufacturing',?{extend:?'Ext.panel.Panel',?items:?[Ext.merge({xtype:?'panel'},testForDesktop???{title:?'Manufacturing?Summary'}?:?{title:?'Mfg?Summary'})]});

然而，在這里使用platformConfig，是合并在initConfig方法中進(jìn)行處理的，也就是說(shuō)，將platformConfig屬性作為實(shí)例配置只有在類的構(gòu)造函數(shù)中調(diào)用了initConfig方法時(shí)才能實(shí)現(xiàn)。而這也是Ext.Widget、Ext.Component、大部分?jǐn)?shù)據(jù)包類（如store）和其他類使用Ext.mixin.Observable的原因。

在實(shí)例配置中通過(guò)修改對(duì)象的初始配置來(lái)使用platformConfig與在類聲明中修改類主體來(lái)使用platformConfig類似。

responsiveConfig

Ext JS 5引入了responsiveConfig并通過(guò)混入或插件來(lái)啟用它。responsiveConfig的不同之處在于它的規(guī)則和屬性不只在創(chuàng)建實(shí)例時(shí) 進(jìn)行計(jì)算，還會(huì)在設(shè)備的方向或可視區(qū)域發(fā)生改變時(shí)進(jìn)行計(jì)算。這相對(duì)于platformConfig來(lái)說(shuō)會(huì)增加一些開(kāi)銷，通過(guò)監(jiān)聽(tīng)窗口大小或方向的改變來(lái)處 理可能來(lái)得更有效。

可以稍微調(diào)整一下要求，以便根據(jù)設(shè)備的大小來(lái)進(jìn)行標(biāo)題響應(yīng)，而不是設(shè)備分類（“desktop”）。

????Ext.define('App.view.summary.Manufacturing',?{extend:?'Ext.panel.Panel',mixins:?['Ext.mixin.Responsive'],?responsiveConfig:?{'width?>=?600':?{title:?'Manufacturing?Summary'},'width?<?600':?{title:?'Mfg?Summary'}}});

由于以上類使用了responsiveConfig，因而在這里使用了混入，這比使用插件的方式更有好處，因?yàn)檫@樣可以避免為每要給實(shí)例創(chuàng)建一個(gè)插件。不過(guò)，在組件實(shí)例上使用的時(shí)候，就需要使用responsive 插件：

Ext.define('App.view.summary.Manufacturing',?{extend:?'Ext.panel.Panel',?items:?[{xtype:?'panel',plugins:?'responsive',?responsiveConfig:?{'width?>=?600':?{title:?'Manufacturing?Summary'},'width?<?600':?{title:?'Mfg?Summary'}}}]});

以上代碼要謹(jǐn)記的是寬度指的是可視區(qū)域的寬度，而不是組件寬度。

Ext.app.Profile

使用platformConfig和responsiveConfig，可以說(shuō)是外科手術(shù)式的調(diào)整。而使用配置文件，則可以管理更大的差異。配置文件被添加到Ext JS 5.1中，且作為應(yīng)用程序架構(gòu)的一部分，它最初是在Sencha Touch中引入的。

通常，使用配置文件可在應(yīng)用程序的頂層通過(guò)mainView（或Viewport）進(jìn)行切換，這意味著可以通過(guò)當(dāng)前的配置文件來(lái)控制應(yīng)用程序創(chuàng)建完全不同的視圖。

配置文件只可用于使用Ext.app.Application的應(yīng)用程序，且必須如以下代碼哪樣列出不同的配置文件：

Ext.define('App.Application',?{extend:?'Ext.app.Application',?profiles:?['Desktop','Mobile']});

在每一個(gè)配置文件類內(nèi)，isActive方法決定了該特定的配置文件應(yīng)否為當(dāng)前活動(dòng)的配置文件：

Ext.define('App.profile.Desktop',?{extend:?'Ext.app.Profile',?mainView:?'App.view.desktop.Main',?isActive:?function?()?{return?Ext.os.is.Desktop;},?launch:?function?()?{console.log('Launch?Desktop');}});

可以在平板或桌面中嘗試一下這個(gè)示例來(lái)看看配置文件的基本使用方式。也可以在這里查看示例的源代碼。

配置文件不需要使用mainView配置項(xiàng)，并可以選擇使用提供的launch方法來(lái)進(jìn)行自定義處理。只有當(dāng)前活動(dòng)的配置文件的launch方法會(huì)被調(diào)用。

Sencha Cmd的生成配置

如果使用Sencha Cmd來(lái)創(chuàng)建應(yīng)用程序，也可以使用它來(lái)創(chuàng)建配置文件，這功能是在Sencha Cmd 5.0中引入的。創(chuàng)建配置文件可以讓你只需要單獨(dú)一個(gè)HTML頁(yè)面（應(yīng)用程序）并在加載時(shí)選擇多個(gè)生成版本。這類似于如何去選擇一個(gè) Ext.app.Profile實(shí)例，而實(shí)際上是加載不同的生成版本。這種選擇的基礎(chǔ)可能是環(huán)境、存儲(chǔ)的Cookie，甚至可能是用戶賬號(hào)中存放在服務(wù)器 的數(shù)據(jù)。

無(wú)論是如何進(jìn)行檢測(cè)的，只有被選擇的生成的代碼和CSS會(huì)被加載。這與Ext.app.Profile需要在生成中包含所有配置文件的代碼不同。

Ext JS Kitchen Sink示例就是使用多生成配置文件來(lái)啟用主題與區(qū)域切換的。它根據(jù)每一個(gè)生成配置創(chuàng)建了兩個(gè)生成選擇，并在URL中通過(guò)查詢參數(shù)來(lái)選擇所需的生成配置文件，這時(shí)候，在index.html中的代碼類似如下代碼：

????var?Ext?=?Ext?||?{};Ext.beforeLoad?=?function(tags){var?theme?=?location.href.match(/theme=([\w-]+)/),locale?=?location.href.match(/locale=([\w-]+)/);?theme??=?(theme?&&?theme[1])?||(tags.desktop???'crisp'?:?'crisp-touch');locale?=?(locale?&&?locale[1])?||?'en';?Ext.manifest?=?theme?+?"-"?+?locale;};

小結(jié)

有了許多工具在手，針對(duì)特定情況選擇合適的工具是個(gè)問(wèn)題。對(duì)于只是在加載時(shí)進(jìn)行簡(jiǎn)單調(diào)整的情況，可以考慮platformConfig。對(duì)于更多動(dòng)態(tài)條件的情況，建議responsiveConfig。如果是更大規(guī)模的情況，可以考慮Ext.app.Profile。

如果需要在平板電腦而不是桌面上（甚至于基于用戶授權(quán)），讓應(yīng)用程序看起來(lái)完全不同，可以考慮Sencha Cmd生成配置，它可以從桌面生成中移除平板開(kāi)銷，反過(guò)來(lái)也一樣。

由于沒(méi)有放之四海而皆準(zhǔn)的解決方案，Ext JS提供了不同的工具來(lái)增加靈活性和效率。他們一起工作有助于確保應(yīng)用程序自然而然的適合廣泛的各種設(shè)備。

作者：Don Griffin
Don Griffin is the Engineering Manger for Ext JS and Sencha Touch. He was an Ext JS user for 2 years before joining Sencha and has over 20 years of software engineering experience on a broad range of platforms. His experience includes designing web application front-ends and back-ends, native GUI applications, network protocols and device drivers. Don’s passion is to build world class products that people love to use.

總結(jié)

以上是生活随笔為你收集整理的【翻译】针对多种设备定制Ext JS 5应用程序的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。