Download presentation
Presentation is loading. Please wait.
1
精通 JavaScript 作 Windows Store App 開發
DEV308 精通 JavaScript 作 Windows Store App 開發 蔡秉諺 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 環境函式 不可開新視窗 無 alert、comfirm、prompt
無 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 無直接方案 選項明確 Flyout 控制項 改變動線 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>'; elm.innerHTML = toStaticHTML('…'); Safe
22
限制載入外部 JavaScript <script src="http://a.cc/b.js"></script>
檔案下載、加入 App 內 <script src="js/b.js"></script>
23
Cross-Domain AJAX XMLHttpRequest WinJS.xhr
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=" ></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 載入 local context 、 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=" ></script> <script src="js/jquery.min.js" ></script>
31
Windows Store App 用 jQuery
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
Google Map 放 map.html 裡 web context 載入 <script src=" ></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 錯誤 on 、 off 屬性 只可讀、不可寫 var v = 1, o = { get p() { return v; }, set p(x) { v += x; } }; o.p = 2; console.log(o.p); // 3
37
Object.defineProperty
Object.defineProperty(element, "winBindingToken", { configurable: false, writable: false, enumerable: false, value: bindingToken } ); configurable 、 writable 、 enumerable 以前存在、看不到、碰不到
38
Strict Mode "use strict"; Visual Studio 2012 自動加上
strict 模式 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 IE9 、 bug IE10 (原) 、 bug
43
"use strict"; 能拿掉嗎？ 嚴謹好、事出必有因 煩 拿掉還沒碰到問題
44
WinJS 實踐 Promise 物件 Observable 物件 Single-page navigation
45
Promise 物件 WinJS.Promise 、 jQuery Deferred 物件 Promise/A Promise/B
Promise/D WinJS.Promise 、 jQuery Deferred 物件 不太相同
46
WinJS.Promise 超過 0.5 秒、非同步、吐回 Promise 物件 與 callback 相比
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 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
55
自己兜 Promise 物件 Promise 內部 callback 實作 參考 WinJS.xhr 原始碼
var promise = new WinJS.Promise(function(complete, error, progress) { setTimeout(function() { // complete('DEMO'); }, 3000); }); Promise 內部 callback 實作 參考 WinJS.xhr 原始碼
56
setPromise 待 Promise 執行完畢、 Event 才完畢
app.onready = function (ev) { ev.detail.setPromise( WinJS.Application.roaming.writeText("time.txt", new Date()) ); }; 待 Promise 執行完畢、 Event 才完畢
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 WinJS.Binding
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 訂閱 「取得代碼」後進行註冊 優惠內容: Windows Store / Windows Phone – 啟用後12個月, 完全免費！ Windows Azure – 訂閱期間, 每月固定的免費使用量！
Similar presentations
