Ⅰ 自學web前端架構之前需要具備什麼條件在哪能學到更好的架構技術
首先web前端架構基本都是從前端工程師發展而來的，掌握好基本的前端技術基礎，有兩三年的前端經驗，至少是做過1-2次大型的公司級項目，做過同類的工程，才更有資格去架構它，有了這些經驗你再進階前端架構師才有優勢，至於在哪裡學，網上前端架構師的課程挺少的，有的是用一些熱點知識拼湊起來的，也不太實用。慕課網也有web前端架構師這類課程，這門課用了一個真實復雜項目來幫大家搭建全局性架構思維，我聽過第一階段的腳手架內容，確實很實用填補了大多數人在這方面的能力空白，普遍反響很不錯。以目前我看過的內容來看，老師水平確實符合p7架構師應該有的水平。
Ⅱ 前端有什麼框架呀
一、 Web前端框架之Angular 2+
Angular 2+優點解析：
Angular 2+ 的最大優勢在於它的流行程度。也有人認為它和 Google 密切相關的名字，會影響團隊使用它。Angular 1 的迅速流行是因為那些來自其他互動式應用程序開發環境的人會發現對於開發單頁面 Web 應用程序具有相似的模型-視圖模式。通過對 Angular 1 進行現代化演變和重新構建框架的某些部分，Angular 2+ 已經真正的爆發了，大量的正式的和非正式培訓機構數量都讓人印象深刻，開發者有很強的市場競爭力。對於用戶來說它有一套用於構建用戶界面的豐富組件，這也是本系列中少有的幾個框架能夠做到這點。
缺點解析：
我們覺得 Angular 框架著重於在單個頁面應用程序中創建用戶界面並沒有處理構建完整的 Web 應用這個更大的關注點，如果不及早確定下來，這將會導致整個項目難以維護，在實際項目中，運行時提供不屬於核心框架的技術往往讓人覺得不可思議，這大大降低了 TypeScript 對最終開發者的價值。
發展方向：
Angular 5 剛剛發布，這看來是 Angular 已經成功的印證了快速發布版本的承諾，在 Google 的持續支持下，Angular 會越來越成熟。
像許多的大型組織一樣，Google 具有多重(分裂)的人格，從外表上看，Angular 團隊和那些專注於瀏覽器標準的團隊之間顯得很和諧。但我們的觀點是，和諧只是一層薄薄的窗戶紙。Angular 團隊對於 Web 組件和漸進式 Web 應用沒有一個真正解決方案。我們認為，業界普遍認可的標准將會在 Angular 框架中會逐步實現，這將會影響到如何更好的構建 Angular 應用將成為一個中/長期的風險。
使用環境：
如果你需要在一個大型的框架內獲取技術資源，框架內的技術通常很容易移植;或者你需要在框架中訓練開發人員，並且還要有一定的信心，他們會在短期內獲得一定的開發能力，這樣的話你可以考慮 Angular 2+ 。需要注意的是 Angular1(angular.js)與 Angular2+ 是截然不同的，其中的應用、技術和經驗不能直接移植到 Angular2+ 的開發中去。
如果你的 Web 應用能夠很好的轉化為標準的模型-視圖模式，那麼你也可以忽略其他直接考慮使用 Angular2+ 。
如果你對 Google Material UX 設計模式滿意，那麼 Material Angular 是遵循該模式的一種快速、簡單且可靠的方式。
二、Web前端框架之React + Rex
React + Rex優勢解析：
React 和 Rex 的最大優勢在於它們相對簡單和專注。做一件事情並把它做好是非常困難的，但這兩個庫都很有效地完成了它們的目標。雖然對於某些狀態容器方法可能是外部的，但大多數開發人員還是可以輕松掌握概念，並了解單向數據體系結構的好處，簡化大量的用戶界面應用程序。
缺點解析：
React 和 Rex 最大的弱點不是它們是什麼，而是它們不是什麼。要構建一個功能豐富的 Web 應用程序，你需要許多功能，一旦脫離 React 和 Rex 和其他一些庫的核心，你將發現一個非常分散的社區，擁有無數的解決方案和模式，不容易整合在一起。
因此，雖然 React 和 Rex 都是非常專注的庫，但缺乏經驗的團隊還是會很容易地生成不可維護的解決方案，而不是意識到他們所做的選擇會導致性能不佳或錯誤。即使有經驗的開發人員也可能意識到，一個鬆散的架構或慣例可能會在未來困擾他們。
假省錢是一種對自己的欺騙，組織范圍內採用 React 和 Rex 將輕松降低無效率問題。沒有其他庫和模式的廣泛約定和標准化，標准化 React + Rex 比較於我們正在採用的 JavaScript 來編寫我們的應用程序效率要高。
發展方向：
Facebook 和 React 最近從繁瑣的附加專利糾紛中抽離，他們認識到，就像其他項目一樣，更廣泛的社區能夠提高自己的聲音。我覺得這有助於 Facebook 意識到他們還不能更好地了解我們，相信我們來引導項目。希望這將繼續貫穿項目的特點和技術方向。
很難預測 React 和 Rex 的未來。但是，將庫集中在一起，確實會顯著提高適應性，大多數React + Rex 模式都會促進一個分離的體系結構，從而可以輕松地進行重構和迭代。兩年前，大家喜歡的還是React + Flux，但整個社區很快就擁抱了Rex。思維或模式的其他重大轉變可能很容易被採納。這種關鍵能力可能會持續到未來。
使用環境：
如果你很少需要手把手指導，並且正在尋找更好的庫而不是全面的框架，那麼 React + Rex 可能是正確的。在這一過程中，你不僅需要對你的團隊和組織的能力保持誠實，還要在你的初始開發過程中，以及在整個應用程序的長期維護過程中保持誠實。
三、Web前端框架之Vue.js
vue.js優勢介紹：
漸進式構建能力是vue.js最大的優勢，vue 有一個簡潔而且合理的架構，使得它易於理解和構建。
vue 有一個強大的充滿激情人群的社區，這為vue.js增加了巨大的價值，使得為一個空白項目創建一個綜合的解決方案變得十分容易。
缺點介紹：
在模型-視圖應用程序和狀態容器類型的應用程序之間的互相轉換可能會令人感到困惑，即使沒有完美包含一個模式到另一個模式的完美轉換，但讓人感覺希望能維持兩個模式的相關性。對於那些期待vue.js完美解決方案，並可能導致難以維護不一致的應用程序的人來說，這至少是令人困惑的。
一個更大的挑戰是vue.js依賴於一個單獨的人，很明顯，其他的項目基本是由一個組織提供支持，但這讓人感覺更加有意義，雖然它有一個強大文件的社區和許多有創新的新增項目，但是 vue 核心的開發基本落在一個人身上。
我們很高興看到 vue 更加容易接受新興的標准方法，但是它的類似於 Web 組件的模式，而不是真正的 Web 組件，這可能是 vue 所得不償失的地方。
發展前景：
雖然vue.js有相當廣泛的應用，但也很難預測在中期發展中這個勢頭能持續多久，它不是由一個商業組織直接支持並維護，因此，這很大程度上依賴於維護者的生存能力和繼續維護下去的願望來決定。
它也表現出了一定程度的語言適應能力，並且隨著某些模式的落伍和失寵而繼續保持自身語言的現代化和時代性，目前沒有跡象表明vue.js架構將來無法適應進一步發展。
使用場景：
如果你有一個傳統的Web應用程序，並需要一個強壯穩健的應用程序層，那麼vue.js 可能是一個很好的選擇，它有清晰的模式，即使沒有經驗的團隊也能正確或者錯誤的使用它。盡管vue UX框架沒有開箱即用的功能，但在vue.js上也能大量持續性構建應用，這將有利於你的項目。
Ⅲ web前端項目的結構是怎樣的
你指的是文件夾結構嗎？
通常包含index.html文件，以及cn/html文件夾（用戶存儲html文件）、CSS文件夾、images文件夾、js文件夾
前面這些都是上線時要有的，如果是自己的項目，還可以增加imageStudio等文件夾用於存儲PSD等設計圖、相關文檔等
Ⅳ 前端架構師是怎樣定義的在前端開發過程中,承擔怎樣的職能
前段構架師總體的定義是一個具有精通各種前端開發技術可以總體規劃處一個網站前台項目。
1、具體的說前端構架師是一個具有網站前端基礎知識如html、css、js等和一些前端框架如jQuery、angularjs等等前端技術，可以規劃處一個前端項目的實施、測試、優化等過程，並且熟悉後台語言可以和後台開發人員合作達成良好的交互和數據與表現的分離。另外還需要明確網站的定為，滿足客戶的需求，可以留住客戶，使用網站這種手段為公司提高效益，前端是直接和用戶交互的媒介。
2、職能：包括規劃和實施整個項目，制定項目中的一些規范，明確人員的分工，解決團隊中的協作問題以保證項目的按時完成。
Ⅳ 什麼是前端架構
架構設計的最重要目的是為了進行整體系統概覽，以及開發方向指導。
而架構要包含的內容，簡單說就是下面四個
1、系統間關系
2、系統內關系
3、應用內架構
4、系統規范與原則
而架構的原則主要是三個方面
1、架構的合適：架構就像衣服，不能太長，也不能太短
2、可擴展的：架構需要充分考慮擴展性
3、持續不斷的：架構不是一次性物品，是一個跟著軟體生命周期的長期過程
Ⅵ 如何搭建主流的前端架構，需要注意的問題有哪些
首先，了解前端開發 什麼是html？ 首先要明確，html是前端的基礎！Web前端開發是從網頁製作演變而來的,名稱上有很明顯的時代特徵。在互聯網的演化進程中,網頁製作是Web1.0時代產物,那時網站的主要內容是靜態的,用戶使用網站的行為也以瀏覽為主。.
Ⅶ 如何通過 Vue+Webpack 來做通用的前端組件化架構設計
angular:
我覺得angularjs的學習上手周期比較長，可能遇到問題，都無法立刻解決，而且編碼的質量明顯的很差，如果團隊沒有制定規范，那寫出來的代碼就沒法看。對於一個選用angularjs的團隊來說，我認為編碼規范是很重要的，否則對編碼能力是沒有提升的。
avalon:
avalonjs文檔資料沒有那麼全，我感覺一些開源支持的力量不夠多。不過，如果有項目需求，需要去做IE瀏覽器的支持話，我建議選擇avalonjs
vue：
vuejs 文檔比較齊全，vue吸取了angularjs 的一些優點，規避了一些缺點，至少編碼規范上有了一個質的飛躍，學習上手的周期比較短。vue起初只是一個輕量級的類庫，用來做類似於react的事情，同時vue也是可以拿來做前端架構設計的，比如：vueify + vue-router（spa框架）。
Ⅷ 要想成為前端架構師，應該學習哪些技術
我比較認同的有winter和賀師俊還有張雲龍這三位。其他沒提到的可能我不太關注，高手很多，但是能達到架構師的其實不多，最多算是高工，或者某一領域專業的牛人，我覺得就像前3位提到的大神，他們的編碼能力過硬，演算法能力，計算機基礎知識都沒的說，許多回答都是干貨，有理有據，show me code風格的，而且解答不會模糊，直接簡要，能做到這些必須是肚子里有貨，我覺得這算是硬體基礎。
2，編碼能力好，熟悉各項標准，演算法好，API熟練，就能成為前端架構師了么?不不，這些只能說你是個高工，你說你自己寫了許多框架和開源包，各種功能，前後端都有？no no no，也是最多算是高工而已。至少我是這樣認為，為什麼呢？因為你踩的坑決定了你架構的能力，你的硬體基礎只決定了你遇坑之後的解決能力。
打個比方，前端工作3年，一直在電商領域，或者一直在做sns，或者一直在做webview里的開發，這種經驗是不具備前端架構能力的，什麼？都是寫js？沒區別？錯了，你讓一個寫了3年電商框架的人去寫一個斗魚tv或者搜狐視頻試試，寫是能寫出來，但是選型問題真不會是最佳，因為他踩的坑一定沒有專注這個領域的人多。什麼是架構能力？其實說白了就是幫助最後項目順利開發完成，易擴展，好維護，有規范，能解決一些剛開始人看不到的麻煩。這些能力都是從一個一個真實得項目中鍛煉出來的，而不是說只做了一家公司的一個項目之後就可以說自己是前端架構師了。。
說的比較亂，其實簡單比方就是個經驗包的問題，你的經驗比你的技能更大的決定了你的架構能力。
3，溝通表達能力，這個其實不是特別重要，但是單獨拿出來說，就是因為如果你的想法不能在團隊有效的執行下去是不行的，你必須也一定是最後說服團隊使用你的方案的人。
所以最後，回到up主問的問題上來。
從一個前端工程師，如何根據目標，制定計劃，前端架構師需要涉及哪些知識點，還有哪些知識點是前端工程師所不具備的。希望知友提點。沒什麼知識點，你必須對你要做的東西有經驗，至少是做過1-2次（公司級項目），這才是架構師的價值，如果你根本沒做過同類的工程，你有什麼資格去架構他呢？現學現研究那隻是高工而已。
至於題目問的如何成為一個前端架構師，我覺得那些已經被很多人叫成前端架構師的人，自己都不覺得自己算是吧，只是入行久一點，活的長一點，經驗多一點，做的項目雜一點，跳槽次數猛一點，比你努力一點而已。