Ответы на вопросы компания MindK на тему JS

❏ Я знаю все стандартные типы данных в JavaScript, особенности работы с ними.

number для любых чисел: целочисленных или чисел с плавающей точкой.
string для строк. Строка может содержать один или больше символов, нет отдельного символьного типа.
boolean для true/false.
null для неизвестных значений
undefined для не присвоенных значений
object для более сложных структур данных.
symbol для уникальных идентификаторов.

❏ Понимаю, как работает приведение типов в JS.
String(value), Number(value), Boolean(value)

❏ Понимаю отличие null от undefined.

null -это особое значение, означающее “no value”. null -это особый объект, потому что typeof null возвращает ‘object’.
С другой стороны, undefined означает, что переменная не была объявлена или ей не было присвоено значение.

❏ Понимаю различные области видимости переменных, всплытие переменных.

Статья про это https://habr.com/ru/post/127482/

❏ Знаю, что такое замыкание и лексическое окружение.
Лексическое окружение – все переменные внутри функции. Замыкание это функция у которой есть доступ к своей внешней функции по области видимости, даже после того, как внешняя функция прекратилась

❏ Знаю, что такое анонимные функции.
Это функции без имени, выполняются непосредственно в контексте

❏ Знаю что такое ДОМ-дерево и как JS с ним взаимодействует.
Объектная модель документа. DOM – это представление HTML-документа в виде дерева тегов. 

❏ Имею опыт манипуляций с ДОМ-деревом документа (удаление, добавление, изменение, поиск по ID, поиск по селекторам).

var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
var elem = document.querySelector('#some-element');
elem.parentNode.removeChild(elem);

❏ Понимаю, что такое события и как с ними работать.

Событие – это сигнал от браузера о том, что что-то произошло. Все DOM-узлы подают такие сигналы (хотя события бывают и не только в DOM).

Вот список самых часто используемых DOM-событий:

События мыши:

  • click – происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
  • mouseover / mouseout – когда мышь наводится на / покидает элемент.
  • mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе.
  • mousemove – при движении мыши.

Существует множество других событий.

❏ Знаю несколько способов создания объекта.
Оператор new var MyObject = new Object();
Литеральная нотация MyObject = { id : 1, name: ‘Pupkin’ }
Конструкторы объектов function MyObject(id, name) { this._id = id; this._name = name; } var MyFirstObjectInstance = new MyObject(5,”Sample”);
Ассоциативные массивы MyObject[“id”] = 5; MyObject[“name”] = “SampleName”;

❏ Понимаю различие strict и non-strict mode.
Строгий режим, выкидывает исключения и ошибки где в нестрого режиме ничего не произойдет

❏ Имею опыт работы с локальными хранилищами: cookies, localstorage, session storage, IndexedDB, знаю их плюсы минусы и сферы приминения.

  • SessionStorage – выполняет это в течение определённого промежутка времени (сессии). Закрытие вкладки или браузера приводит их к удалению. При этом данные в SessionStorage сохраняются при обновлении страницы.
  • LocalStorage – осуществляет это в течение неограниченного времени. Они сохраняются при перезагрузке браузера и компьютера. Их длительность хранения ничем не ограничена. Но, хоть эти данные могут храниться бесконечно в браузере, обычный пользователь может их очень просто удалить, например выполнив очистку истории (при включенной опции «файлы cookie и другие данные сайтов»).
  • IndexedDB – это встроенная база данных, более мощная, чем localStorage.
    Хранилище ключей/значений: доступны несколько типов ключей, а значения могут быть (почти) любыми.
    Поддерживает транзакции для надёжности.
    Поддерживает запросы в диапазоне ключей и индексы.
    Позволяет хранить больше данных, чем localStorage.

❏ Понимаю основные принципы асинхронности в ajax/fetch/XHR.

XMLHttpRequest поддерживает как синхронные, так и асинхронные запросы. В основном предпочтительно использовать асинхронные запросы вместо синхронных из-за соображений производительности.

Синхронный запрос приводит к выполнению кода, который “блокирует” взаимодействие с вкладкой браузера до тех пор, пока запрос не будет полностью выполнен, что существенно ухудшает отклик страницы

❏ Понимаю принцип работы API (типы, логика работы REST-приложений).

REST (RESTful) – это общие принципы организации взаимодействия приложения/сайта с сервером посредством протокола HTTP. Особенность REST в том, что сервер не запоминает состояние пользователя между запросами – в каждом запросе передаётся информация, идентифицирующая пользователя (например, token, полученный через OAuth-авторизацию) и все параметры, необходимые для выполнения операции.

Для каждого типа операции используется свой метод HTTP-запроса:
1. получение – GET
2. добавление – POST
3. модификация – PUT
4. удаление – DELETE

❏ Понимаю, что такое JSON и его применение в современной веб-разработке.

Обозначение объектов JavaScript (JSON – JavaScript Object Notation) – стандартный текстовый формат для представления структурированных данных на основе синтаксиса объекта JavaScript. Он обычно используется для передачи данных в веб-приложениях (например, отправка некоторых данных с сервера клиенту,таким образом чтобы это могло отображаться на веб-странице или наоборот).

❏ Понимаю, как реализовать кроссдоменный Ajax запрос и реализовывал его на практике.

var XHR = ("onload" in new XMLHttpRequest()) ? XMLHttpRequest : XDomainRequest;
var xhr = new XHR();
xhr.open('GET', 'http://anywhere.com/request', true);
xhr.onload = function() {
    alert(this.responseText);
}
xhr.onerror = function() {
    alert('Ошибка ' + this.status);
}
xhr.send();

❏ Знаю функции отложенного выполнения скрипта setTimeout, setInterval.
setTimeout позволяет вызвать функцию один раз через определённый интервал времени
setInterval позволяет вызывать функцию регулярно, повторяя вызов через определённый интервал времени.

❏ Имею опыт отладки JS-кода в консоли браузера.

Ctrl + Shift + C

❏ Знаю отличие функциональнального наследование от прототипного

Прототипное наследование позволяет реализовать большинство важных функций, которые найдете в классических языках ООП. В JavaScript замыкания и фабричные функции позволяют реализовать приватное состояние, а функциональное наследование можно легко комбинировать с прототипами, что также позволяет использовать миксины.

Наследование – это создание новых «классов» на основе существующих.

❏ Использовал современные возможности ES6/ES7/ES8 (let/const, Деструктуризация, Функции, Строки, Promises, Классы, наследование классов)

https://habr.com/ru/post/313526/

❏ Пониманимаю контекст вызова, this у объектов, функция bind, функции call, apply
Подменяют контекст функции

function f(arg) {
    alert(arg);
    alert(this);
}
f('abc'); // abc, [object Window]
f.call('123', 'abc'); // abc, 123

function f() {
    alert(this);
    for (var i = 0; i < arguments.length; i++) {
        alert(arguments[i]);
    }
}
f(1, 2, 3); // [object Window], 1, 2, 3
f.apply('abc', [1, 2, 3, 4]); // abc, 1, 2, 3, 4

function f() {
    alert(this);
}
var wrapped = f.bind('abc');
f(); // [object Window]
wrapped(); // abc

❏ Работал с webpack и JavaScript-модулями

Вебпак — это сборщик модулей. Он анализирует модули приложения, создает граф зависимостей, затем собирает модули в правильном порядке в один или более бандл (bundle), на который может ссылаться файл «index.html».

const path = require('path');
module.exports = {
  mode: "development", // could be "production" as well
  entry: './src/main.js', 
  output: {
    path: path.resolve(__dirname, 'public'), 
    filename: 'bundle.js' 
  }
};

❏ Пониманю различия Browser APIs и Node.js

Node использует Google V8, который реализует стандарт ECMAScript. Синтаксис точно такой же, но вы работаете с другой средой – например, у вас нет DOM и есть API для доступа к файловой системе и сокетам.

❏ Знаю один из Front-end фремворков: React.js, Angular, Vue.js, Ember.js
https://vuejs.org

❏ Знаю один из Back-end фремворков: Express, Adonis, Loopback, Meteor, Sails, Nest

https://expressjs.com/ru/

❏ Понимаю работу JS Testing frameworks (Jest, Jasmine,..)

https://jestjs.io/ru/

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные поля помечены *