Обычно, когда вы используете инструкции в NG, функция ссылки, которую большинство использует, является атрибутом ссылки. Следующая статья расскажет вам об использовании и различиях между Compli, Pre-Link и после Link.
Инструкции в AngularJs очень волшебны, что позволяет вам создавать очень семантические и высокоразовые компоненты, которые можно понимать как пионер веб -компонентов.
В Интернете уже есть много статей и связанных книг, которые представляют, как использовать инструкции. Если вы сравниваете их, вы редко вводите разницу между компиляцией и ссылкой, не говоря уже о предварительном сборе и пост-лике.
Большинство уроков просто говорят, что компиляция будет использоваться внутри NG, и рекомендуется использовать только атрибут ссылки, что имеет место в большинстве инструкций.
Это очень прискорбно, потому что правильное понимание разницы между этими функциями улучшит ваше понимание внутреннего механизма бега NG и поможет вам разработать лучшие пользовательские инструкции.
Так что следуйте за мной, чтобы увидеть следующий контент шаг за шагом, чтобы понять, каковы эти функции и когда они должны использоваться
Эта статья предполагает, что у вас есть определенное понимание инструкций. Если нет, настоятельно рекомендуется прочитать эту статью AngularJs Developer Раздел «Руководство разработчика» по директивам
Как обрабатывать инструкции в ng
Перед началом анализа давайте посмотрим, как NG-китайезе обрабатывает инструкции.
Когда браузер отображает страницу, он, по сути, читает идентичность HTML, затем создает узел DOM и передает нам событие после создания дерева DOM.
Когда вы используете теги скрипта для загрузки кода приложения NG на странице, NG слушает приведенное выше событие завершения DOM и находит элементы с атрибутами NG-App.
После поиска такого элемента, NG начинает обрабатывать DOM с начальной точкой этого элемента, поэтому, если NG-APP добавлен в элемент HTML, NG начнет обрабатывать DOM с помощью HTML-элемента.
Начиная с этой отправной точки, NG начинает рекурсивно искать все дочерние элементы, что соответствует правилам инструкции, определенным в приложении.
Как справиться с инструкциями НГ на самом деле зависит от свойств объекта, которые он определяет. Вы можете определить компиляцию или функцию ссылки, или использовать функции до ссылки и пост-ссылки вместо ссылки.
Так в чем же разница между этими функциями? Зачем его использовать? А когда?
С этими вопросами следуйте за мной шаг за шагом, чтобы ответить на эти загадки
Кусок кода
Чтобы объяснить различия между этими функциями, я буду использовать простой и простой для понимания пример ниже
1. Если у вас есть какие -либо вопросы, пожалуйста, не стесняйтесь добавлять свои комментарии ниже.
Проверьте следующий код тега HTML
Кода -копия выглядит следующим образом:
<Уровень-один>
<Уровень-два>
<Уровень-три>
Привет
</level-three>
</levely-two>
</level-one>
Тогда есть кусок кода JS
Кода -копия выглядит следующим образом:
var app = angular.module ('plunker', []);
Функция createirective (name) {
return function () {
возвращаться {
ограничить: 'e',
Compile: Function (Telem, Tattrs) {
console.log (name + ': compile');
возвращаться {
pre: function (scope, ielem, iattrs) {
console.log (name + ': pre Link');
},
Пост: Функция (Scope, IELEM, IATTRS) {
console.log (name + ': post link');
}
}
}
}
}
}
App.Directive ('LideOne', CreateiRective ('LidenOne'));
app.directive ('leveltwo', createirective ('leveltwo'));
app.directive ('levelThree', createirective ('levelThree'));
Результат очень прост: пусть NG обрабатывает три вложенных инструкции, и каждая инструкция имеет свои собственные функции комплиля, до ссылки и постзгибки. Каждая функция будет печатать линию в консоли, чтобы идентифицировать себя.
Этот пример позволяет нам кратко понять внутренний процесс NG при обработке инструкций
Вывод кода
Ниже приведен скриншот результата выходного результата на консоли
Если вы хотите попробовать этот пример самостоятельно, нажмите на этот PLNKR, а затем просмотрите результаты в консоли.
Код анализа
Первое, что нужно отметить, это порядок вызовов этих функций:
Кода -копия выглядит следующим образом:
// Скомпиляция фазы
// LedenOne: функция компиляции вызывается
// leveltwo: функция компиляции вызывается
// LevelThree: функция компиляции вызывается
// Фаза до линии
// LedenOne: Pre Link Function вызывается
// levelTwo: функция предварительной ссылки вызывается
// levelThree: функция предварительной ссылки вызывается
// Фаза после линии (обратите внимание на обратный заказ)
// levelThree: post ссылка функция вызывается
// leveltwo: post ссылка называется
// LedenOne: post ссылка функция вызывается
Этот пример ясно показывает, что NG компилирует все инструкции перед Link, а затем Link делится на этапы предварительной связи и после ссылки.
Обратите внимание, что порядок выполнения компиляции и предварительной связи выполняется последовательно, но пост-ссылка-это именно противоположность.
Таким образом, вышесказанное четко определило разные этапы, но в чем разница между компиляцией и предварительной связкой? Они оба находятся в одном и том же порядке выполнения, так почему мы должны разделить их на две разные функции?
Дом
Чтобы копать глубже, давайте просто изменим приведенный выше код, который также будет печатать переменные элемента в списке параметров в каждой функции
Кода -копия выглядит следующим образом:
var app = angular.module ('plunker', []);
Функция createirective (name) {
return function () {
возвращаться {
ограничить: 'e',
Compile: Function (Telem, Tattrs) {
console.log (name + ': compile =>' + telem.html ());
возвращаться {
pre: function (scope, ielem, iattrs) {
console.log (name + ': pre link =>' + ielem.html ());
},
Пост: Функция (Scope, IELEM, IATTRS) {
console.log (name + ': post link =>' + ielem.html ());
}
}
}
}
}
}
App.Directive ('LideOne', CreateiRective ('LidenOne'));
app.directive ('leveltwo', createirective ('leveltwo'));
app.directive ('levelThree', createirective ('levelThree'));
Обратите внимание на вывод в консоли.
Это должно углубить наше понимание контекста этих функций.
Запустите код еще раз, чтобы увидеть
Выход
Ниже приведен скриншот результата выходного результата на консоли
Если вы все еще хотите запустить его самостоятельно, чтобы увидеть эффект, вы можете нажать на этот PLNKR, а затем просмотреть результаты вывода в консоли.
наблюдать
Вывод результата DOM может выявить некоторые интересные вещи: содержание DOM отличается в двух функциях компиляция и предварительная ссылка
Так что случилось?
Компиляция
Мы уже знаем, что когда NG обнаруживает, что сборка DOM завершена, мы начинаем обрабатывать DOM.
Таким образом, когда NG пересекает DOM, он сталкивается с элементом уровня один и узнает из своего определения, что необходимо выполнить некоторые необходимые функции
Поскольку функция компиляции определена в объекте инструкции инструкции по уровню, она будет вызвана и передает элемент объект в качестве параметра
Если вы посмотрите внимательно, вы увидите, что когда браузер создаст этот объект элемента, он все еще самый оригинальный HTML -тег.
1. В NG исходный DOM обычно используется для идентификации элемента шаблона, поэтому я использовал имя телема при определении параметров функции компиляции, и эта переменная указывает на элемент шаблона.
После того, как функция компиляции в однородном инструкции будет выполнена, NG будет глубоко пересекать свои узлы DOM, а затем повторить эти операции на двух уровнях и уровне-три.
Пост-ссылка
Прежде чем мы перейдем к функции до линии, давайте посмотрим на функцию после линии.
2. Если вы используете только одну функцию ссылки при определении инструкции, то NG будет рассматривать эту функцию как пост-линк, поэтому нам нужно сначала обсудить эту функцию.
После того, как NG прошел все DOMS и выполнял все функции компиляции, связанная функция после ссылки вызывается в обратном направлении.
DOM теперь начинает решать и выполняет функцию после Link. Поэтому этот обратный вызов раньше казался немного странным, но на самом деле это имеет смысл сделать это.
При запуске инструкции после Link, содержащей подинструктивы, обратное правило после связи может гарантировать, что пост-связка его подинструкций было выполнено.
Следовательно, при запуске функции после линии инструкции по уровню-один мы можем убедиться, что постсвязанная ссылка на два уровня и 3-й уровень фактически была запущена.
Вот почему люди думают, что пост-ссылка-самое безопасное или по умолчанию место для написания бизнес-логики.
Но почему элемент здесь отличается от того, что в компиляции?
Как только NG вызывает функцию компиляции инструкции, будет создан объект элемента элемента элемента элемента элемента, и для него предусмотрен объект Scope. Эта область может быть новым экземпляром, или он может уже существовать, это может быть подзаколом, или это может быть независимой сферой. Все они зависят от значения атрибута Scope в объекте определения инструкции.
Таким образом, когда происходит связывание, этот элемент экземпляра и объект Scope уже доступны и передаются в виде параметров по NG в список параметров функции после Link.
1. Я лично всегда использую имя IELEM, чтобы определить параметр функции ссылки, и оно указывает на экземпляр элемента
Следовательно, объект параметра элемента функции после линии (Pre-Link) представляет собой экземпляр элемента вместо элемента шаблона.
Таким образом, вывод в приведенном выше примере отличается
Предварительная линия
При написании функции после линии вы можете убедиться, что при выполнении функции после линии были выполнены функции после линии всех его дочерних инструкций.
В большинстве случаев это может быть лучше, поэтому мы обычно используем его для написания кода инструкции.
Тем не менее, NG предоставляет нам дополнительный механизм крюка, то есть функция предварительной связи, которая может гарантировать, что какой-то другой код запускается перед выполнением функции после линии всех подинструкций.
Это предложение достойно многократного рассмотрения
Функция предварительной связи может гарантировать, что она выполняется в экземпляре элемента и до того, как выполняется пост-сцепление с его подинструкциями.
Таким образом, имеет смысл обратить вспять функцию после линии, она выполняет функцию предварительной линии в исходном порядке.
Это также означает, что функция предварительной связи выполняется до функции предварительной связи со всех его подинструктиками, поэтому полная причина состоит в том, чтобы:
Функция предварительной связи элемента может быть гарантированно выполнена до выполнения после сведения и предварительной связи всех его подинструдений. Смотрите рисунок ниже:
обзор
Если мы оглянемся на исходный вывод выше, мы можем четко узнать, что происходит:
Кода -копия выглядит следующим образом:
// Здесь элементы по -прежнему являются оригинальными элементами шаблона
// Скомпиляция фазы
// LedenOne: Функция компиляции вызывается на исходном DOM
// leveltwo: функция компиляции вызывается на исходном DOM
// levelThree: функция компиляции вызывается на исходном DOM
// На сегодняшний день элементы были созданы и
// связаны с областью
// (например, ng-repeat будет иметь несколько экземпляров)
// Фаза до линии
// LedenOne: функция предварительной ссылки вызывается в экземпляре элемента
// leveltwo: функция предварительной ссылки вызывается в экземпляре элемента
// levelThree: функция предварительной ссылки вызывается в экземпляре элемента
// Фаза после линии (обратите внимание на обратный заказ)
// levelThree: post ссылка функционирует в экземпляре элемента
// leveltwo: post ссылка на функцию вызывает в экземпляре элемента
// LedenOne: Post ссылка функционирует в экземпляре элемента
краткое содержание
Оглядываясь назад на приведенный выше анализ, мы можем описать различия и использование этих функций:
Компиляция функции
Используйте функцию компиляции, чтобы изменить исходный DOM (шаблонный элемент), прежде чем NG создает исходный экземпляр DOM и экземпляр области.
Это может быть применено к ситуациям, когда необходимо генерировать несколько экземпляров элементов, и есть только один элемент шаблона. NG-Repeat-лучший пример. Он изменяет исходный DOM на стадии функции компиляции, чтобы генерировать несколько исходных узлов DOM, а затем каждый генерирует экземпляры элемента. Поскольку компиляция будет работать только один раз, он может повысить производительность, когда вам нужно генерировать несколько экземпляров элементов.
Элемент шаблона и связанные с ними атрибуты передаются в виде параметров функции компиляции, но в настоящее время объем не может использоваться:
Вот функция выглядит как:
Кода -копия выглядит следующим образом:
/**
* Компиляция функции
*
* @param telem - элемент шаблона
* @param tattrs - атрибуты элемента шаблона
*/
Функция (Telem, Tattrs) {
// ...
};
Функция до линии
Используйте функцию Pre Link, чтобы запустить какой-то бизнес-код после того, как NG выполнила функцию компиляции, но до того, как функция после строки всех его подинструкций будет выполнена.
Объект Eccope и экземпляр элемента будет передаваться в качестве параметров функции предварительной линии:
Вот функция выглядит как:
Кода -копия выглядит следующим образом:
/**
* Функция до линии
*
* @param scope - область применения, связанную с этой винтером
* @param ielem - элемент экземпляра
* @param iattrs - атрибуты элемента экземпляра
*/
Функция (Scope, IELEM, IATTRS) {
// ...
};
Функция после линии
Используйте функцию после Link, чтобы выполнить бизнес-логику. На этом этапе он уже знает, что все его поднструктивы были составлены и что функции до линии и после ссылки были выполнены.
Это то, что считается самым безопасным и по умолчанию кода бизнес -логики.
Экземпляр области и экземпляра элемента передается в виде параметров для функции после линии:
Вот функция выглядит как:
Кода -копия выглядит следующим образом:
/**
* Функция после линии
*
* @param scope - область применения, связанную с этой винтером
* @param ielem - элемент экземпляра
* @param iattrs - атрибуты элемента экземпляра
*/
Функция (Scope, IELEM, IATTRS) {
// ...
};
Суммировать
Теперь у вас должно быть четкое понимание различий между компиляцией, до ссылки, пост-лики и этой функцией.
Если вы еще этого не сделали, и вы серьезный разработчик NG, то я настоятельно рекомендую вам прочитать эту статью снова, пока вы не поймете ее
Понимание этих концепций очень важно, что может помочь вам понять, как работают нативные инструкции, а также могут помочь вам оптимизировать свои собственные пользовательские инструкции.
Если у вас есть какие -либо вопросы, добавьте свои вопросы в комментарии ниже
В будущем мы продолжим анализировать два других вопроса о инструкциях:
1. Как работают атрибуты Transclusion в директиве?
2. Как связана функция контроллера в инструкции?
Наконец, если вы найдете что -то не так в этой статье, пожалуйста, прокомментируйте меня вовремя
Спасибо!