本文为前端练级攻略的第二篇，请看以下***部分：前端练级攻略（***篇）第二篇，我们将专注于学习JavaScript作为一门独立的语言，如何为界面添加交互性，JavaScript设计和架构模式，以及如何构建Web应用程序。就像HTML和CSS一样，那里有大量的JavaScript教程。然而，特别是对于新手来说，可能很难弄清楚要使用哪些教程以及以什么顺序学习它们。本系列的主要目标是为您提供路线图，帮助您导航学习成为前端开发人员。JavaScript基础JavaScript是一种跨平台的编程语言，如今几乎可以用于任何事情。语言在学习如何将JavaScript应用到网络之前，了解语言本身很重要。首先，阅读MozillaDeveloperNetwork的语言基础速成课程。本教程将教您基本的语言结构，例如变量、条件和函数。然后，阅读MDN的JavaScript指南中的以下部分：语法和类型控制流和错误处理循环和迭代函数不要太担心记住特定语法，您可以随时查看文档。相反，应专注于理解变量实例化、循环和函数等重要概念。如果知识密度太难，也无所谓。让我们先看一篇文章，然后您将这些概念付诸实践。当你回头看时，你可能会更清楚地理解它。基于文档的学习可能过于单调。你可以看看Codecademy的JavaScript课程。本课程理论与实践相结合，比较有趣。另外，如果你有时间，对于上面列出的每个概念，阅读EloquentJavaScript中的相应章节以加强你的学习。EloquentJavaScript是一本很棒的免费在线书籍，每个有抱负的前端开发人员都应该阅读。交互性现在您已经对JavaScript语法有了基本的了解，下一步就是将它应用到Web中。要了解JavaScript如何与网站交互，首先您必须了解文档对象模型(DOM)。DOM是HTML文档的一种表示结构。它是由对应于HTML节点的JavaScript对象组成的树状结构。要了解有关DOM的更多信息，请阅读CSSTricks的《什么是DOM》。它提供了对DOM的简单直接的解释。JavaScript与DOM交互以更改和更新它。这是我们选择一个HTML元素并更改其内容的示例varcontainer=document.getElementById("container");container.innerHTML='NewContent!';别担心，这只是一个简单的例子。使用JavaScriptDOM操作，您可以做更多的事情。要了解有关如何使用JavaScript与DOM交互的更多信息，请阅读MDN的“文档对象模型”部分中的以下指南。EventsandDOM使用DOM进行Web和XML开发的示例如何构建DOM树DOM概述使用选择器定位DOM元素同样，重点是理解概念而不是语法，希望能回答以下问题：什么是DOM？如何查询元素如何添加事件监听器？如何更改DOM节点属性？有关常见JavaScriptDOM交互的列表，请查看PlainJS的JavaScript函数和帮助程序。该站点提供了有关如何设置键盘事件侦听器样式并将其附加到HTML元素的示例。如果您想深入挖掘，可以随时阅读Eloquent关于JavaScript中的DOM的部分。Check要在浏览器中调试JavaScript，我们使用浏览器内置的开发者工具。大多数浏览器都提供检查器面板，允许您查看网页的源代码。您可以在JavaScript执行时跟踪它、将调试语句打印到控制台、查看网络请求和资源等等。这里有一个使用ChromeDevTools的教程。如果你使用Firefox，你可以看看这个教程。实用基础此时，关于JavaScript仍然有很多东西需要学习。但是，最后一节包含很多新信息。我想我们是时候休息一下，做一些练习了。它们有助于巩固您刚刚学到的一些概念。练习1对于练习1，转到AirBnB，打开浏览器的PageInspector，然后单击Console选项卡。在这里，您可以在页面上执行JavaScript。我们要做的是通过操作页面上的一些元素来获得一些乐趣。看看您是否可以执行以下所有DOM操作。选择具有唯一类名的标题标签并更改文本选择页面上的任何元素并将其删除选择任何元素并更改其CSS属性之一* 选择特定区域标签并将其向下移动250px* 选中任意一个组件，比如panel，调整其透明度定义一个函数doSomething，在这个函数j中定义alert(“Helloworld”)然后执行选择一个特定的段落标记，注册一个点击事件，运行doSomethingtimetheeventisfired如果遇到问题，请参阅JavaScript函数和帮助程序指南。大多数这些任务都是基于它的。下面是如何完成第一个要点的示例：到他们的实际应用。练习2使用CodePen，编写一个使用DOM操作并需要一些编程逻辑才能运行的基本JavaScript练习。本练习的重点是将你在《前端练级攻略》第1部分中学到的一些东西与JavaScript结合起来。这里有几个参考例子，可以作为启发。MoodColorGeneratorCalculatorJavaScriptTestPlayableCanvasAsteroids更多JavaScript现在您已经了解一些JavaScript并进行了一些实践，我们将继续讨论一些更高级的概念。以下概念没有直接关系。我将它们分组在本节中，因为它们对于理解如何构建更复杂的前端系统是必要的。一旦进入框架部分，您将更好地理解和使用它们。语言随着您对JavaScript的使用越来越多，您会遇到一些更高层次的概念。以下是其中一些概念的列表。如果您有时间，请仔细阅读每个要点。此外，如果您想了解更多，EloquentJavaScript涵盖了其中的大部分内容。继承和原型链Scope事件轮询事件冒泡Apply,call,andbind回调函数和promises变量和函数的提升Currying命令式和声明JavaScript与DOM的交互方式有两种：命令式和声明式。一方面，声明式编程关注发生的事情。另一方面，命令式编程关注什么以及如何。varhero=document.querySelector('.hero')hero.addEventListener('click',function(){varnewChild=document.createElement('p')newChild.appendChild(document.createTextNode('Helloworld!'))newChild.setAttribute('class','text')newChild.setAttribute('data-info','header')hero.appendChild(newChild)})}这是一个命令式编程的例子，我们手动查询一个元素并分配UI状态存储在DOM中。换句话说，专注于如何实现某事。这段代码的最大问题是它很脆弱。如果编写代码的人将HTML中的类名从hero更改为villain，事件侦听器将不再触发，因为DOM中没有hero类。声明式编程解决了这个问题。您不必选择元素，而是将其留给您正在使用的框架或库。这使您可以专注于做什么而不是如何做。要了解更多信息，请查看JavaScript的状态-从命令式到声明式，以及Web开发：声明式与命令式。Ajax您可能已经在这些文章和教程中多次看到术语Ajax。Ajax是一种允许网页使用JavaScript与服务器交互的技术。例如，当您在网站上提交表单时，它会收集您的输入并发出HTTP请求，该请求将数据发送到服务器。当您在Twitter上发布推文时，您的Twitter客户端会向Twitter的服务器API发出HTTP请求，并使用服务器响应更新页面。有关Ajax的阅读，请参阅什么是Ajax。如果您仍然不完全理解AJAX的概念，请看一下像我5岁一样解释它，什么是Ajax。如果这还不够，您还可以阅读有关HTTP的JavaScript章节。今天，HTTP请求的浏览器标准是Fetch。您可以在DanWalsh的这篇文章中阅读有关Fetch的更多信息。它解释了Fetch的工作原理和使用方法。您还可以在此处找到带文档的Fetchpolyfill。jQuery到目前为止，您一直在使用JavaScript进行DOM操作。事实上，有许多DOM操作库提供API来简化您编写的代码。最好的DOM操作库之一是jQuery。请记住，jQuery是一个命令式库。它是在前端系统像今天这样复杂之前编写的。如今，管理复杂UI的是声明式框架和库，如Vue、Angular和React。不过，我还是建议大家学习一下jQuery，因为在前端的职业生涯中很可能会遇到它。要学习jQuery的基础知识，请查看jQuery学习中心。它逐步介绍了动画和事件处理等重要概念。如果您需要更多实践教程，请查看Codecademy的jQuery课程。ES5vs.ES6理解 JavaScript 的另一个重要概念是 ECMAScrip t以及它与 JavaScript 的关系。今天，您通常会看到 JavaScript 的两种主要风格：ES5 和 ES6。ES5 和 ES6 是 JavaScript 使用的 ECMAScript 标准。您可以将它们视为JavaScript的版本。ES5 的最终稿是2009年完成的，你一直在用到现在。ES6，也称为ES2015，是一种新标准，它为JavaScript带来了新的语言结构，例如常量、类和模板字符串。值得注意的是，ES6带来了新的语言特性，但仍然使用ES5来定义它们的语义。例如，ES6中的类只是JavaScript原型继承的语法糖。了解ES5和ES6非常重要，因为今天您将看到使用这两种方法的应用程序。ES5,ES6,ES2016,ES.Next:Next:What'sUpWithJavaScriptVersioning这里有一个很好的ES6介绍，DanWahlin的ES6入门-下一个版本的JavaScript会发生什么。之后，您可以在ES6功能中看到从ES5到ES6的完整更改列表。如果您想要更多，请查看这个具有ES6功能的Github存储库。更多练习如果您已经走到这一步，恭喜您自己。您已经了解很多JavaScript。让我们将您学到的一些知识付诸实践。练习3练习3将您的HTML和CSS知识与入门JavaScript课程相结合。在本实验中，您将创建自己设计的时钟并使其与JavaScript交互。在开始之前，我建议阅读解耦HTML、CSS和JavaScript教程，以了解混合JavaScript时基本的CSS类命名约定。我还在CodePen上准备了一个笔列表，您可以将其用作本练习的参考。有关更多示例，请在CodePen上搜索时钟FlatClockjQueryWallClockFancyClockRetroClockSimpleJavaScriptClock您可以通过两种方式进行此实验。您可以先使用HTML和CSS设计和创建布局，然后使用JavaScript添加交互性。或者您可以先编写JavaScript逻辑，然后再进入布局。此外，您可以使用jQuery，但也可以随意使用纯JavaScript。JavaScript框架现在您已经掌握了JavaScript的基础知识，是时候学习JavaScript框架了。框架是帮助您构建和组织代码的JavaScript库。JavaScript框架为开发人员提供了针对复杂前端问题的可重复解决方案，例如状态管理、路由和性能优化。它们通常用于构建Web应用程序。我不会涵盖每个JavaScript框架，这里是几个框架的快速预览：Angular、React+Flux、Ember、Aurelia、Vue和Meteor。您不必学习每个框架。选择一个并努力学习。不要追逐框架，相反，了解框架所基于的底层编程哲学和原则。架构模式在查看框架之前，了解框架倾向于使用的一些架构模式很重要：MVC（模型-视图-控制器）、MVVM（模型-视图-视图模型）v和vMVP（模型-视图-呈现器）。这些模式旨在在应用程序层之间创建清晰的关注点分离。关注点分离是一种设计原则，主要思想是将应用程序拆分为不同的领域特定层。例如，您可以使用JavaScript对象（通常称为模型）来存储状态，而不是使用HTML来保存应用程序状态。要了解有关这些模式的更多信息，请先阅读Chrome开发人员上的MVC。之后，阅读ComprehensionMVC和MVP（适用于JavaScript和Backbone开发人员）。在那篇文章中，学不会、看不懂也不用着急，了解一下MVC和MVP的一些概念就可以了。AddyOsman还撰写了关于MVVM的AJavaScriptDeveloper'sGuidetoUnderstandingMVVM。要了解MVC的起源及其原因，请阅读MartinFowler关于GUI体系??结构的文章。***，阅读JavaScriptMV*模式部分以了解JavaScript设计模式。LearnJavaScriptDesignPatterns是一本很棒的免费在线书籍。设计模式JavaScript框架不会重新发明轮子。他们中的大多数依赖于设计模式。您可以将设计模式视为解决软件开发中常见问题的通用模板。虽然了解JavaScript设计模式并不是学习框架的先决条件，但我建议您有空时看看以下设计模式。DecoratorPatternFactoryPatternSingletonPatternRevealPatternObserverPattern理解并能够实现其中的一些设计模式，不仅会让你成为更好的工程师，还会帮助你理解框架的一些底层功能。AngularJSAngularJS 是一个JavaScriptMVC 框架，有时也是MVVM框架。它由Google维护，并在2010年首次发布时席卷了JavaScript社区。Angular是一个声明式框架。帮助我理解如何从命令式编程过渡到声明式JavaScript编程的最有用的文章之一是StackOverflow上的AngularJS与jQuery的区别。如果您想了解有关Angular的更多信息，请查看Angular文档。他们还提供了一个名为AngularCat的教程，可以让您直接开始编码。TimJacobi在Github存储库中提供了更完整的Angular学习指南。另外，请查看JohnPapa撰写的关于最佳实践风格的权威指南。React+FluxAngular解决了开发者在构建复杂前端系统时面临的诸多问题。另一个流行的工具是React，它是一个用于构建用户界面的库。你可以把它想象成MVC中的V。因为React只是一个库，所以它通常使用一种称为Flux的架构。Facebook设计React和Flux是为了解决MVC的一些缺点及其大规模问题。查看他们著名的演示文稿HackingtheWay：重新思考Facebook的Web应用程序开发。它结束了Flux，它的发源地。要开始学习React和Flux，首先要学习React。React文档是一个很好的入门读物。之后，查看React.jsIntroductionForPeopleWhoKnowEnoughjQueryToGetBy帮助您摆脱jQuery思维模式。一旦你对React有了基本的了解，就开始学习Flux。一个好的起点是官方的Flux文档。之后，查看AwesomeReact，这是一个精选的链接列表，可帮助您进一步学习。练习和框架现在您已经掌握了JavaScript框架和架构模式的一些基本知识，是时候将其付诸实践了。在这两个练习中，重点都是应用您学到的体系结构概念。特别是，保持代码干爽，明确分离关注点，并遵守单一职责原则。练习4练习5是使用独立于框架的JavaScript分解和重构TodoMVC应用程序。本练习的目的是向您展示MVC如何在不混合特定于框架的语法的情况下工作。首先，检查TodoMVC上的最终结果。第一步是在本地新建一个项目，首先设置好MVC的三个组件。由于这是一个复杂的实验，请参考Github存储库中的完整源代码。如果您不能准确地重现该项目或没有时间也没关系。下载代码库并尝试不同的MVC组件，直到您了解它们之间的关系。Exercise5Exercise5是很好的应用MVC的练习，理解MVC是学习JavaScript框架的重要一步。练习5是按照Scotch.io的教程使用Angular构建Etsy克隆。使用Angular构建Etsy克隆，Stamplay将教您如何使用Angular构建Web应用程序，如何使用API构建界面，以及如何构建大型项目。完成本教程后，能够回答以下问题。什么是网络应用程序？MVC/MVVM如何应用于Angular？什么是API，它有什么作用如何组织和构建大型代码库将UI分解为指令组件有什么好处？如果你想尝试构建更多AngularWeb应用程序，你可以尝试使用AngularJS和Firebase构建一个实时状态更新应用程序。掌握当前事件与前端的其他部分一样，JavaScript发展迅速，掌握最新动态非常重要。下面列出了一些有趣且内容丰富的网站、博客和论坛。SmashingMagazineJavaScriptWeeklyRedditJavaScriptJavaScriptJabber通过实例学习一如既往，最好的学习方法是通过实例。风格指南JavaScript风格指南是一组编码约定，旨在帮助保持代码的可读性和可维护性。AirBnBJavaScriptStyleguide编写一致、惯用的JavaScriptNodeStyleguideMDN编码风格代码库的原则阅读好的代码、学习如何在获取新内容时搜索Github的相关存储库是多么有帮助。LodashUnderscoreBabelGhostNodeBBKeystoneJS总结在本指南结束时，您应该对JavaScript基础知识以及如何将它们应用到Web有扎实的掌握。请记住，本指南为您提供了一个总体路线图。如果你精通前端，花时间将这些概念应用到你的项目中是很重要的。你做的项目越多，对它们越热情，你就会学到越多。
