Для меня, который является чистым новичком в передней части, JavaScript все еще немного ясен по этому поводу. Если вы хотите начать с Angular JS напрямую, действительно много сопротивления. Но я считаю, что, пока вы усердно работаете, даже античеловеческий дизайн не будет большой проблемой.
Хорошо, не говорите много чепухи. Чтобы выяснить, что такое Angular JS, я начал с масштаба. Так что же такое масштаб? Заимствование отрывка из официального документа:
Кода -копия выглядит следующим образом:
«Область - это объект, который относится к модели приложения. Это контекст выполнения для выражений. Области расположены в иерархической структуре, которая имитирует структуру DOM приложения.
Прочитав его, я сравнил его с другими языками программирования и почувствовал, что область охвата подобна объему модели данных, обеспечивая контекст для выполнения выражений. Давайте пока поймем это так.
Особенности масштаба
Далее, давайте посмотрим, какие функции имеют Scope?
Scope предоставляет метод $ Watch для мониторинга изменений в модели.
Scope предоставляет $ применить метод для распространения изменений в модели.
Область может быть унаследован и изолирует различные компоненты приложения и разрешения на доступ к атрибутам.
Область обеспечивает контекст для расчета выражений.
Для этих четырех функций, потому что я изучал ActionScript, C ++ и Java раньше, не сложно понять первые, третьи и четвертые точки, но второй пункт кажется немного запутанным. Основываясь на принципе разрыва запеканки и спроса конец, я все еще нашел некоторые вещи через Google. Для опытных ветеранов, пожалуйста, погладитесь по кирпичам!
Происхождение JavaScript
Прежде всего, на первый взгляд, scope.apply (), по -видимому, является обычным методом для обновления привязки. Но подумайте немного больше, зачем нам это нужно? Когда вы обычно используете его? Чтобы понять эти две проблемы, мы должны начать с JavaScript. В коде JavaScript они выполняются в определенном порядке. Когда для выполнения поворота кода фрагмент кода браузер выполнит только текущий фрагмент и больше ничего не будет делать. Так что иногда некоторые веб-страницы, которые не сделаны хорошо сделаны, застряли, когда нажимают на что-то. JavaScript работает по одной из причин, по которой это явление вызвано! Здесь у нас есть кусок кода, чтобы испытать его:
Кода -копия выглядит следующим образом:
var button = document.getElementById ('clickMe');
function buttonClicked () {
оповещение («кнопка была нажата»);
}
Button.AddeventListener ('нажмите', ButtonClicked);
функция timercomplete () {
оповещение ('таймер завершить');
}
SetTimeout (TimerComplete, 5000);
При загрузке кода JavaScript сначала найдите кнопку с идентификатором с именем «ClickMe», затем добавьте слушатель, а затем установите тайм -аут. Подождите 5 секунд, и появится диалоговое окно. Если вы обновите страницу и немедленно нажмите кнопку ClickMe, появится диалоговое окно. Если вы не нажимаете OK, функция TimerComplete никогда не будет иметь возможность выполнить.
Как обновить привязки
Хорошо, после разговора о чем -то, что кажется неактуальным, давайте вернемся к этой теме. Как Angular JS узнает, когда необходимо обновлять данные и страницы? Код должен знать, когда данные были изменены, но теперь нет способа напрямую информировать данные об измененном объекте (хотя ECMASCRIPT 5 пытается решить эту проблему, она все еще находится на экспериментальной стадии). В настоящее время есть два решения для более основных стратегий. Одним из них является использование специальных объектов, чтобы все данные могли быть установлены только путем вызова метода объекта, а не напрямую указать его через свойство. Таким образом, все изменения могут быть записаны, и вы узнаете, когда страница должна быть обновлена. Недостаток этого заключается в том, что мы должны унаследовать специальный объект. Для назначения это может быть сделано только object.set ('key', 'value') вместо object.key = value. В Frameworks это то, что делают Emberjs и Knockoutjs (хотя я не трогал его раньше). Другим методом является метод, принятый Angular JS, который проверяет, существует ли какое -либо изменение данных после каждой последовательности выполнения кода JavaScript. Это не кажется эффективным и даже серьезно влияет на производительность. Тем не менее, Angular JS использует некоторые умные средства для решения этой проблемы (она еще не была изучена, и это еще не ясно). Преимущество этого заключается в том, что мы можем использовать любой объект по желанию, нет ограничений на метод назначения, и мы также можем знать об изменениях данных.
Для этого решения, принятого Angular JS, мы заботимся о том, когда изменяются данные, и именно здесь можно пригодиться Scope.Apply (). Проверяя, изменились ли связанные данные, это фактически делается Scope.digest (), но мы почти никогда не называли этот метод напрямую, но вместо этого называли метод Scope.apply (), потому что в методе Scope.apply () он будет вызвать метод Scope.digest (). Метод scope.apply () принимает функцию или выражение, затем выполняет ее и, наконец, вызывает метод scope.digest () для обновления привязки или наблюдателей.
Когда использовать $ Apply ()
Тот же вопрос: так, когда нам нужно вызвать метод Apply ()? Есть очень мало случаев. Фактически, почти весь наш код обернут в Scope.Apply (), такой как NG-клик, инициализация контроллера, функции обратного вызова HTTP и т. Д. В этих случаях нам не нужно вызывать себя, и на самом деле мы не можем позвонить себе, в противном случае вызов метода Apply () в методе Apply () принесет ошибку. Если нам нужно запустить код в новой последовательности выполнения, нам действительно нужно его использовать, и если и только тогда, когда новая последовательность выполнения не создается методом Angular JS Library, нам нужно обернуть код в Scope.apply (). Вот пример объяснения:
Кода -копия выглядит следующим образом:
<div ng: приложение ng-controller = "ctrl"> {{message}} </div>
Кода -копия выглядит следующим образом:
functionCtrl ($ scope) {
$ scope.message = "ожидание 2000 мс для обновления";
settimeout (function () {
$ scope.message = "Timeout!";
// angularjs не знают об обновлении до $ accope
}, 2000);
}
После того, как приведенный выше код будет выполнен, на странице будет отображаться: ожидание 2000 мс для обновления. Очевидно, что обновление данных не было обнаружено угловым JS.
Далее мы немного изменяем код JavaScript и оберните его Scope.apply ().
Кода -копия выглядит следующим образом:
functionCtrl ($ scope) {
$ scope.message = "ожидание 2000 мс для обновления";
settimeout (function () {
$ scope. $ Apply (function () {
$ scope.message = "Timeout!";
});
}, 2000);
}
Разница на этот раз состоит в том, что страница будет сначала отображать: ожидание 2000 мс для обновления. После ожидания в течение 2 секунд контент будет изменен на: Timeout Call! Полем Очевидно, что обновление данных было обнаружено с помощью Angular JS.
Примечание. Мы не должны этого делать, но использовать метод тайм -аута, предоставленный Angular JS, чтобы он был автоматически обернут методом применения.
Наука-обоюдоострый меч
Наконец, давайте посмотрим на методы Scope.apply () и Scope.apply (функция) снова! Хотя Angular JS сделал много для нас, мы также потеряли некоторые возможности. Вы можете увидеть из следующего псевдокода:
Кода -копия выглядит следующим образом:
Функция $ Apply (expr) {
пытаться {
return $ eval (expr);
} catch (e) {
$ ExceptionHandler (e);
} окончательно {
$ root. $ digest ();
}
}
Он поймает все исключения и больше не бросит их, и в конечном итоге вызовет метод $ digest ().
Давайте обобщусь
Метод $ Apply () может выполнять угловые экспрессии JS за пределами угловой структуры, такие как: Dom Events, Settimeout, XHR или другие сторонние библиотеки. Это только начало, вода все еще глубокая, добро пожаловать в глубокое погружение вместе!