<b>本文作者：上海駐雲web前端工程師 著名2.5次元患者 黃志彪 （頭像與真人一模一樣）</b>
一、前言
單頁面開發在如今的web開發中占有絕對的優勢，單頁面應用可以提高使用者體驗度，可以實作跨平台應用開發。要實作單頁面開發也有很多前端架構，比如：angularjs，backbonejs等等，這些都是很流行很全面的前端開發架構，它提供了網頁模闆，路徑解析，api通路及dom操作功能，但是有時候我們的需求比較簡單，如果用這些大型前端架構那就顯得有點重了。這裡我介紹下自己使用jquery實作單頁面應用開發的過程。
二、url hash了解
<b></b>
html中的錨點定位相信大家都用過，在url中，“#” 與其後面的字元串共同組成了錨點部分，“#” 代表網頁中的一個位置，其右面的字元，就是該位置的辨別符。單單改變 “#” 後的部分，浏覽器隻會滾動到相應位置而不會重新加載網頁，在javascript中我們通過location.hash來擷取。在url中，除了以 “#” 号開頭錨點部分，還有一段以“？”号開頭的部分，“？”及後面的字元串代表的是傳遞的參數，在 “http” 請求中，“#” 及辨別符是不會傳遞到伺服器的，而“？”後面的參數部分則會發送到伺服器。
接下來我們用幾個url來了解下：
1、http://www.xxx.com/a/b#a
2、http://www.xxx.com/a/b#a?name=xx&age=21
在這兩個url中，“#a” 就是hash，我們稱之為path部分，“？name=xx&age=21”我們稱之為search部分。接下來我們再看個url：
3、http://www.xxx.com/a/b#!a
這個url跟上面的第一個url有一個差別，多了一個 “!” 相信大家在單頁面應用開發的時候都看到過 “#!” 的組合，為什麼要如此組合？大家可以看下谷歌的一篇文章（making ajaxapplications crawlable）大概的意思就是說讓path部分可以被搜尋引擎搜尋到，而search部分是不能被搜尋的，這點很重要，如果你做的頁面不能被搜尋引擎搜尋到那就沒意義了。
三、案例
現如今很多流行的前端架構都是單頁面應用，但是有時候我們的需求比較簡單，又不想用那些大型的前端架構，怎麼辦？比如：一個公司有公司的官網，公司官網一般是靜态頁面，然後裡面有個注冊功能，但是注冊呢是分幾個步驟的，又不想在一個頁面顯示完成，現在的網頁一般都需要設計的簡潔，不然太繁瑣了人家一看都懶得填了，注冊到下一個步驟需要記錄上一個步驟的資料，而且使用者回退的時候還會自動記住使用者上一個步驟填入或選擇的資料，這個時候大家肯定會想着在一個頁面上用簡單的顯示和隐藏元素來實作，實際上大多數都是這樣做的，但是有一個缺點，使用者點選浏覽器的前進和後退怎麼辦？這樣做的情況下使用者點選前進和後退就退出了注冊頁面了，如何避免這種情況呢？下面介紹的單頁面開發就可以解決這個問題。那在這裡如何開發我們的單頁面應用？顯然用angularjs這種大型的前端架構并不合适，這個時候别忘記了我們的老朋友-jquery。
四、單頁面開發
在進入開發步驟之前，我們先了解下一個jquery的架構-jquery-hashchange。這個架構就是用來做路由控制的，它可以監聽hash的變化。
假如我們的需求有兩個步驟，我們寫一個路由控制的類，這個類我們學習下angularjs的route子產品定義方式，将模闆和控制器定義在一起：
這段代碼是路由子產品，我們先定義了一個根路由：_rootpath = '#!regist';，而後我們定義了一個跟路由比對正則_pathregu= /\#\!regist\/\w+/g;，這個正則在後面做路由比對有用。接下來我們看路由定義_pathroute對象，該對象定義了一個預設路由default和一個路由定義的數組path，在path裡面每個路由都定義了路由位址，模闆id和控制器，這裡的模闆使用的是jquery-tmpl插件，接下來我們看看控制器類：
然後我們要看看模闆定義：
好，到這裡我們就看到了控制器類定義和頁面模闆定義，下面我們再看看如何将控制器和模闆進行解析：
這個類是總控制器，它負責路由轉發和模闆加載，最後我們還要使用jquery-hashchange插件監聽路由變化來轉發路由和加載模闆：
這樣，我們用jquery實作單頁面應用開發的基本子產品就搭建完成了，在前端開發中，我們常要跟伺服器通信，這個時候我們可以專門寫一個類做接口調用，如：
然後在控制器中引入該子產品，調用相應的接口函數就好了。
好啦~本文到這裡就結束了，同時，如果喜歡我們的話就趕緊訂閱我們吧~~~每天定時推送新鮮幹貨~~~也可以關注我們的微信公衆号：架構雲專家頻道 每天同步更新喲~~~