某工程師的開發日常

發表文章

Upgrade Angular 7

隨著Angular 7的到來，最近也將手邊的專案都順利的升級到Angular 7，可說是無痛無雷呀~ 不過還是有些地方是需要注意，就是在Angular 7開始不予許混用Template-Driven Form和Reactive Form，所以像下面這段程式碼是不能被編譯的。 <form [formGroup]="form"> <input formControlName="Email" [(ngModel)]="value"> </form> 實際上這樣的混合的做法很糟也很難維護和測試，只會讓品質變差，所以Angular 7把這個卡掉是很正確的事(拍手)。題外話，目前大部分的Angular 開發者也幾乎都是以Reactive Form為主來開發表單，最主要的原因是它比Template-Driven Form要來好維護和測試，特別是對於大表單與動態欄位，更是要採用Reactive Form，絕對會省下不少測試維護的時間。可想而知Angular 7不予許混用Template-Driven Form和Reactive Form這件事，其實影響層面不大。另外一項值得注意的事，Angular 7加入Budget Bundles的機制。簡單來說，當Bundle Size超過設定的門檻值就會觸發警告和錯誤，所以你會在angular.json看到下面這段設定。 "budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" } ] 專案升級至Angular 7的方式: 1. 如果專案還是使用Rxjs 5，請安裝 "npm i -g rxjs-tslint"，並且執行"rxjs-...

閱讀完整內容

JavaScript : How to copy properties of objects into another object ?

有時候我們可能會想要將某一個物件的屬性複製到另一個物件，所以我們可能會寫出像下面這樣的程式碼。 let order = { OrderID: 'A001', OrderDate: '2018-10-14' }; let items = [ { ItemName: '橡皮擦', Price: 15, Quantity: 10 }, { ItemName: '鉛筆', Price: 10, Quantity: 10 } ]; order.Items = items; // Output : // { // OrderID: 'A001', // Items: [ // { ItemName: '橡皮擦', Price: 15, Quantity: 10 }, // { ItemName: '鉛筆', Price: 10, Quantity: 10 } // ], // OrderDate: '2018-10-14' // } 如果我們有很多的屬性要做複製的話，向上面這樣的寫法實在太費時。事實上，我們可以使用Object.assign()來輕鬆地完成這件事，它用於複製一個或多個物件，將它們所有可列舉的屬性到另一個目標物件。 let order = { OrderID: 'A001', OrderDate: '2018-10-14' }; let items = [ { ItemName: '橡皮擦', Price: 15, Quantity: 10 }, { ItemName: '鉛筆', Price: 10, Quantity: 10 } ]; let customer = { CustomerID : 'C001' }; ...

閱讀完整內容

Angular : Difference between value and ngValue in reactive form

當我們從在Reactive Form取得欄位資料之後可能還需要做一些型別轉換。例如Select的value為"ture"時，而它的型別是string，這時我們免不了一定要做型別轉換。幸好，在Angular有ngValue可以使用，它與value的差別在於，value總是回傳string型別，而ngValue會回傳Object型別，所以如果我們使用ngValue，其值為"true"時，我們得到的型別會是boolean，而不是string。現在當我們了解value和ngValue之間的差異之後，那些型別轉換的瑣事自然就不存在了! // (1) 取出的型態會是string <select class="form-control" formControlName="Sent"> <option value="true">Yes</option> <option value="false">No</option> </select> // (2) 取出的型態會是string <select class="form-control" formControlName="Sent"> <option [value]="true">Yes</option> <option [value]="false">No</option> </select> // (3) 取出的型態會是boolean <select class="form-control" formControlName="Sent"> <option [ngValue]="true">Yes</option> <option [ngValue]="false...

閱讀完整內容

Upload large files to web api using resumable.js

最近工作剛好遇到大檔案(> 2GB)上傳的需求，大檔案的上傳方式與平常處裡小檔案上傳當方式有些不同，對於大檔案上傳我們需要額外考量三個問題 : 1. 上傳逾時。 2 IIS 不支援超過2BG 的檔案上傳 3. 檔案在上傳過程中中斷。上述這三個問題可以透過multipart/form-data和chuck 的方式，將檔案分割成無數個chunk，且給予每個chunk編號，如果傳送失敗就重新傳送chunk ，進而實現斷點續傳的功能。目前市面三個有支援大檔案與斷點續傳的JavaScript Library分別有 Resumable.js 、 Dropzone.js 、jQuery Ajax File Upload，且它們底層皆是使用HTML5 File API，此外它們的作者都有提供Server Side Implementation Sample，而且連TypeScript的定義檔都有，真的都是佛心來著。接著我們開始介紹如何使用Resumable.js 上傳檔案至Web API(.NET) : Server Side (Web API)的主要流程: 1. 首先，在Web API需要使用MultipartFormDataStreamProvider來取得每一次Resumable.js 所傳過來的chunk，而chunk由FormData和FileData組成，其中FormData記載Resumable.js所定義的chuck欄位，而FileData則存放chunk的檔案內容。 2. 接著從FormData得到這些Resumable.js所定義的chuck欄位resumableFilename、resumableIdentifier、resumableTotalChunks、resumableChunkNumber欄位，並且根據這些欄位我們將chunk儲存在Upload 目錄下。 3. 等待所有chunk都到位，將合併這些chunk並組成完整的檔案。 FileStorageController Class [RoutePrefix("api/FileStorage")] public class FileStorageController : ApiController { ...

閱讀完整內容

HTML5 : Object URL

在上一篇介紹HTML5 File API的文章中提到Data URI是一種文字型態的檔案格式，其格式為"data:<mime type>;base64,<data>"，範例:"data:image/png;base64,PCFET0NUWVB..." ，而Data URI 的好處就是它可以直接寫入 HTML，且img元素可以接受Data URI格式。這次的文章主要是介紹運用Object URL將檔案儲存在瀏覽器。過去我們往往都會透過後端的Web API 將檔案路徑傳送到前端link或img元素，以便讓使用者下載或瀏覽，但這有一些問題，像是縮圖殘留，這時就是必須自己去寫一段Code清理Cache。如今我們可以透過HTML5 Object URL將檔案儲存在瀏覽器，而且由於檔案物件的生命週期與網頁綁在一起，所以當網頁被關閉，這些檔案物件就會被釋放，因此我們自然可以不用去處理縮圖殘留的問題。事實上Object URL的儲存機制就是利用GUID向瀏覽器提取檔案物件，其而格式為"blob:<url>;<GUID>"，範例:"blob:https://www.myblogger.com/e75c76a2-138a-4b17-b9f6-029199e3985f" Object URL 程式碼範例如下所示: 1. 首先，在Input註冊Chang事件以便取得File。 2. 我們利用URL.createObjectURL去建立ObjectURL，以及取得ObjectURL String。 3. 最後，將得到的ObjectURL String丟到link 元素，此時我們可以透過download屬性指定下載時的檔案名稱。 ※ 如果想要使連結失效並且釋放檔案物件，可以呼叫URL.revokeObjectURL來註銷ObjectURL。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title...

閱讀完整內容

HTML5 : File API

今天我們示範使用HTML5 File API來讀取檔案內容。雖然市面上有很多好用且功能又強大的File Uploader ，但是骨子裡還是用HTML5 File API，所以不妨多去了解一些HTML5的東西對於前端開發絕對是有益處的。 File API的幾個重要的核心類別 : Blob(Binary Large Object): 表示二進制資料，此外還可以設定MIME類型。 File: 表示檔案且繼承於Blob，但與Blob不同的是它增加name、lastModified、lastModifiedDate、webkitRelativePath等屬性。 FileList: 表示 files的集合。 FileReader: 以非同步的方式讀取檔案內容，以下幾種方法與事件 : 1. readAsArrayBuffer：讀取檔案後，並回傳 ArrayBuffer 物件。 2. readAsBinaryString：讀取檔案後，並回傳 Binary String 。 (非標準，建議不要使用) 3. readAsDataURL：讀取檔案後，並回傳 DataURI 。 4. readAsText：讀取檔案後，並傳回文字內容(預設UTF-8)。 5. onload : 讀取完檔案後，所執行的事件。 6. abort：取消讀取。 ※Data URI 是一種文字型態的檔案格式，其格式為"data:<mime type>;base64,<data>"，範例:"data:image/png;base64,PCFET0NUWVB..." ，而Data URI 的好處就是它可以直接寫入 HTML，且img元素可以接受Data URI格式。 ※若要以同步的方式讀取檔案請使用FileReaderSync File API 程式碼範例如下所示: 1. 首先，在Input註冊Chang事件以便取得File。 2. 建立FileReader物件，並且註冊onload事件用於接收回傳的DataURL。 3. 執行readAsDataURL來讀取File，讀取完檔案後會觸發onload事件。 <!DOCTYPE html> <head> <meta c...

閱讀完整內容

MongoDB: Save Files Using GridFS

過去我們在使用File System，我們必須自己處理備份、複製、擴充的問題；如今我們可以我們可以使用MongoDB作為File DB，它可以利用Replica和Sharing的機制幫助我們解決備份、複製、動態擴充、分散式儲存、自動平衡、故障回復的問題，且效能優於RDBMS。若真要說MongoDB這類NoSql的缺點就是它不能處理Transaction。在MongoDB中對大於16MB BSON Document(如：圖片、音頻、影片等)是使用GridFS的方式做儲存。 GridFS是一種在MongoDB中存儲大二進製文件的機制，GridFS 會將文件分割成多個Chunk(預設256 KB)，而GridFS使用fs.files和fs.chunks等兩個Collection來存儲檔案資料，其中fs.files負責存放文件的名稱、大小、上傳的時間等資訊，而fs.chunks則是負責存放經過分割後的Chunks，其優點是透過分割儲存的方式能夠快速讀取檔案中任何的片段。 fs.files Collection { "_id" : , // 檔案的Unique ID "filename": data_string, //檔案名稱 "length" : data_number, // 檔案大小 "chunkSize" : data_number, // chunk大小，預設256k "uploadDate" : data_date, // 儲存時間 "md5" : data_string //檔案的md5值 } fs.chunks Collection { "_id" : , // 檔案chunk的Unique ID "files_id" : , //對應檔案的Unique ID "n" : chunk_number, // 檔案chunk的數量 "data" : data_binary, // 以二進為儲存檔案 } 在下面例子，我們將簡單地示範使用.NET MongoDB Driver來存取與操作MongoDB的G...

閱讀完整內容