小公司從事前端一年有感以及提問

大家好最近做項目每天都會冒出來一些類似的問題困擾著我，還請前輩給答疑解惑一下，指明方向

我們公司不大（很小，我兼職設計ps AI、ui、做PPT和各種），就我一個前端（我沒用框架，也沒太多連續(xù)時間學習，就用jquery）和一個后端（TP框架，有時候一些js是后臺寫），我們的開發(fā)模式也就是我寫頁面和基本的js交互，然后把頁面交給PHP，頁面里面有很多PHP代碼，我看著都很亂，還有點不太會（說是PHP不難，我也想學，可偶爾一個挺復雜點的JS效果就讓我頭疼了，精疲力盡啊）

現(xiàn)在每天我都想改進和讓我焦慮的事情如下：

1，我們的工作模式現(xiàn)在在別的公司（也不大那種吧）算是常見嗎，作為前端我是不是做的太少了

2，如果前后端分離的話，前端就只能從ajax獲取后臺數(shù)據(jù)？然后加載到dom嗎？有其他獲取的方式嗎

3，如果頁面很多模塊比如好多下拉還有表格，那么ajax要多次單獨傳輸還是一次傳輸過來？如果一次要怎么把數(shù)據(jù)(json)分布給這些組件呢（有條件的前輩復制個簡單demo給看看行嗎）

4，以上憂慮來自于，項目數(shù)據(jù)很多，然后我對前后端交接處又云里霧里，ajax基本是后端寫，導致我非常被動，對項目整體把握沒那么好，感覺后端貌似更容易吞噬前端，我想改變這種局面（有一次聽后端竟然說項目是他一個人做的<說是開玩笑，但是對我打擊很大>，我ri了）

5，我現(xiàn)在要從哪里開始做起，要如何慢慢改變這種已經適應了一年的模式，讓后端也能接受（貌似他的ajax也是基礎層面，難一些的也就不行了，我們項目要求不是很高，也沒有人說過啥，但我想讓前端表現(xiàn)的更好）
我以前學過PHP（比較淺那種），特別想深入學習一下，這樣只有自己實踐了才會明白其中的原理，因為感覺跟這個后端配合，我進步不大，很被動，他習慣了只做他懂了，不會的就繞道了，所有他隨便搞，只要搞出來就行，我要從哪里插手？

5，這些問題我也查了挺多，不過我感覺都不如自己完整的表達出來我的想法

回答

編輯回答

我甘愿

1，我們的工作模式現(xiàn)在在別的公司（也不大那種吧）算是常見嗎，作為前端我是不是做的太少了

這種工作模式在小公司很常見的，尤其是某些做傳統(tǒng)軟件的公司，我也待過四五家公司了，待過小公司，待過大公司，對你的這種情況還是有點了解的。
小公司嗎，資金有限，用人成本在那里，恨不得招一個人來什么都會，也就不難理解讓你一個做前端的兼職設計ps AI等等（和我以前待的一個公司一樣，前端還要兼職做ui設計）。
作為前端的你做的太雜了，你目前的狀態(tài)應該是技術的深度更加重要，而不是廣度。PS AI,UI等應該有專門的人去負責。

2，如果前后端分離的話，前端就只能從ajax獲取后臺數(shù)據(jù)？然后加載到dom嗎？有其他獲取的方式嗎

我是做后端的，前端的經驗不多。我個人認為用的最多的應該ajax調用后臺的接口獲取數(shù)據(jù)，當然也有其他獲取后臺數(shù)據(jù)的方式，比如后端主動將數(shù)據(jù)推送到前端。

不要小瞧從ajax獲取后臺數(shù)據(jù)，然后加載到dom這個過程，很多前端框架把這個過程玩成了花。

3，如果頁面很多模塊比如好多下拉還有表格，那么ajax要多次單獨傳輸還是一次傳輸過來？如果一次要怎么把數(shù)據(jù)(json)分布給這些組件呢（有條件的前輩復制個簡單demo給看看行嗎）

好多模塊需要的數(shù)據(jù)量很少，可以把這些模塊需要的數(shù)據(jù)后臺合并下，一次ajax就可以獲取。當是對于有些模塊需要的數(shù)據(jù)量很大，這個時候最好按需加載，即用的時候ajax請求后臺獲取下。

4，以上憂慮來自于，項目數(shù)據(jù)很多，然后我對前后端交接處又云里霧里，ajax基本是后端寫，導致我非常被動，對項目整體把握沒那么好，感覺后端貌似更容易吞噬前端，我想改變這種局面（有一次聽后端竟然說項目是他一個人做的<說是開玩笑，但是對我打擊很大>，我ri了）

主要還是你公司的問題，分工不明確。就你一個前端，后端不負責些前端的工作，項目什么時候能完成呀。
規(guī)范的公司會分工明確，會在項目前期確定好前后端怎么交互，并落實到文檔，前端參考文檔，有問題及時溝通即可。

5，我現(xiàn)在要從哪里開始做起，要如何慢慢改變這種已經適應了一年的模式，讓后端也能接受（貌似他的ajax也是基礎層面，難一些的也就不行了，我們項目要求不是很高，也沒有人說過啥，但我想讓前端表現(xiàn)的更好）
我以前學過PHP（比較淺那種），特別想深入學習一下，這樣只有自己實踐了才會明白其中的原理，因為感覺跟這個后端配合，我進步不大，很被動，他習慣了只做他懂了，不會的就繞道了，所有他隨便搞，只要搞出來就行，我要從哪里插手？

既然做前端了，那就堅持下去。換來換去，可能最后什么都只是會一點。你以為身邊的牛人天生就牛嗎，不是的，最重要的是別人比你花的時間多，比你勤奮，你晚上回去打游戲，別人在學習，你周末去玩，別人在學習，
你和女朋友你儂我儂，別人在學習。

換一家公司吧，不一定非要去大公司，很多小的公司技術也很規(guī)范的，技術氛圍也很好，小而美。

1：基礎（html/css/javascript/json等等一堆）一定要打扎實了。
2：大公司招聘前端的時候，都會列出一些技術要求，什么什么框架呀，你可以看看那些技術你是否掌握了。
3：經驗和解決問題的能力在工作中汲取，邊做邊學，多思考，多做筆記。
4：肯花時間。

2017年6月15日 14:56

編輯回答

舊言

好好搞前端：

HTML 方面看看 HTML5 API，實踐一下；
CSS 方面打基礎，掌握 flexbox，不考慮低版本PC 端和手機瀏覽器；
js 方面把基礎打牢，看兩遍 js 高程，掌握 ES7，ES8；基礎牢固之后，再好好掌握，并實踐，優(yōu)化 vue，React，起初用vue-cli，roadhog + dva 這樣的腳手架搭建項目，可以采用比較穩(wěn)定的 UI 框架來開發(fā)比如 antd，element-ui，vux，vant，之后慢慢掌握 webpack，parcel，結合官方文檔，多看看 github 別人怎么配的，多思考，總結，實踐再思考，總結，優(yōu)化。期間遇到任何有關 HTML，CSS，js 的問題多加借鑒 mdn，也可以看 w3c也 Okay！
提高英語水平，多看英文資料，medium，github，stackoverflow，官網。。
js 基礎牢固的話后續(xù)方向有很多，，可以搞很多東西。。
想偏設計進修的話那我提不了什么建議。。

2017年3月27日 15:54

編輯回答

尐飯團

你們公司的工作模式（前端寫完頁面給后端處理，后端寫部分js），我公司以前也是這樣，不過已經是2年前的事情了，這種工作模式職責不明確，代碼結構混亂，難以維護，現(xiàn)在都使用前后端分離的模式了，各司其職，后端不會碰前端的代碼，前端需要調接口，寫更多的邏輯，而不是單純地去寫頁面。
前后端分離的話，現(xiàn)在已經有很多mvvm框架了，十分方便，容易維護，組件化編碼，目前你們公司的工作模式我感覺你的成長不會很高了，前端技術更新速度非常快。
前端的路子很是有很長的路可以走的，而不是去考慮學后端的問題，個人建議你離職吧。

2017年1月13日 00:15

編輯回答

失心人

1 你們得后端太懶, 不想被改變, 你得試著甩掉他, 根據(jù)你的描述被后端說成是他一個人做得他有70%得自信敢說這話, 因為你在項目中的作用僅僅是寫靜態(tài)頁面, 而且這個靜態(tài)頁面還要給后端去寫 php 代碼嵌套數(shù)據(jù), 他敢說項目是他做的是因為他知道項目從前端到后端是怎么運行的, 這一點你很吃虧

2 前后端分離,對前端得要求比較多了, 比如這整個項目你可以脫離后端提供得數(shù)據(jù)只依賴 mock.js 這樣得假數(shù)據(jù)接口就能從頭跑到尾, 前后端得配合就是協(xié)商好這些數(shù)據(jù)的格式是什么樣, 怎么通信 ajax 或者 websocket , 根據(jù)你目前得情況你可以讓你后端渲染頁面時只把數(shù)據(jù)賦值到變量里面, 你再用這些變量去實現(xiàn)效果,比如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<script>
    // 由 php 渲染整個頁面并賦值
    var data = "<?= $data ?>";
    // 自己用數(shù)據(jù)去實現(xiàn)頁面效果
    alert(data);
</script>

<body>
    <div id="app"></div>
</body>
</html>

上面這個例子也不能稱作前后端分離, 不過可以現(xiàn)在接下來得項目中實驗一下

3 通常前后端分離得一個頁面會有兩個接口, 一個是渲染頁面接口, 一個是獲取數(shù)據(jù)接口, 前者可以直接自己維護, 比如 vue-router, angular/router 這些去自己維護路由接口, 通過 ajax 去獲取的數(shù)據(jù)你要看是怎么用, 在前端最典型得例子就是城市三級聯(lián)動這個組件, 最開始只會獲取省級數(shù)據(jù), 然后根據(jù)用戶點那個省才會去請求相應省底下得市級數(shù)據(jù), 最簡單得判斷方法是看數(shù)據(jù)得時間敏感性, 如果數(shù)據(jù)需要實時的那么就要少量多次得去遠程獲取, 如果不是實時的, 數(shù)據(jù)量多得時候就懶加載, 按需加載, 數(shù)據(jù)量少得時候,比如就是一個下拉列表得幾個選項, 你可以一并讓遠程提供(讓遠程提供也是為了不把數(shù)據(jù)寫死, 不然有變動了你也跟著受累)

4 把前端得事給摟過來, ajax 這個就得你自己去做, jq 對 ajax 請求的數(shù)據(jù)不友好, 推薦可以用 vue 過渡一下, 這個框架得侵入性比較小(意思就是說你完全可以在現(xiàn)有得項目中直接把 vue 去引入進來開發(fā), 原有的不會受到影響), 當你體會到 事件驅動 和 數(shù)據(jù)驅動 的區(qū)別就明白了現(xiàn)代前端是什么了

5 先vue 官網教程上個手, 接下來就完全可以和后端商量著把請求數(shù)據(jù)的活給接下來了, 這對他來說還算減輕工作量, 如果不同意就換公司吧, 不廢話

6 我本身是個后端(因為我不喜歡寫靜態(tài)頁面, 如果有現(xiàn)成得 ui 另說), 站在我的角度來看前端的話, 前端最短板的就是在 tcp/http 請求上了, post/get 的區(qū)別(請求的方式, 為什么數(shù)據(jù)提交不用 get, post 的數(shù)據(jù)格式有幾種, 這之間有什么區(qū)別)? http 和 https 的區(qū)別? session/cookie 的區(qū)別? 跨域如何處理? 一個表單從前端提交再到存到數(shù)據(jù)庫中這中間發(fā)生了什么? 表單需要驗證嗎?為什么?前后端都要驗證它嗎? 如何防范 csrf/xss 攻擊? 弄明白這些問題你也不會輕易被后端得給唬住了

ps: 根據(jù)你得描述你們得后端開發(fā)就是個混子, 這都8102年了還玩三年前爛大街得東西, 離他遠點換個公司吧, 畢竟還年輕, 但是時間很寶貴, 特別是你前三年, 如果沒有什么成長后面會給人一種一年經驗混三年的錯覺

2017年5月8日 23:27

編輯回答

孤酒

1.我之前就是在這樣一家類似的公司工作，公司主要是做電商，想做自己的APP就招了我一個前端，主管（也算是經理的合伙人）做后臺（用的PHP），所以我一個人承包了設計＋前端的所有東西，不過還好我們是前后臺完全分離，并沒有出現(xiàn)你說的頁面亂的情況。
2.關于數(shù)據(jù)傳輸，我沒有用ajax，而是后臺給了接口我直接調用請求數(shù)據(jù)來渲染，但是后臺數(shù)據(jù)通常給的和我之前自己模擬的假數(shù)據(jù)格式不一致，所以導致我后期修改了很多東西。
3.再說回公司，如果你是真的想做前端，想在這方面有發(fā)展，建議提升自己的能力，去正規(guī)的互聯(lián)網公司，正規(guī)的意思是技術正規(guī)，公司制度相對完善，公司配備相對完整，這樣對你能力的提高也有很大的幫助。
就先說這些吧，畢竟我自己也還沒有完全成為厲害的前端，技術方面不多說，怕誤導你。

2017年5月18日 11:39

編輯回答

遲月

1.挺常見的 ps 什么的,基本交互js這些都是要做的
2.目前jq的ajax 或者使用框架
3.模塊多,設置鉤子,局部ajax請求數(shù)據(jù),全部數(shù)據(jù)的話不現(xiàn)實,如果數(shù)據(jù)量大,頁面得崩死...比如第一個表格,頁面開始就請求一個,加載好后放在那里,然后第二個..設置局部刷新
4.5.都是一個問題工作不光技術好壞,還有溝通能力,ajax返回無非就是狀態(tài)數(shù)據(jù)什么的,讓他們給你說清楚返回的是什么就好了

2017年2月6日 11:53

編輯回答

爛人

1，我們的工作模式現(xiàn)在在別的公司（也不大那種吧）算是常見嗎，作為前端我是不是做的太少了

這個不清楚，我沒有呆過這樣的公司。不過據(jù)別人說，你這種情況在小的創(chuàng)業(yè)公司或者外包還是蠻常見的，
這種公司程序員幸福感普遍不強。至于一些大中型公司肯定不會這樣了。你沒有提到你工作的年限，所以不好
判斷你目前的狀態(tài)。

2，如果前后端分離的話，前端就只能從ajax獲取后臺數(shù)據(jù)？然后加載到dom嗎？有其他獲取的方式嗎

前后端分離不分離和獲取數(shù)據(jù)沒有關系的。只不過不分離的時候后臺可以將數(shù)據(jù)直接潛入到模板或者掛載到window，前臺少了請求（其實就是服務端渲染）。前端拿數(shù)據(jù)的方式不要太多，當然最常見的就是ajax拿到json，然后前端處理并render。前端不只是有dom的，比如生成pdf，打印機交互等。至于數(shù)據(jù)源，視圖不關心從哪里來，他只關系數(shù)據(jù)格式。其他的獲取方式比如 websocket

最好是一次傳輸。如果不一次傳輸通常來說都是后端做不到。因為一次傳輸對前端來說邏輯是剛剛好的，不多不少。這也就是為什么relay等如此流行的原因，前端需要什么數(shù)據(jù)自己取。至于如何分布給各個組件，那是數(shù)據(jù)處理層應該關心的事。如果你使用了單項數(shù)據(jù)流，那么通常將數(shù)據(jù)存到一個全局唯一的倉庫，各個組件訂閱倉庫變動，倉庫進貨或者出貨就打電話給你的組件.

4，以上憂慮來自于，項目數(shù)據(jù)很多，然后我對前后端交接處又云里霧里，ajax基本是后端寫，導致我非常被動，對項目整體把握沒那么好，感覺后端貌似更容易吞噬前端，我想改變這種局面（有一次聽后端竟然說項目是他一個人做的<說是開玩笑，但是對我打擊很大>，我ri了）

換個公司吧。

換個公司，找個前輩，多看書，多出去走走

5，這些問題我也查了挺多，不過我感覺都不如自己完整的表達出來我的想法

感謝的分享

2018年3月27日 14:57

編輯回答

熟稔

1，確定你想做前端還是后端
2，確定以后趕緊跳槽去一個大一點的，技術部門相對正規(guī)公司

總之一句話，根據(jù)你的描述，留在你現(xiàn)在的公司對你毫無益處，越早離開越好。

2017年8月19日 16:29

編輯回答

心癌

你也不要太自卑其實你這些東西已經夠了 ajax后端寫是因為有些東西他自己才知道獲取怎樣的數(shù)據(jù) 數(shù)據(jù)獲取過來怎么處理與其讓你一個前端寫還不如自己寫快點

2017年8月5日 07:10

編輯回答

愿如初

你的工作模式小公司小團隊甚至大學生組的小團隊可能比較常見，大公司我不知道。反正看上去就很不規(guī)范的感覺，雖然你沒有提及，但我猜測：你們的代碼應該會比較混亂，且沒有任何代碼規(guī)范的約定，職責劃分也經常很模糊。學還是很有必要的，趁有精力不要偷懶，你的一些問題可能學得多了自然就解決了。實際上，現(xiàn)在前后端的難度可以沒有太大區(qū)別，甚至前端可以比后端復雜好幾倍，你撲過來覺得學習后端有難度，說明你編程基礎沒有打好。如果你是直接從前端開始上手編程的話，那你很容易缺乏“系統(tǒng)能力”，指的就是你分析別人的系統(tǒng)和設計自己的系統(tǒng)的能力。建議試著不用jquery，自己造輪子，或嘗試使用vue.js之類的框架，了解它們的的原理，不光“能用就行”，還要高效而“優(yōu)雅”。了解了各種輪子的原理之后你再學習新東西或自己造輪子的時候就會有和現(xiàn)在完全不同的想法，當然學后端也不會有什么難度了。

除了ajax外，還可以用jsonp，但要后端支持。另一個問題沒看懂。

然后如果要學后端推薦直接用js，不要另外去學php了。后端也有不少別人造好的輪子，研究研究它們的結構和原理也能學到不少。

2018年8月23日 19:44