Блог

У меня есть приложение, созданное с помощью AngularJS, все приложение состоит из IIFEs (выражение функции, вызываемое немедленно). Каждый модуль, директива, контроллер сам по себе является IIFE, и их насчитывается около 100.

Я хочу знать, в чем заключается подводный камень производительности, когда в приложении так много IIFEs.

Нормально ли использовать IIFEs с AngularJS?

Насколько хорошо использовать библиотеки, такие как browserify и requirejs, с AngularJS для управления зависимостями?

Не могли бы вы, пожалуйста, пролить немного света на это?

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

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

Проблему производительности не так-то просто измерить; я думаю, что проблема с производительностью незначительна при создании IIFE (не забывайте, что вы просто создаете функцию). Одна из проблем производительности, о которой я мог бы подумать, заключается в том, что когда вы ссылаетесь на функциональную переменную из внутренней функции, вам нужно пройти по цепочке областей видимости и получить ее из объекта closure.

Я бы порекомендовал вам взглянуть на такие шаблоны, как шаблон модуля, раскрывающий шаблон модуля и т.д. Я лично использую шаблон revealing module.

Browserify и RequireJS — это две библиотеки, которые реализуют две разные спецификации; CommonJS и AMD соответственно. Эти две спецификации пытаются приспособить функциональность, которая не поддерживается ES3 или ES5; Это способ определения модулей и последующей загрузки их в указанные местоположения.

Если вы хотите определять модули и загружать их синхронно аналогично тому, как работает hose NodeJS, вы можете использовать Browserify. Кроме того, Browserify позволяет вам использовать одни и те же модули как на стороне клиента, так и на стороне сервера (при условии, что вы используете NodeJS).

С другой стороны, если вы хотите асинхронно загружать свои модули, вы можете использовать AMD и RequireJS, но вы не сможете повторно использовать их на серверной части.

Наконец, имейте в виду, что все, что вы упомянули, напрямую не связано с AngularJS; это несколько хороших методов JavaScript для преодоления некоторых проблем самого языка. Его можно хорошо использовать независимо от того, работаете вы с angular или нет.

Я бы рекомендовал вам использовать либо browserify, либо RequireJS; это принесет вам пользу в долгосрочной перспективе. Просто представьте, что у вас есть 100 JS-файлов; вам нужно будет вручную перенести их в ваш html-код в правильном порядке на основе графика зависимостей. Вы можете легко столкнуться с такими проблемами, как условия гонки, когда один файл должен был быть вставлен раньше другого.

Что касается накладных расходов на производительность IIFEs, у вас не должно возникнуть никаких серьезных проблем.

Как сказано в другом ответе, IIFEs являются хорошей общей практикой, независимой от AngularJS.

Если вас беспокоит производительность IIFEs, ознакомьтесь с этими тестами производительности в JSPerf (или напишите свой собственный):

• http://jsperf.com/iife-antecedents-in-js
• http://jsperf.com/immediate-anonymous-function-invocation

Хотя некоторые способы создания IIFE явно намного медленнее других, я бы не беспокоился о производительности IIFEs, если вы не находитесь в большом цикле.