對Web開發中前端架構與前端類庫的一些思考

來源:互聯網
上載者:User

   這篇文章主要介紹了對Web開發中前端架構與前端類庫的一些思考,本文講解了前端架構的理解誤區、前端架構與前端類庫的區別、前端MVC架構思想等內容,需要的朋友可以參考下

  說起前端架構,我也是醉了。現在去面試或者和同行聊天,動不動就這個架構碉堡了,那個架構好犀利。

  當然不是貶低架構,只是有一種殺雞焉用牛刀的感覺。網站技術是為業務而存在的,除此毫無意義,架構也是一樣。在技術選型和架構設計當中,脫離網站業務發展的實際,一味的追求時髦新技術,可能會適得其反,將網站發展引入崎嶇小道。就好像一個日均pv只有幾百的小型電商網站,卻要大喊“某寶就是這麼搞的”,然後搭建應用伺服器叢集,使用Distributed File System和分散式資料庫系統...等巴拉巴拉的一堆用來處理高並發,海量資料訪問的手段。我想說,有意義嗎?

  前端架構的理解誤區

  網站的價值在於它能為使用者提供什麼價值,在於網站能做什麼,而不在於它是怎麼做的,所以在網站還很小的時候就去追求網站的架構架構是捨本逐末,得不償失的。前端架構同理,如果是一個簡單的頁面型產品,應用只是依賴伺服器來產生Web頁面和視圖,並且只需要使用一些簡單的Javascript或者JQuery來使應用更加具有互動性,那麼一個JQuery前端類庫就可以了,真的沒必要用上一些高大上的架構。

  當然,架構的確是很有用的,重點是我們要知道什麼時候該用什麼架構。大公司大項目的經驗和成功模式固然重要,值得學習借鑒,但我們不能因此變得盲從。只有深刻去理解前端架構,知道什麼時候該用什麼什麼架構解決什麼問題,才能有的放矢,直擊要害。

  前端架構與前端類庫的區別

  使用架構前,我覺得很重要的一點是弄清類庫(諸如JQuery)和架構(諸如angularJS)的區別在何處。

  簡單而言,類庫,解決的是代碼或者是模組層級別的複用或者對複雜度的封裝問題,例如將一個解決複雜問題的功能模組封裝成一個函數,提供一個簡單的介面。庫它是一種工具,它提供了很多封裝好的方法,用與不用取決於我們自身,即使用了也不會影響我們呢的代碼結構。

  而架構,更多的是對模式層級的複用和對程式組織的規範。這裡的模式是指比如MVC,為了實現M和V的解耦,把複雜的耦合關係由經常變化的業務代碼轉移到不經常變化的架構內部消化。是面向一個領域來提供一套解決方案,提高開發效率,如果我們選擇了使用某架構,就應該遵循該架構所規定的規則。

  二者最主要的區別是:JQuery以DOM操作為中心,架構,準確來說是MVC架構,是以模型(model)為中心,而DOM操作是附加的。所以,以模型為中心最終達到的目的是帶來一整套工作流程的變更,使得後台工程師可以編寫前端的模型代碼,把後台與前端打通,互動設計師處理UI跟模型的互動關係,UI設計師可以專註、無障礙的處理HTML源碼,把它們以介面模板的形式提交給互動工程師。這一整套協作機制能大大提高開發效率。使用MVC架構使得前端任務更好的被解耦。

  前端MVC架構思想

  我們知道,傳統的MVC模式將一個應用劃分為——模型層(model)、視圖層(view)、控制層(controller)。他們在應用系統中擔當不同的角色,完成不同的任務。

  Model:即資料模型,用來封裝和應用程式的商務邏輯相關的資料或者對資料進行處理,模型可以直接存取資料。

  View:視圖用來有目的顯示資料,在視圖中一般沒有程式上的邏輯,為了實現視圖上的最新功能,視圖需要訪問它監視的資料模型。

  Controller:控制器調控模型和視圖的聯絡,它控制應用程式的流程,處理事件並作出響應,事件不僅僅包括使用者的行為還有資料模型上的改變。通過捕獲使用者事件,通知模型層作出相應的更新處理,同時將模型層的更新和改變通知給視圖,使得視圖作出相應改變。因此控制器保證了視圖和模型的一致性。

  我對前端的View的理解是,與頁面上元素直接相關的部分都屬於View。包括html,CSS和一部分直接控制頁面元素的JS。可以從Model中得到資料,並將其顯示到頁面上。而關於資料的變更與請求,則統統交給Controller處理。

  那麼Controller呢?作為Model和View的粘合劑,Controller將View方面的請求轉寄給合適的Model,在必要時也會去更新View。而Controller本身也可以作為Model的觀察者,擷取Model的變更。而作為Controller本身,就不應該有涉及到頁面元素的代碼了。

  最後談談Model,與後端的溝通、AJAX請求以及對資料的處理都屬於Model的工作。Model本身不知道誰是View,誰是Controller。它只提供一些方法供View和Controller調用,並且將變更通知給它的觀察者View或Controller。顯然,Model與頁面元素之間也解耦了。

  雖然基於MVC模型的架構之間也有很多不同之處,但是總體而言,Model負責儲存vier需要的資料以及資料處理邏輯,例如讀寫,更新,刪除,驗證,轉換等。View負責接收並顯示Model提供的資料以及接收使用者的輸入,並且響應事件,Model更新後及時將更新反饋回使用者。Controller處理商務邏輯和事件邏輯。

  知己知彼,對症下藥

  在前端架構和類庫越來越豐富的今天。選擇一款對的架構或類庫就顯得尤為重要了,我覺得沒必要盲目跟風,看見什麼架構火就屁顛屁顛跑去啃一個星期,然後因為項目工作上用不到,幾個月之後又全忘光了。

  所以我覺得重要的是把基礎打紮實,重點是去瞭解各個類庫與架構的作用,某類架構著重用於解決什麼問題,然後在項目需要用到時候再去研讀API才是上策。

  最後,我們要清楚MVC在前端開發中的應用具有的局限性,簡單的項目如果使用MVC架構會可能導致項目變得更加複雜。當然隨著Web前端的複雜度不斷增加,前端MVC架構的不斷髮展,相信在未來的應用軟體類複雜產品當中,MVC架構一定會給前端工作帶來效率上的飛躍。

  以上只是我對前端架構和類庫一些淺顯的認識,不喜勿噴,更希望您能提出更好的學習架構和類庫的方法。共同進步,共同學習。

  文中若有技術層面的錯誤還請斧正,誤人子弟實乃罪過。

相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。