作为一名在web服务端从业4年的Java程序员,被后端微服务分布式框架鞭打了多年,整个人都不好了。更何况近些年技术发展之快,后端已经卷不动了,打算进军前端,卷一卷前端的小伙伴。
在之前我其实也是接触过前端的,只是被前端的css打败了。完全无法理解的语法,完全记不住的样式表,让我知难而退。现在重新拿起了前端,第一眼要做的事情其实就是看一下前端的学习路线,这也是比较重要的,因为这能让我清楚的知道自己在路的哪个位置。
现在前端的视频网上有很多,像b站,像黑马,像阿里云等等;而我选择的就是阿里云的开发者学堂内的前端基础视频学习,在看视频时候,尤其要看视频的发布时间,因为视频的内容所使用的框架或者技术的版本可能和现在的不太一致,但是作为基础已经够用了。
一,HTML和CSS 基础
在上图我们可以清楚的看到三门课程,这三门课程就是前端的基础,作者第一门课程中详细的介绍了浏览器,网页,html骨架以及html里的标签等等;在第二门课程中教会了我们如何使用css语言去调整我们写的html样式,样式比较多,记起来还是比较麻烦的,我在这里基本就是三倍跳过哈哈;而在第三门HTML5新特性中,就比较有意思了,里边教我们如何播放音视频,什么是画布,什么SVG,什么是2D,什么是3D效果等等。前三门课程学起来还是蛮有意思的,因为修改的样式立马看到结果,也很有成就感,不像后端写出来的东西不那么直观(再次吐槽后端的无趣哈哈)。
二,Javascript
到了第二阶段,也是接触到了前端的核心语言JavaScript。这门语言就是通过代码去动态的控制html里的元素,例如给标签加属性,给标签加值,以此来控制元素的样式。因为我是有java基础的,所以在这块也就没下多少功夫,这块介绍的也就是JavaScript的基本语法嘛,如果没有编程语言基础的话,还是得认真看视频,敲代码的(提高自己的熟练度,打好基础,后边会轻松很多)。
第二门课jQuery,在我的理解就是封装了JavaScript代码的库,它提供了一些便捷的api,让我们可以轻松的控制元素的样式。而这个库也是后边编写页面的基础,这块还是要认真听一听的。
第三门课就涉及到了动态数据的交互问题了,一般来说网页的数据有一大部分是来源于数据库的,而前端一般不直接与数据库交互,而是通过后端取数据,然后渲染。而Ajax则是一个封装了调用后端的api库,他的核心其实是XMLHttpRequest 这个对象,除此之外Ajax的跨域问题,以及跨域的原理也是很重要的,例如前端是如何通过script标签的src属性解决这个跨域问题的。他这门课的后端是用PHP搭建的,我自己了解一些go,所以用的go搭建的,但是都是一样的。
三,开发工具
到这个阶段,一般我们都是已经可以开发简单的页面了,但是我们开发项目一般都是团队制的,所以代码的控制还是很重要的,这也是工作的基础。先说一说Git这个工具,IT行业接触的最多的就是GitHub这个全球最大的代码库了,而我们的代码就是通过Git工具来提交到代码仓库的,这个工具很重要,他解决了多人协作的代码控制问题,不论你是前端后端还是算法等等,只要是多人协作开发,必然离不开git工具。(千万不要只会pull push 和commit 哈哈)。
SVN这个工具我之前在工作中用过,但是不多,基本上就是用来看产品提供的原型图等文件了。
webpack这个工具就比较牛了,听名字就比较牛,前端自动化构建工具。在我的理解,这个工具和maven有点类似,Java程序员都是知道Java开发,多半用的是maven骨架,也有一部分用的是gradle,但是其实原理都差不多,都是为了解决项目复杂时候的依赖问题。
在使用webpack之后,前端就真正是工程化开发,摆脱了网页开发这个名头(毕竟很久很久以前前端不叫程序员,叫网页开发)。他规范了前端开发的项目结构,以及提供了一系列插件简化程序员的开发难度。这块内容比较多,也比较复杂,但是他的每一个插件,每一个规范都是有意义的,理解了这些就容易很多。
给大家看一下我的项目结构,这是今天新搭建的webpack项目。
因为我把前后端项目放在一个文件夹下面,所以front才是我这个前端项目的根目录。在这个根目录下有四个文件夹和三个json文件,这三个文件其实就是我们使用的工具的配置文件。作为后端程序员,我们第一眼看到的肯定是src目录了,因为这个文件夹在Java项目中就是我们的源代码目录,提到这个其实我们不难想到在Java项目里的class目录,这个存放编译后代码的目录在这里对应什么呢?没错就是dist目录了,这个目录包含了通过webpack打包后的文件,也就是真正执行的文件目录。而build目录存放的就是webpack构建工具的配置文件了,点进去不难看到这一系列插件哈,是不是和maven的pom文件类似哈哈
这里面定义了一系列插件,例如帮助我们解析css样式文件的
'css-loader' ,负责解析less文件的'less-loader',负责解析scss或sass的sass-loader,以及负责将高版本的js语法转成低版本的工具babel-loader,以及当我们需要使用vue框架时候,负责识别.vue文件的vue-loader 等等。这里的每个插件都是有自己的作用的,在跟随视频搭建项目时候,也会体会到这些插件的魅力的。
