前端程式設計師必知 單頁面應用的核心

2022-03-10 03:36:53 字數 1209 閱讀 2676

這幾年裡,單頁面應用的框架令人應接不暇,各種新的概念也層出不窮。從過去的 jquery mobie、backbone 到今天的 angular 2、react、vue 2,除了版本號不同,他們還有很多的相同之處。 

剛開始寫商業**的時候,我使用的是 jquery。使用 jquery 來實現功能很容易,找到乙個相應的 jquery 外掛程式,再編寫相應的功能即可。對於單頁面應用亦是如此,尋找乙個相輔助的外掛程式就可以了,如 jquery mobile。

當我們 會用的框架越多的時候, 所花費的時間抉擇也就越多 。而單頁面應用的都有一些相同的元素,對於這些基本元素的理解,可以讓我們更快的適合其他框架。 

單頁面應用的演進

這樣我們就在乙個 html 裡返回了所有的頁面了。隨後,只需要在在入口處的 href 裡,寫好相應的 id 即可。 

跳轉到foo

當我們點選相應的鏈結時,就會切換到 html 中相應的 id。這種簡單的單頁面應用基本上就是乙個離線應用了,只適合於簡單的場景,可是它帶有單頁面應用的基本特性。而複雜的應用,則需要從伺服器獲取資料。然而早期受限於移動瀏覽器效能的影響,只能從伺服器獲取相應的 html,並替換當前的頁面。

通過結合這一系列的工具,我們終於可以實現乙個複雜的單頁面應用。而這些,也就是今天我們看到的單頁面應用的基本元素。

我們可以在 angular 應用、react 應用、vue.js 應用 看到這些基本要素的影子,如:vue router、react router、angular 2 routermodule 都是負責路由(頁面跳轉及模組關係)的。在 vue 和 react 裡,它們都是由輔助模組來實現的。因為 react 只是層 ui 層,而 vue.js 也是用於構建使用者介面的框架。 

路由:頁面跳轉與模組關係

瀏覽器會檢查有沒有相應的網域名稱快取,沒有的話就會一層層的去向 dns伺服器 尋向,最後返回對應的伺服器的 ip 位址。

接著,我們請求的**將會將由對應 ip 的 http 伺服器處理,http 伺服器會根據請求來交給對應的應用容器來處理。

隨後,我們的應用將根據使用者請求的路徑,將請求交給相應的函式來處理。最後,返回相應的 html 和資源文化

當我們做後台應用的時候,我們只需要關心上述過程中的最後一步。即,將對應的路由交給對應的函式來處理。這一點,在不同的後台框架的表現形式都是相似的。 

:alpha.png

程式設計師必知

1.乙個程式設計師用在寫程式上的時間大概佔他的工作時間的10 20 大部分的程式設計師每天大約能寫出10 12行的能進入最終的產品的 不管他的技術水平有多高。好的程式設計師花去90 的時間在思考 研究和實驗,來找出最優方案。差的程式設計師花去90 的時間在除錯問題程式 盲目的修改程式,期望某種寫法能...

程式設計師必知3大查詢

三種查詢演算法 順序查詢,二分法查詢 折半查詢 分塊查詢,雜湊表 以後談 一 順序查詢的基本思想 從表的一端開始,順序掃瞄表,依次將掃瞄到的結點關鍵字和給定值 假定為 a 相比較,若當前結點關鍵字與 a相等,則查詢成功 若掃瞄結束後,仍未找到關鍵字等於 a的結點,則查詢失敗。說白了就是,從頭到尾,乙...

程式設計師必知必會之blog篇

程式設計師必知必會之blog篇 網易廣州 賴勇浩 本文最初發表於戀花蝶的部落格 緣起 雖然我寫部落格到現在只有兩年多時間,但因為文章多是原創,還經常被推薦到csdn首頁,又在幾個雜誌上灌過水,所以也有不少朋友問過我相同的話題 我在學習 工作中有很多感悟,但我寫不出來啊,有什麼好方法嗎?問這個問題的有...