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

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

這里就有一個(gè)“前端入門(mén)的標(biāo)準(zhǔn)”的問(wèn)題。什么才是真正的前端入門(mén)？

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

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

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

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

我個(gè)人主觀認(rèn)為，判斷一個(gè)人是否已經(jīng)入門(mén)前端開(kāi)發(fā)，有二個(gè)標(biāo)準(zhǔn)，

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

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

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

什么叫編程思想呢？

很簡(jiǎn)單，其實(shí)就是提煉特征。例如，一筐蘋(píng)果吧，把它的特征提煉出來(lái)，就這樣，

蘋(píng)果

_顏色：紅

_形狀：圓

_大小：200mm

_重量：100克

_品質(zhì)：100%

_數(shù)量：100

那么，用JavaScript來(lái)表示，就是這樣，

var _appleObj = {

color:'#f00',

shape:circular,

size:200,

weight:100,

quality:100%,

number:100

}

這個(gè)過(guò)程是什么呢？

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

再，

例如下面這個(gè)京東的購(gòu)物車(chē)，我隨便添加了幾個(gè)商品進(jìn)去，就是下面的截圖，

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

購(gòu)物車(chē)

_增加、減少商品按鈕

_輸入商品數(shù)量

_刪除按鈕

_單選按鈕

_全選按鈕

_結(jié)算按鈕

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

用JavaScript來(lái)表示就是這樣，

var _cartObj = {

addFn : addfn,

minsFn : minsfn,

singleBtn : singlefn,

allselect : allselectfn,

payBtn : paybtn

}

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

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

我擁有這種思維方式，所以我可以用一天學(xué)會(huì)php，寫(xiě)一個(gè)帶登錄、注冊(cè)的簡(jiǎn)單留言板出來(lái)，然后再在第二、三天，徹底忘記php。不是顯擺我有多么牛，而是說(shuō)這種思維方式是超越具體語(yǔ)言的。

如果不能理解這個(gè)實(shí)物和抽象之間的對(duì)應(yīng)關(guān)系，那么無(wú)論你學(xué)習(xí)多少的css、html、js、jq、vue、h5、小程序...等，對(duì)你來(lái)講這些都是【死物】。因?yàn)槟悴恢涝撛趺从盟鉀Q問(wèn)題與需求。說(shuō)的有點(diǎn)啰嗦，但真心的希望同學(xué)們能明白它們的這個(gè)關(guān)系。

接下來(lái)再說(shuō)說(shuō)開(kāi)發(fā)中的邏輯思維。

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

一個(gè)經(jīng)典的例子，口頭描述，“讓程序員，去買(mǎi)6個(gè)蘋(píng)果回來(lái)，路上如果看見(jiàn)西瓜就買(mǎi)一個(gè)”。問(wèn)，如果這個(gè)程序員在路上看到一個(gè)西瓜，他會(huì)買(mǎi)幾個(gè)蘋(píng)果回來(lái)？

答案是，一個(gè)蘋(píng)果。為什么呢？

因?yàn)?#xff0c;

if( 看見(jiàn)西瓜 ){

蘋(píng)果 = 1

} else {

蘋(píng)果 = 6

}

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

編程因?yàn)樾枰橄缶唧w事物，所以它是以不同的視角來(lái)看待現(xiàn)實(shí)世界。你看到一匹白馬，說(shuō)“好大好白的一匹馬”，我看到的是，

var 白馬 = {

腿：4,

顏色：#fff,

性別：公,

體重：200KG,

..

}

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

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

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

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

1、你回家；

2、家里要有米，如果沒(méi)有，買(mǎi)米，如果買(mǎi)不到米，做不了飯；

3、家里要有電，如果沒(méi)有，做不了飯；

4、家里要有水，如果沒(méi)有，做不了飯；

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

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

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

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

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

因?yàn)槠?#xff0c;這篇文章寫(xiě)到這里基本也就要結(jié)束了。如果這方面還有什么其它的疑問(wèn)，可以加我vx：blazeloulan，或在文章末尾留言給我。我感腳，我還是可以給出一些建議的。

總結(jié)

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

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