JAVASCRIPT網頁應用程式設計

模型（Model）和資料

|

47

資料清單中—這正是所謂的無限延伸捲軸模式（infinite scroll pattern）。總之，讓使用

者感受到的延遲越短越好。

切記，當系統在抓取新資料的同時，千萬不要讓系統的操作介面被鎖死。除了要在畫面

上呈現「資料載入中…」的提示訊息，還要讓操作介面維持可用的狀態。只有在極少

數的情況下，我們才會需要故意在載入資料時，讓畫面呈現無法讓使用者繼續操作的

狀態。

你可以在一開始載入網頁時，就把所有的資料都先安插在頁面某處，也可以另外發送一

些獨立的 HTTP 請求（像是透過 Ajax 或 JSONP）動態載入資料。我個人比較建議採用

後面這種做法，因為一開始就把所有資料先安插在網頁裡，會讓網頁檔案變大，進而拖

慢下載網頁速度；透過一些並行的 HTTP 請求，能讓資料的載入速度快一些。此外，

AJAX 和 JSON 還能讓你將 HTML 網頁儲存在快取區（cache），這樣就不用針對每次的

請求都重新動態產生一次網頁內容。

直接把資料放進網頁

我個人並不建議採用這種做法（原因已在前一段中提及），但在某些特定情況下，這種

做法還是會蠻有用的，特別是當我們需要載入非常少量的資料時。這種做法最大的好

處，就是非常容易實作。

採用這種做法，只需直接在網頁某處產生一組 JSON 物件就行了。假如是用 Ruby on

Rails，程式碼就會如下：

<script type="text/javascript">

var User = {};

User.records = <%= raw ...