精通 JavaScript 作 Windows Store App 開發

7067c01e5e98f8b8211343054a908076?s=47 Ping-Yen Tsai
September 20, 2012

精通 JavaScript 作 Windows Store App 開發

Microsoft Tech‧Days Taiwan 2012

7067c01e5e98f8b8211343054a908076?s=128

Ping-Yen Tsai

September 20, 2012
Tweet

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()
  29. None
  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
  70. None
  71. 請協助完成「本課程問卷」,並在離開 教室時交給⼯工作⼈人員! 填妥⼤大會背包中的⼤大會問卷,可於活動 第三天兌換問卷禮哦! 感謝您的合作。

  72. None