前端技术学习路线及技术汇总

Part1.前端技术汇总

---

【前端简介】

    前端即网站前台部分，在PC端，移动端等浏览器上展现给用户浏览的网页。前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及Javascript/AJAX，现在最新的高级版本HTML5、CSS3及SVG等。

【开发工具】

    1. Sublime Text：前端初学者建议使用Sublime Text。Sublime Text具有代码缩略图，Python插件，代码段、错误提示等功能，是一个跨平台的编辑器，支持Windows、Linux、Mac、OS、X等操作系统。体积小，使用简单。Sublime Text2是一个收费软件。

    2. 集成开发环境
     WebStorm：jetbrains公司旗下一款Javascript开发工具。Webstorm被誉为“Web前端开发神器”、“最强大的HTML5神器”等。功能强大，你能想到的它基本上都有~
     Visual Studio
: Visual Studio
是微软公司推出的开发环境。目前最新版为Visual Studio
2017。 可以用来创建 Windows 平台下的 Windows 应用程序和网络应用程序，也可以用来创建网络服务、智能设备应用程序和 Office 插件,目前还可开发安卓平台应用及IOS平台应用。

     Xcode: Xcode是苹果公司向开发人员提供的集成开发环境（非开源），用于开发Mac OS X、iOS的应用程序。

   3. 调试工具
    谷歌、火狐、Opera等浏览器。

【所需知识】

    HTML： HTML是HyperText Markup Language（超文本标记语言）的简写，“ 超文本 ”就是指页面内可以包含图片、 链接，甚至音乐、 程序等非文字元素。
    CSS：CSS是Cascading Style Sheets（层叠样式表）的简写，一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
    JavaScript: Javascript，一种高级编程语言，通过解释执行，是一门动态类型，面向对象（基于原型）的直译语言。JavaScript是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程。
    DOM: DOM是Document Object Model（文档对象模型）的简写，是W3C组织推荐的处理可扩展置标语言的标准编程接口。
    BOM: BOM是Broswer Object Model（浏览器对象模型），是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。
    jQuery: jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
    jQuery UI: jQuery UI是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。
    PHP: 外文名PHP，Hypertext Preprocessor（超文本预处理器），是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点，利于学习，使用广泛，主要适用于Web开发领域。PHP 独特的语法混合了C、Java、Perl以及PHP自创的语法。
    AJAX: AJAX是AsynchronousJavascriptAndXML（异步Javascript和XML）的简写，是指一种创建交互式网页应用的网页开发技术。Ajax 是一种用于创建快速动态网页的技术。
    JSON: JSON是Javascript Object Notation（js对象简谱）的简写，是一种轻量级的数据交换格式。它基于ECMAScript(欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
    Python: 是一种面向对象的解释型计算机程序设计语言，Python具有丰富和强大的库。它常被昵称为胶水语言，能够把用其他语言制作的各种模块（尤其是C/C++）很轻松地联结在一起。
    Bootstrap: Bootstrap是Twitter推出的一个开源的用于前端开发的工具包，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。
    Layui: layui，是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。
    Node.js: Node.js 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。
    AngularJs: 是一款优秀的前端js框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC（Model–view–controller）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
    vue.js: 是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Part2.前端学习路线

---

第一阶段 HTML&CSS
    HTML、CSS语法及使用技巧
    掌握DIV+CSS布局方式
    熟练使用开发人员工具进行页面调试
    能够完成基本动画效果
    能够使用CSS3新属性修饰网页

第二阶段 移动Web网页开发
    掌握HTML5
    掌握CSS3 2D、3D动画效果
    掌握CSS预处理器less使用
    掌握常见移动端常用前端框架使用方法
    掌握响应式布局开发
    掌握Bootstrap开发响应式页面

第三阶段 JavaScript网页编程
    掌握JavaScript基本语法及算法
    掌握DOM的各种操作
    掌握JavaScript的高级语法
    熟练使用Jquery操作DOm
    熟练使用和编写jQuery插件
    能够独立完成电商网站的页面搭建
    掌握JavaScript常见兼容方案

第四阶段 Node.js与AJAX
    能够使用Node.js进行Web服务端开发
    掌握JS异步编程模型
    能够使用Node.js操作MySQL数据库
    理解HTTP协议
    熟悉原生AJAX请求，并掌握常见跨域技巧
    能够基于jQuery的AJAX相关API开发常见的前端功能

第五阶段 前端框架实战
    熟练使用Vue、React技术栈进行项目开发
    熟练掌握前后端分离开发模式
    掌握使用主流框架开发门户网站、管理系统、移动Web等客户端
    掌握Webpack项目配置流程
    掌握Web项目的部署与发布模式

第六阶段 微信小程序+小游戏
    掌握小程序的开发基础
    能够独立开发小程序项目
    掌握小程序/小游戏的部署与发布
    掌握第三方AI平台的使用

第七阶段 团队实战开发
    能够根据现有的项目进行二次开发
    掌握企业中源代码管理的协作方式
    掌握企业中常见的开发协作模式
    掌握主流团队管理工具的使用

【参考资料】
    搜狗百科
    2019新版前端与移动开发学习路线图（黑马程序员）