本文作者：上海駐雲Web前端工程師 著名2.5次元患者 黃志彪 （頭像與真人一模一樣）
一、前言
單頁面開發在如今的WEB開發中占有絕對的優勢，單頁面應用可以提高用戶體驗度，可以實現跨平台應用開發。要實現單頁面開發也有很多前端框架，比如：AngularJS，BackboneJS等等，這些都是很流行很全面的前端開發框架，它提供了網頁模板，路徑解析，API訪問及Dom操作功能，但是有時候我們的需求比較簡單，如果用這些大型前端框架那就顯得有點重了。這里我介紹下自己使用Jquery實現單頁面應用開發的過程。
二、URL HASH理解
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實現單頁面應用開發的基本模塊就搭建完成了，在前端開發中，我們常要跟服務器通信，這個時候我們可以專門寫一個類做接口調用，如：
然后在控制器中引入該模塊，調用相應的接口函數就好了。
好啦~本文到這里就結束了，同時，如果喜歡我們的話就趕緊訂閱我們吧~~~每天定時推送新鮮干貨~~~也可以關注我們的微信公眾號：架構雲專家頻道 每天同步更新喲~~~