很多同學跟我說,學前端學的很迷茫,
就這樣,問他爲啥迷茫吧,說也說不出來啥具體的。就是也學了一堆東西,也確實都是前端開發工作當中要用的。但依然不知道前路如何。
這裏就有一個“前端入門的標準”的問題。什麼纔是真正的前端入門?
1、是你學了一堆的前端開發技術嗎?
2、是你做了幾個前端的大小不一的例子嗎?
3、是你已經做了一二年的前端開發工作了嗎?
不要奇怪我把第三條也列上,確實有人已經工作了二三年了,但其實依然沒有入門前端開發。
我個人主觀認爲,判斷一個人是否已經入門前端開發,有二個標準,
1、學了一堆的前端開發技術,現在的大大小小的培訓機構基本都是這麼做的;
2、掌握並理解“編程思路與邏輯思維”;
我個人更喜歡第二個,就是掌握“編程思想與開發邏輯”的人。
什麼叫編程思想呢?
很簡單,其實就是提煉特徵。例如,一筐蘋果吧,把它的特徵提煉出來,就這樣,
蘋果
_顏色:紅
_形狀:圓
_大小:200mm
_重量:100克
_品質:100%
_數量:100
那麼,用JavaScript來表示,就是這樣,
var _appleObj = {
color:'#f00',
shape:circular,
size:200,
weight:100,
quality:100%,
number:100
}
這個過程是什麼呢?
對具體事物的抽象,在這個過程中只提取出目標對象中我們所需要的特徵。然後在代碼中表達出來。這裏面的關鍵是,理解蘋果的【顏色】和_appleObj中的【color】,它們二者之間的對應關係。
再,
例如下面這個京東的購物車,我隨便添加了幾個商品進去,就是下面的截圖,
從哪開始入手做呢?很多新入門的同學可能就沒有思路了。如果用剛纔抽象蘋果的思路,就是這樣,
購物車
_增加、減少商品按鈕
_輸入商品數量
_刪除按鈕
_單選按鈕
_全選按鈕
_結算按鈕
_其它的相關調用、回調等
用JavaScript來表示就是這樣,
var _cartObj = {
addFn : addfn,
minsFn : minsfn,
singleBtn : singlefn,
allselect : allselectfn,
payBtn : paybtn
}
然後再繼續定義addfn、minsfn、singlefn、allselectfn、paybtn等函數,這就是從UI設計圖中抽象出功能點,然後在編程範式裏表達出來。這時,我們已經擁有了一個購物車模塊的JavaScript模型。
這種抽象的編程思想的思維方式,是超越於任何編程語言之上的,它是對現實世界的提煉和抽象。無論你是用原生JavaScript,還是vue,或react,都是這樣,無非是寫法不同罷了。
我擁有這種思維方式,所以我可以用一天學會php,寫一個帶登錄、註冊的簡單留言板出來,然後再在第二、三天,徹底忘記php。不是顯擺我有多麼牛,而是說這種思維方式是超越具體語言的。
如果不能理解這個實物和抽象之間的對應關係,那麼無論你學習多少的css、html、js、jq、vue、h5、小程序...等,對你來講這些都是【死物】。因爲你不知道該怎麼用它解決問題與需求。說的有點囉嗦,但真心的希望同學們能明白它們的這個關係。
接下來再說說開發中的邏輯思維。
邏輯思維要嚴密且清晰,講究的是環環相扣。它不同於日常交流中的口頭描述,“你今天上午去那幫我拿個東西。去哪?就你家那邊一拐角”,這種基於生活經驗的直觀的描述就是混沌不清晰的。
一個經典的例子,口頭描述,“讓程序員,去買6個蘋果回來,路上如果看見西瓜就買一個”。問,如果這個程序員在路上看到一個西瓜,他會買幾個蘋果回來?
答案是,一個蘋果。爲什麼呢?
因爲,
if( 看見西瓜 ){
蘋果 = 1
} else {
蘋果 = 6
}
看到了嗎?這就是使用日常生活思維來寫代碼的結果。所以,編程開發中不能使用生活思維方式,你必須環環相扣,形成一個邏輯鏈條。其中任何一環的不清晰,都會造成整個邏輯鏈條的崩潰。
編程因爲需要抽象具體事物,所以它是以不同的視角來看待現實世界。你看到一匹白馬,說“好大好白的一匹馬”,我看到的是,
var 白馬 = {
腿:4,
顏色:#fff,
性別:公,
體重:200KG,
..
}
這算是另一種形式的白馬非馬嗎?
在實際工作中,PM會提出產品需求,肯定是口語化的描述。說這個產品,有abcd等功能。然後前端開發等程序員再把它抽象出特點,設計出模型。
然後根據它的交互流程、前置後置的條件等,一步一步的實現。這個一步一步的實現,就是開發邏輯的鏈條,差了其中任何一環,都不能完成開發任務。
就例如你回家吃飯,如果用程序的邏輯思維方式來思考,是這樣的,
1、你回家;
2、家裏要有米,如果沒有,買米,如果買不到米,做不了飯;
3、家裏要有電,如果沒有,做不了飯;
4、家裏要有水,如果沒有,做不了飯;
這裏面要把所有的條件、情況都考慮到。而很多情況其實在你寫代碼的時候並沒有發生。所以有人說,編程是給未來的人使用的。未來的人會怎麼使用你開發出來的應用?你並不知道,所以你必須盡全力去無限窮盡所有可能。
編程思想是抽象特徵,邏輯思維是環環相扣,這二個東西合在一起,就是解決問題的方法和步驟。
而前端開發只不過是使用html、css、js,來實現編程思想和邏輯思維所提供的解決問題的方法和步驟的一種工作而已。
所以,學習前端開發,其實是學習如何用編程思想和邏輯思維來解決問題,而不是學習html、css、js語言本身。
這也就是很多同學,學完了,學會了html、css、js,卻依然不知道怎麼幹活的根本原因。所以說回本文的標題,《零基礎前端入門,真正難在哪裏?》就難在如何建立自己的編程思維和開發邏輯。
因爲篇幅所限,這篇文章寫到這裏基本也就要結束了。如果這方面還有什麼其它的疑問,可以加我vx:blazeloulan,或在文章末尾留言給我。我感腳,我還是可以給出一些建議的。