2013年8月30日 星期五

TypeScript 安裝



TypeScript會安裝到C:\Program Files(x86)\Microsoft SDKs\TypeScript資料夾內


安裝後,VS2012會多出一個TypeScript的範本


新增檔案的時後,也會多出一個TypeScript的檔案類型


在檔案總管中,TypeScript會包含js和map檔案
建置動作會是TypeScriptCompile

在設定選項中,會有存檔編譯的選項


另外安裝Web Essentials套件會更方便,首先打開擴充功能和更新


選擇Web Essentials 2012安裝


安裝後在編輯TypeScript檔案時,會出現預覽視窗



選項中的會有更多設定


P.S. Web Essentails 套件在V3.0版本中,已經移除所有對TypeScript的支援
原因是VS2013已經內建了
如果在VS2012還要使用之前提供的功能的話,建議安裝V2.9版就好了

TypeScript 筆記


TypeScript 安裝


參考資源

TypeScript 官網

TypeScript Revealed
ISBN:978-1-4302-5725-7

2013年8月29日 星期四

Knockout.js JSON處理

ko.toJS 將ViewModel轉成JavaScript物件
ko.toJSON 將ViewModel轉成JSON格式
ko.mapping.fromJS 合併JS物件到原有的ViewModel物件
ko.mapping.fromJSON 合併JSON資料到原有的ViewModel物件

ko.mapping需另外下載,可透過nuget取得


Knockout.js 自訂範本

template是用來把複雜或是可重覆使用的輸出格式,獨立出來的一個功能
使用name來指定範本的id,data用來指定傳入範本的資料,as為資料的別名
再配合foreach、if等流程控制來輸出資料

Knockout.js 表單處理

click 觸發click事件的動作
event 繫結自訂的事件處理
submit 觸發表單送出事件的動作
enable 是否啟用
disable 是否停用
value 繫結表單內容
hasFocus 是否得到焦點
checked 是否核取
options 繫結下拉選單
optionsText為文字內容
optionsValue為下拉選單的值
selectedOptions 可複取的下拉選單所選取的資料

Knockout.js 流程控制

foreach 列舉ko.observableArray繫結的內容
if 條件判斷為true才處理該子元素內容
ifnot 反向判斷
with 指向物件參考,讓子元素內容可以直接使用該物件的屬性
而不需要使用完整的物件名稱



Knockout.js 資料繫結

visible 控制是否為可見元素
text 顯示文字內容
html 顯示html內容
css 設定css類別
style 自訂css樣式
attr 自訂html屬性

Knockout.js 簡介

Knockout.js是一套Javascript Library,主要用來處理網頁上MVVM模式的資料更新與繫結
要引用Knockout最方便的方式,不外就是透過Nuget

Scripts資料夾中就會出現Knockout的檔案
knockout-{version}.js為壓縮版本
knockout-{version}.debug.js為末壓縮版本
knockout的使用方式,首先宣告一個ViewModel類別,然後透過ko.applyBindings來繫結這個類別
除了顯示資料之外,也支援雙向繫結
以下是一個簡單的例子

2013年8月16日 星期五

HTTP Status Code

HTTP Status Code

100~199 訊息狀態碼

StatusCode ReasonPhrase 說明
100 Continue Client端有一個Message要發送給Server
但希望在發送之前先看一下Server是否會接受這個Message
所以在Request表頭中加入一個名稱Expect值為100 Conutinue
Server端收到後如果可以接受,就馬上回應這個狀態碼給Client
表示收到了Request的初始部份,要求Client端繼續
通常用於傳送接收一個大的Message時的優化
101 Switching Protocols 伺服器正在切換成Request封包表頭中
Update所指定的通訊協定

200~299 成功狀態碼

Status Code Reason Phrase 說明
200 OK 就是OK
201 Created 資源已建立,用於回應建立資源的要求,例如PUT
回應的訊息中,應該在表頭中加入Location
用來告訴Client建立好的資源URL位置
202 Accepted 請求已被接受,但伺服器還未執行任何動作,也不能保證會完成
簡單的說,就是朕知道了...
203 Non-Authoritative
Information
Header中包含的訊息,並不是來自於要求的伺服器
而是來自資源的一個副本
204 No Content 用來告訴瀏覽器,在不轉頁的情況下,刷新表單頁面
205 Reset Content 用來告訴瀏覽器,Reset目前頁面中的表單元素
206 Partial Content Client透過Request Header中的Range來要求部份或某個範圍的資源
這個狀態碼就是成功執行了一個部份或是某個範圍的請求
Response中的Header必須包含Content-Range、Date
以及ETag或是Content-Location

300~399 重轉向定位狀態碼

Status Code Reason Phrase 說明
300 Multiple Choices 訊息類狀態碼
301 Moved Permanently 所要求的資源已移除,永久轉向
Response Header中的Location為新的URL
之前的要求都要改成新的URL
HTTP/1.0版本使用
302 Found 和301狀態碼類似
差別在於Header中Location給出的URL是暫時性的
之後的要求還是要用原來的URL
303 See Other 回應Client端另一個URL來獲得資源
主要目的是允許POST請求的回應轉向到某個資源
304 Not Modified 通過Client的Request Header來判斷
如果資源末被修改的話,就回應這個狀態碼
305 Use Proxy 必須通過一個代理來訪問資源
代理的位置由Header中的Location給出
306 尚未使用 該狀態碼目前尚未使用
307 Temporary Redirect 和301狀態碼類似
差別在於Header中Location給出的URL是暫時性的
之後的要求還是要用原來的URL
HTTP/1.1版本使用

400~499 客戶端錯誤狀態碼

Status Code Reason Phrase 說明
400 Bad Request 告訴客戶端它發送了一個錯誤的要求
401 Unauthorized 告訴客戶端在要求資源之前,需要先經過身份驗證
402 Payment Required 目前尚未使用
403 Forbidden 告訴客戶端服務已被拒絕了
拒絕的原因可在回應的主體部份來描述
但這個狀態碼通常是不想說明拒絕原因的時後使用的
404 Not Found 找不到所要求的資源
405 Method Not Allowed 告訴客戶端收到不支援的HTTP Method
並在回應的表頭中以Allow告知可支援的Method
406 Not Acceptable Client端可在表頭中用Accept告之可接受的資源型態
當Server端沒有所指定的資源型態時,用這個狀態碼來告之
通常會在回應的表頭中,加上一些訊息
讓Client端知道為什麼要求無法滿足
407 Proxy Authentication Required 和401狀態碼類似
但目標是要求對資源進行認證的代理伺服器
408 Request Timeout 完成要求的時間太長,伺服器所回應的狀態碼
並關閉連接
逾時時間以伺服器設定為主
409 Conflict 和訴客戶端,資源發出衝突
410 Gone 和404類似
只是伺服器曾經擁有該資源,只是被移除了
411 Length Required 告訴客戶端表頭中需要包含Content-Length
412 Preconditaion Failed 客戶端發起條件請求,其中一個條件失敗了的時後使用的回應碼
413 Request Entity Too Large 客戶端發送的Message比伺服器能夠處理的要大時
用這個狀態碼回應
414 Request URI Too Long 客戶端發送的URL比伺服器能夠處理的長度要長時
要這個狀態碼回應
415 Unsupported Media Type 伺服器無法支援客戶端發送的mime type時
用這個狀態碼回應
416 Requested Range Not Satisfiable 客戶端要求的表頭Range中指定了資源的某個範圍時
伺服器在範圍無效或是無法滿足時,用這個狀態碼回應
417 Expectation Failed 客戶端要求的表頭Expect中包含了一個期望時
伺服器無法滿足時,用這個狀態碼回應

500~599 伺服器端錯誤狀態碼

Status Code Reason Phrase 說明
500 Internal Server Error 伺服器錯誤
501 Not Implemented 伺服器無法處理Client所發起的要求
例如使用了不支援的HTTP Method
502 Bad Gateway 代理或是Gateway收到了一條偽裝的回應
就會回應這個狀態碼
503 Service Unavailable 伺服器目前無法提供服務,例如過於忙錄
可以在Response Header中加入一個Retry-After
用來表示服務什麼時後會變為可用的
504 Gateway Timeout 和狀態碼408類似,只是這個的回應來自於一個Gateway或代理
它們在等待另一個伺服器對其請求時逾時了
505 HTTP Version Not Supported 伺服器收到不支援的通訊協定版本時的狀態回應碼

HTTP Method

HTTP Method

GET 這是最常用的方法,通常用在請求伺服器上的某個資源
該方法沒有Body主體,可以被Cache
HTTP protocols中並沒有規範長度限制,有限制的是瀏覽器和Web Server
不同瀏覽器中的限制也不同,IE為2048,FF為8192
POST 向伺服器輸入數據,通常會以透過表單的方式
資料會在HTTP Body的部份,以name=value的方式表示,分隔符號為&
該方法不會被Cache
PUT 將資源寫入伺服器端,如果資源已存在,就用這個資源來取代原有的資源
因為需要對伺服器寫入,所以基本上都需要先通過身份驗證是否有寫入的權限
寫入成功後,應回應201,並在表頭中用Location告訴Client端寫入的資源位置
DELETE 要求伺服器刪除指定的資源
PATCH 要求伺服器更新指定的資源
HEAD 和GET方法的行為很類似,但在伺服器端回應的訊息中,只包含HTTP Header而已
並不會返回HTTP Body的部份,適用於在不取得資源的情況下,了解資源的狀態
TRACE 要求伺服器返回接收到的表頭資料
用意是用來追蹤發送出去的表頭,和到伺服器接收到的表頭,有何差異
OPTIONS 要求伺服器返回可接收的HTTP Method指令有那些
因為並不是所有Method都有被Web Server所實作

2013年8月1日 星期四

jQuery 陣列處理

.each(collection, callback) 迭代陣列元素
.grep(array, callback, [invert]) 過濾陣列
第三個參數用來設定傳回符合條件或是不符合條件的元素
.map(array, callback) 將陣列元素處理後回傳成新的陣列
.merge(array1, array2) 將array2合併到array1陣列中
.unique(array) 將陣列中重覆的項目移除

jQuery 字串處理

.trim() 字串去空白
.param() 字串序例化

jQuery Ajax呼叫方式

.ajax({})為底層呼叫方式,參數如下
.ajaxSetup()則是用來設定參數的預設值

url 請求的URL
type 請求的方式,例如POST或是GET
data 請求的參數
dataType 指定回應的格式,有以下幾種格式
xml, html, json, jsonp, script, text
timeout 逾時的毫秒數,如果超出設定的時間,就會觸發error設定的callback函式
global 設定是否要觸發全域事件處理,啟用為true, 停用為false
預設是啟用狀態
contentType 指定請求的內容類型
預設為application/x-www-form-urlencoded,和表單發送的類型一樣
success 請求成功時呼叫的函式
error 請求失敗時呼叫的函式
complete 整個請求完成時呼叫的函式
beforeSend 發出請求之前呼叫的函式
可以用來執行請求前的操作,例如自訂標頭
urlasync 非同步為true, 同步為false
預設是非同步
processData 是否對傳送的資料做URL編碼,true為編碼,false為不編碼
預設是會編碼
ifModified 根據標頭的Last-Modified來判斷是否更新
預設為不檢查標頭

jQuery Ajax快捷方法

jsfiddle的echo網址,大部份都需要用POST方式才會有反應
所以例子中會有幾個方式沒有反應

.get() 發出Get要求
.post() 發出Post要求
.load() 以Get方式載入指定的網址
.getJSON() 以Get方式取得JSON資料
.getScript() 以Get方式取得Script指令

jQuery 全域事件處理

jQuery v1.8之後,ajax全域事件只能綁定到document元素

.ajaxStart() ajax要求開始
.ajaxSend(event, jqXHR, ajaxOptions) 發出ajax要求
.ajaxSuccess(event, jqXHR, ajaxOptions, ThrownError) ajax要求成功的話就觸發這個事件
.ajaxError(event, XMLHttpRequest, ajaxOptions) ajax要求失敗的話就觸發這個事件
.ajaxComplete(event, XMLHttpRequest, ajaxOptions) ajax要求完成
.ajaxStop() ajax要求結束