零基础入门前端开发：探索真正的难点与挑战

很多同学跟我说，学前端学的很迷茫，

就这样，问他为啥迷茫吧，说也说不出来啥具体的。就是也学了一堆东西，也确实都是前端开发工作当中要用的。但依然不知道前路如何。

<!-- -->

这里就有一个“前端入门的标准”的问题。什么才是真正的前端入门？

1、是你学了一堆的前端开发技术吗？

2、是你做了几个前端的大小不一的例子吗？

3、是你已经做了一二年的前端开发工作了吗？

不要奇怪我把第三条也列上，确实有人已经工作了二三年了，但其实依然没有入门前端开发。

我个人主观认为，判断一个人是否已经入门前端开发，有二个标准，

1、学了一堆的前端开发技术，现在的大大小小的培训机构基本都是这么做的；

2、掌握并理解“编程思路与逻辑思维”；

我个人更喜欢第二个，就是掌握“编程思想与开发逻辑”的人。

<!-- 区别在哪里？ -->

什么叫编程思想呢？

<!-- 咱们不抠概念啊，编程思想往大了说能写一本书。在这篇文章中，就说我个人主观认为的前端开发范畴内的编程思想。可能会有偏颇，但大方向肯定是Ok的。 -->

很简单，其实就是提炼特征。例如，一筐苹果吧，把它的特征提炼出来，就这样，

苹果

_颜色：红

_形状：圆

_大小：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，却依然不知道怎么干活的根本原因。所以说回本文的标题，《零基础前端入门，真正难在哪里？》就难在如何建立自己的编程思维和开发逻辑。