當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

Win10系列：JavaScript 的 WinJS库

發布時間：2025/4/16 javascript 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 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文件。相關代碼如下所示：

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>

<h4> Banana</h4>

</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控件。相關代碼如下所示：

ListView控件用于以列表或者網格的形式顯示多條數據。可以通過定義一個div元素，并將data-win-control屬性設置為"WinJS.UI.ListView"來向頁面中添加ListView控件，還可以通過div元素的data-win-options屬性設置ListView控件的屬性和值，相關代碼如下所示：

AppBar控件用于定義一個顯示操作命令的應用欄。可以通過定義一個div元素，并將data-win-control屬性設置為"WinJS.UI.AppBar"來向頁面中添加AppBar控件，相關代碼如下所示：

AppBarCommand控件是在AppBar控件中顯示的一條命令。一般通過定義一個button元素，并將button元素的data-win-control屬性設置為"WinJS.UI.AppBarCommand"來向AppBar控件中添加AppBarCommand命令控件，還可以通過button元素的data-win-options屬性設置AppBarCommand控件的屬性和值，相關代碼如下所示：

</div>

Rating控件用于方便地進行評級。該控件有個averageRating屬性，使用這個屬性開發者可以獲取或者設置平均評級。通過定義一個div元素，并將data-win-control屬性設置為"WinJS.UI.Rating"來向頁面中添加Rating控件，相關代碼如下所示：

HtmlControl控件用于加載一個HTML頁面。可以通過定義一個div元素，并將data-win-control屬性設置為"WinJS.UI.HtmlControl"來向頁面中添加HtmlControl控件，還可以使用div元素的data-win-options屬性把HtmlControl控件的uri屬性設置成所要加載的頁面地址，相關代碼如下所示：

processAll函數用于初始化頁面中WinJS庫控件。基于空白項目模板新建的應用程序項目中，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>

</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
下一篇： ZeroC ICE的远程调用框架代理引