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

现在你已经了解了一些 JavaScript并进行了一些实践，我们将继续学习一些更高级的概念。下面的概念并不直接相关。我将它们分组在本节中，因为它们对于理解如何构建更复杂的前端系统是必要的。一旦你进入框架部分，你将更好地理解并使用它们。

语言

当你使用JavaScript进行更多工作时，你将遇到一些更高级别的概念。 以下其中一些概念的列表。 如果有时间，仔细阅读每一个要点 此外，如果你想补充学习其它内容，Eloquent JavaScript 涵盖了大部分内容。

•  继承与原型链
•  作用域
•  事件轮询
•  事件冒泡
•  Apply, call, 和 bind
•  回调函数和 promise
•  变量和函数的提升
•  柯里化

命令式和声明

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

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!