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
44
精通 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
420
網頁前端⼯程師與室內裝修師傅的相似之處
pingyen
0
85
JavaScript Closure
pingyen
1
100
HTML5 Sectioning Elements
pingyen
0
46
次世代搜尋引擎戰爭
pingyen
0
99
進階 JavaScript
pingyen
0
220
jQuery 入門
pingyen
0
53
Windows 市集應⽤用程式實例解說 (使⽤ JavaScript)
pingyen
0
91
Other Decks in Technology
See All in Technology
10個のフィルタをAXI4-Streamでつなげてみた
marsee101
0
160
AWS re:Invent 2024 ふりかえり
kongmingstrap
0
130
Storage Browser for Amazon S3
miu_crescent
1
120
How to be an AWS Community Builder | 君もAWS Community Builderになろう!〜2024 冬 CB募集直前対策編?!〜
coosuke
PRO
2
2.8k
OpenShift Virtualizationのネットワーク構成を真剣に考えてみた/OpenShift Virtualization's Network Configuration
tnk4on
0
130
Amazon VPC Lattice 最新アップデート紹介 - PrivateLink も似たようなアップデートあったけど違いとは
bigmuramura
0
190
レンジャーシステムズ | 会社紹介(採用ピッチ)
rssytems
0
150
なぜCodeceptJSを選んだか
goataka
0
150
サイボウズフロントエンドエキスパートチームについて / FrontendExpert Team
cybozuinsideout
PRO
5
38k
10分で学ぶKubernetesコンテナセキュリティ/10min-k8s-container-sec
mochizuki875
3
320
マルチプロダクト開発の現場でAWS Security Hubを1年以上運用して得た教訓
muziyoshiz
2
2.1k
社外コミュニティで学び社内に活かす共に学ぶプロジェクトの実践/backlogworld2024
nishiuma
0
250
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
73
9.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.6k
Gamification - CAS2011
davidbonilla
80
5.1k
Bash Introduction
62gerente
608
210k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.3k
How To Stay Up To Date on Web Technology
chriscoyier
789
250k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
5
440
Thoughts on Productivity
jonyablonski
67
4.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
247
1.3M
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