精通 JavaScript 作 Windows Store App 開發

Microsoft Tech‧Days Taiwan 2012

Transcript

1. 精通 JavaScript 作 Windows Store App 開發 DEV308 蔡秉諺 Vexed 中華電信 Xuite
2. 課程簡介 Windows Store App ⽀支援以原先⽤用於網⾴頁前端 開發的 HTML/CSS/JavaScript 技術來進⾏行 app 的開發，這使得原先做網⾴頁開發的開發 ⼈人員得以使⽤用既有的知識及技能來開發 Windows 8 Apps。
 
 本課程將會介紹在使⽤用 JavaScript 開發 Windows 8 Apps 時的細節，以及瞭解如何運 ⽤用開發環境提供的 WinJS 函式庫來開發 Windows 8 Apps。
3. 微軟跟你說 ⽤用 JavaScript 開發 Windows Store App
 
 和開發網⾴頁前端很像 很像 !== ⼀一樣
4. 不⼀一樣 顧名思義
 
 可以上 Windows Store 可以碰到系統底層 可以離線操作
5. 不⼀一樣 多 Windows 、 WinJS 、 MSApp 物件 少不適合 App 環境函式 適應 App 環境⾏行為改變 Cross-Domain AJAX
6. Windows 物件 不是 window 物件 Windows Runtime API (WinRT API) C++ C# VB JavaScript 共通
7. Windows 物件 不夠⽤用、⾃自⼰己寫 WinRT Component C++ C# VB
8. WinJS 物件 Windows Library for JavaScript 100% JavaScript 寫成 跟 jQuery YUI ⼀一樣 原始碼可以看、不能改
9. WinJS 物件 看原始碼、⽐比看⽂文件快 base.js WinJS
 ui.js WinJS.UI 鎖 註解 搜尋
10. 不⽤用 WinJS
 能寫 Windows Store App 嗎？ 不⽤用 jQuery 能寫網⾴頁嗎？ 能、但⿇麻煩 WinJS 存在意義 拉近 Windows 物件與網⾴頁前端開發距離
11. WinJS 能在
 Windows Store App 外⽤用嗎？ base.js ui.js 開頭註解 This library is supported for use in Windows Store apps only. 原始碼找 hasWinRT 未使⽤用 Windows 物件分出 為了 web context
12. 少不適合 App 環境函式 不可開新視窗 無 open、moveBy、moveTo、resizeBy、resizeTo window.close() 中⽌止 App 、例外使⽤用 無 alert、comfirm、prompt Windows.UI.Popups.MessageDialog 替代 改變動線
13. 替代 alert var md = new Windows.UI.Popups.MessageDialog('Hi');
 md.showAsync().then(function() { 
 // ...
 }); 關閉
14. 替代 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);
 });
15. 替代 prompt 無直接⽅方案 改變動線 選項明確 Windows.UI.Popups.MessageDialog 同 confirm Flyout 控制項 無 Block UI
16. 適應 App 環境⾏行為改變 HTML and DOM API changes list <a > 的 href 、 target 屬性 innerHTML、document.write ... 安全機制 限制載⼊入外部 JavaScript Cross-Domain AJAX
17. <a > 的 href 屬性 href="../a.html" 、 href="/b.html" App 內相對路徑、絕對路徑 href="ms-appx:///c.html" App 內絕對路徑 3 條斜線
18. 為什麼 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:///
19. 外部連結 <a href="http://bing.com" >Bing</a> 跳離 App 、 Modern IE 開啟
20. <a > 的 target 屬性 target="_blank" 外部連結 跳離 App 、 Modern IE 開啟 App 內連結 JavaScript 錯誤 <a href="b.html" target="if" >b</a>
 <iframe name="if" src="a.html" ></iframe> 正常運作 有寫跟沒寫⼀一樣
21. innerHTML、document.write ...
 安全機制 elm.innerHTML = '<p onclick="void(0)" >!</p>'; JavaScript 錯誤 elm.innerHTML = '</link>'; JavaScript 錯誤 elm.innerHTML = toStaticHTML('…'); Safe
22. 限制載⼊入外部 JavaScript <script src="http://a.cc/b.js"></script> JavaScript 錯誤 檔案下載、加⼊入 App 內 <script src="js/b.js"></script>
23. Cross-Domain AJAX XMLHttpRequest Cross-Domain WinJS.xhr XMLHttpRequest Cross-Domain WinJS.xhr({ url : 'a.txt' }).then(function() {
 // …
 }); App 內檔案
24. MSApp 物件 額外審查？ 都不是好東⻄西？ WinJS 原始碼找 Unsafe MSApp.execUnsafeLocalFunction
25. MSApp.execUnsafeLocalFunction innerHTML、document.write ... 安全機制 elm.innerHTML = '<p onclick="void(0)" >!</p>'; JavaScript 錯誤 MSApp.execUnsafeLocalFunction(function() {
 elm.innerHTML = '<p onclick="void(0)" >!</ p>';
 }); Pass
26. 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 內網⾴頁
27. web context 與 Windows Store App 外幾乎相同 無 Windows 物件 WinJS 部分可⽤用 無 innerHTML、document.write ... 安全機制 不限制載⼊入外部 JavaScript AJAX 不可 Cross-Domain WinJS 原始碼找 hasWinRT
28. web context App 內網⾴頁 web context 載⼊入 <iframe src="ms-appx-web:///a.html" ></iframe> local context 、 web context 溝通 HTML5 postMessage()
30. Windows Store App ⽤用 jQuery JavaScript 錯誤 限制載⼊入外部 JavaScript 檔案下載、加⼊入 App 內 <script src="http://code.jquery.com/jquery.min.js" ></script> <script src="js/jquery.min.js" ></script>
31. Windows Store App ⽤用 jQuery App 執⾏行 3 個 JavaScript 錯誤 jQuery 初始時觸犯 innerHTML、document.write ... 安全機制 原始碼找 改 jQuery.support = (function() { ... })(); jQuery.support = MSApp.execUnsafeLocalFunction(function() { ... }
32. Windows Store App ⽤用 jQuery 待續 …
33. Windows Store App ⽤用
 Google Maps JavaScript API 限制載⼊入外部 JavaScript 無法檔案下載、加⼊入 App 內 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>
34. ECMAScript 5 Windows Store App 、 IE10 ⽀支援 WinJS 原始碼 不普及原因 IE8 + Windows XP ECMAScript 5 compatibility table 兇
35. ECMAScript 5 可 JavaScript 模擬 Array.prototype.forEach Object.keys … 需瀏覽器底層⽀支援 Object getter setter Object.defineProperty Strict Mode …
36. 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 錯誤 var v = 1,
 o = { get p() { return v; },
 set p(x) { v += x; } }; 
 o.p = 2;
 console.log(o.p); // 3
37. Object.defineProperty configurable 、 writable 、 enumerable 以前存在、看不到、碰不到 Object.defineProperty(element, "winBindingToken", {
 configurable: false,
 writable: false,
 enumerable: false,
 value: bindingToken
 }
 );
38. Strict Mode "use strict"; Visual Studio 2012 ⾃自動加上 strict 模式 (JavaScript) @ MSDN arguments.callee 不能⽤用 block 中不可宣告函式 call 、 apply 指定 this ⾏行為改變 函式中 this ⾏行為改變
39. arguments.callee 不能⽤用 匿名函式中指向函式本⾝身 遞迴呼叫 "use strict"; 
 
 setTimeout(function() {
 setTimeout(arguments.callee, 1000);
 }, 1000); JavaScript 錯誤 "use strict"; 
 
 setTimeout(function f() {
 setTimeout(f, 1000);
 }, 1000); 最佳化 IE9 (含) 以下有 bug
40. 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
41. 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]); 使⽤用⺫⽬目的為第⼆二個參數
42. 函式中 this ⾏行為改變 IE9 、 bug IE10 (原) 、 bug "use strict";
 
 f(); // undefined
 
 function f() { console.log(this); } ⾮非 Strict 模式、 window
43. "use strict"; 能拿掉嗎？ 嚴謹好、事出必有因 煩 拿掉還沒碰到問題
44. WinJS 實踐 Promise 物件 Observable 物件 Single-page navigation
45. Promise 物件 Promise/A Promise/B Promise/D WinJS.Promise 、 jQuery Deferred 物件 Promise/A 不太相同
46. WinJS.Promise 超過 0.5 秒、⾮非同步、吐回 Promise 物件 messageDialog.showAsync() WinJS.Application.local.readText() WinJS.xhr 與 callback 相⽐比 語意清晰
47. 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();
48. 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() { /* ... */ });
49. AJAX a.php b.php c.php 同時送出 等三者皆完成
 
 再下⼀一步
 
 不⽤用 Promise
50. 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() { /* ... */ });
51. 視情況 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) { /* ... */ }
52. 視情況 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) { /* ... */ });
53. 有值直接⽤用、沒值 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) { /* ... */ };
54. 有值直接⽤用、沒值 AJAX a.php 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
55. ⾃自⼰己兜 Promise 物件 Promise 內部 callback 實作 參考 WinJS.xhr 原始碼 var promise = new WinJS.Promise(function(complete, error, progress) {
 setTimeout(function() {
 // ...
 complete('DEMO');
 }, 3000);
 });
56. setPromise 待 Promise 執⾏行完畢、 Event 才完畢 app.onready = function (ev) {
 ev.detail.setPromise(
 WinJS.Application.roaming.writeText("time.txt", new Date())
 );
 };
57. 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
58. Observable 物件 ECMAScript 5 Object getter setter Observable Proxy WinJS.Binding WinJS.Binding.as WinJS.Binding.define … WinJS 原始碼
59. Single-page navigation Quickstart: Using single-page navigation WinJS.UI.Pages 、 WinJS.Navigation 官⽅方建議使⽤用、較像 App
60. 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);
 }
 }); 記得寫、否則
61. Windows App Cert Kit 簡稱 WACK 或 Windows ACK App 上架前 JavaScript 特有不通過 UTF-8 檔案編碼 Bytecode 產⽣生
62. UTF-8 檔案編碼 檔案開頭要有 BOM jQuery 待續 … 官⽅方說法、BOM 提⾼高 15 – 20% 效能
63. Bytecode 產⽣生 App 內 JavaScript 存為 Bytecode 不通過處理步驟 本機電腦 App 移除 組態選單 Release 專案 -> 市集 -> 建⽴立應⽤用程式套件 精靈、 Windows App Cert Kit
64. Bytecode 產⽣生
65. Bytecode 產⽣生
66. Bytecode 產⽣生
67. Bytecode 產⽣生
68. ⽴立即啟動！免費開發⼈人員帳⼾戶!!
 Windows Store / Windows Azure / Windows Phone 擁有 MSDN 訂閱 「取得代碼」後進⾏行註冊 http://aka.ms/startmsdn 優惠內容: Windows Store / Windows Phone – 啟⽤用後12個⽉月, 完全免費！ Windows Azure – 訂閱期間, 每⽉月固定的免費使⽤用量！
69. Connect. Share. Discusss http://www.microsoft.com/taiwan/ techdays2012/ Microsoft Certification & Training Resources http://www.microsoft.com/learning/zh/tw/ Resources for IT Professionals http://social.technet.microsoft.com/Forums/ zh-tw/categories/ Resources for Developers http://social.msdn.microsoft.com/Forums/zh- tw/categories/ Resources
71. 請協助完成「本課程問卷」，並在離開 教室時交給⼯工作⼈人員！ 填妥⼤大會背包中的⼤大會問卷，可於活動 第三天兌換問卷禮哦！ 感謝您的合作。