Лично я думаю, что вам нужно хорошо понять операционный механизм AngularJS, чтобы вы могли не попасть в яму как можно больше. В этой статье я сделаю более четкий и подробный анализ того, что AngularJS сделал после запуска на основе онлайн -информации и моего собственного понимания.
Во -первых, давайте посмотрим, что Angular сделал шаг за шагом.
<! Doctype html> <html ng-app> <head> <script src = "angular.js"> </script> </head> <body> <png-init = "name = 'world'"> hello {{name}}! </p> </body> </html>Когда вы используете свой браузер для доступа к index.html, браузер делает следующие вещи по очереди:
Весь процесс может быть представлен этой картиной:
Хорошо, через приведенный выше пример мы можем понять, как AngularJS делает страницу шаг за шагом. Так как же взаимодействует с петлей события браузера? Или как вы взаимодействуете с пользователями? Кратко говоря, он в основном разделен на три этапа:
1. Цикл события браузера ждет запуска события, включая взаимодействие с пользователем, события времени или сетевые события (например, ответы на серверы и т. Д.);
2. Как только событие будет запускается, оно будет ввести в контекст JavaScript, и DOM обычно изменяется с помощью функций обратного вызова;
3. После выполнения функции обратного вызова, браузер отображает новую страницу в соответствии с новым DOM.
Как показано на рисунке ниже, процесс взаимодействия в основном состоит из нескольких циклов:
AngularJS изменяет общие рабочие процессы JavaScript и предоставляет свой собственный механизм обработки событий. Это разделяет контекст JavaScript на две части, одна из них является нативным контекстом JavaScript, а другой - контекст AngularJS. Только операции в контексте AngularJS могут пользоваться угловым связыванием данных, обработкой исключений, наблюдением за свойствами и другими услугами. Тем не менее, угловой не игнорируется для посторонних (например, нативные операции JavaScript, индивидуальные обратные вызовы событий, сторонние библиотеки и т. Д.). Вы можете использовать функцию $ Apply (), предоставленную AngularJS, чтобы обернуть этих посторонних в контекст AngularJS, чтобы Angular мог ощутить внесенные ими изменения.
Затем давайте посмотрим, как работают эти циклы во время процесса взаимодействия?
1. Прежде всего, браузер будет в состоянии прослушивания. После того, как событие будет вызвано, оно будет добавлено в очередь событий, а события в очереди событий будут выполнены один за другим.
2. Если событие в очереди события обернуто $ Apply (), оно войдет в контекст AngularJ. Fn () Вот функция, которую мы хотим выполнить в контексте AngularJS.
3. angularjs выполнит функцию fn (). Обычно эта функция меняет некоторые состояния приложения.
4. Тогда AngularJs войдет в петлю $ Digest, состоящую из двух небольших петель. Один цикл используется для обработки очередей $ evalasync (используется для планирования некоторых операций, которые необходимо обрабатывать перед визуализацией, обычно реализуемым через Settimeout (0), что будет медленнее и может вызвать джиттер просмотра). Один цикл используется для обработки списка $ Watch (коллекция некоторых выражений. Как только произойдет изменение, будет вызвана функция $ Watch). Цикл $ Digest будет продолжать итерацию, когда он знает, что очередь $ evalasync пуста, а список $ также пуст, то есть модель больше не будет меняться.
5. Как только заканчивается цикл $ Digest of AngularJS, все исполнение покинет контекст AngularJS и JavaScript, а затем браузер повторно рендеринг представления после изменения данных.
Далее, давайте проанализируем это в сочетании с кодом:
<! Doctype html> <html ng-app> <head> <script src = "angular.js"> </script> </head> <body> <input ng-model = "name"> <p> Привет {{name}}! </p> </body> </html>Единственная разница между этим кодом и предыдущим кодом состоит в том, что есть вход для получения пользовательского ввода. При доступе к этому HTML-файлу с помощью браузера директива NG-Model на входе свяжет событие Keydown с входом и будет рекомендовать A $ Watch переменной имени для получения уведомления об изменении значения переменной. Во время интерактивной фазы в основном возникают следующие серии событий:
1. Когда пользователь нажимает клавишу на клавиатуре (например, а), событие клавиши на входе запускается;
2. Инструкция на входе обнаруживает изменение значения при вводе и вызовет $ Apply ("name = 'a'") для обновления модели в контексте AngularJS;
3. angularjs назначает «а» на имя;
4. Запускается цикл $ Digest, список наблюдения $ обнаруживает изменение значения имени, а затем уведомляет выражение {{name}} для обновления DOM;
5. Выйдите из контекста Angularjs, а затем выйдите из события Keydown в контексте JavaScript;
6. Браузер перепродает представление.
Вышесказанное - краткое изложение принципа работы Angularjs. Мы будем продолжать добавлять соответствующую информацию в будущем. Спасибо за вашу поддержку на этом сайте!