От автора: независимо от того, проводите ли вы собеседование сами или пришли на собеседование к кому-то, эти актуальные вопросы и ответы по Angular JS помогут вам подготовиться к предстоящему собеседованию на вакансию Front-end разработчика. Собеседование является стрессом для обеих сторон, и большинство из нас, если не все, вынуждены были проходить через это хотя бы раз в жизни. Каждый может с этим справить, и этого не следует бояться. Существует несколько способов преодолеть свои страхи и сделать этот процесс менее пугающим и более приятным.
Пройдя бесчисленное количество собеседований, как с той, так и с другой стороны стола, я могу сказать, что чем меньше вы будете готовиться, тем более подготовленным вы будете. Это может показаться противоречивым, но выслушайте меня. Если ваши знания предмета являются подлинными, тогда вам нечему учиться. Когда вам задают вопрос, ответ должен прийти естественным образом, и вы сможете четко сформулировать его. Вот несколько вопросов, которые вам могут поставить или сами вы сможете поставить на следующем собеседовании.
Когда состояние формы “pristine”, что именно это означает?
Когда что-то имеет состояние “pristine”, это означает, что оно чистое. Поле, которое не затронуто пользователем будет находиться в этом состоянии, пока оно не будет изменено. Тогда оно станет «грязным». Удаление всего текста не приводит к возврату к исходному состоянию, потому поле уже было затронуто. Это «первозданное» состояние используется при выполнении валидации формы, когда вы хотите, чтобы ошибка не выдавалась для всех еще не заполненных полей.
Что такое «Одноразовая привязка» ::, и когда это используется?
Когда вы добавляете выражение в шаблон с помощью оператора ::, который называется «одноразовая привязка», это означает, что для этого выражения разрешено только оценить значение. Это может использоваться, если вы уверены, что данные не будут меняться в течение сессии. В результате это может уменьшить нагрузку на сервер и повысить производительность. В качестве примера можно привести привязку года к div.
|
1 2 3 4 5 6 7 8 9 |
// controller.js class Controller { constructor() { this.year = 2017; } } // view.html <div ng-bind="::$ctrl.year"></div> |
Кратко опишите, как работает цикл дайджеста Angular
«Цикл дайджеста», также известный как «грязная проверка», представляет собой рекурсивный цикл, который выполняется каждый раз, когда вы обновляете модель, если для обработки всех привязок требуется более 10 циклов, то это не сработает. Почему это нужно сделать несколько раз — потому что изменение одной части может повлечь за собой необходимость изменений связанных вещей по цепочке. После каждого цикла дайджеста в DOM отражаются изменения в модели.
Что такое «transclude» и для чего это используется?
С точки зрения AngularJS, когда что-то указано, как transclude, это допускает указание содержимого, которое может войти в компонент или директиву, в свободной форме. Это дает нам гораздо большую гибкость, если мы предоставляем компонент, который в основном используется в качестве контейнера. Одним из примеров такого включения является панель, которая может содержать что-то. См. пример ниже.
|
1 |
<panel header="This is a header" text="Some text"></panel> |
Другой способ сделать это — указать transclude = true, вам также нужно будет использовать элемент или атрибут ng-transclude. Вы можете просто сделать следующее.
|
1 2 3 4 |
<panel> <h2>This is a header</h2> <p>Some text</p> </panel> |
Теперь компонент является намного более гибким, поскольку его содержимое представлено в свободной форме. Кроме того, еще одно преимущество данного метода заключается в том, что, как и в случае любой другой разметки, вы можете использовать пользовательские директивы и компоненты, и они все равно будут отображаться, в отличие от случая, когда вы помещаете их в атрибуты.
Что такое включение зависимостей и какие это дает нам преимущества?
Для компонента не важно, как включается зависимость, главное, чтобы она была доступна для использования в любое время. Включение зависимостей можно реализовать, просто использовав правильное имя в аргументах метода. Однако, если вы минимизируете выходной код, его нужно обернуть в массив строк или использовать аннотации, такие как ng-annotate.
|
1 2 3 4 5 6 7 |
// Пример контроллера: без минимизации { controller: ($location, anotherDependency) => { $location.path('/angular'); console.log(anotherDependency); } } |
Как видите, мы можем очень просто использовать любую доступную службу. Однако, если вы минимизируете код, синтаксис может быть сложным и трудно читаемым.
|
1 2 3 4 5 6 7 |
// Пример контроллера: с минимизацией { controller: ['$location', 'anotherDependency', ($location, anotherDependency) => { $location.path('/angular'); console.log(anotherDependency); }] } |
Причина, по которой включение нужно оборачивать в массив строк, заключается в том, что при минимизации аргументы становятся искаженными, например, они преобразуются в a и b или любые другие одиночные символы, которые используются, чтобы уменьшить размер файла. Из-за этого Angular не знает, что это за зависимость, потому что ссылка на само имя теряется. Чтобы решить данную проблему, был придуман этот трюк, поскольку литеральные строки никогда не изменяются, и мы можем быть уверенными, что зависимость будет включена правильно. Однако в таком случае код становится довольно сложным и выглядит повторяющимся, вот здесь нам на помощь приходит ng-annotate.
|
1 2 3 4 5 6 7 |
// Пример контроллера: использование ng-аннотации { controller: /*@ngInject*/($location, anotherDependency) => { $location.path('/angular'); console.log(anotherDependency); } } |
И код становится намного чище, так как нам не нужно повторять оформление с использованием строк массива с тем же именем. Дополнительную информацию вы можете найти в репозитории ng-annotate. Надеюсь, вы нашли это руководство полезным для себя.
Источник: //shirotech.com/
Редакция: Команда webformyself.
