當前位置:首頁 » 網頁前端 » 前端設計模式詳解
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端設計模式詳解

發布時間: 2023-01-22 01:08:23

A. 前端面試題-服務端渲染SSR

我最開始接觸是在Vue的官網上,開始是作為一個小節出現,現在已經是個專門的大章節來專門講Vue服務端渲染的內容。

服務端渲染 簡單來說就是在伺服器上把數據和模板拼接好以後發送給客戶端顯示。

回顧下前端的 歷史 ,最開始的站點是簡單的靜態網站。後端大哥把.html文件推送給用戶,用戶瀏覽器解析這些字元串進行顯示。那個時候就是 服務端渲染 。可是後來由於網站內容越來越復雜、特效越來越炫酷,這種『兼職』狀態已經不能滿足需求,細分之下的前端出現了。

隨後為了方便的開發,開始提倡 前後端分離,大家各做各的,彼此之間通過基於HTTP的各種API協作,變成了數據動態生成的新一代站點。

再後來出現了Vue等三大MV*框架,網站做成了SPA應用,解決了很多問題的同時也帶來了新問題,其中最突出的兩個:難以SEO和首屏載入緩慢。

想要了解更多關於前端技術內容歡迎關注尚矽谷教育!

前端安全相關面試題

前端JS高階面試題

前端設計模式-面試題

web前端渲染優化

web前端之二叉搜索樹

B. 前端是做什麼的

前端即網站前台部分,運行在PC端,移動端等瀏覽器上展現給用戶瀏覽的網頁。隨著互聯網技術的發展,HTML5,CSS3,前端框架的應用,跨平台響應式網頁設計能夠適應各種屏幕解析度,合適的動效設計,給用戶帶來極高的用戶體驗。

HTML、CSS、JavaScript

這三個是前端開發中最基本也是最必須的三個技能。前端的開發中,在頁面的布局時, HTML將元素進行定義,CSS對展示的元素進行定位,再通過JavaScript實現相應的效果和交互。雖然表面看起來很簡單,但這裡面需要掌握的東西絕對不會少。在進行開發前,需要對這些概念弄清楚、弄明白,這樣在開發的過程中才會得心應手。

C. 前端Vue.js框架是什麼

前端Vue.js框架是什麼?有哪些特點?Vue.js是一個前端框架,用於構建用戶界面的漸進式框架。在Vue中一個核心的概念是讓用戶不再操作DOM元素解放了用戶的雙手,讓程序員可以更多的時間去關注業務邏輯,Vue框架能夠提高開發的效率。

科普時刻

黑馬程序員vue前端基礎教程-4個小時帶你快速入門vue

前端開發利器vue,微信小程序快速開發實戰

web前端基礎必備教程-2小時玩轉Vue單元測試

黑馬程序員Vue2.0+Vue3.0入門到精通,大廠前端崗位必備技能

1、Vue.js是什麼?

Vue是一個js庫,且無依賴別的js庫跟jquery差不多。Vue核心庫只關注視圖層,非常容易與其它庫或已有項目整合。Vue.js是一個輕巧、高性能、可組件化的MVVM庫,同時擁有非常容易上手的API。

Vue.是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是Vue 被設計為可以自底向上逐層應用。Vue的核心庫只關注視圖層,不僅易於上手,還便於與第三方庫或既有項目整合。另一方面當與現代化的工具鏈以及各種支持類庫結合使用時,Vue 也完全能夠為復雜的單頁應用提供驅動。

2、Vue的MVVM設計模式是什麼?

如果了解前端一定知道MVVM和MVC這兩種設計模式,且很有可能對mvp也有一些了解。MVC即model,view,control,jQuery就是採用的這種設計模式。MVVM即model,view,viewmodel,是數據驅動模式,即所有的一切通過操作數據來進行而盡量避免操作DOM樹。

不關注DOM結構,考慮數據該如何儲存,用戶的操作在view通過viewmodel進行數據處理,分情況是否通過ajax與model層進行交互,再返回到view層,在這個過程中view和viewmodel的數據雙向綁定使得我們完全的擺脫了對DOM的繁瑣操作,而是專心於對用戶的操作進行處理,避免MVC中control層過厚的問題。

在vue調試方面可以選擇安裝chrome插件vue Devtools。打開vue項目,在console控制台選擇vue面板。在Devtools對象中,可以選擇組件,查看對應組件內的數據信息。也可以選擇Vuex選項,查看該項目內Vuex的狀況變數信息。

3、Vue.js有哪些優點?

聲明式,響應式的數據綁定;組件化的開發;Virtual DOM;響應式的數據綁定
(1)jQuery首先獲取到DOM對象,然後對DOM對象進行進行值的修改等操作;
(2)Vue首先把值和js對象進行綁定,然後修改js對象值,Vue框架會自動把DOM的值就行更新;
(3)簡單理解為Vue幫我們做了DOM操作,以後用Vue就需要修改對象的值和做好元素和對象的綁定,Vue框架會自動做好DOM相關操作;
(4)DOM元素跟隨JS對象值的變化而變化叫做單向數據綁定,若JS對象的值也跟隨著DOM元素。

4、需要學習哪些Vue.js框架相關知識點?

Vue.js 安裝、Vue.js 目錄結構、Vue.js 起步、Vue.js 模板語法、Vue.js 條件語句、Vue.js 循環語句、Vue.js 計算屬性、Vue.js 監聽屬性、Vue.js 樣式綁定、Vue.js 事件處理器、Vue.js 表單、Vue.js 組件、Vue.js 組件自定義事件、Vue.js 自定義指令、Vue.js 路由、Vue.js 過渡& 動畫、Vue.js 混入、Vue.js Ajax(axios)、Vue.js Ajax(vue-resource)、Vue.js 響應介面、Vue.js 實例等。

Vue.js 是一個JavaScriptMVVM庫,一套構建用戶界面的漸進式框架。以數據驅動和組件化的思惟構建的,採取自底向上增量開辟的設計。比擬於Angular.js,Vue.js供給了加倍簡潔、更易於懂得的API,使得我們快速地上手並應用Vue.js。

D. Vue的框架(了解)

前端MVC設計模式

M,V,VM設計模式

Vue

安裝獨立版本

我們可以在 Vue.js 的官網上直接下載 vue.min.js 並用

循環語句 (循環使用 v-for 指令)

v-for 指令 需要以 car in arr 形式的特殊語法, car 是源數據數組並且 arr 是數組元素迭代的別名。

Ajax(axios) - GET

Ajax(axios) - POST

阻止a標簽跳轉四種方法

E. web前端的三個核心技術是什麼 分別有什麼作用

web前端需掌握的核心技術

1、學習html。

這個是最簡單的,也是最基礎的.要熟練掌握div、form table、ul li 、p、span、font這些標簽,這些都是最常用的,特別是div和table,div用於布局、table也可以用於布局,但是不靈活,基本table是用來和數據打交道.

2、學習css。

這里說的css不包括css3,一般我們看到web前端開發工程師的要求裡面,有一個會使用css+html 或者 css+div 來進行界面布局,所以css是用於輔助html來布局和展示的,我們稱之為「css樣式」,為什麼會說css+div呢?因為我上面說了div就是html主要用於布局的東西,所以div就是核心掌握的東西!那麼css肯定必須要配合div來使用才好.css要熟練掌握float、position、width、height,以及對於的最大最小、會使用百分百、overflow、margin、padding等等,這些都是跟布局有關系的樣式,一點要掌握.


3、學習js。

可能前兩個大家覺得還過得去,看到js就蛋疼了,其實吧,js入門很簡單的,不需要會很多東西的,只要會根據某個id、或者name拿到網頁dom或者樣式、或者值,然後會給某個id或者name的元素標簽賦值、或者追加數據、追html,這個是跟數據有關系的操作,然後數據邏輯判斷,效果方面的,無非就是跳轉、彈框、隱藏什麼的,把這些全部結合其他就是實際用途了,代碼一點都不難,會了這些基礎js,其他的直接網路就好了.然後看多了,用多了,就什麼都不是問題了.

F. web前端開發開發技術架構有哪些

前端的應用非常廣泛,基本網站、APP、HTML5小程序等都需要前端開發,所以只要是互聯網產品基本都需要前端。
前端程序猿切頁面寫頁面,Web上、H5上的炫酷效果,是前端開發大展身手的地方。最常見的用於前端開發的技術組合是:
HTML+CSS+JavaScript。
web前端是在開發人員中最直接面向產品、面向用戶的設計人員,一個開發團隊的成果是要靠web前端去展現,因為用戶不會去關心後台的處理有多麼強大。
後端開發是寫後台,各種業務邏輯、數據處理、模塊介面、客戶端介面等等。後端開發者通常精通於一種Web編程語言和一個資料庫管理系統。電商平台點擊篩選條件下面為你篩選出來的寶貝的功能以及付款人數數據的變化等都是由後台來實現提供的。
目前web產品交互越來越復雜,用戶使用體驗和網站前端性能優化這些都得靠web前端去做。
前端開發則是網站的前台代碼實現,包括基本的HTML和CSS以及JavaScript/ajax,最新的高級版本HTML5、CSS3,以及SVG等。
前端開發需要學習的技術
1 掌握基本web前端開發技術:HTML、CSS、JavaScript、DOM、BOM、AJAX等,而且要了解它們在不同瀏覽器上的兼容情況、渲染原理和存在的Bug
2 必須掌握網站性能優化、SEO和伺服器端開發技術的基礎知識
3 必須學會運用各種web前端開發與測試工具進行輔助開發
4 除了掌握技術層面的知識,還要掌握理論層面的知識,包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持等
5 未來web前端開發工程師還要研究HTML5、web視覺設計、網站配色、網站交互設計模式等相關技術
web前端有廣闊的發展空間,app、小程序、移動端、pc端等都網站是需要前端技術的開發支持才能夠完成,技術門檻相對較低、需求量較大,薪資待遇良好。只要是互聯網端的客戶界面,就需要前端來製作完成,前端開發的編程量不大,但是需要部分編程,入門簡單,但是要學的深入需要一個過程。
Web前端招聘崗位
• 前端開發工程師、Web開發工程師、網頁開發工程師、HTML開發工程師...
• H5開發工程師、移動應用開發工程師、App開發工程師、小程序開發工程師...
• JS開發工程師、Vue.js開發工程師、Node.js開發工程師、前端架構師...
• 小游戲開發工程師、數據可視化開發工程師、WebGL開發工程師、WebVR開 發工程師、Web安全工程師...

G. 一個合格的web前端需要會什麼

1. div和table

這個是最簡單的,也是最基礎的。要熟練掌握div、form table、ul li 、p、span、font這些標簽,這些都是最常用的,特別是div和table,div用於布局、table也可以用於布局,但是不靈活,基本 table是用來和數據打交道。

2.html

HTML是指超文本標簽語言,是目前web領域應用廣泛的語言,我們只需要在html文檔中插入對應的標簽,即可實現web頁面的編寫與排列,所以要熟練掌握HTML基本知識,包括每個標簽的用法等。

3. CSS

CSS指層疊樣式表,可以為HTML標簽自定義樣式,通過設置HTML標簽的樣式,來改變其外形,達到美化與排版web頁面的目的。

4.Javascript

Javascript是網頁腳本語言,它可以在html中運行,設置並修改瀏覽器中的各種對象與變數。例如用來改進設計、驗證表單、檢測瀏覽器、創建 cookies等等,現在各大網站都可以看見 Javascript的蹤影,常見的網站首頁大眼晴、警告提示框、頁面動畫效果等等。Javascript更是一種在客戶端廣泛使用的腳步語言,在 Javascript當中提供了一些內置函數、對象和DOM操作,藉助這些內容我們可以來實現一些客戶端的特效、驗證、交互等!

5.Jquery

Jquery是相當於把js封裝了一套的一個js插件,目的就是操作起來更方便,代碼寫的更少。 Jquery是一個免費、開源的輕量級的Javascript庫,並且兼容各種瀏覽器,同時現在有很多基於 Jquery的插件可供選擇,這樣在我們實現一些豐富的動態效果時更方便快捷,大大節省了我們開發的時間,提高了開發速度。

6.框架

從 bootstrap開始,響應式的珊格系統被後來框架一直沿用,建議學一套主流mvc框架,vue,react, angular兩選一種。

7.會點後台語言

對於前端工程師來說,並不需要像網站程序員樣,編寫對象、開發特殊功能、搭建資料庫。但是前端工程師要掌握基本的頁面GET&POST傳參、程序判斷語法、程序輸出語法、頁面提交、資料庫查詢與記錄插入,以及掌握HTTP與WEB工作原理、掌握Socket長連接實時網路通信技術、掌握 NOSQL中的 MONGODB的應用、了解PHP語法、了解 MYSQL資料庫的基本操作。

當然,以上技能能夠幫助你成為一個合格的前端工程師,但要成為一個優秀的前端,必須掌握除技術以外的東西,例如設計,用戶等等,因此還需不斷的堅持學習。

H. 電商前端架構設計

什麼是前端架構

  • 說到架構,很容易拉出一系列的概念知識點,像系統架構、軟體架構、框架等等,這些不是今天探討的重點,大家可以下去網路來理解。架構的本質是什麼?其實也是一種管理。通常我們所說的管理,都是指對於任務和人員的管理,而架構管的是機器和代碼。比如說,機器的部署屬於運維的物理架構,SOA屬於服務架構,那麼,前端的架構指什麼呢?

  • 長期以來,前端所處的位置是比較偏應用層,很薄的一層,而架構又要求深度和廣度,所以之前在前端裡面做架構,好比在小水塘里游泳,稍微撲騰兩下就到處碰壁。但最近這幾年來,隨著一些列新的技術和概念的出現,前端的范圍被大大拓展了,所以這一層逐漸變得大有可為。

  • 單純從語言的角度來說,html、js、css是最簡單最容易上手的開發語言,不考慮模塊化、工具、壓縮優化,任何人都可以快速上手,完成一兩個功能簡單的頁面。在規模很小的項目中,前端技術要素彼此不會直接產生影響,因此無需架構相關的思考。由於前端語言這種靈活鬆散的特點,使得前端項目規模在達到一定規模後,工程問題凸顯,成為發展瓶頸,原來孤立的技術要素開始彼此產生影響,各種技術要素彼此之間開始出現關聯,要用模塊化開發,就必須對應某個模塊化框架,用這個框架就必須對應某個構建工具,要用這個工具,就必須對應某個包管理工具……這個時候,需要有人從比較高的角度去梳理、尋找適合自己團隊的集成解決方案。而這一系列解決問題的工具和手段就是所謂的前端架構。

  • 架構的組成

    組件框架

  • 架構不等於框架這一點很好理解,相信大家都能夠很深入的說明這里的差別,框架是架構的重要組成部分,架構決定框架的選型,框架決定架構的技術路線。架構圍繞框架進行一系列的流程工具建設,從而形成完善自動的開發體系。
    +框架不等於類庫,這里就是很多人困惑的點,你用的什麼框架?jquery、underscore、linq、seajs、requirejs等等,每個人都能夠列舉一大堆。但這個是不準確的,一套編碼框架是有一系列的元素組成:

  • 開發模式,我們如何來實現代碼的職責分離。以前整個前端是mvc中v這一層,而現在前端內部也進行了mvc的邏輯細分,Javascript的MVC框架現在很多,有的強化m、有的強化c。每一個框架其實都有其特點的,並且有越來越多的創新改造,比如現在最流行的是mvvm。有angular、react等等。我們是為了引入mvvc才把他們納入到我們的開發體系,而不是因為他是一個好用的類庫。

  • 通訊,模塊化、組件化是前端在推進開發模式過程中的一個過程產物,為了有效的進行組件隔離和獨立,現在有各種各樣的通信模型出來,不過由於實現簡單,代碼少,他往往是合入到某個類庫裡面,但本質也是一個類庫。比較成熟的比如:消息匯流排、事件模擬、緩存中轉、flux模型等等。

  • 模板,我們用什麼樣的方式來集中的處理數據往html的轉換過程,這里就不用多展開,這種類庫現在太多了,光我們公司就有很多套,大家在代碼行、緩存管理、預編譯、運算性能、強大的語法等等各個維度不段追求各種極致。

  • 基礎類庫最後才是傳統類庫,相信現在已經沒有同學會在項目中去約束團隊中的dom操作、常用函數、方法、非同步化等等各種很基礎東西,這個時候我們一般就是引入jq、zepto、underscor這些封裝好的東西就行了。核心就是為了改善編碼生產力。

  • 對於框架的選型要從兩面看,一是看該框架的本領,二是看你們團隊的能耐。從經驗上給幾個點建議:

  • 這里也可以順便展開聊一下現在前端產品的形態分類:

  • 從這些分類裡面,我們這些年派生出了所謂全端和全棧的概念。但本質上怎麼走還是要由所在產品的形態來決定。

  • 內容型Web站點 側重渲染方面的優化,前端邏輯比重小

  • 操作型B/S系統 以數據和邏輯為中心,界面較規整

  • hybrid內置型,要處理緩存和一些本地介面,包括PC客戶端和移動端。現在的本地應用,基於很多考慮,都變成了混合應用,也就是說,開發這個應用的技術,既包含原生的代碼,也包含了嵌入的HTML5代碼

  • Web游戲,前端的邏輯非常重,在代碼結構上要求非常高的可管理性和更復雜的設計模式。

  • 桌面應用型,現在有一些PC端的混合應用開發技術,比如node-webkit和hex,前者的典型應用是XDK,後者的典型應用是有道詞典,此外,豌豆莢的PC客戶端也是採用類似技術的,也有一些產品是用的qt-webkit。這類技術可以方便做跨平台,極大減少開發工作量。

  • 大工程應該盡量避開谷歌產品,他的很多技術開源項目都是玩票性質的,GWT、Closure、Darty就是前車之鑒。曾今提出過很多的新技術,到現在還是獨家的,變出太大。包括現在angular,喜歡做斷崖式升級,做做運營後台系統問題不大,如果是線上系統的話,每次升級就是一次人月神話中的典型焦油坑。

  • 關注應用場景,像剛才說到的boss後台是一種;另外我的平台是否有沉重的歷史包袱,需要兼容ie6,還是可以輕裝上陣;產品對於seo是什麼樣的態度?是否需要考慮自適應?或者我的團隊足夠大,能夠各搞一套?;產品特徵是強內容還是強交互或者是游戲性。這些都是選擇不同框架的主要出發點。

  • 沒有最好,只有最適合自己的,基本上,針對每個平台,我們都可以列出一些主流框架,但不意味著你們都能駕馭得住。小馬過馬,老牛沒過膝,松鼠淹個半死,就是這么回事。但無論我們選擇什麼框架或決定自己動手造輪子,都勿忘初心,技術必須讓我們工作生活更為輕松愉快——我們只選擇我們能駕馭住的框架,我們不能保證它在一年後是否會過時落後。

  • 而且按照我個人這么多年的經驗來看,任何框架都會過時,往往不是因為他不夠好,而是因為一定有更好的出來。我們再選擇一個框架或者一個類庫的時候就要想好,未來我如何拋棄他。至少不能成為我們引入新的框架的絆腳石。現實的工作中很多的團隊往往會陷入到年復一年的用今年的新框架去重構去年老框架代碼的歷史循環中去。對於引入框架如何盡量延長他的生命力,我個人的意見是選擇框架時去追求概念,而不是潮流,當我的架構可以接受新的設計概念的時候才去考慮引入新的框架。用設計理念的選擇代替框架的選擇。之所以這么說是因為我觀察到我們部門的後端架構的開發理念跟我進公司的時候是差不多的。更多你可以參考成都網站建設

I. 詳細介紹Web前端與後端有什麼區別(包括定義、特點、所用到的技術等(500字)

1.什麼是前端開發?

前端,也稱為「客戶端開發」,簡單來說,你可以在應用程序或網站的屏幕上看到的所有內容都屬於前端。

通俗點說:web的本意是蜘蛛網和網的意思,在網頁設計中我們稱為網頁的意思。現廣泛譯作網路、互聯網等技術領域。表現為三種形式,即超文本(hypertext)、超媒體(hypermedia)、超文本傳輸協議(HTTP)等,包括Web頁面的結構、Web的外觀視覺表現以及Web層面的交互實現。

1.1 網站和移動應用的前端

讓我們考慮一個現實的例子:你正在訪問的網站。內容設計、圖像、段落和線條之間的間距,左上角的公司徽標,以及右下角的小通知按鈕——所有這一切都是前端。

移動應用的前端與網站相同。例如,你在移動或 Web 應用中看到的內容,按鈕、圖像是前端的一部分。此外移動屏幕還具有觸摸響應功能,因此當應用響應你所做的所有手勢時,需要進行縮放放大/縮小、雙擊、滑動等操作。

前端開發人員構建所有的這些。它們創造了你在屏幕上看到的外觀和觸摸到的體驗。

Ionic,Swift,Kotlin,Bootstrap,Angular,Vue,jQuery,React.js 是用於前端開發的一些工具和技術。

1.2 物聯網的前端

連接到互聯網的任何對象都是IoT(物聯網)設備。你可能在想物聯網設備的前端如何工作?任何智能設備,如智能冰箱、遠程 PoS 系統、智能手錶、智能錢包,都需要用戶可以與之交互以操作設備的「東西」。因此,「某物」是一種互動媒介,其元素就是物聯網的前端。

物聯網設備沒有前端的說法,但設備包含一個固件,其行為類似於移動應用程序中的前端。此外該固件可以用C、C++、Lua、Python 和 JavaScript 等語言編寫。

另外還有物聯網設備的 UI/UX 設計和實現。

2.什麼是後端開發?

後端,也稱為「伺服器端開發」,也就是在系統「後面」所發生的事情。同樣,在後端伺服器和瀏覽器或應用程序之間存儲網站、應用數據和中間媒介的伺服器都屬於後端。簡單來說,在應用程序或網站的屏幕上看不到的所有東西都是前端的後端。它更多的是與資料庫進行交互以處理相應的業務邏輯。需要考慮的是如何實現功能、數據的存取、平台的穩定性與性能等。

2.1 網站和移動應用後端

網站的後端需要設置伺服器,存儲和檢索數據,以及將這些伺服器與前端進行連接的介面。如果說前端開發人員梗關注網站的外觀,後端開發人員則更更關注網站的速度、性能和響應能力,後端通過編碼、雲 API 和資料庫進行集成。

就像前端一樣,移動應用的後端開發在各個方面都與網站後端相同。此外,你為移動應用設置後端伺服器的選項包括:雲計算(AWS,Firebase)定製伺服器或 MBaaS(移動後端即服務)。

Ruby,Apache,Nginx,PHP,MySQL,MongoDB 等用於後端開發的工具和技術很少。

2.2 物聯網後端

物聯網後端最重要的組成部分之一是雲後端。顯然大多數物聯網設備都依賴雲伺服器對數據進行上傳和下載,並將其處理為動作。

如果我們談論高級物聯網解決方案,後端開發可以擴大到 AI(人工智慧)和 ML 等功能(機器學習)。

用於物聯網項目的後端技術是Amazon IoT,Google Cloud,MQTT Broker,IFTTT等等。

綜上所述,說通俗一點:

web前端分為網頁設計師、網頁美工、web前端開發工程師。

首先網頁設計師是對網頁的架構、色彩以及網站的整體頁面代碼負責;網頁美工只針對UI這塊的東西,比如網站是否做得漂亮;web前端開發工程師是負責交互設計的,需要和程序員進行交互設計的配合。

web前端需要掌握的有腳本技術javascript DIV+CSS現下最流行的頁面搭建技術,ajax和jquery以及簡單的後端程序等。 後端的話可供開發的語言有 asp、php、jsp、.NET 這些後端開發語言的話搭建環境都不一樣
實際的開發過程中,前端、後端開發人員的定位如下:
1)前端開發人員:精通JS,能熟練應用JQuery,懂CSS,能熟練運用這些知識,進行交互效果的開發。
2)後端開發人員:會寫Java代碼,會寫SQL語句,能做簡單的資料庫設計,會Spring和iBatis,懂一些設計模式等。

3.前端 Vs 後端有什麼區別?


ok,接近2000字了,應該是回答了你的問題了,如果有幫助到你,請採納哦,謝謝!

J. 前端設計模式之責任鏈模式

責任鏈模式

什麼是責任鏈模式

責任鏈(Chain of Responsibility)模式的定義:為了避免請求發送者與多個請求處理者耦合在一起,將所有請求的處理者通過前一對象記住其下一個對象的引用而連成一條鏈;當有請求發生時,可將請求沿著這條鏈傳遞,直到有對象處理它為止。(此處引自 gof 設計模式)

在責任鏈模式中,客戶只需要將請求發送到責任鏈上即可,無須關心請求的處理細節和請求的傳遞過程,所以責任鏈將請求的發送者和請求的處理者解耦了。

責任鏈模式是一種對象行為型模式,其主要優點如下:

1.降低了對象之間的耦合度。該模式使得一個對象無須知道到底是哪一個對象處理其請求以及鏈的結構,發送者和接收者也無須擁有對方的明確信息。

2.增強了系統的可擴展性。可以根據需要增加新的請求處理類,滿足開閉原則。

3.增強了給對象指派職責的靈活性。當工作流程發生變化,可以動態地改變鏈內的成員或者調動它們的次序,也可動態地新增或者刪除責任。

4.責任鏈簡化了對象之間的連接。每個對象只需保持一個指向其後繼者的引用,不需保持其他所有處理者的引用,這避免了使用眾多的 if 或者 if···else 語句。

5.責任分擔。每個類只需要處理自己該處理的工作,不該處理的傳遞給下一個對象完成,明確各類的責任范圍,符合類的單一職責原則。

其主要缺點如下。

1.不能保證每個請求一定被處理。由於一個請求沒有明確的接收者,所以不能保證它一定會被處理,該請求可能一直傳到鏈的末端都得不到處理。

2.對比較長的職責鏈,請求的處理可能涉及多個處理對象,系統性能將受到一定影響。

3.職責鏈建立的合理性要靠客戶端來保證,增加了客戶端的復雜性,可能會由於職責鏈的錯誤設置而導致系統出錯,如可能會造成循環調用。

其他說明
責任鏈模式,總的一個核心就是請求者不必知道是誰哪個節點對象處理的請求,由於處理請求的可以在不同對象下處理,所以請求者跟接受者是解耦的。

純的責任鏈:要求請求在這些對象鏈中 必須被處理 ,而且一個節點處理對象,要麼只處理請求,要麼把請求轉發給下個節點對象處理;

不純的責任鏈:要求在責任鏈里 **不一定會有處理結構 **,而且一個節點對象,即可以處理部分請求,並把請求再轉發下個節點處理;

javascript 中介者模式
責任鏈模式對前端開發來說可能有點陌生,但是看了前面的描述又感覺似曾相識

實際上 express、rex 里的 middleware 都可以簡單理解為責任鏈模式的運用

要實現中間件模式,最重要的實現細節是:

1.可以通過調用 use() 函數來注冊新的中間件

2.當接收到需要處理的新數據時,注冊的中間件在執行流程中被依次調用。每個中間件都接受上一個中間件的執行結果作為輸入值

3.每個中間件都可以停止數據的進一步處理,只需要簡單地不調用它的回調函數或者將錯誤傳遞給回調函數。當發生錯誤時,通常會觸發執行另一個專門處理錯誤的中間件

項目實戰
通用中間件開發

通用中間件使用 ajax

如上我們在發送請求之前加入了類型轉換、數據校驗,將數據的業務處理使用中間件模式剝離,使得處理過程模塊化,維護性提升。

中間件升級-事件回調

每個中間件的過程都是不可控制的,全部都交由中間類去統一調用,我們可以加入事件回調,方便我們在中間件處理過程中擁有額外的邏輯能力

將上述的使用方法再改造一下,方便實際業務中使用

上述的項目實例是採用 ajax 來演示,實際通用的中間件類,可以在業務中將一些 **流程化執行的任務 **拆分出來,例如表單驗證、多重條件判斷等等

多種條件判斷

將流程化執行的多種條件判斷通過中間件解耦,可以使得條件判斷方法更加清晰。一般當你需要使用中介者來改造業務邏輯的時候,前端的項目確實有點復雜了。

現在STAR現在是在騰訊課堂裡面分享自己的經驗,感謝興趣的朋友可以加Q群:1146649671

中獲取STAR在騰訊課堂分享的鏈接,還可以獲取學習資料 面試文檔等