前端学习路线规划

发表于 | 分类于 | | 阅读数
字数统计: 2,472 字 | 阅读时长 ≈ 9 分钟

前端学习路线规划

一、代码编写工具

sublime Text 3:

  1. sublime text编辑器单从界面看非常简洁，可以说让人一见倾心的感觉。完全符合码农的口味~~。功能上也不复杂，就跟记事本似的，很容易上手。

  2. 可以自由扩展，sublime提供了安装插件的方式，可以任意安装你想要的插件.

二、学习路线规划

1. 熟练使用 HTML、CSS

HTML 是标签语言，可以构建前端页面的骨架；CSS是层叠样式控制表，可以构建前端页面的外貌

这部分比较简单，到网上搜资料，书籍视频非常多。css中盒子模型，流动，block，inline，层叠，样式优先级等这些比较重要。最后再深入了解下浏览器差异性，ie9以下兼容简单了解就行了，ie9以下浏览器被淘汰掉是趋势，低版本没必要浪费大量时间去学习兼容主流浏览器，google chrome浏览器、firefox浏览器、safari浏览器、opera浏览器即可。浏览器差异内容很多，建议在实践中多多积累。

1
2
推荐书籍：《Head First HTML 与 CSS (第2版)》
          《CSS 禅意花园(修订版)》

2.javascript部分（最重要的部分）

难点，也是重点，要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，有很多比较抽象的概念，必须要深入理解，比如闭包、原型、面向对象、封装等，要理解透彻。看书是必不可少的，找一本优秀的js书从头到尾深入学习了。另外，js面向对象编程必须要学习，非常重要，个人推荐一本书《javascript高级程序设计》。边学边练，实践出真知。

1
2
3
4
推荐教程：网易云课堂上 李炎恢老师的视频，讲得很详细，讲的是和那本红宝书一样的内容
          多动手写demo
推荐书籍：《Javascript 权威指南》
         《JavaScript 高级程序设计(第3版)》

3.jQuery学习（这不是一个框架，是一个类库）

这些基础知识掌握好之后，还需要学jQuery，这是一个非常优秀的Javascript库，大型开发必备。它简化了Javascript的复杂操作，消除了Javascript跨平台兼容问题，提供了大量实用方法，有良好的文档和帮助手册，是一个非常成熟的Javascript库。

1
2
推荐教程：网易云课堂上 李炎恢老师的视频，多动手写demo
推荐书籍：《锋利的jquery》

4.ajax的学习

通过在后台与服务器进行数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，ajax是现在前端后台交互的主要方式。

1
2
掌握的知识点：js原生的发送ajax的方法
             jq的简便的发送ajax的方法

5.git

Git是目前世界上最先进的分布式版本控制系统，适合于在团队合作时进行版本控制，提高开发效率

1
推荐教程：廖雪峰老师的关于git的教程博客

6.理解前端语言新标准 HTML5、CSS3、ES6 及其特性

熟练使用 HTML、CSS、JavaScript 还需要我们理解其语言最新相关标准：HTML5、CSS3 和 ES6(ECMAScript6)。

  • HTML 5 里新增了许多特性：语义化和新的音频、视频支持等；
  • CSS 3 被划分为模块，解决了 CSS2 为等待各个标准统一而耗费大量时间才能推进的不足之处，同时也提供了 2D、3D、动画效果等新特性；
  • ECMAScript6 等于 JavaScript - DOM - BOM，是 JavaScript 在 2015 年的最新标准，因为 ES6 对标准改动较大，前端开发者常常将一个前端项目是否支持 ES6 作为推进前端新技术的重要桥梁之一。ES6 将箭头函数、let 变量声明命令、Promise 编程、模块化编程等新特性纳入其标准中，得到了各大浏览器最新版本的支持。
1
2
扩展阅读：《ES6 标准入门(第2版)》
          《深入理解ES6》

7.掌握浏览器兼容、响应式布局相关解决方案

早期占据浏览器半壁江山的IE浏览器上存在的众多浏览器兼容问题，耗费了当时前端开发者的大量开发时间。虽然说现在的前端开发者已经不需要考虑太多的浏览器兼容问题，对其概念的了解有利于了解前端历史包袱或在未来足以应对一些面向特殊群体(早期 IE 浏览器使用者)的前端项目。
关于IE浏览器的兼容性问题在李炎恢老师的那个视频有详细的讲解

响应式布局和单页面应用是当代前端开发者的必备技能。从 Web Pages 到 Web App 时代，我们开发的前端项目有越来越多的可能需要同时在电脑端和手机端进行访问，一个有良好响应式布局的前端项目可以一个代码运行在多种不同分辨率的平台之上。

三、现在前端主流的框架

1. vuejs :2016年最火的前端框架（MVVC框架）

是一套用于构建用户界面的渐进式框架Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

常用于单页面应用的开发

1
2
3
4
5
6
7
8
掌握的要点：(vue全家桶)
   1.vue-router
   2.vuex
   3.vue-resource
   4.vue-cli
   5.Element-ui
   
推荐教程：详细阅读官网教程，中国人自己研发的，有中文版，不难

2. Reactjs

React 是一个用于构建用户界面的 javascript 库。

React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

React特点：

1
2
3
4
5
6
1.声明式设计 −React采用声明范式，可以轻松描述应用。
2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
1
2
3
4
5
6
掌握的知识点：（React全家桶技术）
  1.Reactjs
  2.React生命周期
  3.React Router
  4.Redux
  5.React Native(主要用于移动端的开发)

3.AngularJS（国外开发大型项目常用框架）

AngularJS的四大功能：

  1. MVC

    将后台的MVC模式写入了前端语言中。我总觉得前端语言将来会很叼，从node.js开始我就又一种这样的感觉。可能在很久之后取代后端语言不是没有可能的。

    1. 模块化

    就是一系列函数的集合，当应用被启动时，这些函数就会被执行。主要利用angular.module来定义模块。也是Angular.js的亮点。

  2. 指令属性

我自己的理解就是比html标签更加具有属性和方法的指令标签

  1. 双向数据绑定

传统的数据绑定是单向绑定，数据只能从model和controller生成需要的html，但是不能返过来使用。只是单方向的。双向数据绑定:也就是说我在前面填写，后面直接生成代码，将填写的显示出来。双向的意思就是如果view修改了属性值，那么model机会看到这个改变。相反也是一样的。

4. 小程序（类似一个前端开发框架）

1
推荐教程：官网上的小程序开发文档，尝试动手写一下小程序

5.nodejs(前端用来写后台的工具)

简单的说 Node.js 就是运行在服务端的 JavaScript。

Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。

Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

1
推荐教程：官网的教程

四、一些常用的ui框架

1. Bootstrape：最好的响应式css框架

2. Element-ui：完美适应vuejs的ui框架

3. Amazeui：Amaze UI 是一个轻量级、 Mobile first 的前端框架, 基于开源社区流行前端框架编写的。

4. Aliceui

5.Echart：最好的图表制作框架

·····

六、前端最好掌握的一些常用技能

  1. Markdown笔记的使用，程序员专用笔记本
  2. github的使用：全球最大的开源代码网站，在上面你可以找到全世界所有出名项目的源代码，被称为人类的知识宝库。
  3. 用github page搭建个人博客，上传个人项目到github上，面试加分必备项
  4. 移动端的开发

  5. 前端web开发命名规范，谷歌、百度命名标准

    等等·······

-------------本文结束 感谢您的阅读-------------