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
56
精通 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
120
我的工作經驗 (到目前為止)
pingyen
2
430
網頁前端⼯程師與室內裝修師傅的相似之處
pingyen
0
96
JavaScript Closure
pingyen
1
120
HTML5 Sectioning Elements
pingyen
0
51
次世代搜尋引擎戰爭
pingyen
0
110
進階 JavaScript
pingyen
0
240
jQuery 入門
pingyen
0
65
Windows 市集應⽤用程式實例解說 (使⽤ JavaScript)
pingyen
0
110
Other Decks in Technology
See All in Technology
What’s new in Android development tools
yanzm
0
460
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
2
490
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
54
21k
AWS CDK 入門ガイド これだけは知っておきたいヒント集
anank
3
290
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
930
【あのMCPって、どんな処理してるの?】 AWS CDKでの開発で便利なAWS MCP Servers特集
yoshimi0227
4
290
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
470
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
300
インフラ寄りSREの生存戦略
sansantech
PRO
7
2.5k
Delegating the chores of authenticating users to Keycloak
ahus1
0
160
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
2
380
オフィスビルを監視しよう:フィジカル×デジタルにまたがるSLI/SLO設計と運用の難しさ / Monitoring Office Buildings: The Challenge of Physical-Digital SLI/SLO Design & Operation
bitkey
1
120
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
It's Worth the Effort
3n
185
28k
Become a Pro
speakerdeck
PRO
29
5.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Navigating Team Friction
lara
187
15k
Bash Introduction
62gerente
613
210k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
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