ajax|重新整理
簡介
第 1 部分 介紹了如何用 Sajax、PHP 和 JavaScript 開發基本的相簿。在為應用程式建立曆史堆棧的過程中，我們將依靠用戶端技術，並將其直接與第 1 部分的代碼結合在一起。本文假設讀者瞭解 JavaScript 和瀏覽器 cookie。
在瀏覽器中儲存狀態
在網上衝浪的時候，總是從一個頁面到另一個頁面，從一個網站到另一個網站。在這個過程中，網頁瀏覽器忠實地記錄了您曾經到過何處的記錄，建立了一條麵包屑型（breadcrumbs）數字軌跡，沿著這條軌跡能夠一步一步地回到出發點。後退按鈕允許您回到上一個動作之前所在的位置，從這個意義上說它就是 Web 上的撤銷按鈕。
Web 是一種按頁劃分的的媒體。瀏覽器工具列中的後退和前進按鈕指引著瀏覽器從一個頁面移動到另一個頁面。當 Macromedia 的 Flash 風行一時的時候，開發人員和使用者發現富互連網應用程式（Rich Internet Application，RIA）打破了這種模式。使用者可以在幾個網站上瀏覽，然後登入一個基於 Flash 的網站，在這個網站上消磨幾分鐘。當使用者單擊後退按鈕時，遊戲結束了。使用者沒有回到先前的那個 Flash 網站，完全不知道到了什麼地方。
對於完全基於 Ajax 的網站 —— RIA 的另一種形式，情況也是如此。允許使用者與一個頁面進行多次互動的網站很容易受到後退按鈕的困擾，或者受到任何記錄按鈕的困擾（就此而言）。前進和重載按鈕的問題與後退按鈕的問題一樣。 網頁瀏覽器內建的內部記錄機制是一個不可逃避的問題。出於安全的原因，開發人員不能篡改瀏覽器記錄或者任何相關按鈕。還有可用性的問題。設想一下，如果後退按鈕突然彈出一個神秘的警告提示或者使用者被打發到一個新的網站上去，使用者該是多麼困惑。
構建曆史堆棧
雖然不能改變瀏覽器記錄，但是可以自己構建一個在 RIA 中使用的記錄。顯然，它在某種程度上應該與瀏覽器的標準導航工具分開，但正如前面所說的，富應用程式在一定程度上背離了 Web 的頁面到頁面的標準模式。
我們將建立一個堆棧來管理應用程式的曆史事件記錄，也就是說儲存一個列表，在表的最後添加元素。堆棧用於按照後進先出（LIFO）的順序儲存資料。雖然回退的時候並沒有刪除堆棧頂部的資料，但這個模型跟我們的需要非常接近。在 JavaScript 中，堆棧可以用數組來管理。
與堆棧在一起的還有一個指標，指示我們在堆棧中的當前位置。當我們在應用程式中單擊的時候，新的事件將被壓入堆棧頂部，指標指向最後添加的元素。單擊應用程式的後退和前進按鈕時，不會在堆棧中添加新的事件，而是移動堆棧的指標。 想一想使用後退按鈕時曆史堆棧中會發生什麼：瀏覽器返回上一次查看的頁面，原來不能用的前進按鈕突然之間變得可用了。瀏覽新的頁面時，前進按鈕再次變成灰色。瀏覽器記錄中較晚儲存的元素將被彈出堆棧，新的事件被壓入堆棧頂部。我們將在自己建立的曆史堆棧中再現這種行為。
我們的目標是建立一組可用的記錄按鈕：後退、前進和重新整理，如圖 1 所示。
圖 1. 後退、前進和重新整理的記錄按鈕顯示在左側，不可用狀態顯示在右側 |
可重用的設計
JavaScript 使用非常寬鬆的方法建立對象和類，但仍然能夠建立可重用的代碼。首先列出曆史堆棧需要的功能，然後用 JavaScript 建立堆棧模型。在把曆史堆棧整合到相簿應用程式之前，首先要建立一個簡單的頁面來測試其功能。這樣做有兩方面的好處：測試頁有助於將精力集中到開發與測試類的核心功能上，建立單獨的測試頁可以避免混淆曆史堆棧和相簿的功能，從而確保可重用性。
用 cookie 緩衝
我們需要應用程式的記錄在整個瀏覽器會話中都存在。只要使用者仍在查看相簿頁面，曆史堆棧對象就會一直存在。每當發生更改的時候，這個類就會將整個記錄複製到瀏覽器 cookie 中。如果使用者在同一個瀏覽器會話中離開該頁之後又返回，那麼將返回他離開該應用程式時所在的同一個位置。
[1] [2] [3] [4] 下一頁
