JAVASCRIPT網頁應用程式設計

控制器（Controller）和狀態

|

73

路由（Routing）

截至目前止，我們所開發的應用程式，全部都會在同一張網頁上執行，網址也都會是同

一個。不過這可能會對使用者造成困擾，因為大部分使用者都已經習慣「不同的網頁資

源要有不同網址」這樣的概念。而且使用者通常也習慣透過瀏覽器的「上一頁」和「下

一頁」鈕切換至不同的網頁功能。

為了解決這個問題，我們似乎有必要將程式的狀態加進網址裡。只要程式狀態不同，網

址也要跟著不同。反之亦然（網址不同，程式的狀態也要不同）。而且在載入初始網頁

時，也應該要能依據網址來設定應用程式的初始狀態。

使用網址的雜湊值（Hash）

不過，網址只要一有變動，就會觸發重新載入網頁的動作（這正是我們一直極力避免發

生的情形）。目前有一些做法可以避開這種狀況。常見的做法，就是修改網址的雜湊值。

網址的雜湊值永遠不會被傳送至伺服器，所以修改它並不會觸發向伺服器請求新網頁的

動作。拿我的 Twitter 頁網址來說，它的雜湊值就是後面的

#!/maccman

：

http://twitter.com/#!/maccman

你可以利用

location

物件來讀取 / 修改網址的雜湊值：

// 設定雜湊值

window.location.hash = "foo";

assertEqual( window.location.hash , "#foo" );

// 去除雜湊值前面的「#」符號

var hashValue = window.location.hash.slice(1);

assertEqual( ...