Web开发这几年发生巨大的变化。从简单网页脚本开发语言到开始染指后端服务器开发，javascript生态圈群雄逐鹿，各种库插件多如牛毛，几乎无所不能，大有一统江湖的意味。

大牛Jose Aguinaga分享的在2016年如何学习JavaScript值得阅读理解https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.5zzf9ydlm，翻译版本（https://segmentfault.com/a/1190000007083024），本文将从本人的理解范畴，试图说明一些逐步深入学习JavaScript的学习路线的方案，当然如果你对html/css/javacript基础知识不够了解，那么你是路人甲，不属于本文要面对的范畴。本文将会涉及以下几个方面：

•Web应用开发的历史

•一个现代的JavaScript Web应用会包含哪些部分

•为什么不推荐使用jQuery？

•为什么React是个不错的选择

•为什么并不需要你首先学透JavaScript？

•如何学习ES6语法

•缘何与如何学习Redux?

•GraphQL到底解决了什么问题？

•下一步又会走向何方

1Web应用开发的历史

讲述javascript为什么要说web应用开发的历史呢？因为现代web开发，是基于移动端开发之后逐渐发展起来的。我们开始关程序叫App，有些网站称自己为Web App。08年谷歌发布了Chrome浏览器，几年之后Chrome成为了最为流行的浏览器之一。Chrome团队花费了大量精力在JavaScript上面，Web App也使用了大量的js代码，由于js历史的原因，它并不支持类/对象/模块这些现代编程语言所具有的优秀特征，这对于构建大型的复杂的Web App应用是个不小的挑战。于是就有了第三方机构和组织祭出了commonjs或amd大旗，前者是服务端规范，后者是前端规范。当然其他公司也在JavaScript投入了大量精力，现在它可以支持类和模块加载，如TypeScript，coffeeScript，flow等等可以编译为JavaScript运行，当然，未来随着浏览器对原生es6规范的支持，这些第三方语言编译的权重将会下降。

还记得 Swing、SWT 以及 wxWidget 这些东西吗？我们在浏览器上重新发明了它们，于是出现了一些新的 UI 编程模型，它们主要集中在组件化上。

我们必须想办法设计、构建和测试响应式 App，同时还要保持它们不会太臃肿，虽然人们人手一部手机，但流量并不宽裕。

于是组件框架出现了，谷歌的 Angular、Facebook 的 React 和来自开源社区的 Vue。

2007 年，Facebook 开始在美国雄起，到现在已经成为一个巨头公司。除了拥有大量的用户，Facebook 也是世界上拥有最多代码的公司之一。

Facebook 的开发团队开发了很多代码，并将它们开源。他们也有自己的开发者大会，叫作 F8。大部分巨头公司都有自己的开发者大会。

新的 App 需要越来越复杂的 UI 布局，所以 CSS 也需要有所变化。我们不再使用 table 元素来布局图像，iframe 元素也差不多销声匿迹了。我们建立了新的标准，比如 CSS Floats、Flexbox 和 CSS Grid。

人们不断地对这些标准进行迭代，开发出了各种框架，比如 Bootstrap、Foundation 等。我们还发明了一些语言，可以将它们编译成 CSS。它们弥补了 CSS 的一些不足，如变量和模块化，但还不够完美。

如果你感到疑惑，这是正常的，如果对这两年的js生态圈不够疑惑，说明，你离它太远，毕竟变化快，技术更新频繁已经是生态圈的常态了。

来，感受一下大前端。

2一个现代的Web前端会包含哪些部分

1)css命令方案

最受欢迎的选择是 BEM ，其次是 CSS模块（CSS Modules），OOCSS和 SMACSS方案，这几种方案对css开发人员具有规范开发，指导开发的意义

2)库和框架

js已经不是当年那个单纯的网页脚本语言了，越来越多的语言功能给赋给了js，它也能做越来越多的事情，大有统一前后端的趋势，同时由于诸如nodejs等后端平台的出现，单线程、异步I/O、事件驱动的高效方式，在一定程度上可以替代后端某些语言在多任务处理，多线程处理的优势。

当然除了jquery，还有越来越多的库被加入到当前的js的开发基础阵营之中，下图展示了多个正在前端开发中越来越重要库的占比

3)前端打包

随着前端开发的复杂度越来越高，通过人工管理各个资源文件之间的依赖显得很不合时宜，于是出现了众多打包工具。根据Ashley Nolan 的前端问卷调查，得出来如下效果：

Gulp是最大的赢家，接近 44％ 的开发人员在使用。然而，更简单的 npm scripts 脚本在2016年增加了 23％ ，达到 26％ 。

愚人码头注：可以查看两篇文章：为什么我放弃 Gulp 和 Grunt 而使用 npm Scripts 和 为什么使用 npm Scripts 构建项目

Grunt 已经失去了优势，跌落到 12％。另外，9％ 的受访者选择了不使用任务运行器。

那些使用模块打包工具在2016年增加了 20％，达到 68％ 。 Webpack 是最为流行，占 31％ ，Browserify 为 11％ ，RequireJS 为 8％ 。

我很惊讶，“其他”模块打包工具占不到 4％，当有几个任务运行器插件可以更简单的管理依赖关系，例如 gulp-deporder 。也许因为每个开发人员都在使用JavaScript 转译器

这其中不包括es5/es6/coffescript/TypeScript等其他变异版本的js所使用的工具和特定方法，这些技术又会是另一个话题

4)该学一些什么

实际上将前端工程分离出来成为一个独立的岗位，也是近年来的事情，在这之前应该称为大前端，因为不是说会写js，会切页面，会使用样式表就可以完成工作，毕竟之前的网页效果不像现在复杂多样，功能也没有现在纷繁复杂。目前来看，前后端分离对很多工作的细分确实提高了不小的工作效率，前端只负责页面，后台负责数据输出。这对协同工作带来的好处可能要多于从业者本身的受益。

如果你是一个想要继续前进的并且不想冒充UI工程师的前端开发者，那么你需要掌握的知识体系应该是大前端的知识体系。前端工程师，假使你不懂一些后端的知识，你永远写不出来高性能可扩展的前端代码。举个例子来说，如果你只会使用ajax请求数据，而不懂得ajax发送后数据是如何被传递出去的，是如何被加工的，是如何控制不同的数据填充的，是如何防范安全问题的等等，搞不明白这么些问题，应付简单业务尚可，处理高级应用，大规模任务将显得捉襟见肘。

那么我们该如何学习呢？学习什么技术呢？现在的前端已日臻复杂，下图是目前前端高阶阶段需要学习和掌握的一些方向，仅供参考，勿要模仿。大前端前端基础架构，如下图所示，

知识点太多，每一个展开说，将是无法完尽的篇幅，本文仅仅说一部分概览，详情请自行琢磨。

5)前端技术概览

o浏览器内核

♣IE6/7/8/9/10/11 (Trident) / Edge (EdgeHTML)

♣Firefox (Gecko)

♣Chrome/Chromium (Blink)

♣Safari (WebKit)

♣Opera (Blink)

o编程语言

♣JavaScript/Node.js

♣CoffeeScript

♣TypeScript

o页面布局编译

♣HTML/HTML5

♣CSS/CSS3

♣Sass/LESS/Stylus/postCSS

♣PhotoShop/Paint.net/Fireworks/GIMP/Sketch

o开发工具

♣编辑器和IDE

♣VIM/Sublime Text2

♣Notepad++/EditPlus

♣WebStorm

♣Emacs EmacsWiki

♣Brackets

♣Atom

♣Lime Text

♣Light Table

♣Codebox

♣TextMate

♣Neovim

♣Komodo IDE / Edit

♣Eclipse

♣Visual Studio

♣Visual Studio Code

♣NetBeans

♣Cloud9 IDE

♣HBuilder

♣Nuclide

♣调试工具

♣Firebug/Firecookie

♣YSlow

♣IEDeveloperToolbar/IETester

♣Fiddler

♣Chrome Dev Tools

♣Dragonfly

♣DebugBar

♣Venkman

♣Charles

♣版本管理

♣Git/SVN/Mercurial

♣Github/GitLab/Bitbucket/Gitorious/GNU Savannah/Launchpad/SourceForge/TeamForge

o代码质量

♣Coding style

♣JSLint/JSHint/jscs/ESLint

♣CSSLint

♣Markup Validation Service

♣HTML Validators

♣单元测试

♣QUnit/Jasmine

♣Mocha/Should/Chai/Expect

♣Unit JS

♣自动化测试

♣WebDriver/Protractor/Karma Runner/Sahi

♣phantomjs

♣SourceLabs/BrowserStack

o前端库/框架

♣jQuery/Underscore/Mootools/Prototype.js

♣YUI3/Dojo/ExtJS/KISSY

♣Backbone/KnockoutJS/Emberjs

♣AngularJS

♣Batarang

♣Bootstrap

♣Semantic UI

♣Juice UI

♣Web Atoms

♣Polymer

♣Dhtmlx

♣qooxdoo

♣React

♣Brick

♣vue.js

o前端标准/规范

♣HTTP/1.1: RFCs 7230-7235

♣HTTP/2

♣ECMAScript3/5

♣ECMAScript6

♣W3C: DOM/BOM/XHTML/XML/JSON/JSONP/...

♣CommonJS Modules/AMD

♣HTML5/CSS3

♣Semantic Web

♣MicroData

♣RDFa

♣Web Accessibility

♣WCAG

♣Role Attribute

♣WAI-ARIA

o性能

♣JSPerf

♣YSlow 35 rules

♣PageSpeed

♣HTTPWatch

♣DynaTrace's Ajax

♣高性能JavaScript

oSEO

o编程知识储备

♣数据结构

♣OOP/AOP

♣原型链/作用域链

♣闭包

♣编程范型

♣设计模式

♣Javascript Tips

o部署流程

♣压缩合并

♣YUI Compressor

♣Google Clousure Complier

♣UglifyJS

♣CleanCSS

♣文档输出

♣JSDoc

♣Dox/Doxmate/Grunt-Doxmate

♣项目构建工具

♣make/Ant

♣GYP

♣Grunt

♣Gulp

♣Yeoman

♣FIS

♣Mod

♣ES6＋ 转换器

♣Traceur

♣Babel

o代码组织

♣类库模块化

♣CommonJS/AMD

♣YUI3模块

♣webpack

♣业务逻辑模块化

♣bower/component

♣文件加载

♣LABjs

♣SeaJS/Require.js

♣模块化预处理器

♣Browserify

o安全

♣CSRF/XSS

♣CSP

♣Same-origin policy

♣ADsafe/Caja/Sandbox

o移动Web

♣HTML5/CSS3

♣响应式网页设计

♣Zeptojs/iScroll

♣V5/Sencha Touch

♣PhoneGap/Cordova

♣jQuery Mobile

♣W3C Mobile Web Initiative

♣W3C mobileOK Checker

♣Open Mobile Alliance

♣React Native

♣ionic

o前沿技术社区/会议

♣D2/WebRebuild

♣NodeParty/W3CTech/HTML5梦工厂

♣JSConf/沪JS(JSConf.cn)

♣QCon/Velocity/SDCC

♣JSConf/NodeConf

♣CSSConf

♣YDN/YUIConf

♣HybridApp

♣WHATWG

♣MDN

♣codepen

♣w3cplus

♣CNode

o计算机知识储备

♣编译原理

♣计算机网络

♣操作系统

♣算法原理

♣软件工程/软件测试原理

o软技能

♣知识管理/总结分享

♣沟通技巧/团队协作

♣需求管理/PM

♣交互设计/可用性/可访问性知识

o可视化

♣SVG/Canvas/VML

♣SVG: D3/Raphaël/Snap.svg/DataV

♣Canvas: CreateJS/KineticJS

♣WebGL/Three.JS

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:http://www.dengtar.com/16586.html