前端练级攻略(第二部份)

本文是 前端练级攻略 第二部份,第一部份请看下面:

在第二部份,我们将重点进修 JavaScript 作为一种自力的言语,怎样向界面增添交互性,JavaScript 设想和架构形式,以及怎样构建网络运用顺序。

想浏览更多优良文章请猛戳GitHub博客,一年百来篇优良文章等着你!

就像 HTML 和 CSS一样,有大批的 JavaScript教程。然则,特别是关于一个新手来讲,很难弄清楚运用什么样的教程以及以什么样的递次来进修它们。本系列的主要目标是为你供应一个路线图,协助你导航进修成为前端开辟者。

JavaScript基础学问

《前端练级攻略(第二部份)》

JavaScript 是一种跨平台的编程言语,现在险些可以用于任何事变。

言语

在进修怎样将JavaScript运用到web之前,起首要相识该言语自身。起首,浏览 Mozilla Developer Network的言语基础速成课程。本教程将教你基础的言语构造,如变量、前提和函数。

然后,浏览 MDN 的 JavaScript 指南中的以下部份:

不要太忧郁记着特定的语法,你可以随时查一下文档。相反,应当专注于明白主要的观点,比方变量实例化、轮回和函数。假如学问密度难度太大,也没关,先过一篇,你把这些观点付诸实践,当你回过甚在来看,能够会明白起来会越发清楚。

基于文档的进修能够会过于单调,可以看看 Codecademy 的 JavaScript课程,这课程是理论与实践相结合的,相对会有兴趣一。 另外,假如你偶然候,请参阅上面列出的每一个观点,浏览 Eloquent JavaScript中的相应章节以增强你的进修。 Eloquent JavaScript 是一本很棒的免费在线书本,每一个有志向的前端开辟人员都应当浏览。

交互性

《前端练级攻略(第二部份)》

现在你已基础相识了 JavaScript 的语法,下一步就是将它运用到 Web上。 要相识 JavaScript如 何与网站交互,起首你必需相识 文档对象模子(DOM)

DOM 是 HTML 文档的一种示意构造。它是一个树形构造,由对应于 HTML 节点的 JavaScript 对象构成。要进一步相识DOM,请浏览 CSSTricks 的 《什么是DOM》。它供应了对 DOM 的简朴而直接的诠释。

《前端练级攻略(第二部份)》

JavaScript 与 DOM 交互以变动和更新它。下面是一个例子,我们挑选一个 HTML 元素并变动它的内容

var container = document.getElementById(“container”); 
container.innerHTML = 'New Content!';

别忧郁,那只是一个简朴的例子。运用 JavaScript DOM 支配,你可以做更多的事变。要相识有关怎样运用 JavaScript 与 DO M交互的更多信息,请浏览 MDN 的“文档对象模子”一节中的以下指南。

再次强调一下,重点是要先明白观点而不是语法,愿望可以回复以下题目:

  • DOM 是什么?
  • 怎样查询元素
  • 怎样增添事宜监听?
  • 怎样变动 DOM 节点属性?

有关罕见的 JavaScript DOM 交互的列表,请检察 PlainJS 的 JavaScript 函数和助手。该网站供应了一些例子,申明怎样在 HTML 元素上设置款式和附加键盘事宜监听器。假如你想深切发掘,你可以随时浏览 Eloquent 讲的 JavaScript 中关于DOM的部份。

 搜检

要调试浏览器中的JavaScript,我们运用浏览器内置的开辟人员东西。 大多数浏览器都供应了 inspector 面板,可以让你检察网页的泉源。 你可以在实行时跟踪 JavaScript,将调试语句打印到控制台,以及检察网络请乞降资本等内容。

里有一个关于运用 Chrome 开辟东西的教程。假如你运用的 Firefox,可以检察本教程

《前端练级攻略(第二部份)》

实践基础

在这一点上,关于JavaScript另有很多东西须要进修。然则,末了一节包括了很多新信息。我想我们该歇息一下,做几个实践了。它们有助于稳固你方才学到的一些观点。

实践 1

关于实践1,转到 AirBnB,翻开浏览器的页面搜检器,然后单击控制台选项卡。在这里,你可以在页面上实行JavaScript。我们要做的是经由过程支配页面上的一些元夙来取得一些兴趣。看看你是不是可以完成以下一切的 DOM 支配。

《前端练级攻略(第二部份)》

  • 挑选具有唯一类名的题目标签并变动文本
  • 挑选页面上的任何元素并将其删除
  • 挑选恣意元素并变动其CSS属性之一

* 挑选一个特定的地区标签,并向下挪动250像素

* 挑选任何组件,如面板,并调解其透明度

  • 定义一个名为 doS​​omething 的函数,该函数j里定义一下alert (“Hello world”) 然后实行它
  • 挑选一个特定的段落标记,向个中注册一个 click 事宜,并在每次事宜被触发时运转 doSomething

假如您碰到困难,请参考 JavaScript 函数和协助顺序指南。这些使命大部份都是基于它。以下是怎样完成第一个要点的示例:

var header = document.querySelector(‘.text-branding’)
header.innerText = ‘Boop'

这个实践的主要目标是进修一些关于 JavaScript 和 DOM 支配的学问,并看到它们的现实运用。

实践 2

《前端练级攻略(第二部份)》

运用 CodePen,编写一个运用DOM支配并须要一些编程逻辑来运转的基础JavaScript 实践。这个实践的重点是把你在《前端练级攻略》第 1 部份中学到的一些东西和 JavaScript结合起来。这里有几个可以作为启示的参考例子。

更多的 JavaScript

现在你已相识了一些 JavaScript并举行了一些实践,我们将继续进修一些更高等的观点。下面的观点并不直接相干。我将它们分组在本节中,因为它们关于明白怎样构建更庞杂的前端体系是必要的。一旦你进入框架部份,你将更好地明白并运用它们。

言语

当你运用JavaScript举行更多事情时,你将碰到一些更高等别的观点。 以下个中一些观点的列表。 假如偶然候,仔细浏览每一个要点 另外,假如你想补充进修别的内容,Eloquent JavaScript 涵盖了大部份内容。

敕令式和声明

JavaScript怎样与DOM交互有两种要领:敕令式和声明式。一方面,声明式编程关注所发作的事变。另一方面,敕令式编程关注的是什么以及怎样完成。

var hero = document.querySelector('.hero')
hero.addEventListener(‘click’, function() {
  var newChild = document.createElement(‘p’)
  newChild.appendChild(document.createTextNode(‘Hello world!’))
    newChild.setAttribute(‘class’, ‘text’)
    newChild.setAttribute(‘data-info’, ‘header’)
    hero.appendChild(newChild)
 })
}

这是敕令式编程的一个例子,我们手动查询一个元素并将 UI 状况存储在 DOM 中。换句话说,专注于怎样完成某件事。这段代码最大的题目是它很软弱。假如处置惩罚代码的人将 HTML中 的类名从 hero 变动为villain,事宜侦听器将不再触发,因为 DOM 中没有 hero 类。

声明式编程处理了这个题目。你没必要挑选元素,而是将其留给您正在运用的框架或库。这让你专注于做什么而不是怎样做。要相识更多信息,请检察 JavaScript的状况——从敕令式转换到声明式,以及 Web开辟:声明式vs.敕令式

Ajax

在这些文章和教程中,你能够已屡次看到 Ajax 这个术语。Ajax 是一种许可 web 页面运用 JavaScript 与服务器交互的手艺

《前端练级攻略(第二部份)》

比方,当你在网站上提交表单时,它网络你的输入并发出 HTTP 要求,将数据发送到服务器。当你在Twitter 上宣布一条 tweet 时,你的 witter 客户机向 Twitter 的服务器 API 发出 HTTP 要求,并运用服务器相应更新页面。

有关 Ajax 的浏览,请检察什么是Ajax。假如你依然没有完全明白 AJAX 的观点,请看看 Explain it like i’m 5, what is Ajax。假如这些还不够,你还可以浏览关于 HTTP 的JavaScript 章节

本日,HTTP 要求的浏览器范例是 Fetch。 你可以在 Dan Walsh 的这篇文章中浏览有关 Fetch 的更多信息。 它引见了Fetch 的事情道理以及怎样运用它。 你还可以在此处找到带文档的 Fetch polyfill

jQuery

到目前为止,你一直在运用 JavaScript 举行 DOM 支配。事实上,有很多 DOM 支配库供应api 来简化你编写的代码。

最盛行的 DOM 支配库之一是 jQuery。请记着,jQuery 是一个敕令式库。它是在前端体系像本日如许庞杂之前编写的。现在,治理庞杂 UI 是声明性框架和库,如 Vue、Angular 和 React。然则,我依然发起你进修jQuery,因为在你的前端职业生涯中很能够会碰到它。

《前端练级攻略(第二部份)》

要进修j Query 的基础学问,请检察 jQuery进修中间。它一步一步地经由过程一些主要的观点,比方动画和事宜处置惩罚。假如你想要更多的着手教程,可以看看 Codecademy 的 jQuery课程

ES5 vs. 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:下一步:JavaScript版本控制是怎么回事 这是一篇很好引见了 ES6 相干的学问,
Dan Wahlin的 ES6入门-下一版本的JavaScript正在发作什么。以后,你可以在 ES6 特征中看到从ES5 到 ES6 的完全变化列表。假如你想要更多,请检察这个包括 ES6 特征的Github存储库

更多的演习

假如你已到了这一步,祝贺你本身。你已相识了很多JavaScript。让我们把你学到的一些东西付诸实践。

演习 3

《前端练级攻略(第二部份)》

演习3 将你所学的 HTML 和 CSS 学问与 JavaScript 入门课程结合起来。在这个试验中,你将建立本身设想的时钟,并使其与 JavaScript 交互。在最先之前,我发起浏览 解耦HTML、CSS和JavaScript的教程,以相识在夹杂运用 JavaScript 时的基础 CSS 类定名商定。我还在 CodePen上预备了一份笔的清单,你可以作为此次演习的参考。有关更多示例,请在 CodePen 上搜刮clock

你可以用两种要领做这个试验。你可以先用 HTML 和 CSS 设想和建立规划,然后用 JavaScript 增添交互性。或许你可以先编写J avaScript 逻辑,然后再进入规划。另外,你可以运用jQuery,但也可以随便运用纯 JavaScript。

JavaScript框架

控制了JavaScript的基础学问以后,是时刻进修 JavaScript 框架了。框架是 JavaScript 库,可以协助你构造和构造代码。JavaScript 框架为开辟人员供应了庞杂前端题目标可反复处理方案,比方状况治理、路由和机能优化。它们一般用于构建web运用顺序

我不会解说每一个JavaScript框架,这里有几个框架的疾速预览:AngularReact + FluxEmberAureliaVueMeteor。你没必要进修每一个框架。挑一个,好好进修。不要追逐框架,相反,要明白框架所基于的底层编程哲学和准绳。

架构形式

在检察框架之前,明白框架倾向于运用的一些架构形式是很主要的:MVC(Model–view–controller)MVVM(Model–view–viewmodel)v和vMVP(Model–view–presenter)。这些形式被设想成在运用层之间建立清楚的关注点星散

关注点星散是一种设想准绳,主要头脑是将运用顺序拆分为差别的域特定层。 比方,你可以运用JavaScript 对象(一般称为模子)来存储状况,而不是让 HTML 坚持运用顺序状况。

要相识更多关于这些形式的信息,请先浏览 Chrome Developers 的 MVC。以后,浏览明白 MVC 和MVP(面向JavaScript和骨干开辟人员)。在那篇文章中,不要忧郁学不会,看不懂,只需明白 MVC和 MVP 的部份观点即可。

Addy Osman 还写了关于 MVVM 的 明白 MVVM 的JavaScript开辟人员指南。要相识 MVC 的劈头及其发生的缘由,请浏览 Martin Fowler 关于GUI体系构造的文章。末了,浏览 JavaScript MV* Patterns一节,进修 JavaScript 设想形式。进修JavaScript设想形式是一本很棒的免费在线书本。

设想形式

JavaScript 框架不会从新发现轮子。它们中的大多数依赖于设想形式。你可以将设想形式视为处理软件开辟中罕见题目标通用模板。

虽然明白 JavaScript 设想形式并非进修框架的先决前提,但我发起在偶然候的时刻可以看看以下几种设想形式。

明白并可以完成个中的一些设想形式不仅会使你成为更好的工程师,而且还会协助你明白一些框架的底层功用。

AngularJS

AngularJS 是一个JavaScript MVC 框架,偶然也是 MVVM 框架。它由谷歌保护,并在2010年初次宣布时囊括了 JavaScript 社区。

《前端练级攻略(第二部份)》

Angular 是一个声明性框架。协助我明白怎样从敕令式编程过渡到声明式JavaScript编程的最有协助的文章之一是在StackOverflow上的 AngularJS 与 jQuery有何差别

假如你想相识更多关于 Angular 的学问,请检察 Angular文档。他们还供应了一个名为 Angular Cat 的教程,可以让你立时投入到编程中去。Tim Jacobi 在 Github学问库中供应了一个更完全的 Angular 进修指南。另外,看看约翰·帕帕写的这本威望的最好实践作风指南。

React + Flux

Angular 处理了开辟人员在构建庞杂的前端体系时所面对的很多题目。另一个盛行的东西是 React,它是一个用于构建用户界面的库。你可以把它设想成 MVC 中的 V。因为 React 只是一个库,所以它一般运用一个称为 Flux 的架构。

《前端练级攻略(第二部份)》

Facebook设想React和Flux是为相识决MVC的一些瑕玷及其在范围上的题目。看看他们有名的演示 黑客体式格局:从新思索Facebook的Web运用顺序开发。它超过了Flux,它劈头于此。

要最先进修 React 和 Flux,起首要进修 React。一个好的入门读物是 React文档。在那以后,看看 React.js Introduction For People Who Know Just Enough jQuery To Get By ,协助你 从jQuery 的头脑形式过渡过来。

一旦你对 React 有了基础的相识,最先进修 Flux。一个好的出发点是官方的Flux文档。在那以后,看看 Awesome React,这是一个精选的链接列表,可以协助你在进修上更进一步。

演习与框架

现在你已控制了 JavaScript 框架和架构形式的一些基础学问,现在是时刻将它付诸实践了。 在这两个演习中,重点是运用你学到的架构观点。 特别是,坚持您的代码 DRY,明白星散关注点,并恪守单一义务准绳

演习 4

演习 5 是运用不依赖框架的 JavaScript 剖析和重构 Todo MVC 运用顺序。这个演习的目标是向你展现 MVC 怎样在不夹杂框架特定语法的情况下事情。

《前端练级攻略(第二部份)》

起首,在TodoMVC上检察终究效果。第一步是在当地建立一个新项目,并起首竖立 MVC 的三个组件。因为这是一个庞杂的试验,请参考 Github 存储库中的完全源代码。假如你不能完全复制这个项目或许没偶然候,也没紧要。下载 repo 代码并尝试运用差别的 MVC 组件,直到你明白它们之间的关联。

演习 5

演习 5 是运用 MVC 的一个很好的演习,明白 MVC 是进修 JavaScript 框架的主要一步。 演习 5 是根据 Scotch.io的教程来构建一个带有 Angular 的 Etsy 克隆。

《前端练级攻略(第二部份)》

运用Angular构建一个Etsy克隆,Stamplay 将教你怎样运用 Angular 构建一个 web 运用顺序,怎样运用 api 构建接口,以及怎样构造大型项目。完本钱教程后,可以回复以下题目。

  • 什么是 web 运用顺序?
  • MVC/MVVM 怎样运用于 Angular?
  • 什么是API,它做什么
  • 怎样构造和构造大型代码库
  • 将 UI 剖析为指令组件有什么优点?

假如你想尝试构建更多 Angular web 运用顺序,可以尝试运用 AngularJS & Firebase构建一个及时状况更新运用顺序。

延续关注时势

就像前端的其他部份一样,JavaScript的生长很快,坚持延续关注是很主要的。

《前端练级攻略(第二部份)》

下面是一个网站、博客和论坛的列表,这些网站、博客和论坛浏览起来既风趣又信息雄厚。

经由过程例子进修

自始自终,最好的进修要领是身先士卒。

款式指南

JavaScript款式指南是一组编码范例,旨在协助坚持代码的可读性和可保护性。

代码库

我没法强调浏览好的代码是何等有协助,相识怎样在猎取新内容时搜刮Github的相干存储库。

总结

在本指南结束时,您应当已紧紧控制了 JavaScript 的基础道理以及怎样将它们运用到网络上。请记着,本指南为你供应了一个整体路线图。假如你通晓前端,花时候在项目上运用这些观点是很主要的。你做的项目越多,对它们越有热忱,你会学到更多。

原文:https://medium.freecodecamp.o…

你的点赞是我延续分享好东西的动力,迎接点赞!

交换

干货系列文章汇总以下,以为不错点个Star,迎接 加群 互相进修。

https://github.com/qq44924588…

我是小智,民众号「大迁天下」作者,对前端手艺坚持进修爱好者。我会常常分享本身所学所看的干货,在进阶的路上,共勉!

关注民众号,背景复兴福利,即可看到福利,你懂的。

《前端练级攻略(第二部份)》

    原文作者:前端小智
    原文地址: https://segmentfault.com/a/1190000018796317
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞