随着互联网的快速发展，技术型人才更是受到了企业的欢迎，更多的人倾向于学习软件开发技术，达到更有市场前景的职位。Web前端是一个入行门槛较低的开发技术，更是近几年热门的职业，Web前端不仅薪资高发展前景好，是很多年轻人向往的一个职业。看到这里很多小伙伴想问：现在Web前端的就业前景如何？学Web前端需要注意哪些问题？Web前端学习路线是怎样的？别急，下面我一一为大家答疑解惑。


一、Web前端的前景
1、市场：
在中国Web前端的市场永远都是巨大的，但是随着信息的普及，人人都知道Web前端开发做的时间久了，工资高，所以必然会增加竞争程度。但这是好事，有竞争才有更多人才出现。Web前端的生态系统几乎涵盖了目前市面上所有的软硬件，Web前端在中国的地位20年都是霸主，几乎是万能的，你能想到的，Web前端基本都能实现。
2、需求：
目前智联，boss，拉勾网的招聘来看，Web前端的需求量还是排名第一，但是这个需求是有前提条件的，就是需要有工作经验，因为你没有工作经验，公司就会认为你没有开发项目的能力，自然不会要你，所以你在学习中，一定要培养自己的经验，什么是经验？就是多多遇到问题，然后解决问题，这就是解决，也可以成为解决问题的能力。有人说Web前端饱和了，这是绝对不可能的，只能说你现在竞争大，学习的人，质量差了而已。所以很多人说找不到工作。其实他自己啥都不会。
这只是针对一线城市而言，相对于二三线城市来说对于实际开发经验是稍微的放松的。
3、稳定：
其实想学Web前端的人完全不用担心，因为在中国Web前端一直都是第一的，需求量非常大，这么多年Web前端从未被超越，第一个问题已经说过了，Web前端是有一个庞大的生态系统，它的覆盖范围非常广，而且已经连续10几年位居开发语言的榜首，所以Web前端是相对于其他语言来说，非常稳定的，不用担心失业的问题了。
二、学Web前端需要注意哪些问题？
学Web前端需要克服以下几点，如果能按照自己的规划的去学习成功的几率会更大。
1、惰：
其实很多人都是因为看别人工资高才有想法去学的，但是事情往往都是这样，眼红别人工资高，但是自己的实际行动是真的不强，能坚持下去的没有几个，或者自己学的本来就不好，就着急找工作。
2、 急于求成：
很多初学Web前端的小伙伴都喜欢无脑的刷视频，但是视频看过了之后自己又什么都不会，这样学了无疑就是浪费时间，没有任何作用，所以不要急于求成，学了哪些知识点就掌握哪些。多动手写代码。
3、没有时间或者压力大：
没有时间可能你还在上班或者你在干别的事情给自己找的一个借口，时间不是没有而是你有没有利用起来，现在是互联网时间，想要学习真的很容易的，可以利用自己碎片化的时间去学习，比如坐公交或者坐地铁，这样你有一大把的时间去学习，就看你能不能利用起来。压力大可能是因为你目前收入已经不满足你的消费了，所以觉得压力大，想找个薪资高的来弥补，但是想法是好的，你得去做，一步一步的去做。
4、自控力差：
自控力在学习上真的很重要，如果你觉得自己的自控力差，建议还是不要自学为好，因为你有可能付出大量的时间，也不一定会有成效，不是说自控力差的人就不能学好Web前端，是不能通过自学来进入前端行业了，可以考虑网上或者是系统学习，这种会有人监督你，可以系统学习，能避免浪费不必要的时间。
三、Web前端学习路线有哪些？
基础：HTML+CSS网站页面搭建，CS核心和PC端页面开发，HTML5移动端页面开发 。
核心：Web前端核心技术JavaScript，ecmasript，dom，ajax，json，正则，作用域，运动框架，核心算法，高级函数，插件封装，jQuery等。
高级：html5+高级JavaScript开发，大数据可视化，Webapp交互接口，lbs定位，微信sdk，es6标准，高级算法，数据结构，插件封装。
框架：vue、react、angular企业开发应用。
企业要求：bootstrap，swiper，iscroll，sass，ps切图，网站上线等。
以上就是我分享的学习Web前端应了解的一些知识。希望本篇文章能够对正准备学习Web技术，从事Web前端相关工作的小伙伴们有所帮助。目前，Web前端仍处于高速发展的阶段，希望那些有意于学习Web前端开发的人员，抓住机遇不要再犹豫不决，赶快来学Web前端开发吧。

大致总结的web前端学习路线图

 

 

　　Web前端进阶要学什么？如何快速掌握Vue框架？很多学Web前端的小伙伴在进阶阶段都要学习Vue，因为它是目前企业常用的技术之一。但如何快速掌握Vue呢?下面小编给大家分享一个比较不错的Vue学习路线。



 

　　Vue是一个用于构建Web用户界面的JavaScript框架，因此在开始使用Vue之前，你至少先要掌握JavaScript和Web开发的基础知识。具备一定基础后，你可以了解以下内容：

　　Vue生命周期。在构建你的第一个Vue应用之前，你要了解如何在网页中去安装、使用Vue，以及了解Vue的引用实例的生命周期。在基础情况下，Vue将网页和JavaScript保持同步，实现这一目标的特性是响应式数据及指令和插值等模板功能。

　　组件。Vue的组件是可重复使用，并相互独立的UI元素。你需要了解如何声明组件以及如何通过属性和事件使组件间通信，并且学会组合组件，因为这关乎着你是否能够使用Vue构建出一个健壮、可扩展应用程序。

　　单页面应用程序。单页面应用程序(SPA)架构决定了你创建的Web页面一样能够展示和多页面网站一样丰富的内容，且不会当用户在点击链接后重新加载整个页面等这样低效的行为。

　　状态管理。随着项目规模越来越庞大，SPA的许多页面上将会有越来越多的组件，管理全局状态也将变得越发棘手。一种称为“Flux”的特殊模式可将您的数据保存在稳定的中央存储中。Vuex库也由Vue团队维护，可助你在Vue.js应用程序中实现Flux。

　　Vue框架。目前有许多优秀的Vue框架，下面给大家介绍应用在不同领域最为广泛的三个框架。

　　1、Nuxt.js

　　如果你想要构建一个高性能的Vue应用程序，同时还要基于路由、服务端呈现、代码分离和其他前沿特性，同时还需要一些更高级的功能，例如：SEO标记等。您可以使用Nuxt.js框架。

　　2、Vuetify

　　Vuetify框架在一系列Vue组件中实现了Material Design。这允许您使用Material Design布局和样式快速创建Vue应用程序，并在应用程序中实现模态框、提示框、导航栏、分页等页面小控件。

　　3、NativeScript-Vue

　　NativeScript是一个使用iOS和Android上原生用户界面组件构建应用app的框架，而NativeScript-Vues 是基于NativeScript且支持Vue语法和Vue组件使用的框架。

大家好，我是轻风乍起，本人从事前端8年了，总结了很多学习资料，有时间我会普及一些入门和提升建议，思想提升了，路线明确了自然就好了，于是就整理了一些学习笔记，供大家学习，干货福利内容 在文末↓
一、开发工具

atom

Atom 代码编辑器支持 Windows、Mac、Linux 三大桌面平台，完全免费，并且已经在 GitHub 上开放了全部的源代码。在经过一段长时间的迭代开发和不断改进后，Atom 终于从早期的测试版达到了 1.0 正式版了！相比之前的版本，在性能和稳定性方面都有着显著的改善。
idea

IDEA 全称IntelliJ IDEA，是java语言开发的集成环境，IntelliJ在业界被公认为最好的java开发工具之一，尤其在智能代码助手、代码自动提示、重构、J2EE支持、Ant、JUnit、CVS整合、代码审查、 创新的GUI设计等方面的功能可以说是超常的。IDEA是JetBrains公司的产品，这家公司总部位于捷克共和国的首都布拉格，开发人员以严谨著称的东欧程序员为主。
webpack

webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。
gulp

Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的,利用 Node.js 流的威力,你可以快速构建项目…
lodash

lodash一开始是Underscore.js库的一个fork，因为和其他(Underscore.js的)贡献者意见相左。John-David Dalton的最初目标，是提供更多“一致的跨浏览器行为……，并改善性能”。之后，该项目在现有成功的基础之上取得了更大的成果。最近lodash也发布了3.5版，成为了npm包仓库中依赖最多的库。它正在摆脱屌丝身份，成为开发者的常规的选择之一。
fetch

对于 AJAX，现在一般都是使用各种框架实现，其本质是 XMLHttpRequest。使用过原生XMLHttpRequest的人都知道，这种方法实现起来不太方便。现在，我们有了新的选择：Fetch API。
Electron

Electron 框架的前身是 Atom Shell，可以让你写使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序。它是基于io.js 和 Chromium 开源项目，并用于在 Atom 编辑器中。Electron 是开源的，由 GitHub 维护，有一个活跃的社区。最重要的是，Electron 应用服务构建和运行在 Mac，Windows 和 Linux。

二、javascript框架
angular2

跨平台开发

学习如何基于 Angular 构建应用程序，并复用代码和技能来构建适用于所有平台的应用。比如： Web 应用、移动 Web 应用、原生移动应用和原生桌面应用等。

速度与性能

通过 Web Worker 和服务端渲染，达到在如今 ( 以及未来）的 Web 平台上所能达到的最高速度。Angular 让你有效掌控可伸缩性。基于 RxJS 、 Immutable.js 和其它推送模型，能适应海量数据需求。

美妙的工具

使用简单的声明式模板，快速实现各种特性。使用自定义组件和大量现有组件，扩展模板语言。在几乎所有的 IDE 中获得针对 Angular 的即时帮助和反馈。所有这一切，都是为了帮助你编写漂亮的应用，而不是绞尽脑汁的让代码“能用”。
react+redux

React+Redux非常精炼，良好运用将发挥出极强劲的生产力。但最大的挑战来自于函数式编程（FP）范式。在工程化过程中，架构（顶层）设计将是一个巨大的挑战。要不然做出来的东西可能是一团乱麻。说到底，传统框架与react+redux就是OO与FP编程范式的对决。
jquery

JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。
antd

Ant Design 是蚂蚁金服开发和正在使用的一套企业级的前端设计语言和基于 React 的前端框架实现。企业级金融产品的交互语言和视觉体系。丰富实用的 React UI 组件。基于 React 的组件化开发模式。背靠 npm 生态圈。基于 webpack 的调试构建方案，支持 ES6。

三、node相关技术


npm

NPM（node package manager），通常称为node包管理器。顾名思义，它的主要功能就是管理node包，包括：安装、卸载、更新、查看、搜索、发布等。


express

Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架，它提供一系列强大的特性，帮助你创建各种 Web 和移动设备应用。


koa2

koa 是由 Express 原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架。使用 koa 编写 web 应用，通过组合不同的 generator，可以免除重复繁琐的回调函数嵌套，并极大地提升错误处理的效率。koa 不在内核方法中绑定任何中间件，它仅仅提供了一个轻量优雅的函数库，使得编写 Web 应用变得得心应手。


rxjs

是一组库使用可观察到的集合和阵列、演员风格组成，组成异步和基于事件的程序。


zonejs

在ng2的开发过程中，Angular团队为我们带来了一个新的库 – zone.js。zone.js的设计灵感来源于Dart语言，它描述JavaScript执行过程的上下文，可以在异步任务之间进行持久性传递，它类似于Java中的TLS（thread-local storage: 线程本地存储）技术，zone.js则是将TLS引入到JavaScript语言中的实现框架。

四、设计模式


javascript设计模式

五、编程语言


javascript

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。


ecmscript6

ES6是继ES5之后的一次主要改进，语言规范由ES5.1时代的245页扩充至600页。ES6增添了许多必要的特性，例如：模块和类，以及一些实用特性，例如Maps、Sets、Promises、生成器（Generators）等。尽管ES6做了大量的更新，但是它依旧完全向后兼容以前的版本，标准化委员会决定避免由不兼容版本语言导致的“web体验破碎”。结果是，所有老代码都可以正常运行，整个过渡也显得更为平滑，但随之而来的问题是，开发者们抱怨了多年的老问题依然存在。


typesript

typescript是JavaScript的超集。TypeScript是JavaScript类型的超集，它可以编译成纯JavaScript。TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行，并且是开源的。

六、数据存储


mysql

MySQL是一个关系型数据库管理系统，由瑞典MySQL AB 公司开发，目前属于 Oracle 旗下公司。MySQL 最流行的关系型数据库管理系统，在 WEB 应用方面MySQL是最好的 RDBMS (Relational Database Management System，关系数据库管理系统) 应用软件之一。


mongodb

MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。


redis

Redis是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库，并提供多种语言的API。


cookie

Cookie，有时也用其复数形式Cookies，指某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据（通常经过加密）


access token

Windows操作系统安全性的一个概念。一个访问令牌包含了此登陆会话的安全信息。当用户登陆时，系统创建一个访问令牌，然后以该用户身份运行的的所有进程都拥有该令牌的一个拷贝。该令牌唯一表示该用户、用户的组和用户的特权。系统使用令牌控制用户可以访问哪些安全对象，并控制用户执行相关系统操作的能力。有两种令牌：主令牌和模拟的令牌。主令牌是与进程相关的；模拟的令牌是与模拟令牌的线程相关的。

七、html5+css3


html5

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。

HTML5的设计目的是为了在移动设备上支持多媒体。

HTML5 简单易学。


ejs

EJS是一个JavaScript模板库，用来从JSON数据中生成HTML字符串。引入EJS 创建一个模板 使用视图工具组件 与最初的JavaScript相比较，一些不太了解你的代码的人可以更容易地通过EJS模板代码看得懂你的代码。 让我们放松一下，一起来享受下令人激动的干净简洁的感觉。


canvas

TML5  标签用于绘制图像（通过脚本，通常是 JavaScript）。不过， 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。


css3

CSS3是CSS技术的一个升级版本，是由Adobe、Systems、Apple、Google、HP、IBM、Microsoft、Mozilla、Opera、Sun Microsystems 等许多WEB界的巨头联合组织的一个名为 “CSS Working Group” 的组织共同协商策划的。虽然目前很多细节还在讨论之中，但它还是不断地朝前发展着。2010年在HTML5成为IT界人士关注的焦点的同时，它也开始慢慢地普及开来。


sass

SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。


postcss

PostCSS 是使用 JS 插件来转换 CSS 的工具，支持变量，混入，未来 CSS 语法，内联图像等等。PostCSS 已经被许多大公司使用：谷歌，推特，阿里巴巴和 Shopify。 Autoprefixer PostCSS 插件是最流行的 CSS 处理器插件之一。


白鹭引擎

白鹭引擎是一个开源的、跨平台的手机游戏开发引擎,你可以快速地创建HTML5类型的移动游戏,也可以将游戏项目编译输出成为目标移动平台的原生游戏应用。

八、算法和数据结构


线型查找

在一列给定的值中进行搜索，从一端开始逐一检查每个元素，直到找到所需元素的过程。线性查找又称为顺序查找·如果查找池是某种类型的一个表，比如一个数组，简单的查找方法是从表头开始，一次将每一个值与目标元素进行比较，最后，或者查找到目标，或者达到表尾，而目标不存在于组中，这个方法称为线性查找。


二分查找

二分查找又称折半查找，优点是比较次数少，查找速度快，平均性能好；其缺点是要求待查表为有序表，且插入删除困难。因此，折半查找方法适用于不经常变动而查找频繁的有序列表。首先，假设表中元素是按升序排列，将表中间位置记录的关键字与查找关键字比较，如果两者相等，则查找成功；否则利用中间位置记录将表分成前、后两个子表，如果中间位置记录的关键字大于查找关键字，则进一步查找前一子表，否则进一步查找后一子表。重复以上过程，直到找到满足条件的记录，使查找成功，或直到子表不存在为止，此时查找不成功。


冒泡排序

冒泡排序（Bubble Sort），是一种计算机科学领域的较简单的排序算法。它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。


选择排序

选择排序（Selection sort）是一种简单直观的排序算法。它的工作原理是每一次从待排序的数据元素中选出最小（或最大）的一个元素，存放在序列的起始位置，直到全部待排序的数据元素排完。 选择排序是不稳定的排序方法（比如序列[5， 5， 3]第一次就将第一个[5]与[3]交换，导致第一个5挪动到第二个5后面）。


插入排序

插入排序的基本思想是：每步将一个待排序的纪录，按其关键码值的大小插入前面已经排序的文件中适当位置上，直到全部插入完为止。


字符串反转

.

var str = ‘123’;

.

.

var newStr = str.split("").reverse().join("");

.

.

alert(newStr);

.


搜索算法

搜索算法是利用计算机的高性能来有目的的穷举一个问题解空间的部分或所有的可能情况，从而求出问题的解的一种方法。搜索算法实际上是根据初始条件和扩展规则构造一棵“解答树”并寻找符合目标状态的节点的过程。


贪心算法

贪心算法（又称贪婪算法）是指，在对问题求解时，总是做出在当前看来是最好的选择。也就是说，不从整体最优上加以考虑，他所做出的是在某种意义上的局部最优解。贪心算法不是对所有问题都能得到整体最优解，关键是贪心策略的选择，选择的贪心策略必须具备无后效性，即某个状态以前的过程不会影响以后的状态，只与当前状态有关。


tween算法

Flash做动画时会用到Tween类，利用它可以做很多动画效果，例如缓动、弹簧等等。


javascript算法库



numbers.js





Numeric Javascript





Tangle





accounting.js



九、测试框架


mocha

mocha 是一个简单、灵活有趣的 JavaScript 测试框架，用于 Node.js 和浏览器上的 JavaScript 应用测试。Mocha 是具有丰富特性的 JavaScript 测试框架，可以运行在 Node.js 和浏览器中，使得异步测试更简单更有趣。Mocha 可以持续运行测试，支持灵活又准确的报告，当映射到未捕获异常时转到正确的测试示例。


karma

Karma是Testacular的新名字，在2012年google开源了Testacular，2013年Testacular改名为Karma。Karma是一个让人感到非常神秘的名字，表示佛教中的缘分，因果报应，比Cassandra这种名字更让人猜不透！Karma是一个基于Node.js的JavaScript测试执行过程管理工具（Test Runner）。该工具可用于测试所有主流Web浏览器，也可集成到CI（Continuous integration）工具，也可和其他代码编辑器一起使用。这个测试工具的一个强大特性就是，它可以监控(Watch)文件的变化，然后自行执行，通过console.log显示测试结果。


jasmine

Jasmine （茉莉）是一款 JavaScript BDD（行为驱动开发）测试框架，它不依赖于其他任何 JavaScript 组件。它有干净清晰的语法，让您可以很简单的写出测试代码。对基于 JavaScript 的开发来说，它是一款不错的测试框架选择。


chai

Chai 是一个针对 Node.js 和浏览器的行为驱动测试和测试驱动测试的诊断库，可与任何 JavaScript 测试框架集成。

5.Qunit

该框架诞生之初是为了jquery的单元测试，后来独立出来不再依赖于jquery本身，但是其身上还是脱离不开jquery的影子


should.js:

TJ的另外一个开源贡献


expect.js

BDD风格的另外一个断言库，基于should.js,是mini版的BDD库


assert

node自带核心模块: 可以在node中使用的断言模块

十、重构


命名

模块划分和命名空间


加载

js的动态加载


测试

Javascript的测试


编码

Javascript编码规则


闭包

利用原型/闭包开发组件


继承

利用继承来做事


重用

重用老代码


检测

JSDoc和JSLint


框架

自定义JavaScript产品框架


强化

强化对象封装和模块封装

更多精彩请关注爱创课堂前端，需要资料的可以加我qq3252897743领取