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

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

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

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

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

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

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

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

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

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

回答

編輯回答

我甘愿

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

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

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

我是做后端的，前端的經(jīng)驗(yàn)不多。我個(gè)人認(rèn)為用的最多的應(yīng)該ajax調(diào)用后臺(tái)的接口獲取數(shù)據(jù)，當(dāng)然也有其他獲取后臺(tái)數(shù)據(jù)的方式，比如后端主動(dòng)將數(shù)據(jù)推送到前端。

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

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

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

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

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

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

既然做前端了，那就堅(jiān)持下去。換來?yè)Q去，可能最后什么都只是會(huì)一點(diǎn)。你以為身邊的牛人天生就牛嗎，不是的，最重要的是別人比你花的時(shí)間多，比你勤奮，你晚上回去打游戲，別人在學(xué)習(xí)，你周末去玩，別人在學(xué)習(xí)，
你和女朋友你儂我儂，別人在學(xué)習(xí)。

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

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

2017年6月15日 14:56

編輯回答

舊言

好好搞前端：

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

2017年3月27日 15:54

編輯回答

尐飯團(tuán)

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

2017年1月13日 00:15

編輯回答

失心人

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

2 前后端分離,對(duì)前端得要求比較多了, 比如這整個(gè)項(xiàng)目你可以脫離后端提供得數(shù)據(jù)只依賴 mock.js 這樣得假數(shù)據(jù)接口就能從頭跑到尾, 前后端得配合就是協(xié)商好這些數(shù)據(jù)的格式是什么樣, 怎么通信 ajax 或者 websocket , 根據(jù)你目前得情況你可以讓你后端渲染頁(yè)面時(shí)只把數(shù)據(jù)賦值到變量里面, 你再用這些變量去實(shí)現(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 渲染整個(gè)頁(yè)面并賦值
    var data = "<?= $data ?>";
    // 自己用數(shù)據(jù)去實(shí)現(xiàn)頁(yè)面效果
    alert(data);
</script>

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

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

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

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

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

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

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

2017年5月8日 23:27

編輯回答

孤酒

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

2017年5月18日 11:39

編輯回答

遲月

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

2017年2月6日 11:53

編輯回答

爛人

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

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

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

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

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

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

換個(gè)公司吧。

換個(gè)公司，找個(gè)前輩，多看書，多出去走走

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

感謝的分享

2018年3月27日 14:57

編輯回答

熟稔

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

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

2017年8月19日 16:29

編輯回答

心癌

你也不要太自卑其實(shí)你這些東西已經(jīng)夠了 ajax后端寫是因?yàn)橛行〇|西他自己才知道獲取怎樣的數(shù)據(jù) 數(shù)據(jù)獲取過來怎么處理與其讓你一個(gè)前端寫還不如自己寫快點(diǎn)

2017年8月5日 07:10

編輯回答

愿如初

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

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

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

2018年8月23日 19:44