入坑前端到今天也將近兩年半了,這兩天突然想到了第一次面試時(shí)面試官的一個(gè)問(wèn)題-------你怎樣理解前端的工作?
對(duì)于當(dāng)時(shí)我一個(gè)小白而言完全是胡說(shuō)一通,詞不達(dá)意,搞得面試官一臉懵逼,現(xiàn)在想想那可能就叫尬聊吧……時(shí)隔兩年在不斷爬坑中對(duì)這個(gè)問(wèn)題有了自己新的認(rèn)識(shí),今天趁著上午沒(méi)什么事情,寫(xiě)下這篇博客,想到哪寫(xiě)到哪,談一談我所理解的前端。
技術(shù)方面:
第一階段(新手村)
一個(gè)前端初學(xué)者必須所掌握的核心技能HTML,CSS,JavaScript,這三項(xiàng)是前端最底層的技術(shù)支持了,如果你看幾年前的回答應(yīng)該還會(huì)有一項(xiàng)jquery,但我個(gè)人覺(jué)得現(xiàn)階段的前端圈jquery可以不作為必備技能,雖然Jquery對(duì)新人很友好,但現(xiàn)在mvvm框架滿(mǎn)天飛Vue, Angular,React三分天下,用起來(lái)要比直接操作dom的jquery舒服很多,當(dāng)然在這個(gè)階段是打基礎(chǔ)的階段框架,類(lèi)庫(kù)什么的可以往后靠。原生Js永遠(yuǎn)都是重中之重,只會(huì)用框架不懂底層原理永遠(yuǎn)達(dá)不到精通,推薦紅寶書(shū)Javascript高級(jí)程序設(shè)計(jì),吃透紅寶書(shū)打牢基礎(chǔ)再去學(xué)習(xí)其他框架,媽媽就再也不用擔(dān)心你的學(xué)習(xí)。接下來(lái)還有一項(xiàng)額外的技能PhotoShop,要知道ps可以不用去做,但必須要會(huì),而且在一些小公司里UI只會(huì)丟給你一個(gè)PSD,沒(méi)有什么Sketch之類(lèi)的東西,也沒(méi)人幫你切圖,這些都需要你自己來(lái)處理,所以ps是額外的必備技能。
第二階段(副本開(kāi)啟)
進(jìn)入告訴成長(zhǎng)階段,開(kāi)始打怪升級(jí),這個(gè)階段的時(shí)間持續(xù)最長(zhǎng),在這期間你需要爬無(wú)數(shù)的坑,積累各種失敗的經(jīng)驗(yàn),一關(guān)一關(guān)的往下刷,關(guān)于HTML和CSS你需要知道各種UI框架的使用,如BootStrap,ElementUI……,關(guān)于不同圖片的格式標(biāo)準(zhǔn),瀏覽器的兼容性,移動(dòng)和pc端的區(qū)別,響應(yīng)式布局,flex布局,柵格布局,對(duì)設(shè)計(jì)審美的提升…等關(guān)于提高你頁(yè)面開(kāi)發(fā)效率的各種技能,UI框架這一塊比較雜選自己感興趣的看看就好。
Js方面這時(shí)候已經(jīng)可以開(kāi)始挑一種主流框架進(jìn)行學(xué)習(xí)了,前面提到的Vue, Angular,React都是不錯(cuò)的選擇, 并且對(duì)面向?qū)ο缶幊?對(duì)象封裝,原型繼承,閉包,同步異步差異,等一系列的js進(jìn)階知識(shí)應(yīng)該進(jìn)行深入了解,同時(shí)對(duì)es6標(biāo)準(zhǔn)也需要了解,可以參考阮一峰老師的es6入門(mén),書(shū)中包含了es6的各種新特性,默認(rèn)參數(shù),模版表達(dá)式,多行字符串,拆包表達(dá)式,改進(jìn)的對(duì)象表達(dá)式,箭頭函數(shù) =&>,Promise,塊級(jí)作用域的let和const,class類(lèi),模塊化等常用特性.可以做到自己封裝組件,編寫(xiě)維護(hù)性高,可讀性強(qiáng)的代碼. 而且在平時(shí)需要多看別人寫(xiě)的代碼,汲取別人的優(yōu)點(diǎn),并且閱讀大量的技術(shù)文獻(xiàn),最重要的是要總結(jié)自己的問(wèn)題,比如說(shuō)你遇到一個(gè)bug,迷迷糊糊的就解決了,下一次你又遇到相同的問(wèn)題,這個(gè)時(shí)候有沒(méi)有對(duì)之前問(wèn)題進(jìn)行總結(jié)的效果就看出來(lái)了.
第三階段及更高級(jí)
了解各種設(shè)計(jì)模式,看得懂各種框架源碼,前后端通吃,可以自己手寫(xiě)js框架...好吧,我還沒(méi)到這個(gè)階段就不寫(xiě)了..............
在工作中
一個(gè)完整的的工作流程應(yīng)該是:
立項(xiàng)--項(xiàng)目研討--需求確認(rèn)----產(chǎn)品出原型----后臺(tái)開(kāi)發(fā)同時(shí)設(shè)計(jì)師拿到原型進(jìn)行UI設(shè)計(jì)--前端開(kāi)始開(kāi)發(fā)--測(cè)試提bug--改bug--重復(fù)n次--產(chǎn)品驗(yàn)收
上面只是一套籠統(tǒng)的流程,至少在前端這方面我們需要做的有梳理業(yè)務(wù)邏輯并理解業(yè)務(wù)邏輯,這對(duì)你后面的開(kāi)發(fā)很有用處,同時(shí)根據(jù)需求進(jìn)行應(yīng)用技術(shù)的選擇,項(xiàng)目結(jié)構(gòu)的劃分,需求模塊的劃分,完整項(xiàng)目的搭建,當(dāng)然現(xiàn)在有很多可以自動(dòng)化構(gòu)建工具可以節(jié)省你很多時(shí)間, 現(xiàn)在的前端開(kāi)發(fā)已經(jīng)不再僅僅只是靜態(tài)網(wǎng)頁(yè)的開(kāi)發(fā)了，日新月異的前端技術(shù)已經(jīng)讓前端代碼的邏輯和交互效果越來(lái)越復(fù)雜，更加的不易于管理，模塊化開(kāi)發(fā)和預(yù)處理框架把項(xiàng)目分成若干個(gè)小模塊，增加了最后發(fā)布的困難，沒(méi)有一個(gè)統(tǒng)一的標(biāo)準(zhǔn)，讓前端的項(xiàng)目結(jié)構(gòu)千奇百怪。前端自動(dòng)化構(gòu)建在整個(gè)項(xiàng)目開(kāi)發(fā)中越來(lái)越重要,但新手入門(mén)還是應(yīng)該去嘗試自己一點(diǎn)一點(diǎn)的去構(gòu)建一個(gè)項(xiàng)目,等你多做幾個(gè)項(xiàng)目覺(jué)得每次都這樣重復(fù)好煩,自然而然的就入了自動(dòng)化構(gòu)建的坑,畢竟這樣能讓你更深刻的理解,為什么要使用自動(dòng)化構(gòu)建……比如我們主棧是vue,我們最常用的就是vue-cli,自動(dòng)化工具有很多選擇如Bower、Gulp、Grunt、node、yeoman,我們應(yīng)該根據(jù)需求選擇最適合自己的去研究。
溝通
前端是團(tuán)隊(duì)里最應(yīng)該學(xué)會(huì)溝通的人,界面有問(wèn)題需要和UI溝通,數(shù)據(jù)有問(wèn)題需要和后臺(tái)溝通,功能有問(wèn)題需要和產(chǎn)品溝通,測(cè)試的時(shí)候給你提bug你還需要和測(cè)試溝通……emmm心累
溝通ui
前端是最接近用戶(hù)的人,用戶(hù)對(duì)一個(gè)網(wǎng)站,軟件最直觀的感受是反映到前端的,可能你會(huì)說(shuō)最直觀的不應(yīng)該是UI設(shè)計(jì)師么,你要知道我是前端我為設(shè)計(jì)師代言!!!
和UI的溝通,在工作中我們不應(yīng)該是被動(dòng)的實(shí)現(xiàn)UI的設(shè)計(jì),而是應(yīng)該合理化的提出自己的想法,不然日后返工浪費(fèi)的是雙方的時(shí)間,比如最開(kāi)始剛來(lái)公司的時(shí)候,項(xiàng)目里對(duì)一些小圖標(biāo)的圖片還在使用雪碧圖,但很明顯隨著瀏覽器的支持越來(lái)越好,svg和字體圖標(biāo)慢慢占據(jù)主流,我在阿里巴巴圖標(biāo)庫(kù)建了一個(gè)項(xiàng)目把UI也拉了進(jìn)來(lái),UI把他用到的圖標(biāo)直接添加進(jìn)項(xiàng)目,前端直接從項(xiàng)目生成字體圖標(biāo)引入到項(xiàng)目,絕逼要比自己慢慢切圖,扣圖標(biāo),合并雪碧圖要省事的多,而且用起來(lái)也特別爽,想改顏色就改顏色。再比如你需要做一個(gè)圖表,用到了echarts,你完全可以讓UI基于echarts去設(shè)計(jì)樣式,而不是讓他在那里自由發(fā)揮,因?yàn)槟阌肋h(yuǎn)不知道設(shè)計(jì)師的腦子里裝了多少創(chuàng)意,這樣節(jié)省的是兩個(gè)人的時(shí)間,不會(huì)出現(xiàn)他做好樣式而你實(shí)現(xiàn)不了的尷尬。
溝通產(chǎn)品
一般來(lái)說(shuō)程序員和產(chǎn)品經(jīng)理之間是最難溝通的,只有相殺沒(méi)有相愛(ài),畢竟子曾經(jīng)曰過(guò):’這個(gè)需求很簡(jiǎn)單,怎么實(shí)現(xiàn)我不管,明天上線(xiàn)!’,
下面引用lensuntop的一篇文章,我覺(jué)得寫(xiě)的非常好
記得有一個(gè)段子：
產(chǎn)品汪：程序猿，我們來(lái)實(shí)現(xiàn)一個(gè)緊急需求？
程序猿：請(qǐng)說(shuō)。
產(chǎn)品汪：請(qǐng)根據(jù)手機(jī)殼的顏色，來(lái)實(shí)現(xiàn)APP啟動(dòng)的顏色。
程序猿已經(jīng)在風(fēng)中凌亂。。。
從這個(gè)段子中多少能折射出產(chǎn)品和技術(shù)之間的各種激情“火花”。產(chǎn)品經(jīng)理眼中簡(jiǎn)單的需求，而在我們看來(lái)是不可能實(shí)現(xiàn)的。而程序員也無(wú)法理解產(chǎn)品經(jīng)理為什么要實(shí)現(xiàn)這樣的需求。那么，站在一個(gè)程序員的角度應(yīng)該怎么樣和產(chǎn)品經(jīng)理溝通呢？
1.深刻理解需求，清楚需求的動(dòng)機(jī)和緣由
我們程序員一定會(huì)在問(wèn)，產(chǎn)品經(jīng)理為什么想要根據(jù)手機(jī)殼的顏色來(lái)動(dòng)態(tài)實(shí)現(xiàn)APP啟動(dòng)時(shí)的顏色。既然想聽(tīng)解析，那就先別急著說(shuō)出自己的結(jié)論——技術(shù)上無(wú)法實(shí)現(xiàn)！既然有疑問(wèn)，那就先將自己的疑問(wèn)解決。
2.換位思考
產(chǎn)品有產(chǎn)品的角度。作為程序員我們追求的是什么？邏輯正確，更快，更容易擴(kuò)展。產(chǎn)品追求的是什么？說(shuō)實(shí)話(huà)，我自己沒(méi)有深刻去思考過(guò)這個(gè)問(wèn)題。站在一個(gè)慣性的角度思考可以想到：一個(gè)產(chǎn)品為什么存在，他的存在能解決什么問(wèn)題，他的用戶(hù)體驗(yàn)好不好。這些才是決定一個(gè)產(chǎn)品的核心價(jià)值。畢竟工作性質(zhì)影響了一個(gè)人的思維邏輯，所以這時(shí)候，我們能站在一個(gè)產(chǎn)品的角度去思考每一個(gè)需求，便顯得尤其重要。
3.不放過(guò)每一個(gè)細(xì)節(jié)
作為程序員想必對(duì)這句話(huà)都是深深認(rèn)同的。因?yàn)橐粋€(gè)標(biāo)點(diǎn)符號(hào)或者類(lèi)型的錯(cuò)誤，會(huì)導(dǎo)致一個(gè)自己意想不到的bug。產(chǎn)品經(jīng)理在設(shè)計(jì)一個(gè)產(chǎn)品的時(shí)候，都是從大方向去想問(wèn)題的，大方向沒(méi)有錯(cuò)就行了，細(xì)節(jié)脫離不了大方向。這是他們想的。但是對(duì)于程序來(lái)說(shuō)，卻萬(wàn)萬(wàn)不能。因?yàn)橐粋€(gè)細(xì)節(jié)的邏輯往往決定了整個(gè)大方向。舉個(gè)例子：有一個(gè)需求，用戶(hù)的作品需要提交審核，經(jīng)過(guò)審核才可以讓所有人看到。當(dāng)產(chǎn)品經(jīng)理交這個(gè)需求給你的時(shí)候，你能察覺(jué)到什么問(wèn)題了嗎？這里面有幾個(gè)細(xì)節(jié)：1.用戶(hù)提交審核后，用戶(hù)可以不可以再編輯作品；2.作品是否會(huì)多次審核；3.需不需要記錄審核歷史；4.用戶(hù)作品是否需要有版本的控制，如要產(chǎn)生版本，版本又是如何產(chǎn)生的；5.審核通過(guò)后，用戶(hù)可以不可以再修改作品，若不可以，那么是不是其他人就看不見(jiàn)用戶(hù)作品......話(huà)說(shuō)回來(lái)這只是一個(gè)簡(jiǎn)單的邏輯需求！但是涉及的細(xì)節(jié)卻是太多太多。我們往往在編碼的時(shí)候?qū)懖幌氯ィ褪且驗(yàn)榻o的需求太模糊，沒(méi)有細(xì)化到點(diǎn)上。
4.換一種方式說(shuō)“不能實(shí)現(xiàn)”
不能實(shí)現(xiàn)，這句話(huà)想必我們都是經(jīng)常說(shuō)。但是直接對(duì)產(chǎn)品經(jīng)理說(shuō)，沒(méi)準(zhǔn)會(huì)讓產(chǎn)品經(jīng)理抓狂。因?yàn)槲覀儠?huì)讓他們覺(jué)得他們提出的任何需求，我們都不能實(shí)現(xiàn)。但是事實(shí)并非如此，因?yàn)椴荒軐?shí)現(xiàn)是有條件的，比如時(shí)間不夠。所以我們要先認(rèn)同產(chǎn)品經(jīng)理的觀點(diǎn)（“能實(shí)現(xiàn)”），再提出自己實(shí)現(xiàn)他的需求的條件是什么。因?yàn)楝F(xiàn)實(shí)產(chǎn)品經(jīng)理也不會(huì)經(jīng)常犯傻，經(jīng)常提出一些不合理的需求，但是面對(duì)需求，我們需要評(píng)估實(shí)現(xiàn)的時(shí)間，而且這個(gè)時(shí)間不是那么容易評(píng)估準(zhǔn)確的。
5.當(dāng)遇到不合理的需求時(shí)，積極尋求替換方案
就拿段子里面的需求來(lái)說(shuō)，讓我們提供幾種APP皮膚給用戶(hù)進(jìn)行選擇，肯定比原先的需求容易實(shí)現(xiàn)，而且也更加符合人性化。說(shuō)另外一個(gè)故事，有家智能家居的公司，要實(shí)現(xiàn)廚房水龍頭，根據(jù)人聲說(shuō)水溫幾度，就可以達(dá)到幾度。換個(gè)角度想，你會(huì)感覺(jué)出40度和45度水的溫差嗎？而且根據(jù)人聲判斷，這又涉及到聲音識(shí)別系統(tǒng)，你要兼容多少種語(yǔ)言？其實(shí)我就覺(jué)得左右切換就挺智能的，完全沒(méi)有必要搞的那么復(fù)雜。所以程序員要找到一種更好更容易實(shí)現(xiàn)的方法。別給產(chǎn)品經(jīng)理的想當(dāng)然自亂陣腳。
6.必須遵循文檔精神
在開(kāi)發(fā)的時(shí)候，我們往往會(huì)另外與產(chǎn)品經(jīng)理進(jìn)行細(xì)節(jié)化的討論。但是這種討論結(jié)果，我們并沒(méi)有記錄到產(chǎn)品原型里面或者需求列表里面。但是過(guò)了幾個(gè)月后，我們自己往往會(huì)忘記我們當(dāng)初為什么會(huì)討論出這樣或者那樣的一個(gè)細(xì)節(jié)。所以一切的需求必須是根據(jù)的。從另一方面來(lái)說(shuō)，也保障了雙方的利益，別等到出問(wèn)題的時(shí)候，不知道是誰(shuí)的責(zé)任，而在這一方面，程序員往往很吃虧。
6.對(duì)自己的程序有一顆藝術(shù)的心
有人說(shuō)過(guò)，當(dāng)需求影響到代碼擴(kuò)展性的時(shí)候，會(huì)首先砍需求，而不是改代碼！在一定程度上，我是認(rèn)同這句話(huà)的。在我看來(lái)，程序是一件思想上的作品，要達(dá)到藝術(shù)的境界，從功能、體驗(yàn)和邏輯上都必須是合情合理的。就像一件藝術(shù)品一樣，看起來(lái)是渾然天成的！因?yàn)橐患雌饋?lái)很“丑陋”作品，一定是不符合人的邏輯和習(xí)慣的。
寫(xiě)到最后，感覺(jué)繞回到程序員自身了。其實(shí)跟產(chǎn)品經(jīng)理溝通，最重要的是要明白到：我們是在解決問(wèn)題，而不是在制造問(wèn)題！主要抱著這個(gè)核心，一切問(wèn)題迎刃而解
一般來(lái)說(shuō)和后臺(tái)溝通沒(méi)那么多的麻煩,約定好規(guī)則后,一般來(lái)說(shuō)你們是通過(guò)api來(lái)溝通的,但當(dāng)你調(diào)試接口時(shí),出現(xiàn)一些未知的,你感覺(jué)不是自己?jiǎn)栴}的時(shí)候,及時(shí)的溝通后臺(tái)是最明智的。
責(zé)任劃分
相信大家在這一點(diǎn)上都深有感觸,因?yàn)榍岸耸亲詈笠魂P(guān),所有的需求都是在前端手里變成一個(gè)具體的產(chǎn)品的,這樣也就導(dǎo)致你很容易變成背鍋俠,導(dǎo)致項(xiàng)目延期的情況有很多種,設(shè)計(jì)圖不及時(shí),后臺(tái)數(shù)據(jù)出現(xiàn)問(wèn)題,產(chǎn)品臨時(shí)改需求,如果你不能證明是這些問(wèn)題導(dǎo)致項(xiàng)目延期,這個(gè)鍋你必背無(wú)疑,唯一的方法就是--à口頭確認(rèn)--à發(fā)email到責(zé)任人確認(rèn)--à通知上級(jí),千萬(wàn)不要覺(jué)得這個(gè)麻煩,出問(wèn)題的時(shí)候會(huì)比這個(gè)更麻煩的,
寫(xiě)不動(dòng)了,以上就是個(gè)人爬坑后對(duì)前端的一些理解(ps:雖然我還在坑里),也算對(duì)自己工作的一個(gè)總結(jié)吧,寫(xiě)的比較絮叨,不喜勿噴。