前端学习路线

♥Hi~ o(*￣▽￣*)ブui♥

文章最后附有史上最详细、最易理解框架整理😘

前端开发学习线路整理

目录

♥Hi~ o(*￣▽￣*)ブui♥

前端开发学习线路整理

一、通用编程基础

1.编程语言

2.数据结构和算法

3.网络协议

4.设计模式

二、基本开发工具

1.IDE/编辑器

2.版本控制工具

3.浏览器

三、前端开发史诗级三件套

1.HTML

2.css

3.javascript

四、封装库/工具库

1、数据可视化

2、UI框架

3.编辑器

4.组件库

5.动画

6.mock数据

---

一、通用编程基础

1.编程语言

编程语言分为好多好多种，但本菜鸟感觉，编程思想万变不离其宗，重要源头由c、c++延伸而来。但不得不说，c、c++还是最原始最难学习的语言，如果学习战线较长的话，还是从c开始，但如果接受过程特别痛苦且难以忍受的情况下，也还可以先接触python也未尝不可，每个人的学习路线也不一定是一条路。

市面上最常见的语言除了C、C++外，还有python、javascript、以及最近很迷的go语言等等等等，每种语言，都有他们独特的魅力，但在我看来，他们的祖宗还是C，或者也可以说C是他们的后代，这个还是靠自己的理解。

（就是它，折磨了我大一半个学期的c语言，哭😢）

2.数据结构和算法

这个数据结构说起来还是块硬骨头，当时我啃的时候，可是卡掉两颗牙，呜呜😣。。。。

数据结构分为了：字符串、数组、链表、堆、栈、队列、树........

还有一些令人头疼的算法，我当时接触的是一小部分比较简单的，一些高深莫测的还没有接触。

（总的来说这一部分，对于小白来说，接触起来挺烧脑，但学会了很有成就感🤗，因为你可以时不时飙出几个别人听不懂的词汇，也是很牛哒！）

3.网络协议

网络协议这一块主要是学习一些网络路由配置与一些协议，这一部分很是枯燥与炸头，也是我最薄弱的一个环节。🆒

4.设计模式

这一块主要涉及到了一些工厂、代理一些的东东，毕竟咱是网安的，这方面的代理咱也没啊看懂，是VPN开车必备神器还是啥，还是需要大家自己去度娘一下。🤪

二、基本开发工具

1.IDE/编辑器

webstorm、vscode

这两款软件最常用，本人比较喜欢VScode，可能是因为刚开始接触的是它吧，就是属于你想用的一些开发软件可以在上面一搜即安装，就好比手机上的应用商店，不用在大费周折寻找安装路径了。还是不错滴，为它打call🤠！

2.版本控制工具

SVN、GIT

3.浏览器

浏览器大家就比较熟悉了，这里一般有：谷歌、搜狐、360.......

应有尽有，我一般用的最多的还是搜狐浏览器，尽管他的兼容性不是最好的，但架不住用的顺手了，但有一些网页打开还是得用别的浏览器，这也是没办法的😑在这边还是不特别推荐一些新手上来就先玩火狐，因为别的浏览器更加常用一些。

三、前端开发史诗级三件套

1.HTML

html这算是一个新手小白在内彻意遨游的一个东东，对于我来说，当时学习最喜欢，并且感觉最有趣的一门了。做html网页，我用的是Dreamweaver，其实就是一个码农写网页页面的一个东东，你学会了他的一些固有格式语句规范，就能写出一个看起来或好或坏的一个网页。装个×也管。

2.css

html如果说是建立一个网页本体，那么css就是以为管家，为它穿上华丽的嫁衣。具体分类我会在文章最后附带整理图片。

3.javascript

JavaScript是一种高级的、解释型的编程语言；它是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程。

四、封装库/工具库

1、数据可视化

highchart、Echarts、AntV、D3.js.......

数据可视化，是关于数据视觉表现形式的科学技术研究。其中，这种数据的视觉表现形式被定义为，一种以某种概要形式抽提出来的信息，包括相应信息单位的各种属性和变量。

2、UI框架

Bootstrap、Semantic UI、layui........

UI框架就好比我们在网页制作程序中导入一个模板，那么我们就拥有了一个现成的网页，只需要更改里面的图片以及文字即可。

3.编辑器

TinyMCE、VEditor.........

编辑器是软体程序,一般是指用来修改电脑档案的编写软件,但也有人称 PE2、HE4(汉书)等文书软件为编辑器。常见的编辑器有文本编辑器、网页编辑器、源程序编辑器、图像编辑器,声音编辑器和视频编辑器等。

4.组件库

Element、iview、antd.......

顾名思义，组件的仓库。（对的，就是则么直白😏）

5.动画

Animate、mo.js......

（喜羊羊，美羊羊，别看我只是一只羊，样儿的聪明难以想象。我也希望接触前端的小伙伴们，可以做出充满新一代少年童年的动画片。）

6.mock数据

mock.js.......

mock是在测试过程中,对于一些不容易构造/获取的对象,创建一个mock对象来模拟对象的行为。 mock测试一般也称为mock数据。 简单来说,mock就是向测试对象提供一套和测试资源完全相同的接口和方法,不关系具体的实现过程,只关心具体结果

7.工具库

underScore、Lodash........

五、前端工程化

详见下下列图片（小编手笨，用最原始最直观的方法整了下来，还望大家莫要嫌弃🥰）