精通 JavaScript 作 Windows Store App 開發 DEV308 精通 JavaScript 作 Windows Store App 開發 蔡秉諺 Vexed 中華電信 Xuite

課程簡介 Windows Store App 支援以原先用於網頁前端開發的 HTML/CSS/JavaScript 技術來進行 app 的開發，這使得原先做網頁開發的開發人員得以使用既有的知識及技能來開發 Windows 8 Apps。 本課程將會介紹在使用 JavaScript 開發 Windows 8 Apps 時的細節，以及瞭解如何運用開發環境提供的 WinJS 函式庫來開發 Windows 8 Apps。

微軟跟你說 用 JavaScript 開發 Windows Store App 和開發網頁前端很像 很像 !== 一樣

不一樣 顧名思義 可以上 Windows Store 可以碰到系統底層 可以離線操作

不一樣 多 Windows 、 WinJS 、 MSApp 物件 少不適合 App 環境函式 適應 App 環境行為改變 Cross-Domain AJAX

Windows 物件 不是 window 物件 Windows Runtime API (WinRT API) C++ C# VB JavaScript 共通

Windows 物件 不夠用、自己寫 WinRT Component C++ C# VB

WinJS 物件 Windows Library for JavaScript 100% JavaScript 寫成 原始碼可以看、不能改 跟 jQuery YUI 一樣 原始碼可以看、不能改

WinJS 物件 base.js WinJS ui.js WinJS.UI 看原始碼、比看文件快 鎖 搜尋 註解

不用 WinJS 能寫 Windows Store App 嗎？ 不用 jQuery 能寫網頁嗎？ 能、但麻煩 WinJS 存在意義 拉近 Windows 物件與網頁前端開發距離

WinJS 能在 Windows Store App 外用嗎？ base.js ui.js 開頭註解 This library is supported for use in Windows Store apps only. 原始碼找 hasWinRT 未使用 Windows 物件分出 為了 web context

少不適合 App 環境函式 不可開新視窗 無 alert、comfirm、prompt 無 open、moveBy、moveTo、resizeBy、resizeTo window.close() 中止 App 、例外使用 無 alert、comfirm、prompt Windows.UI.Popups.MessageDialog 替代 改變動線

替代 alert var md = new Windows.UI.Popups.MessageDialog('Hi'); md.showAsync().then(function() { // ... }); 關閉

替代 confirm var md = new Windows.UI.Popups.MessageDialog('Are you OK?'); md.commands.append(new Windows.UI.Popups.UICommand('Yes')); md.commands.append(new Windows.UI.Popups.UICommand('No')); md.showAsync().then(function (cmd) { console.log(cmd.label); });

替代 prompt 無直接方案 選項明確 Flyout 控制項 改變動線 Windows.UI.Popups.MessageDialog 同 confirm Flyout 控制項 無 Block UI

適應 App 環境行為改變 HTML and DOM API changes list <a > 的 href 、 target 屬性 innerHTML、document.write ... 安全機制 限制載入外部 JavaScript Cross-Domain AJAX

<a > 的 href 屬性 href="../a.html" 、 href="/b.html" App 內相對路徑、絕對路徑 href="ms-appx:///c.html" App 內絕對路徑 3 條斜線

為什麼 3 條斜線？ <a href="ms-appx://a3001e40-c3bf-4ae9-b713-da500ca42135/c.html" > Package 名稱 package.appmanifest 可見 Package 名稱省略 <a href="ms-appx:///c.html" > ms-appx-web:/// 、 ms-appdata:///

外部連結 <a href="http://bing.com" >Bing</a> 跳離 App 、 Modern IE 開啟

<a > 的 target 屬性 target="_blank" 外部連結 跳離 App 、 Modern IE 開啟 App 內連結 JavaScript 錯誤 <a href="b.html" target="if" >b</a> <iframe name="if" src="a.html" ></iframe> 正常運作 有寫跟沒寫一樣

innerHTML、document.write ... 安全機制 elm.innerHTML = '<p onclick="void(0)" >!</p>'; JavaScript 錯誤 elm.innerHTML = '</link>'; elm.innerHTML = toStaticHTML('…'); Safe

限制載入外部 JavaScript <script src="http://a.cc/b.js"></script> 檔案下載、加入 App 內 <script src="js/b.js"></script>

Cross-Domain AJAX XMLHttpRequest WinJS.xhr WinJS.xhr({ url : 'a.txt' }).then(function() { // … }); App 內檔案

MSApp 物件 額外審查？ 都不是好東西？ WinJS 原始碼找 Unsafe MSApp.execUnsafeLocalFunction

MSApp.execUnsafeLocalFunction innerHTML、document.write ... 安全機制 elm.innerHTML = '<p onclick="void(0)" >!</p>'; JavaScript 錯誤 MSApp.execUnsafeLocalFunction(function() { elm.innerHTML = '<p onclick="void(0)" >!</p>'; }); Pass

App 中顯示外部網頁 <a href="http://bing.com" >Bing</a> 外部連結、跳離 App 、 Modern IE 開啟 <iframe src="http://bing.com" ></iframe> iframe 內 local context、外 web context <iframe src="a.html" ></iframe> iframe 內外 local context 外部網頁 App 內網頁

web context 與 Windows Store App 外幾乎相同 無 Windows 物件 WinJS 部分可用 無 innerHTML、document.write ... 安全機制 不限制載入外部 JavaScript AJAX 不可 Cross-Domain WinJS 原始碼找 hasWinRT

web context App 內網頁 web context 載入 local context 、 web context 溝通 <iframe src="ms-appx-web:///a.html" ></iframe> local context 、 web context 溝通 HTML5 postMessage()

Windows Store App 用 jQuery JavaScript 錯誤 限制載入外部 JavaScript 檔案下載、加入 App 內 <script src="http://code.jquery.com/jquery.min.js" ></script> <script src="js/jquery.min.js" ></script>

Windows Store App 用 jQuery 3 個 JavaScript 錯誤 jQuery 初始時觸犯 innerHTML、document.write ... 安全機制 原始碼找 改 jQuery.support = (function() { ... })(); jQuery.support = MSApp.execUnsafeLocalFunction(function() { ... });

Windows Store App 用 jQuery 待續 …

Windows Store App 用 Google Maps JavaScript API Google Map 放 map.html 裡 web context 載入 <script src="https://maps.googleapis.com/maps/api/js?sensor=false" ></script> <iframe src="ms-appx-web:///map.html" ></iframe>

ECMAScript 5 Windows Store App 、 IE10 支援 不普及原因 WinJS 原始碼 不普及原因 IE8 + Windows XP ECMAScript 5 compatibility table 兇

ECMAScript 5 可 JavaScript 模擬 需瀏覽器底層支援 Array.prototype.forEach Object.keys … 需瀏覽器底層支援 Object getter setter Object.defineProperty Strict Mode

Object getter setter on 、 off 屬性 只可讀、不可寫 var strings = { get on() { return WinJS.Resources._getWinJSString("ui/on").value; }, get off() { return WinJS.Resources._getWinJSString("ui/off").value; }, }; 沒有 JavaScript 錯誤 on 、 off 屬性 只可讀、不可寫 var v = 1, o = { get p() { return v; }, set p(x) { v += x; } }; o.p = 2; console.log(o.p); // 3

Object.defineProperty Object.defineProperty(element, "winBindingToken", { configurable: false, writable: false, enumerable: false, value: bindingToken } ); configurable 、 writable 、 enumerable 以前存在、看不到、碰不到

Strict Mode "use strict"; Visual Studio 2012 自動加上 strict 模式 (JavaScript) @ MSDN arguments.callee 不能用 block 中不可宣告函式 call 、 apply 指定 this 行為改變 函式中 this 行為改變

arguments.callee 不能用 匿名函式中指向函式本身 最佳化 遞迴呼叫 "use strict"; setTimeout(function() { setTimeout(arguments.callee, 1000); }, 1000); JavaScript 錯誤 "use strict"; setTimeout(function f() { setTimeout(f, 1000); }, 1000); IE9 (含) 以下有 bug

block 中不可宣告函式 function declaration "use strict"; if(Windows) { function f() { console.log('hasWinRT'); } } JavaScript 錯誤 "use strict"; if(Windows) { var f = function() { console.log('hasWinRT'); } } 改用 function expression

call 、 apply 指定 this 行為改變 "use strict"; function f() { console.log(this); } f.call(null); // null f.call(undefined); // undefined 非 Strict 模式、 window "use strict"; f.apply(null, [1, 2, 3]); 使用目的為第二個參數

函式中 this 行為改變 IE9 、 bug IE10 (原) 、 bug "use strict"; f(); // undefined function f() { console.log(this); } 非 Strict 模式、 window IE9 、 bug IE10 (原) 、 bug

"use strict"; 能拿掉嗎？ 嚴謹好、事出必有因 煩 拿掉還沒碰到問題

WinJS 實踐 Promise 物件 Observable 物件 Single-page navigation

Promise 物件 WinJS.Promise 、 jQuery Deferred 物件 Promise/A Promise/B Promise/D WinJS.Promise 、 jQuery Deferred 物件 不太相同

WinJS.Promise 超過 0.5 秒、非同步、吐回 Promise 物件 與 callback 相比 messageDialog.showAsync() WinJS.Application.local.readText() WinJS.xhr 與 callback 相比 語意清晰

AJAX a.php -> b.php -> c.php var xhr = new XMLHttpRequest(); xhr.open('GET', 'a.php', true); xhr.onreadystatechange(function(http) { if(http.readyState == 4 && http.status == 200) { xhr.open('GET', 'b.php', true); xhr.onreadystatechange(function(http) { if(http.readyState == 4 && http.status == 200) { xhr.open('GET', 'c.php', true); xhr.onreadystatechange(function(http) { if(http.readyState == 4 && http.status == 200) { // ... } }) xhr.send(); } }) xhr.send(); } }); xhr.send();

AJAX a.php -> b.php -> c.php WinJS.xhr({ url: 'a.php' }) .then(function() { return WinJS.xhr({ url: 'b.php' }); }) .then(function() { return WinJS.xhr({ url: 'c.php' }); }) .done(function() { /* ... */ });

AJAX a.php b.php c.php 同時送出 等三者皆完成 再下一步 不用 Promise

AJAX a.php b.php c.php 同時送出 WinJS.Promise.join([ WinJS.xhr ({ url: 'a.php' }), WinJS.xhr ({ url: 'b.php' }), WinJS.xhr ({ url: 'c.php' })]) .done(function() { /* ... */ });

視情況 AJAX a.php 或 b.php 使用情境 例 多元登入 var xhr = XMLHttpRequest(); if(type === 'A') { xhr.open('GET', 'a.php', true); xhr.onreadystatechange(function(http) { if(http.readyState == 4 && http.status == 200) { // http -> result f(result); } }); xhr.send(); } else { xhr.open('GET', 'b.php', true); xhr.onreadystatechange(function(http) { if(http.readyState == 4 && http.status == 200) { // http -> result f(result); } }); xhr.send(); } function f(result) { /* ... */ } 使用情境 例 多元登入

視情況 AJAX a.php 或 b.php var promise; if(type === 'A') promise = WinJS.xhr({ url : 'a.php' }).then(function(data){ /* ... */ }); else promise = WinJS.xhr({ url : 'b.php' }).then(function(data) { /* ... */ }); promise.done(function(result) { /* ... */ });

有值直接用、沒值 AJAX a.php if(localStorage.x) f(localStorage.x); else { var xhr = XMLHttpRequest(); xhr.open('GET', 'a.php', true); xhr.onreadystatechange(function(http) { if(http.readyState == 4 && http.status == 200) { // http -> result f(result); } }); xhr.send(); } function f(result) { /* ... */ };

有值直接用、沒值 AJAX a.php WinJS.Promise.as 非 Promies 轉成 Promise var promise; if(localStorage.x) promise = WinJS.Promise.as(localStorage.x); else promise = WinJS.xhr({ url : 'a.php' }).then(function(data) { /* ... */ }); promise.done(function(result) { /* ... */ }); WinJS.Promise.as 非 Promies 轉成 Promise

自己兜 Promise 物件 Promise 內部 callback 實作 參考 WinJS.xhr 原始碼 var promise = new WinJS.Promise(function(complete, error, progress) { setTimeout(function() { // ... complete('DEMO'); }, 3000); }); Promise 內部 callback 實作 參考 WinJS.xhr 原始碼

setPromise 待 Promise 執行完畢、 Event 才完畢 app.onready = function (ev) { ev.detail.setPromise( WinJS.Application.roaming.writeText("time.txt", new Date()) ); }; 待 Promise 執行完畢、 Event 才完畢

Observable 物件 var target = document.getElementById('target'), a = { x : 1 }, b = WinJS.Binding.as(a); b.bind('x', function(newVal, oldVal) { target.innerHTML = newVal; }); console.log(target.innerHTML); // 1 b.x = 2; console.log(target.innerHTML); // 2 b.x = 3; console.log(target.innerHTML); // 3

Observable 物件 ECMAScript 5 Object getter setter WinJS.Binding Observable Proxy WinJS.Binding WinJS.Binding.as WinJS.Binding.define … WinJS 原始碼

Single-page navigation Quickstart: Using single-page navigation WinJS.UI.Pages 、 WinJS.Navigation 官方建議使用、較像 App

Single-page navigation WinJS.UI.Pages.define("/pages/home/home.html", { ready : function (element, options) { WinJS.Utilities.query("a").listen("click", function(ev) { ev.preventDefault(); WinJS.Navigation.navigate(ev.target.href); }, false); } }); 記得寫、否則

Windows App Cert Kit 簡稱 WACK 或 Windows ACK App 上架前 JavaScript 特有不通過 UTF-8 檔案編碼 Bytecode 產生

UTF-8 檔案編碼 檔案開頭要有 BOM jQuery 待續 … 官方說法、BOM 提高 15 – 20% 效能

Bytecode 產生 App 內 JavaScript 存為 Bytecode 不通過處理步驟 本機電腦 App 移除 組態選單 Release 專案 -> 市集 -> 建立應用程式套件 精靈、 Windows App Cert Kit

Bytecode 產生

Bytecode 產生

Bytecode 產生

Bytecode 產生

立即啟動！免費開發人員帳戶!! Windows Store / Windows Azure / Windows Phone 擁有 MSDN 訂閱 「取得代碼」後進行註冊 http://aka.ms/startmsdn 優惠內容: Windows Store / Windows Phone – 啟用後12個月, 完全免費！ Windows Azure – 訂閱期間, 每月固定的免費使用量！