前端學習幾年後遇到瓶頸了，該怎麼辦？

01-07

學習前端已經有好幾年了，現在我感覺自己已經到瓶頸了，不知道該怎麼繼續了？目前我現在會的前端的東西有 Jquery LESS SASS HTML 這些前端管理工具打包工具有bower gulp grunt fis 這三個，我想問的是我現在想學習一些大網站的前端管理和架構方法，想更深入的去學習一些前端的組建化模塊化的東西，怎麼可以真正的實現前後端後離，然後呢再就是經常會看到一些文章裡面講前端的路由這個東西，不知道怎麼用，還有一個是 angularjs和一些類似這樣的前端JS框架（MVVM）數據雙向綁定的東西，主要能用於什麼樣的項目開發？求解

謝邀。

你跟我大半年前一樣，處於一個瓶頸期，頁面能寫、構建工具會用、包管理工具也會用，但卻發現網上大神們的模塊化、組件化、工程化之類的，根本不知道怎麼用。

同意樓上說的跳槽，但不太認同這就否定你的學習能力，你可能缺少的是接到複雜項目的機會。

當我加入到現在的公司後，我發現，雖然項目並不是非常大，但業務其實挺複雜的。我加入公司之前，公司就已經使用 CoffeeScript 了，然而，他們在多個 Coffee 文件間的數據傳遞，全是靠 window.x 這種全局變數去傳遞的，最多的一個頁面我發現過有 40+ 個全局變數，於是我心裡就覺得，這很容易就會變數命名衝突吧，於是我就去尋找解決方案。最後發現，原來之前聽起來高大上的模塊化方案，就是解決這個問題的，然後我開始調研 AMD、CMD、CommonJS 規範，以及對應的 RequireJS、SeaJS、Browserify 等。

確定使用 Browserify 去做模塊化後，緊接著就要開始重構項目，然而重構你不能一股腦兒就著手去手，你必須要先做設計，不然很多時候你重構過的代碼很快就得再重構，所以這就提升了你的架構設計能力。

於是，在重構 JS 時，我會把一些比較獨立的東西（比如我們使用的編輯器）抽出來，包括它的 HTML、Less、Coffee，這就是組件的概念，抽出來後，HTML 通過 PHP 的 include（當時還沒有使用模板引擎）、Less 通過 import、Coffee 通過 Browserify 的方式，實現了最原始的組件化。雖然還沒做到像 FIS 那樣，每個組件都用單獨的文件夾去存放，但我這樣抽出來其實是為了以後引入 FIS 作鋪墊的。

開發時我發現，我們前端的代碼都要根據後端 Laravel 框架的目錄設計，把前端的代碼放在他們設計的地方，這樣的目錄設計對前端來說其實是不友好的，我們會希望前端這邊也有自己的一套目錄結構，就像我會喜歡雲龍提出來的就近維護的哲學，也就是上面提到的每個組件都用單獨的文件夾去存放的結構。但後端的目錄都設計好了，我作為一個前端，不能說改就改。於是我就一直在想如何去做前後端分離。

對於前後端分離，我調研過淘寶 UED 的大前端方案，但這改造成本非常大，中間還得架一層 Node，這並不是我們這種小團隊可以維護的；我也調研過 SPA（Single Page Application）的架構，但這都不適合我們，因為項目在我進來之前，完全是以最原始的方式去寫的，並沒有使用任何的框架，現在引入 Angular 什麼的成本很大；最後我就調研 Mock Server 方案，詳情可以去我的博客看：前後端分離之構建 Mock Server 工程（一）：概述，大概是這麼一個過程：

其實前端能做的還有很多，比如代碼質量控制、自動化測試、前端報錯監控系統、用戶行為的監控和分析系統等等。

上面都是我這大半年來的經驗，我想表達的是，你應該去找一家更重視前端的公司，項目有足夠的複雜度，讓你需要不斷地遇到問題、思考問題、調研解決方案、最終解決問題。

jquery less sass grunt gulp webpack angular vue react

這些是前端「工具」，前端是紮實的瀏覽器基礎知識，CSS基礎知識，Javascript基礎知識，應用架構能力，綜合運用這些知識來設計程序，「配合」工具，解決問題，才是真正的前端能力。基礎知識是你的修養，而工具是誰都可以拿起來用的東西，只是工具。沒有修養，就工具控，用了一堆東西，但不知道這些東西需不需要，適合不適合開發場景，什麼時候適合，工具是如何工作的，你學的只是個「編程」的樣子，再學N年也沒什麼技術品位，不會思考判斷，不會選型集成，不停更換工具，到老也不知道編程是什麼。

我現在想學習一些大網站的前端管理和架構方法，想更深入的去學習一些前端的組建化模塊化的東西，怎麼可以真正的實現前後端後離，然後呢再就是經常會看到一些文章裡面講前端的路由這個東西，不知道怎麼用。。。

你的問題在於，你太貪心了，這也想學，那也想學，靜不下心來，像沒頭的雞一樣。

看見你說gulp，那你肯定知道node和npm，這不就是學習模塊化的起點嗎？

路由？去angular官方文檔看一下ngRoute，這不就開始學習路由了嗎？

雙向綁定？去angular主頁，上面就有一個簡單的表單app，然後再google 「when to use angular」這不就開始了解了嗎？

P.S. fis這種東西，要是沒人逼你用，就不用上趕著學了吧。真不明白用了gulp為什麼還要去學fis。

多看框架，然後模仿著造輪子

就拿你說的路由來說吧。我沒有用過angular。但想來應該是一樣的。

backbone的路由是為了達到路由變化時UI也發生變化的目的。

這樣說好像也不準確，應該是說監聽路變化，執行預先綁定的回調。

一般而言是監聽hash，因為這樣實現不重載頁面而實現頁面變化。

至於實現，源碼裡面寫的很明白。支持hashChang的，就監聽該事件。不支持的，就創建一個iframe模擬。

mvvm數據雙向綁定，大多數框架都基於Object.defineProperty。聽說angular使用的是依賴注入方式，具體是怎麼樣的，我沒讀過源碼，不瞎猜。

基礎知識點看完了，就造輪子，造各種輪子。不要覺得造輪子沒用，也不要聽別人說不要重複造輪子。

當然，這些是建立在不影響你工作效率的基礎上。

---------------------

我靠，兄弟，換公司吧。

換個靠譜的團隊

因為你的自學能力好像有點點薄弱

找個人帶吧

既然邀請了，那我也來回答一下吧，額外提一句，lz，推薦你去 @小爝那裡。

我認為首先第一點你的眼睛不能只看前端，有時候歷史也是一位很好的老師，像你提到的MVVM最早是微軟在http://ASP.NET裡面實現的一個模式，那對於別的語言python有pip，ruby有gem這些工具，這些東西目前來說，都是在補全（所謂前端）沒有的東西，如果你認真的搜索過JS創造的過程，10天就搞出來了一個語言，可想而知。所以，我的第一個建議是：不要將你的眼睛只顧著看前端開發的事情。

說到提升還是要說學習的方式，無非兩種引領潮流和實際借鑒。對於前者我想目前來說你應該是不可能了，這裡主要關注後者：實際借鑒，這就是一個解惑的過程。目前你產生了很多的疑問，我相信你在網路上也搜索了很多資料去閱讀，但是這些事情都還只是停留在紙上談兵的階段，你心裡沒譜，最重要的是你缺乏實踐。所以，我的第二個建議是：如果有機會，一定要想辦法去一次大公司。對於創業公司，你其實很難評估你到底能學到什麼程度，所以跟著大公司的同學去搞一圈（畢竟他們有了成體系的東西，如果你真的有心去琢磨，絕對能有收穫的。），實踐和借鑒。你應該就能明白，接下來你該怎麼走的問題。

前後分離目前來說都還沒有什麼比較好的方案，大家依然還在探索，在這裡你知道一點就行，就是把以前服務端負責渲染頁面的部分，移到了瀏覽器端。架構這個東西，真不是一成不變的。網路上有人說的架構，也不一定適合你，首先你得明白你的架構要解決什麼問題，從而才可能去設計，架構跟著業務的變化而變化。至於angularjs適合做什麼，推薦你看一下阿里雲的web控制台，你就明白這個框架適合在什麼領域了。

記得誰說過一個不能靠自學達到工作水平的人不是一個合格的程序員從題主的描述來看我半年前的水平跟你差不多沒覺得有瓶頸這回事我開始學前端是一年前你問的這些東西谷歌一下前端模塊化 angular前端路由 SPA應用 angular的雙向綁定。。。能學的東西海了去路漫漫其修遠兮一起加油吧

用了就知道了，我覺得如果想接觸更多的東西，如果現公司不足以支撐自己玩兒，自己玩兒的項目也玩不出花樣來，如果公司給的錢又覺得少，無成就感，無上升空間，走吧，離開去見識更高更牛逼的人，我也想啊，求帶走

要不你來我這，你這些問題我都能給你解惑…咋樣？么么噠。

模塊化 ng 項目管理工具大型網站前端設計移動端開發 nodejs … 應有盡有啊~

歡迎私信~

我看了一晚上的「前端」話題，幾乎沒幾個技術問題。

大部分問題都是覺得前端沒前途問職業發展的，或者如何入門的。

如果覺得遇到瓶頸...

可以干點別的呀！

我認為真正的前後端分離，是後端只提供純介面。

前端引入nodejs，前、後端獨立部署。

這樣前端就可以自己寫路由了，而不是後端控制路由。（路由就是根據url路徑或參數的不同，有不同的邏輯，渲染不同的頁面）

nodejs的出現，才使前端工程師可以做到這些。當然以前也不是不能實現，只是前端工程師和後端工程師各干各的，前端工程師也沒有動力學習一門後端語言。

我理解的前端工程化、模塊化，就是頁面也好js也好，在開發階段是一個個的模塊，很多個文件。在構建的時候，使用grunt也好gulp也好，把這些模塊構建到一起去。

這樣在構建期組裝頁面，比起後端模板在伺服器組裝頁面的好處，也不多提。

唯一的缺點可能就是增加了一些開發成本，和新人熟悉的成本。

angularjs是一個強有力的框架，和jquery的理念不同。適合一些CURD的應用，題主使用angularjs做一個小應用就會了。MVVM簡單來說就是比如頁面上的input，輸入一個123，js對象里也會得到這個123的修改。把js對象改成1234，1234馬上也會反映到intput上。

寫了三段話，謝謝大家。其實我是個寫java的。

瀉藥別好高騖遠，敢先把你目前的前端項目改成模塊化么，嘗試達到這個要求：使用 es6 的模塊規範開發代碼，想辦法發布到線上以後能正常跑起來。

我正在擼jquery代碼……感覺很有收穫。話說擼代碼的過程中深刻體會到了，高人是用工具完成自己的思想。所以我現在的感覺是，多實踐多思考是突破瓶頸的不二法門。一定要思考。

編程語言Java，已經21歲了。從1995年誕生以來，就一直活躍於企業中，名企應用天貓，百度，知乎......都是Java語言編寫，就連現在使用廣泛的XMind也是Java編寫的。Java應用的廣泛已經到了「無處不用」的盛世，而且一直在語言排行榜榜首，從未被超越。廢話不多說，今天主要是給大家講講怎樣學習Java，給大家建議一條輕鬆精通Java的學習路線。有了相對標準的流程，那麼你的學習效率一定會倍增。

基礎篇發出後大家反響還是較好的，感興趣的朋友可以百度《黑馬程序員：輕鬆精通Java學習路線連載1-基礎篇》，即可查看基礎知識的學習內容。我出Java學習路線的系列文章，只是想給予愛好技術的人一個借鑒而已，也就是提前亮，希望可以在你學習與想要學習Java的時候盡一點微薄之力。文字我會盡量使用大白話說明，畢竟一些知識點也無法用大白話說清楚還請諒解。

JavaWeb網站設計基礎階段

簡單理解JavaWeb就是網站設計，通過此階段的學習過後應該要掌握以下幾方面能力：

1.可以仿製任何網站前端頁面

2.可以解決網頁瀏覽器兼容性問題

3.可以解決PC端和移動端兼容性問題

4.可以使用前端腳本進行相關網頁功能特效編寫

5.可以使用JavaWeb核心技術輕鬆寫出任何網站功能模塊

6.可以使用JavaWeb高級部分知識解決網站的相關高並發問題

你完全可以勝任JavaWeb開發工程師的工作，為之後的框架和整體項目的學習打下良好的基礎，下面我對知識點進行一個詳細的介紹。

一、前端技術

1.HTML

超文本標記語言，標準通用標記語言下的一個應用。「超文本」就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。（網站頁面的布局，可以點開任意一個頁面右鍵查看源代碼，即可看到html的字樣）超文本標記語言的結構包括「頭」部分（英語：Head）、和「主體」部分（英語：Body），其中「頭」部提供關於網頁的信息，「主體」部分提供網頁的具體內容。

學習內容：了解HTML語言，HTML語言背景知識，掌握HTML的整體結構、文件標籤、排版標籤、塊標籤、字體標籤、列表標籤、圖形標籤、超鏈接標籤、表格標籤、表單標籤(form標籤、input標籤、select標籤等)、分區標籤、頭標籤。

2.SS

層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。簡單說就是網頁的樣式製作。

學習內容：CSS介紹、CSS導入方式(內部樣式表、內聯樣式表、外部樣式表)、五大CSS選擇器(ID選擇器、類選擇器、元素選擇器、屬性選擇器、偽類等)、樣式屬性介紹。

3.JavaScript

JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。

學習內容：JavaScript編程，JavaScript語法、數據類型、運算符、表達式、流程式控制制，JavaScript內部對象、數組、字元串、日期時間、數學函數、正則表達式，JavaScript函數、自定義函數、全局函數，BOM介紹、window對象、location對象、history對象使用。 DHTML編程，理解DOM樹，DOM對象，常用DOM對象的屬性、方法和事件，編寫事件處理程序、使用DOM操作HTML文檔、遍歷文檔樹上的節點、搜索文檔中特定的元素、修改文檔內容、往文檔添加新內容、使用DOM操作 XML文檔。

4.jQuery

JQuery是繼prototype之後又一個優秀的Javascript庫。它是輕量級的js庫，它兼容CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及後續版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML（標準通用標記語言下的一個應用）、events、實現動畫效果，並且方便地為網站提供AJAX交互。jQuery還有一個比較大的優勢是，它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁面保持代碼和html內容分離，也就是說，不用再在html裡面插入一堆js來調用命令了，只需要定義id即可。

jQuery是一個兼容多瀏覽器的javascript庫，核心理念是write less,do more(寫得更少,做得更多)。jQuery在2006年1月由美國人John Resig在紐約的barcamp發布，吸引了來自世界各地的眾多JavaScript高手加入，由Dave Methvin率領團隊進行開發。如今，jQuery已經成為最流行的javascript庫，在世界前10000個訪問最多的網站中，有超過55%在使用jQuery。jQuery是免費、開源的，使用MIT許可協議。

jQuery的語法設計可以使開發更加便捷，例如操作文檔對象、選擇DOM元素、製作動畫效果、事件處理、使用Ajax以及其他功能。除此以外，jQuery提供API讓開發者編寫插件。其模塊化的使用方式使開發者可以很輕鬆的開發出功能強大的靜態或動態網頁。jQuery，顧名思義，也就是JavaScript和查詢（Query），即是輔助JavaScript開發的庫。

學習內容：認識JQuery、選擇器介紹、css選擇器、jQuery選擇器及其優勢勢、基本選擇器、層次選擇器、過濾選擇器、表單選擇器、選擇器練習小案例等;JQuery操作DOM：DOM分類、查找元素/屬性節點、創造元素/屬性/文本節點、插入節點、刪除節點、複製節點、替換節點、包裹節點、屬性操作、樣式操作、遍歷節點、CSS-DOM操作;動畫和事件：jQuery中的事件、載入DOM、事件綁定、合成事件、事件冒泡、事件對象的屬性、移除按鈕上註冊的事件、模擬操作、JQuery中的動畫。

5.BootStrap

Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。[1] 它由Twitter的設計師Mark Otto和Jacob Thornton合作開發，是一個CSS/HTML框架。Bootstrap提供了優雅的HTML和CSS規範，它即是由動態CSS語言Less寫成。

Bootstrap一經推出後頗受歡迎，一直是GitHub上的熱門開源項目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項目。國內一些移動開發者較為熟悉的框架，如WeX5前端開源框架等，也是基於Bootstrap源碼進行性能優化而來。

學習內容：響應式頁面的的開發與設計，強大的柵格布局，內置的CSS類庫，JS插件，快速布局商城頁面。

二、MySQL及JDBC

MySQL是一個關係型資料庫管理系統，由瑞典MySQL AB 公司開發，目前屬於 Oracle 旗下產品。MySQL 最流行的關係型資料庫管理系統，在 WEB 應用方面MySQL是最好的 RDBMS (Relational Database Management System，關係資料庫管理系統) 應用軟體之一。

JDBC（Java Data Base Connectivity,java資料庫連接）是一種用於執行SQL語句的Java API，可以為多種關係資料庫提供統一訪問，它由一組用Java語言編寫的類和介面組成。JDBC執行SQL語句操作資料庫。

這裡在說明一下，資料庫是非常重要的，以後可以說做項目做開發就離不開它，所以大家一定要好好學習此階段課程。不知道大家有沒有記憶，在基礎階段就學習MySQL和JDBC了,這裡又加強學習，可以看出其有多重要。學習內容：

1.Mysql資料庫回顧資料庫使用，SQL語句介紹、資料庫增刪改操作DDL語句使用、表增刪改操作DML語句使用、表查詢操作DQL語句使用、以及查詢語句條件、排序、聚合、分組操作。

2.JDBC開發回顧JDBC介紹、驅動的原理及使用、JDBC核心使用、DriverManager、Connection、Statement、ResultSet詳細使用，JDBC的CURD操作、防止SQL注入及PrepareStatement使用。

3.連接池和DBUtils連接池的介紹，自定義連接池。常用的開源連接池的DBCP 和 C3P0的介紹和使用，JDBC的工具類DBUtils的使用。

三、JavaWeb開發核心內容

學會Web核心技術就擁有了開發b/s系統的基礎能力可以來開發一個網站了，如：實現網站的用戶登錄、註冊，商品信息的分頁顯示、商品信息的非同步動態查詢，用戶名非同步校驗等功能，下面是學習內容：

1.XMLXML的概念與基本作用、XML的基本語法、XML的約束模式、DTD、Schema、名稱空間。XML解析介紹、DOM4J 解析XML、XPath的使用。

2.HTTP及TomcatWEB伺服器的工作原理、Tomcat的安裝與啟動運行、Tomcat的體系結構、在Tomcat中配置WEB虛擬目錄與發布WEB應用程序的方式、設置目錄的默認網頁、使用Tomcat配置虛擬主機、WAR文件生成與使用。HTTP協議詳解。

3.ServletServlet簡介、Servlet生命周期、servlet配置詳解、訪問servlet路徑分析、ServletConfig使用及servlet初始化參數的使用，ServletContext使用、系統初始化參數、web資源獲取。

4.request與responseHttpServletResponse和HttpServletRequest的應用、HTTP協議在web開發中應用、請求轉發與重定向使用。

5.Cookie與SessionCookie及Cookie的應用，Cookie實現商品瀏覽歷史記錄、Cookie實現記住用戶名和密碼,Session及Session域的應用，Session跟蹤機制，利用Session防止表單重複提交，MD5演算法及其應用，Session的持久化。最後結合之前所學知識完成一次性驗證碼和購物車小案例。

6.JSP技術JSP運行原理、JSP中的9個內部對象和作用、JSP表達式、JSP腳本片段、JSP聲明、JSP注釋,EL表達式簡介，EL獲得數據、EL執行運算、EL內置對象、EL函數，page指令及其重要的屬性，在web.xml文件中設置全局錯誤處理。JSP中的include指令及其典型應用。pageContext對象的詳細講解。JSP動作標籤介紹。JSTL標準標籤庫的介紹及使用。JSP模式介紹、MVC模式介紹、JavaBean介紹、BeanUtils使用。

7.JDBC高級JDBC的事務，轉賬案例的實現。JDBC的CRUD及分頁，條件查詢。

8.AJAX開發AJAX介紹、XMLHttpRequest對象詳解、JQuery的AJAX、JSON介紹、JSONLIB插件的使用。

9.JavaWeb高級開發技術Servlet Listenert監聽器介紹及使用、Servlet Filter過濾器介紹、過濾器生命周期、過濾器鏈分析、FilterConfig介紹。郵件發送，自動登錄功能的實現。

10.基礎加強註解介紹、自定義註解介紹、元註解使用、代理介紹、動態代理Proxy使用、類載入介紹。

11.Linux虛擬機安裝及使用，CentOS的安裝，Linux的常用命令，組、許可權命令，在Linux上安裝JDK，Tomcat，MySQL。

12.RedisRedis是時下非常流行的NoSQL資料庫，使用Redis可以實現高性能的緩存方案，知識點包括：NOSQL介紹、什麼是redis、redis安裝配置、redis數據類型及操作(String、Hashs、Lists、Sets、Sorted Sets)、Jedis使用、發布訂閱、持久化、主從複製。

四、階段案例

學習了這麼多知識沒有項目案例的檢驗，根本不知道到底學了這麼多有沒有用，所以除了每個階段的小案例外，最後一定要自己獨立完成這個網站才可以。結合之前所學知識完成JavaWeb階段電子商城，本系統採用經典的MVC設計模式，從需求分析到編碼將涉及到Java Web大部分常見的技術，讓學員理解真實項目的軟體開發流程(分析、設計、編碼、測試、部署)，通過此項目的鍛煉學員可以熟練掌握基本的Java Web開發和複雜問題的解決方案，為後面的學習奠定基礎，使用了最新的技術完成該案例，在項目中會使用Redis緩存技術，會抽取IOC的工廠，並且可以運行在Linux伺服器上。

JavaWeb的知識相對於Java基礎的知識來說不會那麼枯燥，大家在學習的時候一定要「燥起來」，多練習多打代碼，自己喜歡什麼樣的頁面，就趕快看看源代碼，看多了自己就會做了。做出自己的想要的網站是一件多麼自豪的事啊。

沒覺得模塊化有多難！你學了前端幾年，我學了1年前後端，你說的那些庫我都不會用，不是學不會，是壓根沒需求就不想去學。但我目前寫項目練習，第一個考慮的的就是把所有功能都分離，能復用的復用。

Python的那些庫，Nodejs那些庫，我關注的從來不是這個庫怎麼用，而是這個原理是什麼。

你不妨學門後端語言。

正在做前後端分離，留坑

困惑