Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
精通 JavaScript 作 Windows Store App 開發
Search
Ping-Yen Tsai
September 20, 2012
Technology
0
41
精通 JavaScript 作 Windows Store App 開發
Microsoft Tech‧Days Taiwan 2012
Ping-Yen Tsai
September 20, 2012
Tweet
Share
More Decks by Ping-Yen Tsai
See All by Ping-Yen Tsai
「台灣報紙新聞」與「台灣即時新聞」
pingyen
0
110
我的工作經驗 (到目前為止)
pingyen
2
410
網頁前端⼯程師與室內裝修師傅的相似之處
pingyen
0
82
JavaScript Closure
pingyen
1
100
HTML5 Sectioning Elements
pingyen
0
45
次世代搜尋引擎戰爭
pingyen
0
96
進階 JavaScript
pingyen
0
220
jQuery 入門
pingyen
0
50
Windows 市集應⽤用程式實例解說 (使⽤ JavaScript)
pingyen
0
88
Other Decks in Technology
See All in Technology
【shownet.conf_】ShowNet x 宇宙ネットワーク
shownet
PRO
0
420
普通の Web エンジニアのための様相論理入門 #yapcjapan / YAPC Hakodate 2024
ytaka23
5
1.5k
受託開発でもアジャイル開発できました / Agile in Contract Development
takaking22
9
4.5k
tenntennはなんでnewmoにnew社したの? - YAPC::Hakodate 2024
tenntenn
PRO
0
290
RAG: from dumb implementation to serious results
glaforge
0
150
ゼロから実装まで!機械学習入門
natsuki0726
0
190
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
2
240
【㈱アイモバイル】エンジニア向け会社説明資料
imobile
0
470
軽いノリで"自動化"に取り組んではいけないという話
tetsuyaooooo
1
570
Castor - Le Task Runner PHP qui simplifie votre Workflow
lyrixx
1
280
トークナイザー入門
payanotty
2
990
ドキュメントとの付き合い方を考える
leveragestech
1
140
Featured
See All Featured
Web Components: a chance to create the future
zenorocha
310
42k
RailsConf 2023
tenderlove
28
840
Code Reviewing Like a Champion
maltzj
519
39k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
It's Worth the Effort
3n
183
27k
The Invisible Side of Design
smashingmag
297
50k
GitHub's CSS Performance
jonrohan
1030
450k
Building Adaptive Systems
keathley
38
2.2k
Statistics for Hackers
jakevdp
796
220k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
Documentation Writing (for coders)
carmenintech
65
4.4k
Debugging Ruby Performance
tmm1
73
12k
Transcript
精通 JavaScript 作 Windows Store App 開發 DEV308 蔡秉諺 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 環境函式 不可開新視窗 無 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- 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>'; 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 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 載⼊入 <iframe src="ms-appx-web:///a.html" ></iframe>
local context 、 web context 溝通 HTML5 postMessage()
None
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 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 限制載⼊入外部 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>
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 錯誤 var v = 1, o = { get p() { return v; }, set p(x) { v += x; } }; o.p = 2; console.log(o.p); // 3
Object.defineProperty configurable 、 writable 、 enumerable 以前存在、看不到、碰不到 Object.defineProperty(element, "winBindingToken", {
configurable: false, writable: false, enumerable: false, value: bindingToken } );
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
"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 物件 Promise 內部 callback 實作 參考 WinJS.xhr 原始碼
var promise = new WinJS.Promise(function(complete, error, progress) { setTimeout(function() { // ... complete('DEMO'); }, 3000); });
setPromise 待 Promise 執⾏行完畢、 Event 才完畢 app.onready = function (ev)
{ ev.detail.setPromise( WinJS.Application.roaming.writeText("time.txt", new Date()) ); };
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 – 訂閱期間, 每⽉月固定的免費使⽤用量!
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
None
請協助完成「本課程問卷」,並在離開 教室時交給⼯工作⼈人員! 填妥⼤大會背包中的⼤大會問卷,可於活動 第三天兌換問卷禮哦! 感謝您的合作。
None