1. 首页
  2. 前端

漫谈Web前端学习路线,前端学习路漫漫

前言
最近总是会看到后很多人会问,我现在想学习Web前端开发,该如何下手,学习路线是怎样的?今天这篇文章,我来说说我自己对前端学习的理解,并结合一些面试中会常问到的问题来谈谈,如何才能在前端坑中,爬的游刃有余?

漫谈Web前端学习路线,前端学习路漫漫

Web前端

基础
首先前端的基础,相信大家闭着眼睛都能知道HTML+CSS+Javascript,但是它们的轻重缓急该如何去选择呢?我个人认为在学习优先级上HTML > CSS > Javsscript,之所以这么排并不是因为Javascript最不重要,而是因为HTML和CSS的学习上可以不用花太多时间,而且我觉得Javascript是前端一切学习的基础。

 

HTML与CSS可以在一起学习,因为HTML的标签只有配合CSS样式才能达成优美的页面效果,没有CSS的页面只能是很多年前的门户网站的样子。随着HTML5和CSS3的普及,以及浏览器对它们的支持,越来多的产品都选择用HTML5开发,HTML5甚至可以直接作为一个前端开发方向。

我觉得学习了HTML后,面对这样的问题,应该不会被难到。

cookie,localStorage,sessionStorage的区别

HTML5新特性canvas标签

浏览器缓存机制,各有什么优缺点?

如何看待HTML5的一些新特性?

我觉得学习了CSS之后,面对这样的问题,也应该不会被难到。

元素水平垂直居中的实现

浏览器的几种盒模型

行内元素与块级元素

元素相对定位与绝对定位

伪元素:before与::before差别以及用途

我觉得学习了Javascript后,面对这样的问题,应该不会被难到。

常见的闭包问题,比如for循环内部执行输出函数

this关键字输出问题

常用的事件类型

ajax建立过程,常用的状态码

Javascript内存回收机制

框架
说到框架学习,如果说JS框架的话,相信很多人一定会脱口而出jQuery,这是很多当初进入前端开发领域一定会学习的内容,我也不例外。但是现在我却并不会推荐把很多的时间放在学习jQuery上,因为如果你深入学习之后会发现,对于jQuery的使用已经变少了。下面我们细细来说。

针对HTML布局上,当然Bootstrap是不能少的,我们不用把每个类都研究的很透彻,但是对于常用的class一定要熟练使用。

针对字体图标库上,推荐使用font-awaresome,还有某宝图标库iconfont,都包含了非常实用的图标。

其实重点想说的是对于前端MVVM框架的学习,相信很多人都知道就是AngularJS,Vue,React。

漫谈Web前端学习路线,前端学习路漫漫

前端框架

那么针对这些新兴的框架,我们该如何学习呢?

首先有一点,ES6是一定要去学习的,在Vue2.X,AngularJS2,React中都对ES6提供了原生的支持,以后很多新的特性肯定也会使用ES6的语法去编写。

AngularJS

AngularJS在由AngularJS1升级到AngularJS2以后,完全是一个新的东西,原来在AngularJS1中的controller,service,filter等内容在AngularJS2中都变成一个个的module,component。

所以如果还没学过AngularJS部分内容的同学可以直接选择学习AngularJS2。但是需要注意的是AngularJS2是以Typescript语言编写的,所以对Typescript的学习就必不可少了。

Vue

个人认为Vue学习是相对来说成本比较低的框架,目前官方文档已经很详细,关于Vue全家桶的内容像Vue-resource,Vue-router,Vuex等越来越完善,而且在Github上开源是项目也有很多,可以很容易掌握。感兴趣的可以关注下我自己用Vue开发的一个简书网站。

React

React采用了Virtual DOM这一个很独特的概念,提高了页面渲染的效率。但是也是由于Virtual DOM的存在,在编程方式上,React和Vue,AngularJS稍有不同,如果习惯了Vue开发,可能还不太习惯React的开发。

在针对框架层面,在学习之后,应该能回答下面这些问题。

AngularJS和Vue的双向数据绑定的实现

Vuex工作机制

React的Virtual DOM基本实现,如何自己实现一个Virtual DOM算法

模块化&组件化
前端开发已经从原来的整体化开发发展到现在的模块化开发,甚至是组件化开发,开发过程愈发精细,讲求的是代码的可复用性。

以前一个页面从上到下一次编写的过程,现在已经发展为先将页面进行拆分成模块甚至是组件,不同的人关注不同的模块,组件,提高开发效率。

在模块化开发中,不得不提到CommonJS,AMD和CMD规范,并且有不同的实现,比如RequireJS。对于模块化编程的规范已经有很多的文章有讲到,可以认真去学习下。

构建工具
前端开发是离不开构建工具的,自己写的代码如何打包压缩,ES6的代码如何编译成JS,Sass,less代码如何编译成原生CSS,这些都是构建工具去完成的。

有了构建工具,可以极大的提高我们的开发速度,这里不得不提到的就是gulp+webpack。

漫谈Web前端学习路线,前端学习路漫漫

Gulp

gulp是一种任务驱动型的构建工具,通过管道处理数据流,提高了数据处理速度,而且其提供的一系列插件也很方便使用。

漫谈Web前端学习路线,前端学习路漫漫

Webpack

而webpack的作用就是把所有浏览器端需要发布的静态资源做相应的准备,比如资源的解析、合并和打包,它提供了强大的加载器和插件机制,例如vue-loader提供了对vue的支持,babel-loader提供了对ES6的支持。

其他的构架工具还有工程化构建的Yeoman,Slush,FIS等。

在学习了常用的构建工具后,应该可以回答出下面的问题。

Gulp和Webpack的不同

Webpack打包速度比较慢,可能原因是什么?有没有什么解决办法?

全栈
前端开发到最后就是要走全栈开发的道路了,全栈开发以NodeJS作为服务端语言,基于NodeJS实现的服务端框架有Express,KOA,目前也发展的越来越成熟。

既然讲到全栈开发,肯定会通过服务端语言操纵数据库,因此对于数据库的知识也肯定要掌握的。

总结
今天这篇文章主要通过自己对于前端学习的一些看法,可能有些片面,希望能给你带来帮助。

本文来自投稿,不代表程序员编程网立场,如若转载,请注明出处:http://www.cxybcw.com/185993.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code