javascript
Win10系列：JavaScript 的 WinJS库
WinJS 庫是由 CSS 和 JavaScript 文件組成的。使用Visual Studio 2012新建一個JavaScript 的Windows應用商店的空白應用程序項目，在項目的引用管理器中會默認添加這個庫，如圖19-1所示：
圖19-1 JavaScript 的 WinJS庫
上圖可以看出，WinJS庫主要包含ui-dark.css、ui-light.css、base.js和ui.js四個文件。其中ui-dark.css和ui-light.css是JavaScript主題風格庫，ui-dark.css表示昏暗風格，而ui-light.css表示明亮風格；base.js是WinJS的基礎類庫，包含了處理程序激活、掛起、異常等行為的函數；ui.js是WinJS控件庫，包含了一些Windows 應用商店應用的前臺界面常用的控件和控件樣式。
新建項目的default.html頁面會默認引用WinJS 庫中的ui-dark.css、base.js 和ui.js文件。相關代碼如下所示：
<!-- WinJS 庫的引用 -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
2. WinJS庫中的命名空間
為了防止同名函數和變量發生沖突，同時也可以方便代碼的管理，在WinJS庫中也使用了命名空間的概念來規劃庫中的資源，這些命名空間封裝了與Windows應用商店應用開發相關的對象和函數。通過相應的命名空間名稱能對該空間里的對象和函數進行訪問。接下來介紹WinJS庫中幾個主要的命名空間。
（1）WinJS.UI.Pages命名空間
WinJS.UI.Pages命名空間主要包含PageControl 控件和 define函數。其中PageControl 控件與其他的WinJS庫控件有所不同，它是一種自定義控件，需要使用WinJS.UI.Pages命名空間下的define函數來定義PageControl控件。define函數有兩個參數，一個是uri，另一個是members，uri為頁面的地址，members是對這個頁面中的成員進行的一些初始化操作，相關語法格式代碼如下所示：
var pageControl = WinJS.UI.Pages.define(uri, members);
（2）WinJS.Binding 命名空間
WinJS.Binding 命名空間里面主要包含在數據與模板綁定時所使用的一些對象，如List對象和Template對象。List對象用于表示數據列表，通過WinJS.Binding.List函數可以新建一個List對象，該函數有一個數組類型的參數，表示初始化列表的數據集合，語法格式代碼如下所示：
var JSlist = new WinJS.Binding.List(list);
例如先定義一個數據集合myData，然后使用WinJS.Binding.List函數創建一個itemsList數據列表，并用myData數據集合初始化該數據列表，相關代碼如下所示：
//數據集合
var myData = [
{ title: "Banana", text: "Low-fat frozen yogurt", picture: "images/Banana.png" },
{ title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/Lemon.png" },
{ title: "Marvelous Mint", text: "Gelato", picture: "images/Mint.png" },
{ title: "Creamy Orange", text: "Sorbet", picture: "images/Orange.png" },
{ title: "Succulent Strawberry", text: "Sorbet", picture: "images/Strawberry.png" }
];
// 創建一個List對象
var itemsList = new WinJS.Binding.List(myData);
在上面的代碼中，首先定義用于初始化列表的數據集合myData，myData是一個數組類型的對象，包含了五個數據對象，每個數據對象都有三個屬性title、text和picture，其中title屬性的值為數據對象的標題，text屬性的值為對數據對象的描述，picture屬性的值為數據對象中圖片的地址。接著以myData為參數調用WinJS.Binding.List函數創建一個itemsList數據列表。
Template對象即Template控件，用于格式化顯示數據內容。值得注意的是Template控件內部只能有一個根元素，向Template控件添加其他元素都要在這個根元素里添加。向頁面中添加Template控件可以通過在body元素中定義一個div元素，并將div元素的data-win-control屬性設置為"WinJS.Binding.Template"來完成。
下面演示向頁面中添加一個Template控件，并在Template控件里添加用于顯示圖片的img元素和用于顯示標題的h4元素，相應代碼如下所示：
<body>
<div id="templatebinding" data-win-control="WinJS.Binding.Template">
<div>
<img src="images/Banana.png"/>
<h4> Banana</h4>
</div>
</div>
</body>
在上面代碼中，首先在頁面的body元素里面定義一個div元素，并將div元素的data-win-control屬性設置為"WinJS.Binding.Template"來向頁面中添加Template控件。接下來向Template控件添加img和h4兩個元素，由于Template控件內部只能有一個根元素，因此先為Template控件添加一個div元素作為根元素。然后向根元素添加img元素和h4元素，并設置img元素的src屬性值為"images/Banana.png"，h4元素的顯示內容為"Banana"。
另外WinJS.Binding 命名空間內還有一個processAll函數，該函數用來查找綁定目標元素的data-win-bind屬性，通過此方法可以把數據源與綁定目標關聯在一起。后面在介紹簡單對象的數據綁定時會用到processAll函數。processAll函數中有兩個參數，一個是rootElement，另一個是dataContext。其中rootElement為綁定目標，dataContext為綁定源，語法格式代碼如下所示：
WinJS.Binding.processAll(rootElement, dataContext)；
（3）WinJS.UI命名空間
WinJS.UI命名空間提供一些常用的控件和初始化操作函數，例如DatePicker控件、ListView控件和AppBar控件等常用控件以及processAll函數，這里的processAll函數與上面介紹的processAll函數功能不同。接下來簡單介紹下WinJS.UI 命名空間里面的主要控件和函數。
DatePicker控件用于選擇一個date類型的值，如用戶可以選擇年份、月份、日期等信息。通過定義一個div元素，并將data-win-control屬性設置為"WinJS.UI.DatePicker"可以向頁面中添加DatePicker控件。相關代碼如下所示：
<div data-win-control="WinJS.UI.DatePicker"></div>
ListView控件用于以列表或者網格的形式顯示多條數據。可以通過定義一個div元素，并將data-win-control屬性設置為"WinJS.UI.ListView"來向頁面中添加ListView控件，還可以通過div元素的data-win-options屬性設置ListView控件的屬性和值，相關代碼如下所示：
<div data-win-control="WinJS.UI.ListView" data-win-options="{ property : value}"></div>
AppBar控件用于定義一個顯示操作命令的應用欄?？梢酝ㄟ^定義一個div元素，并將data-win-control屬性設置為"WinJS.UI.AppBar"來向頁面中添加AppBar控件，相關代碼如下所示：
<div data-win-control="WinJS.UI.AppBar"></div>
AppBarCommand控件是在AppBar控件中顯示的一條命令。一般通過定義一個button元素，并將button元素的data-win-control屬性設置為"WinJS.UI.AppBarCommand"來向AppBar控件中添加AppBarCommand命令控件，還可以通過button元素的data-win-options屬性設置AppBarCommand控件的屬性和值，相關代碼如下所示：
<div data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{ property : value}" ></button>
</div>
Rating控件用于方便地進行評級。該控件有個averageRating屬性，使用這個屬性開發者可以獲取或者設置平均評級。通過定義一個div元素，并將data-win-control屬性設置為"WinJS.UI.Rating"來向頁面中添加Rating控件，相關代碼如下所示：
<div data-win-control="WinJS.UI.Rating"></div>
HtmlControl控件用于加載一個HTML頁面。可以通過定義一個div元素，并將data-win-control屬性設置為"WinJS.UI.HtmlControl"來向頁面中添加HtmlControl控件，還可以使用div元素的data-win-options屬性把HtmlControl控件的uri屬性設置成所要加載的頁面地址，相關代碼如下所示：
<div data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/pages/HtmlControlPage.html'}" ></div>
processAll函數用于初始化頁面中WinJS庫控件?；诳瞻醉椖磕０逍陆ǖ膽贸绦蝽椖恐?#xff0c;default.js文件中默認調用了WinJS.UI.processAll 函數，相關代碼如下所示：
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
// 此應用程序剛剛啟動。在此處初始化應用程序。
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
}
//此應用程序已從掛起狀態重新激活。在此處恢復應用程序狀態。
else {
}
args.setPromise(WinJS.UI.processAll());
}
};
下面通過一個小示例演示如何使用Rating控件和WinJS.UI.processAll函數，首先在Visual Studio 2012中新建一個JavaScript 的Windows應用商店的空白應用程序項目，將其命名為rating。然后打開default.html文件，向body元素中添加Rating控件，相關代碼如下所示：
<body>
<div id="ratingControlHost" data-win-control="WinJS.UI.Rating"></div>
</body>
布置好前臺界面后，接下來打開default.js文件，為processAll函數添加初始化代碼，相關代碼如下所示：
args.setPromise(WinJS.UI.processAll().done(function () {
var control = document.getElementById("ratingControlHost").winControl;
control.averageRating = 3;
})
);
在上面代碼中，首先在setPromise函數里調用WinJS.UI.processAll 函數來初始化所添加的Rating控件，通過getElementById函數獲取id為"ratingControlHost"的Rating控件，然后把該控件的averageRating屬性設置為3。
（4）WinJS.Class命名空間
WinJS.Class命名空間包含一個define函數，用于自定義類。這個函數中有三個參數，一個是constructor，一個是 instanceMembers，另一個是staticMembers。其中constructor參數是類的構造函數，instanceMembers參數為類的成員函數和成員屬性，staticMembers參數為靜態成員函數和成員屬性，語法格式代碼如下所示：
var object = WinJS.Class.define(constructor, instanceMembers, staticMembers);
例如使用define函數定義一個Person類，該類有name屬性和一個靜態屬性harmsHumans，相關代碼如下所示：
var Person = WinJS.Class.define(
function (name) {
this.name = name;
},
{ name: "" },
{ harmsHumans: false });
//聲明并實例化Person對象
var person = new Person("paul");
person.name = "jack";
Person.harmsHumans = false;
上面代碼中，首先定義Person類，接著實例化一個Person類的對象person，并設置該對象的name屬性和harmsHumans屬性。由于harmsHumans屬性是一個靜態屬性，可以直接使用類名來調用。
轉載于:https://www.cnblogs.com/finehappy/p/6644553.html
總結
以上是生活随笔為你收集整理的Win10系列：JavaScript 的 WinJS库的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 深度探索c++对象模型读书笔记：Data
- 下一篇： JavaScript权威指南--wind