【技術乾貨】前端開發之jQuery單頁面開發

 

 

本文做者：上海駐雲Web前端工程師 著名2.5次元患者 黃志彪 （頭像與真人如出一轍）

 

1、前言

 

   單頁面開發在現在的WEB開發中佔有絕對的優點，單頁面應用能夠提升用戶體驗度，能夠實現跨平臺應用開發。要實現單頁面開發也有不少前端框架，好比：AngularJS，BackboneJS等等，這些都是很流行很全面的前端開發框架，它提供了網頁模板，路徑解析，API訪問及Dom操做功能，可是有時候咱們的需求比較簡單，若是用這些大型前端框架那就顯得有點重了。這裏我介紹下本身使用Jquery實現單頁面應用開發的過程。

 

2、URL HASH理解

 

  Html中的錨點定位相信你們都用過，在URL中，「#」 與其後面的字符串共同組成了錨點部分，「#」 表明網頁中的一個位置，其右面的字符，就是該位置的標識符。單單改變 「#」 後的部分，瀏覽器只會滾動到相應位置而不會從新加載網頁，在JavaScript中咱們經過location.hash來獲取。在URL中，除了以 「#」 號開頭錨點部分，還有一段以「？」號開頭的部分，「？」及後面的字符串表明的是傳遞的參數，在 「http」 請求中，「#」 及標識符是不會傳遞到服務器的，而「？」後面的參數部分則會發送到服務器。

  接下來咱們用幾個URL來理解下：

一、http://www.xxx.com/a/b#a

 

二、http://www.xxx.com/a/b#a?name=XX&age=21

在這兩個URL中，「#a」 就是hash，咱們稱之爲path部分，「？name=XX&age=21」咱們稱之爲search部分。接下來咱們再看個URL：

 

三、http://www.xxx.com/a/b#!a

這個URL跟上面的第一個URL有一個區別，多了一個 「!」 相信你們在單頁面應用開發的時候都看到過 「#!」 的組合，爲何要如此組合？你們能夠看下谷歌的一篇文章 （ Making AJAXapplications crawlable ） 大概的意思就是說讓path部分能夠被搜索引擎搜索到，而search部分是不能被搜索的，這點很重要，若是你作的頁面不能被搜索引擎搜索到那就沒意義了。

 

3、案例

 

  現現在不少流行的前端框架都是單頁面應用，可是有時候咱們的需求比較簡單，又不想用那些大型的前端框架，怎麼辦？好比：一個公司有公司的官網，公司官網通常是靜態頁面，而後裏面有個註冊功能，可是註冊呢是分幾個步驟的，又不想在一個頁面顯示完成，如今的網頁通常都須要設計的簡潔，否則太繁瑣了人家一看都懶得填了，註冊到下一個步驟須要記錄上一個步驟的數據，並且用戶回退的時候還會自動記住用戶上一個步驟填入或選擇的數據，這個時候你們確定會想着在一個頁面上用簡單的顯示和隱藏元素來實現，實際上大多數都是這樣作的，可是有一個缺點，用戶點擊瀏覽器的前進和後退怎麼辦？這樣作的狀況下用戶點擊前進和後退就退出了註冊頁面了，如何避免這種狀況呢？下面介紹的單頁面開發就能夠解決這個問題。那在這裏如何開發咱們的單頁面應用？顯然用AngularJS這種大型的前端框架並不合適，這個時候別忘記了咱們的老朋友-jQuery。

 

4、單頁面開發

 

   在進入開發步驟以前，咱們先了解下一個jQuery的框架-jquery-hashchange。這個框架就是用來作路由控制的，它能夠監聽hash的變化。

  假如咱們的需求有兩個步驟，咱們寫一個路由控制的類，這個類咱們學習下AngularJS的route模塊定義方式，將模板和控制器定義在一塊兒：

  這段代碼是路由模塊，咱們先定義了一個根路由：_rootPath = '#!regist';，然後咱們定義了一個跟路由匹配正則_pathRegu= /\#\!regist\/\w+/g;，這個正則在後面作路由匹配有用。接下來咱們看路由定義_pathRoute對象，該對象定義了一個默認路由default和一個路由定義的數組path，在path裏面每一個路由都定義了路由地址，模板id和控制器，這裏的模板使用的是jquery-tmpl插件，接下來咱們看看控制器類：

而後咱們要看看模板定義：

好，到這裏咱們就看到了控制器類定義和頁面模板定義，下面咱們再看看如何將控制器和模板進行解析：

 

這個類是總控制器，它負責路由轉發和模板加載，最後咱們還要使用jquery-hashchange插件監聽路由變化來轉發路由和加載模板：

 

 

這樣，咱們用jQuery實現單頁面應用開發的基本模塊就搭建完成了，在前端開發中，咱們常要跟服務器通訊，這個時候咱們能夠專門寫一個類作接口調用，如：

 

 

而後在控制器中引入該模塊，調用相應的接口函數就行了。

 

好啦~本文到這裏就結束了，同時，若是喜歡咱們的話就趕忙訂閱咱們吧~~~天天定時推送新鮮乾貨~~~也能夠關注咱們的微信公衆號：架構雲專家頻道 天天同步更新喲~~~