前端架構師最重要的能力是什麼？為什麼？

架構或者可以說是一套方法論，讓我們知道在什麼場合遇到什麼問題應該如何解決

。

架構師=前端工程師+後端程式設計師+系統分析人員+關鍵技術解決方案+各種技術組合+設計模式+部署調整+軟技能；

前端架構的原則

在設計前端架構的時候，我認為應該遵守幾個基本原則。

第一個是「以不變為中心」。

軟體開發的本質就是操作資料，放在 web 開發的場景，後端是儲存、獲取資料，前端是收集、展示資料。

資料在前、後端流轉時，資料的基本形態不會變：基本型別、物件、列表；資料的傳輸協議也不會變：HTTP、WebSocket。在前端開發中，離它們越遠、離 GUI 越近的東西就越容易變。

所以，首先要做的就是梳理出哪些東西是不易變化的，哪些是很容易就變了的。

第二個是「各層皆可替換」。

將根據易變性梳理出的模組按職責進行分層，定義好層與層之間的對接協議（介面）。除了因自身進化需要，對接協議是基本不會變的，也不應去改變。以此為前提，各層實現可在業務需要或技術升級時進行替換。

第三個是「檢視層儘可能薄」。

檢視層的職責是展示資料，理應只有互動邏輯，而大多數前端在寫 UI 元件時會摻雜較多的業務邏輯，使檢視層變得很是厚重、臃腫。這樣一來，業務邏輯不利於複用，也會增加檢視層技術的遷移成本。應將業務邏輯進行抽象，並提取到領域層，讓檢視層保持純粹。

由於檢視層的易變、多樣，並想讓它儘可能薄，最好有什麼方式能夠增加它訪問

邏輯層

的成本，就像前端只能透過網路請求訪問後端一樣。

忽然想到在做業務開發時有遇到過這種架構，你有印象嗎？沒錯，就是微信小程式！微信小程式的架構是將邏輯層與檢視層放到不同的執行緒中執行，從而做到了天然隔離，它們之間交流的媒介只有「資料」：

微信小程式是建立在客戶端應用提供一些原生能力基礎之上的，那麼在瀏覽器中能夠達到相同或類似的效果嗎？當然可以！瀏覽器提供原生能力，檢視層執行在 iframe 中，邏輯層則在 web worker 裡：

覺不覺得這很像「微前端」架構——據我理解，簡單來說就是一種能夠讓不同

技術棧

的模組同時執行在瀏覽器中，它們可以是元件也可以是應用，並且相互之間能夠通訊、協同工作的架構模式。

基於這種架構，可以開發出一個類似於瀏覽器、作業系統的「超級 app」，成為平臺級應用。

前端架構師需要什麼能力？

我覺得說架構師很空泛，大家會告訴你技術的深度廣度，軟技能硬技能等等內容

。各位無論處於什麼階段的前端，可以對照下面前端能力階段，找到自己的特徵和提升方法。

入門階段

能夠解決一些問題，常見的HTML標籤和屬性、時間、方法，常見的CSS屬性也瞭解。Js掌握基礎，條件，語句和迴圈，還有簡單常用的演算法。還了解一些常用工具比如：Webstrom、Sublime text3、Dreamweaver等。

進階

：這個階段最簡單的方法就是找到官方幫助手冊，通讀所有的方法屬性，讀到完全理解了，這些手冊可以幫助我們夯實基礎。最起碼優化了我們不規範的程式碼。

解決問題階段

這個階段的前端可以解決一些有難度的問題了，哪怕是複製貼上，也可以完成佈置的所有需求。這個階段內容不會出錯了。

進階：

此階段最大的特點是能夠解決問題了，但不是最佳解決方案。解決這個問題最好的辦法就是拓展認知。積累大量的專案經驗，比如到GitHub上面找一些開源。

最佳化方案階段

本階段碰到一個需求可以給出各種方案了，自己也訥訥感判斷出優秀的方案。這個階段在團隊基本上就是主力了。有個2-3年前端開發經驗的基本上都是這個階段。

進階：

2-3年的工作經驗最容易飄。戒驕戒躁，注重前端框架的實現原則、開發、重新配置前端一般終端元件的能力。

擁有全域性觀的階段

這個時候思想在需求前面，有的時候需求還沒有提出來，我們就有發現的能力。另外這個時候已經不追求最優不最優了，而是解決方案和程式碼可複用性等。

提升之路：

關於面向物件開發的思考；面向物件的JavaScript；javascript閉包、範圍鏈、原型鏈等高階功能；常用的設計模式；使用本機JavaScript原理實現框架封裝；。。。；基於元件和模組化的發展：SeaJS、RequireJS。有能力解決複雜的問題和技術問題，並能夠獨立設計和開發複雜的功能模組。

往「架構師」的發展

第一是深度：封裝概念

第二是廣度：自稱體系，基礎紮實，掌握理論，知道原理；

前端架構師學習禮包領取點選：

前端學科影片+工具+原始碼，點選領取。