上一次我們將loading組件封裝成了插件，基本上使用起來並沒有多大問題，剛好足夠使用。我們現在來稍微改造一些這個loading插件，實現一個簡單的功能，使之能夠延遲關閉loading這個浮層。
目前這個插件我們只能夠this.$vLoading.show()和this.$vLoading.hide()這兩個方法，若是想要其實現延遲關閉，我們需要在hide這個方法裏面傳遞一個延遲關閉的參數，可以是預先設定好的slow, medium或者fast這種參數進去，或者直接傳遞一個延遲的時間。
再發一下上次的代碼截圖：
相信很多人看出來了這代碼其實寫得並不是那麼美觀（嘔~寫的時候並沒有這感覺啊），所有邏輯操作都寫在了install的方法裏面了，看起來有點亂。其實我們只需要在外面寫好一些方法邏輯，然後在統一起來掛載到Vue實例上面。
有點跑題了，不過這次我修改我一併優化了這個loading插件的代碼，使之看起來更“合理”。剛纔說到要傳參數給這個hide的方法，那我們就應該在hide裏面接收一個參數，並且設置好相對應的延遲。先貼一下我這次優化後的代碼，如下圖：
可以看到，在定義hide的那個方法裏面，我們接受了一個叫做delayTime的參數，也就是說我們在使用這個方法的時候，我們應該這樣傳遞：this.$vLoading.hide({delayTime: 800})。可是我們爲啥要這樣子傳一個對象進去？而不是直接this.$vLoading.hide(800)這樣子，畢竟這裏只有一個參數而已？這樣子做其實是爲了代碼的可讀性，別人一看就知道，哦這裏是延遲了800ms就hide浮層。
讓我們看下內部實現代碼部分，
，可以看到圖中我用紅框標記起來那部分，這裏使用到了ES6的函數參數的默認值。在不使用ES6之前，我們寫函數參數的默認值的時候我們一般是這樣子寫的
，但是這樣子會帶來一些不必要的麻煩，emmm，看下這個圖：
我們當想輸入內容爲空字符串給它時，它卻給我們取了我們設置的“默認值”，這與我們預期的結果不一致（輸出爲空）。爲了解決這個問題，我們使用了es6的語法來寫這個默認值設置：
可以看到，我們輸入空字符串時，預期的輸出結果也是空，這就達到我們的目的了。當然es6還有其他設置函數默認值的方法，建議移步到阮大大的ECMAScript 6入門的函數擴展章節參觀學習學習。
優化部分：
這次的優化，是看到element-ui插件在頁面上的一些行爲，纔想到優化，跟它們一樣。畢竟人家這麼做肯定有道理。先看下代碼：
在沒有優化之前，頁面上已經插入了該插件的節點。
在優化之後，我們構造了loading的實例，但我們不着急將其插入到頁面中，而是等到我們調用纔將其插入，如果隱藏不用的話，就將其移除。在頁面上就不會出現相對應的註釋節點。其實我不清楚知道這裏是爲啥，估計應該是Vue的虛擬dom什麼的一些節點用的，暫時搞不清楚element在這裏如果插件不使用的話就將其節點移除。希望瞭解的能幫忙說明一下，畢竟vue的源碼我暫時還沒有那個能力去解讀。
