Одним из ключевых изменений, которые Gutenberg вносит в экосистему WordPress, является сильная зависимость от JavaScript. Команда WordPress действительно продвинула свою инфраструктуру JavaScript в настоящее и будущее, используя современный стек JavaScript, который обычно называют в сообществе ES6.
Давайте немного углубимся в мир ES6, поскольку в конечном итоге он поможет нам понять, как структурировать и построить собственный блок Gutenberg.
Что такое ES6?
ES6 — это сокращение от «EcmaScript 6», которое является 6-м изданием EcmaScript. Это официальное название ES2015. С тех пор EcmaScript прошел много итераций, но современный JavaScript все еще часто называют ES6. Как вы, наверное, догадались, итерации продолжились ES2016, ES2017 и так далее.
Пробежимся по некоторым ключевым функциям ES6, которые полезны в контексте Gutenberg.
Функции
Функции получили значительное обновление в ES6. Два основных изменения — это стрелочные функции и методы классов .
Внутри класса в ES6 больше не нужно писать слово function. Это может сбивать с толку, поэтому посмотрите этот пример:
class Foo {
// This is your 'bar' function
bar() {
return 'hello';
}
}Вы бы вызвали bar()так:
const fooInstance = new Foo();
const hi = fooInstance.bar();Это обычное явление в современном JavaScript. ES6 Классы в JavaScript на самом деле не являются «классами» в смысле объектно-ориентированного программирования — в сущности, это то же самое старое прототипическое наследование, которое всегда было в JavaScript. React широко использует классы ES6, но стоит отметить, что классы ES6 по сути являются синтаксическим сахаром и горячо оспариваются некоторыми. Если вы заинтересованы в более подробной информации, ознакомьтесь с документами MDN и этой статьей о 2ality .
Стрелочные функции дают нам компактный синтаксис, который часто используется как однострочный для выражений. Он также используется для обработки значения this, поскольку функция со стрелкой не будет перепривязываться thisкак например setIntervalили обработчик события обычно делает.
Пример функции стрелки в качестве выражения:
// Define an array of fruit objects
const fruit = [
{
name: 'Apple',
color: 'red'
},
{
name: 'Banana',
color: 'yellow'
},
{
name: 'Pear',
color: 'green'
}
];
// Select only red fruit from that collection
const redFruit = fruit.filter(fruitItem => fruitItem.color === 'red');
// Output should be something like Object { name: "Apple", color: "red" }
console.log(redFruit[0]);Давайте посмотрим, как мы можем использовать функцию стрелки в качестве обработчика событий в нашем Fooклассе:
class Foo {
// This is your 'bar' function
bar() {
let buttonInstance = document.querySelector('button');
buttonInstance.addEventListener('click', evt => {
console.log(this);
});
}
}
// Run the handler
const fooInstance = new Foo();
fooInstance.bar();Когда кнопка нажата, вывод должен быть Foo { }, потому что thisэто экземпляр Foo. Если бы мы заменили этот пример следующим:
class Foo {
// This is your 'bar' function
bar() {
let buttonInstance = document.querySelector('button');
buttonInstance.addEventListener('click', function(evt) {
console.log(this);
});
}
}
// Run the handler
const fooInstance = new Foo();
fooInstance.bar();Когда кнопка нажата, результатом будет <button>, потому что function привязала this к <button>, которая была нажата.
const, let и var
Возможно, вы заметили, что мы использовал constи letв приведенных выше примерах. Они также являются частью ES6.
Если значение является абсолютно постоянным и не изменится в результате повторного присваивания или повторного объявления, используйте const. Она обычно используется при импорте чего-либо или объявлении неизменяемых свойств, таких как коллекция элементов DOM.
Если у вас есть переменная, которую вы хотите, чтобы она была доступна только в блоке, в котором она была определена, используйте let.
function foo() {
if (1 < 2) {
let bar = 'always true';
// Outputs: 'always true'
console.log(bar);
}
// Outputs 'ReferenceError: bar is not defined'
console.log(bar);
}
// Run the function so we can see our logs
foo();Это отличный способ контролировать ваши переменные и, в некотором смысле, сделать их одноразовыми.
Наконец, varтот самый старый друг, которого мы знаем и любим так хорошо. К сожалению, с constи let наш друг становится все более и более излишним.
Деструктуризация
Деструктурирование позволяет вам извлекать ключи объекта в том месте, где вы назначаете их локальной переменной. Итак, скажем, у вас есть объект:
const foo = {
people: [
{
name: 'Bar',
age: 30
},
{
name: 'Baz',
age: 28
}
],
anotherKey: 'some stuff',
heyAFunction() {
return 'Watermelons are really refreshing in the summer'
}
};Традиционно, чтобы извлечь people нужно было обратиться к foo.people. С помощью деструктуризации вы можете сделать это так:
let { people } = foo;Вы также можете использовать деструктуризацию для разбиения объекта на локальные переменные для повышения читабельности кода. Давайте обновим приведенный выше фрагмент:
let { people } = foo;
let { heyAFunction } = foo;Теперь у нас есть два отдельных элемента из одного и того же объекта, но мы все еще игнорируем anotherKey.
JSX
JSX чаще всего встречается в контексте React JS: JSX представляет собой XML-подобное расширение JavaScript, предназначенное для компиляции препроцессорами в обычный код JavaScript. По сути, это позволяет нам писать HTML-подобный код в JavaScript. Обычно он связан с фреймворком, таким как React JS, но также используется для разработки блоков Gutenberg.
Давайте начнем с примера:
const hello = <h1 className="heading">Hello, Pal</h1>;Никакой системы шаблонов или экранирования или объединения не требуется. Пока вы возвращаете один элемент, который может иметь много детей, у вас все хорошо. Итак, давайте покажем что-то более сложное, с помощью функции React render:
class MyComponent extends React.Component {
/* Other parts redacted for brevity */
render() {
return (
<article>
<h2 className="heading">{ this.props.heading }</h2>
<p className="lead">{ this.props.summary }</p>
</article>
);
}
};Вы можете видеть выше, что мы можем выбрасывать выражения там, где хотим. Это также относится и к атрибутам элемента, поэтому мы можем получить что-то вроде этого:
<h2 className={ this.props.headingClass }>
{ this.props.heading }
</h2> Вы можете подумать: «Что делают эти скобки?»
Ответ в том, что это выражение , которое вы увидите в JSX. По сути, это небольшое встроенное выполнение JavaScript, которое ведет себя очень похоже на PHP echo.
Вы также, вероятно, заметите classNameвместо class. Хотя это выглядит как HTML / XML, это все же JavaScript, поэтому естественно избегать зарезервированных слов. Атрибуты тоже пишутся в camelCase.
JSX действительно мощный инструмент, как вы увидите далее в этой серии статей. Это отличный инструмент, и он действительно полезен для понимания в целом.
Далее мы собираемся создать мини-компонент React
