Win10系列：JavaScript综合实例1

上面几个小节讲解了使用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" },

厘米大小的块儿。。。。", 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属性来标识一项菜肴。在完成定义数据源和与数据源操作相关的一些函数之后，接下来分别实现上上面提到的三个页面，先来看主页面。