Win10系列：JavaScript綜合執行個體1

標籤：先來   市集   studio   綜合   win   資料集   upd   中國   sha   

上面幾個小節講解了使用HTML5和JavaScript語言開發Windows 市集應用時會用到的一些技術，本小節將前面介紹的知識融合在一起建立一個菜譜應用程式，協助讀者更進一步地理解和掌握這些知識。

此菜譜應用程式主要的功能是介紹一些菜肴和主食的做法，其中包含三個頁面：第一個頁面為首頁面，用於按類別顯示一些菜肴和主食；第二個頁面為分類頁面，顯示某個類別的資訊和屬於該類別的菜肴或主食；第三個頁面為菜肴頁面，顯示某項菜肴或主食的詳細資料，如名稱、圖片和具體做法。這三個頁面可以相互跳轉，例如，在首頁面中單擊某個類別的名稱時，就會跳轉到分類頁面；在首頁面中或分類頁面中單擊某項菜肴時，就會跳轉到該菜肴的詳細資料頁面。

根據頁面劃分，這裡把該應用程式分成了三個部分來介紹，先是首頁面的建立，然後是分類頁面的建立，最後是菜肴頁面。

首先在Visual Studio 2012中建立一個JavaScript的Windows市集的空白應用程式項目，並命名為MenuApplication。然後在images檔案夾裡添加三個建立檔案夾，並分別命名為"fenlei" 、

"shucai" 、"roulei"，接著向三個檔案夾裡添加所需要的圖片。接下來在js檔案夾裡建立一個JavaScript檔案，將其命名為menuData。開啟menuData.js檔案，定義資料來源和與操作資料源相關的一些函數，相關代碼如下所示：

(function () {

"use strict";

//定義菜肴的類別

var sampleGroups = [

{ key: "shucai", title: "蔬菜類：", backgroundImage: "images/fenlei/shucai.jpg", description: "蔬菜中有許多維生素..." },

{ key: "roulei", title: "肉類：", backgroundImage: "images/fenlei/roulei.jpg", description: "肉裡含有許多人體必需氨基酸，肉的蛋白質很豐富，另外吃肉可以延長人的饑餓感" },

];

//定義各種菜肴，同時設定所屬的類別

var sampleItems = [

{ group: sampleGroups[0], title: "拌黃瓜", description: "碧綠色，脆嫩,清香，鮮鹹", content: "1. 金針菇切去頭部。。。。", backgroundImage: "images/shucai/banhuanggua.jpg" },

{ group: sampleGroups[0], title: "紅燒冬瓜", description: "味鮮鹹，色澤紅亮，冬瓜軟爛，香鮮味美", content: "1. 冬瓜去皮去瓤。。。。", backgroundImage: "images/shucai/hongshaodonggua.jpg" },

{ group: sampleGroups[0], title: "蒜香茄子", description: "蒜香濃鬱，鹹鮮可口,高血壓的食療佳品", content: "1. 準備食材，長茄子兩個。。。。", backgroundImage: "images/shucai/suanxiangqiezi.jpg" },

{ group: sampleGroups[1], title: "紅燒肉", description: "紅燒肉是熱菜，以五花肉為製作主料，紅燒肉的烹飪技巧以砂鍋為主，口味屬於甜味。", content: "1. 五花肉切成2厘米大小的塊兒。。。。", backgroundImage: "images/roulei/hongshaorou.jpg" },

{ group: sampleGroups[1], title: "紅燒排骨", description: "紅燒排骨傳統川菜。此菜味道香鹹，排骨酥爛，色澤金紅。", content: "1. 鍋內燒開水，放入斬件排骨。。。。 ", backgroundImage: "images/roulei/hongshaopaigu.jpg" },

{ group: sampleGroups[1], title: "回鍋肉", description: "回鍋肉是中國川菜中一種烹調豬肉的傳統菜式，川西地區還稱之為熬鍋肉。", content: "1. 連皮豬肉。。。。", backgroundImage: "images/roulei/huiguorou.jpg" },

];

//建立一個List對象

var list = new WinJS.Binding.List();

//遍曆資料來源，並將菜肴添加到相應的分組中

sampleItems.forEach(function (item) {

list.push(item);

});

//使用key和group屬性值來分組

var groupedItems = list.createGrouped(

function groupKeySelector(item) { return item.group.key; },

function groupDataSelector(item) { return item.group; }

);

//返回包含指定分類的菜肴項的List

function getItemsFromGroup(group) {

return list.createFiltered(function (item) { return item.group.key === group.key; });

}

//通過菜肴分類的key值擷取某一分類

function resolveGroupReference(key) {

for (var i = 0; i < groupedItems.groups.length; i++) {

if (groupedItems.groups.getAt(i).key === key) {

return groupedItems.groups.getAt(i);

}

}

}

// 擷取菜肴的標識

function getItemReference(item) {

return [item.group.key, item.title];

}

//通過菜肴的標識擷取相應的某項菜肴

function resolveItemReference(reference) {

for (var i = 0; i < groupedItems.length; i++) {

var item = groupedItems.getAt(i);

if (item.group.key === reference[0] && item.title === reference[1]) {

return item;

}

}

}

WinJS.Namespace.define("menuData", {

items: groupedItems,

groups: groupedItems.groups,

getItemsFromGroup: getItemsFromGroup,

getItemReference: getItemReference,

resolveGroupReference: resolveGroupReference,

resolveItemReference: resolveItemReference

});

})();

在上面的代碼中，首先定義一個匿名函數，在這個匿名函數中，初始化了兩個數群組類型的資料集合sampleGroups和sampleItems，其中sampleGroups資料集合包含菜肴的類別資訊，sampleItems資料集合包含各種菜肴的資訊，在這裡只列出了部分類別和菜肴。然後調用WinJS.Binding.List建構函式定義一個名為list的對象，並使用forEach函數指定sampleItems資料集合中的每一個資料對象調用一個匿名函數，在這個匿名函數中調用push函數將sampleItems資料集合中的每條菜肴資訊添加到list對象中。接下來使用list對象的createGrouped函數對list對象中的每條菜肴資訊進行分類，並將分類後的菜肴資訊儲存到groupedItems對象中。createGrouped函數有兩個函數類型的參數groupKeySelector和groupDataSelector，其中groupKeySelector函數返回菜肴類別標識key， groupDataSelector函數返回菜肴的group屬性值。

接著定義getItemsFromGroup函數，該函數會根據參數group，調用list對象的createFiltered函數來獲得一個類別中的所有菜肴。然後定義resolveGroupReference函數，在函數中遍曆groups列表中的所有菜肴類別，如果菜肴類別的標識key與參數key相同，就返回這個菜肴類別。接下來定義getItemReference函數，根據參數item，返回item.group.key和item.title兩個屬性作為菜肴的標識。繼續定義resolveItemReference函數，在函數中首先遍曆所有的菜肴，如果某項菜肴所在類別的標識與參數reference數組的第一個元素相同，並且菜肴的名稱與reference數組的第二個元素相同，就返回這項菜肴。最後定義一個名為"menuData"的命名空間，將程式所要使用的資料和上面定義的這些函數添加到該命名空間內，這樣在其他檔案中就可以通過命名空間引用它們。

需要注意的是，本樣本中通過key屬性來標識一個菜肴類別，通過類別的key屬性和菜肴的title屬性來標識一項菜肴。在完成定義資料來源和與資料來源操作相關的一些函數之後，接下來分別實現上上面提到的三個頁面，先來看首頁面。

Win10系列：JavaScript綜合執行個體1