很多同學(xué)跟我說，學(xué)前端學(xué)的很迷茫，

就這樣，問他為啥迷茫吧，說也說不出來啥具體的。就是也學(xué)了一堆東西，也確實都是前端開發(fā)工作當中要用的。但依然不知道前路如何。

這里就有一個“前端入門的標準”的問題。什么才是真正的前端入門？

1、是你學(xué)了一堆的前端開發(fā)技術(shù)嗎？

2、是你做了幾個前端的大小不一的例子嗎？

3、是你已經(jīng)做了一二年的前端開發(fā)工作了嗎？

不要奇怪我把第三條也列上，確實有人已經(jīng)工作了二三年了，但其實依然沒有入門前端開發(fā)。

我個人主觀認為，判斷一個人是否已經(jīng)入門前端開發(fā)，有二個標準，

1、學(xué)了一堆的前端開發(fā)技術(shù)，現(xiàn)在的大大小小的培訓(xùn)機構(gòu)基本都是這么做的；

2、掌握并理解“編程思路與邏輯思維”；

我個人更喜歡第二個，就是掌握“編程思想與開發(fā)邏輯”的人。

什么叫編程思想呢？

很簡單，其實就是提煉特征。例如，一筐蘋果吧，把它的特征提煉出來，就這樣，

蘋果

_顏色：紅

_形狀：圓

_大小：200mm

_重量：100克

_品質(zhì)：100%

_數(shù)量：100

那么，用JavaScript來表示，就是這樣，

var _appleObj = {

color:'#f00',

shape:circular,

size:200,

weight:100,

quality:100%,

number:100

}

這個過程是什么呢？

對具體事物的抽象，在這個過程中只提取出目標對象中我們所需要的特征。然后在代碼中表達出來。這里面的關(guān)鍵是，理解蘋果的【顏色】和_appleObj中的【color】，它們二者之間的對應(yīng)關(guān)系。

再，

例如下面這個京東的購物車，我隨便添加了幾個商品進去，就是下面的截圖，

從哪開始入手做呢？很多新入門的同學(xué)可能就沒有思路了。如果用剛才抽象蘋果的思路，就是這樣，

購物車

_增加、減少商品按鈕

_輸入商品數(shù)量

_刪除按鈕

_單選按鈕

_全選按鈕

_結(jié)算按鈕

_其它的相關(guān)調(diào)用、回調(diào)等

用JavaScript來表示就是這樣，

var _cartObj = {

addFn : addfn,

minsFn : minsfn,

singleBtn : singlefn,

allselect : allselectfn,

payBtn : paybtn

}

然后再繼續(xù)定義addfn、minsfn、singlefn、allselectfn、paybtn等函數(shù)，這就是從UI設(shè)計圖中抽象出功能點，然后在編程范式里表達出來。這時，我們已經(jīng)擁有了一個購物車模塊的JavaScript模型。

這種抽象的編程思想的思維方式，是超越于任何編程語言之上的，它是對現(xiàn)實世界的提煉和抽象。無論你是用原生JavaScript，還是vue，或react，都是這樣，無非是寫法不同罷了。

我擁有這種思維方式，所以我可以用一天學(xué)會php，寫一個帶登錄、注冊的簡單留言板出來，然后再在第二、三天，徹底忘記php。不是顯擺我有多么牛，而是說這種思維方式是超越具體語言的。

如果不能理解這個實物和抽象之間的對應(yīng)關(guān)系，那么無論你學(xué)習(xí)多少的css、html、js、jq、vue、h5、小程序...等，對你來講這些都是【死物】。因為你不知道該怎么用它解決問題與需求。說的有點啰嗦，但真心的希望同學(xué)們能明白它們的這個關(guān)系。

接下來再說說開發(fā)中的邏輯思維。

邏輯思維要嚴密且清晰，講究的是環(huán)環(huán)相扣。它不同于日常交流中的口頭描述，“你今天上午去那幫我拿個東西。去哪？就你家那邊一拐角”，這種基于生活經(jīng)驗的直觀的描述就是混沌不清晰的。

一個經(jīng)典的例子，口頭描述，“讓程序員，去買6個蘋果回來，路上如果看見西瓜就買一個”。問，如果這個程序員在路上看到一個西瓜，他會買幾個蘋果回來？

答案是，一個蘋果。為什么呢？

因為，

if( 看見西瓜 ){

蘋果 = 1

} else {

蘋果 = 6

}

看到了嗎？這就是使用日常生活思維來寫代碼的結(jié)果。所以，編程開發(fā)中不能使用生活思維方式，你必須環(huán)環(huán)相扣，形成一個邏輯鏈條。其中任何一環(huán)的不清晰，都會造成整個邏輯鏈條的崩潰。

編程因為需要抽象具體事物，所以它是以不同的視角來看待現(xiàn)實世界。你看到一匹白馬，說“好大好白的一匹馬”，我看到的是，

var 白馬 = {

腿：4,

顏色：#fff,

性別：公,

體重：200KG,

..

}

這算是另一種形式的白馬非馬嗎？

在實際工作中，PM會提出產(chǎn)品需求，肯定是口語化的描述。說這個產(chǎn)品，有abcd等功能。然后前端開發(fā)等程序員再把它抽象出特點，設(shè)計出模型。

然后根據(jù)它的交互流程、前置后置的條件等，一步一步的實現(xiàn)。這個一步一步的實現(xiàn)，就是開發(fā)邏輯的鏈條，差了其中任何一環(huán)，都不能完成開發(fā)任務(wù)。

就例如你回家吃飯，如果用程序的邏輯思維方式來思考，是這樣的，

1、你回家；

2、家里要有米，如果沒有，買米，如果買不到米，做不了飯；

3、家里要有電，如果沒有，做不了飯；

4、家里要有水，如果沒有，做不了飯；

這里面要把所有的條件、情況都考慮到。而很多情況其實在你寫代碼的時候并沒有發(fā)生。所以有人說，編程是給未來的人使用的。未來的人會怎么使用你開發(fā)出來的應(yīng)用？你并不知道，所以你必須盡全力去無限窮盡所有可能。

編程思想是抽象特征，邏輯思維是環(huán)環(huán)相扣，這二個東西合在一起，就是解決問題的方法和步驟。

而前端開發(fā)只不過是使用html、css、js，來實現(xiàn)編程思想和邏輯思維所提供的解決問題的方法和步驟的一種工作而已。

所以，學(xué)習(xí)前端開發(fā)，其實是學(xué)習(xí)如何用編程思想和邏輯思維來解決問題，而不是學(xué)習(xí)html、css、js語言本身。

這也就是很多同學(xué)，學(xué)完了，學(xué)會了html、css、js，卻依然不知道怎么干活的根本原因。所以說回本文的標題，《零基礎(chǔ)前端入門，真正難在哪里？》就難在如何建立自己的編程思維和開發(fā)邏輯。

因為篇幅所限，這篇文章寫到這里基本也就要結(jié)束了。如果這方面還有什么其它的疑問，可以加我vx：blazeloulan，或在文章末尾留言給我。我感腳，我還是可以給出一些建議的。

總結(jié)

以上是生活随笔為你收集整理的零基础前端入门，真正难在哪里？简说编程思想和逻辑思维的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。