50 msdn magazine WinJS on Windows 8.1
Generally speaking, you don’t need to clean up any variable in
your code that’s entirely contained within the code for the element.
When the code for the control goes away, so do all of the internal
variables. However, if the code for the control references something
outside of itself—such as a DOM element, for example—then that
reference will need to be nulled out.
Finally, I add an explicit call to the dispose method in dispose.js
(/pages/dispose/dispose.js). Here’s the updated click event handler
for the button in dispose.html:
$("#dispose").click(function () {
var searchControl = $("#searchControl")[0];
searchControl.winControl.dispose();
searchControl.innerHTML = "";
});Now when I run the same JavaScript memory test, the diagnostics
session looks much better (see Figure 8).
Examining the memory heap, I can see the “searchControl”
9 ). None of the sub controls remain in memory and the associated
event handlers are gone, too (see Figure 10).
Improving Responsiveness:
Scheduler and Web Workers
Apps can become unresponsive when the UI is waiting to be
updated based on an external process. For example, if an app
makes multiple requests to a Web service in order to populate a UI
control, the control—the entire UI, for that matter—can get stuck
while waiting on the requests. Th is can cause the app to stutter or
seem unresponsive.
To demonstrate this, I create another test case where I popu-
late a Hub control with the “featured collections” provided by the
Library of Congress Web service. I add a new Page Control named
scheduler.html for the test case to my project (/pages/scheduler/
scheduler.js). In the HTML for the page, I declare a Hub control
that contains six HubSection controls (one for each featured
collection). Th e HTML for the Hub control inside the
tags in scheduler.html is shown in Figure 11.
Next, I get the featured collections data from the Web service. I’ll
add a new fi le named data.js to my solution (/js/data.js) that calls
the Web service and returns a WinJS.Binding.List object. Figure
12 shows the code for getting the featured collections data. Again,
remember to link to data.js from default.html.
Now I need to insert the data into the Hub control. In the
scheduler.js fi le (/pages/scheduler/scheduler.js), I’ll add some code
to the PageControl.ready function and define a new function,
populateSection. Th e complete code is shown in Figure 13.
Note in Figure 13 that I capture a reference to the promise
returned by the call to Data.getFeaturedCollections and then
explicitly cancel the promise when the page unloads. Th is avoids
a possible race condition in a scenario where the user navigates to
the page and then navigates away before the call to getFeatured-
Collections has returned.
When I press F5 and navigate to scheduler.html, I notice the
Hub control populates slowly aft er the page loads. It may be merely
annoying on my machine, but on less powerful machines the lag
could be signifi cant.
Visual Studio 2013 includes tools for measuring the respon-
siveness of the UI in a Windows Store app. In the Performance
and Diagnostics pane, I select the HTML UI Responsiveness
test and then click Start. Aft er the app starts running, I navigate
to scheduler.html and watch the results appear in the Hub
control. Once I’ve completed the task, I switch back to the
<div id="featuredHub" data-win-control="WinJS.UI.Hub">
<div data-win-control="WinJS.UI.HubSection"
data-win-options="{
header: 'Featured Collection 1'
}"
class="section">
</div>
<div data-win-control="WinJS.UI.HubSection"
data-win-options="{
header: 'Featured Collection 2'
}"
class="section">
</div>
<div data-win-control="WinJS.UI.HubSection"
data-win-options="{
header: 'Featured Collection 3'
}"
class="section">
</div>
<div data-win-control="WinJS.UI.HubSection"
data-win-options="{
header: 'Featured Collection 4'
}"
class="section">
</div>
<div data-win-control="WinJS.UI.HubSection"
data-win-options="{
header: 'Featured Collection 5'
}"
class="section">
</div>
<div data-win-control="WinJS.UI.HubSection"
data-win-options="{
header: 'Featured Collection 6'
}"
class="section">
</div>
</div>Figure 11 Hub and HubSection Controls
Declared in Scheduler.html
(function () {
"use strict";var data = LOCPictures.getCollections().
then(function (message) {
var data = message;
var dataList = new WinJS.Binding.List(data);var collectionTasks = [];
for (var i = 0; i < 6; i++) {
collectionTasks.push(getFeaturedCollection(data[i]));
}return WinJS.Promise.join(collectionTasks).then(function () {
return dataList;
});
});function getFeaturedCollection(collection) {
return LOCPictures.getCollection(collection);
}WinJS.Namespace.define("Data", {
featuredCollections: data
});
})();Figure 1 2 Getting the Data from the Web Service