【校招VIP】前端入门方法（新手篇）- 校招VIP

转载声明：文章来源https://zhuanlan.zhihu.com/p/30618241

前言

今天和大家一起聊聊前端的学习方法，如果您对前端的知识体系有深入的了解，对各种技术都有涉猎，那这篇文章可能不适合您，这是专门为刚刚入门的前端新人准备的，希望通过本篇文章，可以帮助这些新手找到学习的方向。

对于一个新手来说，进入任何一个技术领域都感觉像掉进了无尽的沙漠一样，一眼望不到边的知识和工具，不知道从何学习，感觉举步维艰，很多新手都是在这个阶段放弃学习，转头其他行业的。今天咱们一起将这个无尽的沙漠拆分成小沙堆，一个个讨论，让学习不再迷茫。

一、新手和成手处在两个世界

对于一个成手来说：

编辑器不是问题，会写代码用什么写都一样。

语言不是问题，编程思想都是大同小异的。

库和框架不是问题，看得懂API文档就都能上手。

这些成手考虑的问题可能是下面这些：

数据结构与算法

是面向对象编程好还是函数式编程好

哪些场景适用哪些设计模式

企业级项目架构与性能优化

这些对新人来说，都是可望而不可及的，所以，今天咱们就站在新手的角度，讨论一下新手可以触碰到的问题。

前端新手为什么迷茫，因为不知道自己要学多少东西，知识太多了，根本摸不到边界，那我们今天把前端入门知识拆分，让新手更容易下手。

二、编辑器的选择

新手在编辑器的选择上会困惑，总想找出一个最好的编辑器，其实对于编辑器，没有最好的，只有适合你的或你喜欢的。

我前两年主要用的sublime text。最近换成vs code，感觉各有各的好处，期间也换过atom，但是感觉文件开得多了会卡（可能是我自己电脑的原因，没深入研究。），webStorm也用过一小段时间，主要是写node的时候感觉webStorm还是很给力的。HBuilder也玩过几天，用来打包app。最后的感觉就是，编辑器，喜欢就好。

所以新手千万不要在编辑器的选择上纠结太长时间，如果您真的希望我推荐一个，那就用vs code吧，插件够用，下载插件也方便，汉化也好（虽然汉化的菜单基本也用不上），速度也够快。

确定了编辑器，就可以开始撸代码了！

三、语言（JavaScript）

新手容易把语言和库（框架）搞混，不清楚自己该学什么，学到什么程度，所以学者学者就乱了，我们就以JavaScript为例，说说语言的学习误区与解决方案：

什么是原生JavaScript？

不依赖任何任何库和框架的JavaScript就是原生的JavaScript。《JavaScript高级程序设计》把JavaScript分成了三部分

ECMAscript:定义了基本语法，关键字、保留字、内置对象、数据类型等语言层面的基本概念。

DOM：文档对象模型

BOM：浏览器对象模型

简单直白地理解，DOM和BOM就是两套接口，通过DOM我们可以操作HTML和CSS，通过BOM我们可以操作浏览器。

也就是说，我们使用ES基本语法，或者调用DOM接口，或调用BOM接口，都是原生的JavaScript。

所以大家在学习原生JavaScript的时候，一定要知道你写的代码，哪部分是ES基本语法，哪部分是DOM提供的，哪部分是BOM提供的。

这是谁的对象？

原生的JavaScript中有很多对象，每个对象还有很多方法和属性，学习的过程中，一定要知道你用的这个对象属于谁。方法属于谁？

ECMAScript：Array,Date,Math,RegExp,Number,String,Boolean等（函数也是对象）

DOM:document对象等（各种元素都有对应的dom对象）

BOM：window,location,navigator,screem。

我们在浏览器可以直接使用的方法，都数据window对象（window对象在浏览器中是全局对象）：

alert

confirm

prompt

setInterval(clearInterval)

setTimeout(clearTimeout)

这些多是window对象的方法。

语言与库（框架）混淆

对原生的JavaScript有了基本的认识，接下来我们看库和框架。

新手一般自学都会先接触jQuery，写代码的过程中，一定要知道哪些是jQuery提供的属性和方法，哪些是原生的属性和方法，例如下面的代码：

$("input").click(function(){ 

console.log(this.value); 
console.log($(this).val());
})

上面的代码虽然很简单，但还是有人不清楚：

为什么第一个this外面没有$,第二个有$,他们有什么区别？

val()方法和value属性又有什么区别？

这些问题在前期的学习过程中一定要想清楚。打下良好的JavaScript基础对前端开发的学习是非常重要的。

四、总结

今天这一期是新手篇，我们对编辑器和JavaScript语言的知识点做了简单的分类，后续有机会可以再聊聊进阶篇，说说框架，模块化，组件化的相关内容的分类，敬请关注。