HTML5 JavaScript 移動開發框架：PhoneJS
大伙兒都知道有很多基于HTML5的移動應用框架。下一代開發工具將幫助開發者遠離那些難學和讓人費勁的原生SDK語言，如Objective-C,Java等。大家都知道，HTML5代表著交叉平臺如移動應用程序開發的未來。
那為什么呢？為什么HTML5會如此的流行？
整個世界將會掀起自帶設備(BYOD)支持HTML5的風潮。BYOD意味著開發者的應用將不會局限于單個平臺，因為消費者想讓應用出現在他們日常用的所有設備上。HTML5是可以一次編寫跨平臺運行，同時用戶體驗非常接近原生API開發的解決方案，同時讓開發者免去了不同平臺移植的痛苦。未來交叉平臺上的瀏覽器將都會支持HTML5,HTM5應用讓用戶體驗還是不錯的，有時很難區分是用原生API寫的程序還是HTML寫的。
支持跨平臺，縮短上市時間以及維護費用低只是HTML/Javascript眾多優點的幾種。不僅如此，HTML會減少在新興技術使用的長期風險，如在WinRT，ChromeOS，FirefoxOS，和Tizen等。
簡單的說，HTML/Javascript是唯一跨平臺的編程語言。
用HTML/Javascript有缺點嗎？當然，原生API程序將消耗更少的內存，同時將更快，用戶體驗將更好。但對于一般應用來說，HTML/Javascript就夠了，你可以用它創建跨平臺的移動應用程序，然后可以打包提交到應用商店。PhoneJs會這一切來的更快。
試著用用PhoneJS吧
PhoneJS是一個多樣，靈活和有效的交叉平臺HTML5移動應用開發框架。PhoneJS是單頁面應用(SPA)框架，它擁有視圖管理和URL導航。PhoneJS布局引擎在視圖中設置抽象的導航，這樣同一個應用程序根據不用平臺和不同的情況將顯示不同。PhoneJS內置豐富的觸摸優化的UI組件，這些組件都是在iOS，Android和Windows Phone 8中非常的流行。
為了能更好的理解PhoneJS開發的原則和怎樣創建和在應用商店發布應用，咱一起看一下叫TipCalculator的簡單例子。這個應用幫助你計算餐廳賬單。源碼在這。
你可以在AppStroke，Google Play，Windows Store上找到它。
PhoneJS布局和導航
TipCalculator是基于HTML5的單頁面(SPA)應用。開始頁是index.html，里面是標準的標簽，CSS和Javascript資源。它包括index.js Javascript腳本，你可以在PhoneJS的配置中找到：
TipCalculator.app = new DevExpress.framework.html.HtmlApplication({
namespace: TipCalculator,
defaultLayout: "empty"
});這里，我們必須指定默認的布局。這個例子中我們用了簡單選項和一個空布局。更多更高級的布局如交互式導航風格也是支持的，如下圖： 
很多服務器端框架都支持PhoneJS一些布局方法，包括Ruby on Rails 和ASP.NET MVC.更多有關視圖和布局的信息在我們在線文檔里可以找到。
為了在我們單頁面應用中配置視圖導航，我們需在index.js中添加如下行：
TipCalculator.app.router.register(":view", { view: "home" });這里注冊了一個簡單的導航，這樣就可以從URL(URL中的哈希段)中找到視圖名稱。主頁視圖是默認的設置。每一個視圖都有自己的HTML文件，并且都能連接到index.html：
<link rel="dx-template" type="text/html" href="views/home.html" />
PhoneJS 視圖模型
一個視圖模型代表著視圖的數據和操作。每一個視圖都有一個相同的基本名稱作為視圖自身，而且能返回視圖自身的視圖模型。在主頁視圖中，view/home.js腳本定義了home函數，這里面創建了響應式視圖模式。
TipCalculator.home = function(params) {
...
}; 賬單計算算法中輸入參數有3個：賬單數，付賬的人數，賬單百分比。這些變量的定義都是可見的，這些都會有相應的UI組件與之對應。
注意：可見函數是由Knockout.js提供的，它在PhoneJS中是構建視圖模型的關鍵。你可以在這了解Knockout.js更多的信息。
下面的代碼是home函數中初始化變量的：
var billTotal = ko.observable(),
tipPercent = ko.observable(DEFAULT_TIP_PERCENT),
splitNum = ko.observable(1);小費計算的結果有4種值：應付總數，每人付的總數，小費總數，每人付的平均數。每個值都是依賴可度量值(可計算的值)，當任何一種值發生變化時，這些值都要重新計算一邊。當然，這也是Knockout.js的功能。 var totalTip = ko.computed(...); var tipPerPerson = ko.computed(...); var totalPerPerson = ko.computed(...); var totalToPay = ko.computed(...);舉一個在商業邏輯中應用視圖模型的例子，那咱就看看上一個例子中的可度量值totalToPay。
計算的總額常常會四舍五入。依次，我們有兩個函數roundUp和roundDown來改變四舍五入的模式(另一個可度量值).
這些變化將引起totalToPay的重新計算，因為四舍五入的模式也會用到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;
}
});</pre>
當視圖中任何一個輸入參數發生變化時，舍入的做法不會讓用戶看到精確值。我們贊成如下的UI-bound度量值的改變：
billTotal.subscribe(function() {
roundMode(ROUND_NONE);
});
tipPercent.subscribe(function() {
roundMode(ROUND_NONE);
});
splitNum.subscribe(function() {
roundMode(ROUND_NONE);
});</pre>
在home.js中可以找到一個完整的視圖模型。它是一個典型視圖模型的簡單例子。
注意：在復雜的應用中，對于每一個獨立的視圖實現文件，實現一個可以模式化結視圖模式是很有用的。換句話說，如home.js不需要包含實現視圖模式的實現代碼，而是調一個幫助函數或者其它方式來實現。這樣就可以使整個結構變的簡單了。
PhoneJS 視圖
讓我們跳轉到在 view/home.html文件中標記的視圖。最上層的div元素呈現一個名稱為“home”的視圖。在這個div中包含了一個叫做‘conetent’的定位文本。
<div data-options="dxView : { name: 'home' }">
<div data-options="dxContent : { targetPlaceholder: 'content' }">
...
</div>
</div> 在視圖的頂部有一個toolbar
<div data-bind="dxToolbar: { items: [ { align: 'center', text: 'Tip Calculator' } ] }"></div>dxToolbar 是PhoneJS UI的一個窗口小組件。它是通過使用Knockout.js綁定標記定義的。 在工具欄下面是一個自定義控件。我們使用了2個能夠被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></pre>
在下面的編輯器里面展示了2個按鈕（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></pre>
這就完成了在描述文件中要求使用phonejs創建一個簡單的應用程序。正如你所看到的，這個過程就是這么的簡單，直接和直觀。
啟動，調試和發布
啟動和調試一個PhoneJS程序和其他基于HTML5的應用程序操作一樣，你必須把包含HTML、Javascript的文件夾和其它所需資源部署到web服務器上。因為PhoneJS是一個無服務器端組件的模型，并不關心你使用哪種web服務器，只要能通過HTTP協議訪問所需資源就行。一旦部署成功，你就可以在設備、模擬器打開應用，或者通過在桌面瀏覽器 導航欄輸入應用首頁的URL進行訪問。
如果你想通過桌面瀏覽器看到手機和平板上訪問應用一樣的效果，你需要重新設置瀏覽器的UserAgent屬性。 幸運的是，利用目前流行的瀏覽器提供的開發者工具很容易實現。
如果你不喜歡改UserAgent的設置，你可以用 Ripple Emulator來模擬不同設備來查看效果。
在這個層次上，你的web應用將會在移動設備的瀏覽器上像本地應用一樣運行。現在移動設備上的瀏覽器提供了訪問本地存儲、地理位置API，攝像頭的接口。多好的機會啊，你已經擁有了所有你需要的東西。
使用PhoneJS和PhoneGap創建應用并發布到APP Store
但是如果你想訪問設備的特性而瀏覽器沒有提供的話呢？如果你想把它作為一個app store里面的應用而不僅僅是一個網頁呢？那么你就得創建一個混合應用,實際上這類應用的標準是Apache Cordova又名 PhoneGap。
PhoneGap項目是一個允許你創建包含Webview(瀏覽器控制)和需要通過Javascript對PhoneGap提供的庫和插件進行原生調用的本地應用開發平臺。
你需要有對應平臺的SDK才能使用它，但是你不需要了解原生開發的具體細節,你只需要將你的HTML，CSS，JS文件放在正確的位置，并指定你應用的屬性比如名字、版本、圖標、快照等等。
為了發行你的應用，你需要在不同的商店注冊為開發人員。每個商店都有注冊過程的詳細文檔，這里就不羅嗦了。之后你將會收到一個認證來對你的應用進行簽名。
在你聽到HTML5/JS的目標是“一次編寫，到處運行”之后，你也許覺得每個平臺下SDK開發可能更是一個大挑戰。也許你得為你構建的混合應用付一些費用，但還好，一切都在控制中，因為有些服務組織和產品就能解決這個問題。
一個就是Adobe在線服務-PhoneGap，它可以構建一個免費的應用(多了要收費的)。如果你需要平臺認證文件，只需點擊下鼠標，這個服務商輕松為你構建所有平臺的認證。為了你的應用能順利提交到商店，你只需要準備應用的說明，推銷和相關信息內容，以及一些圖片即可。
對于Visual Studio開發者來說，DevExpress提過一個產品叫DevExtreme(里面包括PhoneJS)，這個產品可以幫助你直接在Microsoft Visual Studio集成開發環境構建iOS，Android和Windows Phone 8應用程序。
總結一下：如果你需要構建一個在移動設備上像原生API開發的網絡應用程序，你需要PhoneJS，它里面包含你想要的一切。如果你需要用Javascript更深層次的控制設備，如聯系人列表，照相等，你需要Cordova或者叫PhoneGap。PhoneGap允許你將網絡應用打包成本地安裝包。如果你不想安裝不同平臺的SDK，你可以用PhoneGap服務來構建你得應用，如果你有DevExtreme，你也可以在Visual Studio實現。