关键词：
上面几个小节讲解了使用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综合实例4
实现主页面和分类页面的之后，最后来看一下菜肴页面的实现，这个页面用于详细介绍某项菜肴或主食，如名称、图片和具体做法等。在pages文件夹里面添加一个名为foodDetail的文件夹，并在foodDetail文件夹里添加一个"页面控制"项... 查看详情
win10系列：javascript动画1
在应用程序中使用动画会使应用显得更加生动，进而给用户带来良好的视觉效果。例如，当用户将某个项添加到列表时，新项不会立即出现在列表中，而是采用动画形式到达相应位置，并且列表中的其他项也采用动画形式移动到... 查看详情
win10系列：javascript图形
...canvas元素会在页面上生成一个矩形的位图画布，可以使用JavaScript在画布上实时绘制图形图像。在绘制图形时，需要先调用画布的getContext函数获取与该画布相关的用于绘制图形（如2D图形、3D图形）的对象，然后使用这个对象调用... 查看详情
win10系列：javascript控件的使用
...的基本控件，如按钮和复选框；WinJS库控件是为开发基于JavaScript的Windows应用商店应用提供的新控件，如ListView、HtmlControl和PageControl等。下面首先介绍如何添加这两种类型的控件，然后介绍如何为控件注册事件处理函数和设计控... 查看详情
win10系列：javascript数据绑定
使用数据绑定可以使页面中元素的属性值与数据源中的数据同步，其中数据源可以来自数据库、文件以及自定义的数据等。在常用的数据绑定方法中，简单对象绑定是将HTML元素与一个仅包含数据的简单对象相绑定，模板绑定是... 查看详情
win10系列：javascript访问文件和文件夹
...门基于C#语言的详细讲解，本节主要介绍如何使用HTML5和JavaScript开发具有文件操作功能的Windows应用商店应用，首先来了解一下用于对文件或文件夹进行操作的文件选取器。19.4.1文件选取器正如前面章节C#语言中所介绍的，文件选... 查看详情
win10系列：javascript页内导航
...在一个页面内根据需要加载其他页面的内容，在开发基于JavaScript的Windows应用商店应用时，可以使用WinJS.Navigation.navigate函数传递要加载的页面地址并使用PageControlNavigator控件加载其他页面的内容。WinJS.Navigation.navigate函数以一个包... 查看详情
win10系列：javascript动画4
上面介绍的动画效果是通过Windows动画库创建的，这里的旋转动画是通过设置页面元素的style对象的相关属性来创建，此动画的效果是将界面元素沿着指定的方向进行旋转。下面介绍style对象的几个常用属性。transitionProperty：获取... 查看详情
win10系列：javascript模板绑定
WinJS库模板提供了一种格式化显示多条数据的便捷方式，通过这种方式可以将模板与ListView或FlipView等控件结合使用以控制数据的显示格式。定义一个WinJS库模板的方法与定义WinJS库控件的方法相似：在页面中添加一个div元素，将di... 查看详情
win10系列：javascript动画2
"重新定位"动画也是Windows动画库中的动画效果。"重新定位"动画的动画效果是指一个或一组元素移动到新的位置时，这些元素不是突然出现在新的位置，而是从一个位置移动到另一个位置。创建"重新定位"动画可以使用WinJS.UI.Anima... 查看详情
win10系列：javascript写入和读取文件
正如上面的内容中所提到的，文件保存选取器用于保存文件，通过Windows.Storage.Pickers命名空间中的FileSavePicker类的pickSaveFileAsync函数可以向指定的文件系统位置中保存一个文件。文件保存之后，还可以对其进行读写操作，如果是向... 查看详情
win10系列：javascript动画3
"交叉进出"动画也是Windows动画库中的动画效果。"交叉进出"动画的动画效果是在应用程序界面上隐藏一个元素并同时在相同位置显示另一个元素的时候，被隐藏的元素渐消失在应用程序界面上，而将要显示的元素渐显示在应用程... 查看详情
win10系列：javascript页面导航
页面导航是在开发应用的过程中使用频率较高的技术，其中比较常用的导航方式有多页导航和页内导航，采用多页导航方式的应用程序包含一系列的页面，在一个页面中加入另一个页面的链接地址后，单击链接将跳转到指定页面... 查看详情
win10系列：javascript多媒体
在应用程序的日常使用中，经常会使用多媒体播放器来播放多媒体文件，包括视频、音频等，因此对于开发者来说，学习多媒体播放技术对开发应用是很有帮助的。本小节主要介绍如何使用HTML5和JavaScrip实现播放本地视频。想要... 查看详情
win10系列：javascript获取文件和文件夹列表
在应用程序中有时可能需要获取用户库中的内容，以便执行相关的操作。如果要获取某个用户库中的内容，需要先获取到这个用户库，获得用户库可以通过Windows.Storage命名空间中的KnownFolders类的相应属性来实现，可用属性包括doc... 查看详情
日常系列leetcode《13·综合应用1篇》(代码片段)
数据规模->时间复杂度<=10^4😮(n^2)<=10^7:o(nlogn)<=10^8:o(n)10^8<=:o(logn),o(1)综合<直接模拟、经典查找>lc1【top100】：两数之和https://leetcode.cn/problems/two-sum/提示：2< 查看详情
综合条目整理
目录说明科学ADVenture系列美妙Pretty☆系列物语系列机动战士高达系列TYPE-MOON系列とある系列灰色系列新海诚作品说明综合条目只记录各作的主条目，具体各作包含哪些TV，OVA，OAD，剧场版，动画电影等请进入主条目查阅。可以按... 查看详情
javascript数组(代码片段)
JavaScript Array（数组） 对象数组对象的作用是：使用单独的变量名来存储一系列的值。在线实例创建数组,为其赋值：实例varmycars=newArray();mycars[0]="Saab";mycars[1]="Volvo";mycars[2]="BMW";尝试一下»页面底部你可以找到更多的实例。... 查看详情