前端開發瓶頸？

感覺前端的工作和學習遇到瓶頸了～～求解惑

在將近一年的前端工作中，獨立完成了一個系統的前端開發。系統功能為一般的增刪查改，以及圖表統計的功能。完成了七八個版本的迭代。系統是自己寫的jsp頁面，有一百來個jsp了。頁面組件部分用了bootstrap的樣式，統計圖表用的echart。頁面 表格用的bootstrap table。頁面是用iframe套接起來的，所以頁面都是彼此獨立的。完全可以滿足需求的功能。只是功能交互上用戶體驗不是很友好。然後頁面交互功能都是自己用js和jq寫的一個個方法實現的。樣式也多數是自己碼的樣式。同時頁面表單多是用的el表達式來獲得後台發送的數據，以及Ajax向後台請求的數據。表單提交也是自己寫的方法進行驗證。如今，看到前端的開發者們都用什麼框架實現什麼模塊化開發，以及sass, less來預處理樣式什麼的，還有那個什麼按需載入的插件，表單驗證的插件。突然感覺自己好落伍了。然後自己也去看這些什麼backbone.js，sea. js, angular.js , require. js , sass, less, node. js等等這些。不知道是不是跨度太大了，學習得很是浮躁，感覺好難理解 ，學不下去。現在感到很迷惘，不知前端該如何循序漸進了。在一個相對完善和成熟的產品中得不到進步。求指導指教引導！！！

---

謝邀。

你說 Angular 難學就算了，但你連 Less、Sass 這些都說難學，我真的回答不下去……

就這麼說吧，所有所有的框架或者庫或者語法糖，都是為了解決問題而出現的。你應該先去了解這個東西是為了解決什麼問題而生的，而不是為了去學而去學，不要學會了騎車之後連為什麼要騎車都沒弄懂。

---

題主可以先寫個目前這東西的單頁應用 demo, 之後自然會遇到瓶頸. 再往後硬著頭皮破掉瓶頸, 一定就能有所收穫. 那個時候樓主回頭再看這些個庫/框架/技術, 應該就會有感覺了.

就 angular/backbone 來講, 樓主的業務需求到了, 但是技術需求還沒到, 差單頁應用這一環.

---

沒有清楚具體要解決什麼樣的問題

then

問題分解

then

流程指定

then

問題間都是怎麼聯繫到一起的

then

單問題共同組建成解決目標問題方案

then

思路策略

劃歸大法

逆向:

抽象出最小問題

由小問題組成環節問題

由環節問題組成集合操作問題

由集合問題組成介面

由介面組成解決目標問題

正向:

將目標拆解成一個列表然後迭代下去，直到拆解成最小問題

正向與逆向合併

產生一個個函數或者類

此時最好不要寫代碼，只需要把大框給定下來然後才開始寫細節

主要的變數與函數

能依賴就載入，如果是私有的就寫在閉包的最上方，並注釋好用途，等最終寫完了，最好把它出現的位置與函數名都標識好，

函數

鉤子策略: 一般類似層的抽象與解決，最好讓它有返回值，根據返回值確定鉤子解決問題的狀態

工具策略: util的定製，

函數參數策略: 靈活‖定參┏ (^ω^)=?重載策略

函數變數要點:統一命名在最上方，如果需要，要注釋類型，用途，最好一個變數一種用途，變數最好根據出現的位置來排，當然，i,j, len,prop,這種，最好寫在一起放到最前面或者最後面。

coding風格: 最好確定好自己的風格，並堅持下去，當然要清晰簡潔直觀，注意，要用分號結尾標識語句結束。

流程策略：

環節制定，

可能性判斷，

屏蔽異常，

如果不是最小問題┏ (^ω^)=?調用函數輔助，

判斷技巧，

最快完成

最慢完成

完成小目標的前後是否需要鉤子

函數的多重嵌套，也就是層的抽象

函數的繼承激發

函數的延緩激發(包含同步與非同步)

函數的上下文對象

函數的聚合

返回值 如果有，要與函數名首尾呼應

不要一開始就想著寫出完美方案，要不斷的迭代，修改，要無限的接近完美，而不能想著絕對完美

問題一開始絕對不能耦合嵌套在一起，一定要先解決掉一個個最小問題，再聚合

步進式的策略往往比一開始就把各種情況弄到一起要有效率

插件最好用jQuery UI 的widget工廠，把_destroy方法改一改換成你自己決定的結束條件

其他:

js的模塊載入器

自己寫一個也不是很難，

原理主要是兩種方式

一個是創建script標籤，給src和async屬性，再給它弄點屬性

還有一種方法就是eval或者Funtion()

主要有以下幾個問題需要解決

路徑，模塊，define,require 循環依賴，已載入的緩存，模塊間的影射，和載入器

注意base標籤等一系列注意點，如果需要更多細節，去dojo找module那頁

grunt

主要就是監控，壓縮代碼，創建工程目錄，編譯less,coffee這類代碼，還有檢查代碼風格等

如果進公司了，問問就行，一般都應該有明確的流程，不必糾結

nodejs

最好有JAVA或者C/C++背景，要不然，只能學到表層的一些東西，深了知識就不夠用了

比如Buffer,二進位,HTTP請求響應的格式，視頻流，加密，安全策略，資料庫，LINUX操作，SHELL編程

模板

一般就是填充數據，不必糾結

模板一般都有以下功能

變數佔位符號

if else if else

for

模板的重載與引入

操作符號。。。。

主要還是看你的html和css功力如何

MVC MVVM

angular沒用過,backbone了解一點

看過一點avalon的源代碼

其實MVC要解決的就是將邏輯與展現分開

Controler一般各個框架都有自己的理解，這個分歧較大

其實只要記住增刪改查將模型與視圖綁定在一起，並且在操作細節的前後注意放鉤子就ok了，其他的不過是渲染，路由和ajax，再具體點就是各個細節，具體情況具體分析

不過要清楚框架的擴展機制

這些都算是學js的一點經驗，希望能對你有那麼一丁點幫助

---

你具體分析下目前的情況，用一個你覺得還算好學好用的框架去重構和優化現有的系統，你就成長了

---

不要聽信他們的吐槽，目前來說前端學習迷茫很正常

jsconf上，taobao的大牛 赫門 在「前端服務化之路」上說：

每18-24個月，前端都會難一倍

前端工程化現在才剛剛開始，很多人都在吐槽前端社區發展太快，輪子太多，稍微放鬆就會跟不上。你舉例子的那些框架或者庫，現在來看，基本都是落伍，或者處於落伍的邊緣了。

所以說建議就是：逃離舒適區，多關注前端社區的發展。

---

樓主不用框架的話會寫頁面嗎

---

前端技術日新月異，優秀的框架，庫層出不窮，不可能都精通——不過說到底都是為了解決前端領域某些現有問題而開發的。我覺得你可以先用一個大家普遍都接受的大的框架，做一個較為完整的網站，在這個框架里試圖解決你遇到的問題（模塊化，重用，繼承，通信，樣式等等）。你肯定會在這個過程中發現問題，把他們記錄下來，找到答案，順藤摸瓜就慢慢了解其他框架是如何解決這些問題的了。

簡單說，在項目中觸類旁通，精通一個框架，熟悉其他相關知識，逐漸建立起對這個領域的認知，這和其他技術沒什麼差。

我自己是從jQuery開始了解JS，然後是angular做了兩年的計算廣告，供求方平台相關的項目，現在用knockout開發大數據挖掘展示平台相關的項目。在這個過程中也漸漸接觸熟悉了node，npm，bower，grunt，gulp，sass，coffeescript，jasmine，mocha，jenkins等等知識，還有機會和測試，設計，項目管理的同事一起共事學到很多。

共勉！

---

把jquery的源碼拿來學習，學透的話能有不小的進步。

---

大哥，我搞後台的都比你溜，你真的是入門啊，靜下心一步步來。

---

其實我覺得你還不算一個前端，正在入門階段。。。

---

推薦閱讀：