DEV308 精通 JavaScript 作 Windows Store App 開發 蔡秉諺 Vexed 中華電信 Xuite
課程簡介 Windows Store App 支援以原先用於網頁前端 開發的 HTML/CSS/JavaScript 技術來進行 ap p 的開發 這使得原先做網頁開發的開發人 員得以使用既有的知識及技能來開發 Windo ws 8 Apps 本課程將會介紹在使用 JavaScript 開發 Win dows 8 Apps 時的細節 以及瞭解如何運用開 發環境提供的 WinJS 函式庫來開發 Window s 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 環境函式 不可開新視窗 無 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 無直接方案 改變動線 選項明確 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-b71 3-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>'; JavaScript 錯誤 elm.innerhtml = tostatichtml(' '); Safe
限制載入外部 JavaScript <script src="http://a.cc/b.js"></script> JavaScript 錯誤 檔案下載 加入 App 內 <script src="js/b.js"></script>
Cross-Domain AJAX XMLHttpRequest Cross-Domain WinJS.xhr XMLHttpRequest Cross-Domain App 內檔案 WinJS.xhr({ url : 'a.txt' }).then(function() { // });
MSApp 物件 額外審查 都不是好東西 WinJS 原始碼找 Unsafe MSApp.execUnsafeLocalFunction
MSApp.execUnsafeLocalFunction innerhtml document.write... 安全機制 elm.innerhtml = '<p onclick="void(0)" >!</p>'; JavaScript 錯誤 Pass MSApp.execUnsafeLocalFunction(function() { elm.innerhtml = '<p onclick="void(0)" >!</p>'; });
App 中顯示外部網頁 <a href="http://bing.com" >Bing</a> 外部連結 跳離 App Modern IE 開啟 外部網頁 <iframe src="http://bing.com" ></iframe> iframe 內 local context 外 web context App 內網頁 <iframe src="a.html" ></iframe> iframe 內外 local context
web context 與 Windows Store App 外幾乎相同 無 Windows 物件 WinJS 原始碼找 haswinrt WinJS 部分可用 無 innerhtml document.write... 安全機制 不限制載入外部 JavaScript AJAX 不可 Cross-Domain
web context App 內網頁 web context 載入 <iframe src="ms-appx-web:///a.html" ></iframe> local context web context 溝通 HTML5 postmessage()
Windows Store App 用 jquery <script src="http://code.jquery.com/jquery.min.js" ></script> JavaScript 錯誤 限制載入外部 JavaScript 檔案下載 加入 App 內 <script src="js/jquery.min.js" ></script>
Windows Store App 用 jquery App 執行 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 <script src="https://maps.googleapis.com/maps/api/js?sensor=false" ></script> 限制載入外部 JavaScript 無法檔案下載 加入 App 內 <iframe src="ms-appx-web:///map.html" ></iframe> Google Map 放 map.html 裡 web context 載入
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 var strings = { }; get on() { return WinJS.Resources._getWinJSString("ui/on").value; }, get off() { return WinJS.Resources._getWinJSString("ui/off").value; }, on off 屬性 只可讀 不可寫 var v = 1, o = { get p() { return v; }, set p(x) { v += x; } }; o.p = 2; console.log(o.p); // 3 沒有 JavaScript 錯誤
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"; JavaScript 錯 settimeout(function() { 誤 settimeout(arguments.callee, 1000); }, 1000); "use strict"; settimeout(function f() { settimeout(f, 1000); }, 1000); IE9 ( 含 ) 以下有 bug
block 中不可宣告函式 function declaration "use strict"; JavaScript 錯 if(windows) { 誤 function f() { console.log('haswinrt'); } } "use strict"; if(windows) { } 改用 function expression var f = function() { console.log('haswinrt'); }
call apply 指定 this 行為改變 "use strict"; function f() { console.log(this); } f.call(null); // null f.call(undefined); // undefined "use strict"; f.apply(null, [1, 2, 3]); 非 Strict 模式 window 使用目的為第二個參數
函式中 this 行為改變 "use strict"; f(); // undefined 非 Strict 模式 window function f() { console.log(this); } IE9 bug IE10 ( 原 ) bug
"use strict"; 能拿掉嗎 嚴謹好 事出必有因 煩 拿掉還沒碰到問題
WinJS 實踐 Promise 物件 Observable 物件 Single-page navigation
Promise 物件 Promise/A Promise/B Promise/D WinJS.Promise jquery Deferred 物件 Promise/A 不太相同
WinJS.Promise 超過 0.5 秒 非同步 吐回 Promise 物件 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 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 物件 var promise = new WinJS.Promise(function(complete, error, progress) { settimeout(function() { //... complete('demo'); }, 3000); }); Promise 內部 callback 實作 參考 WinJS.xhr 原始碼
setpromise 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 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 訂閱期間, 每月固定的免費使用量
Resources Connect. Share. Discusss http://www.microsoft.com/taiwan/techdays2012/ Microsoft Certification & Training Resources http://www.microsoft.com/learning/zh/tw/ Resources for IT Professionals Resources for Developers http://social.msdn.microsoft.com/forums/zh-tw/categories http://social.technet.microsoft.com/forums/zh-tw/categories / /
請協助完成 本課程問卷 並在離開 教室時交給工作人員 填妥大會背包中的大會問卷 可於活動 第三天兌換問卷禮哦 感謝您的合作