나는 angularJS로 만든 응용 프로그램을 가지고 있으며, 전체 응용 프로그램은 IIFE (Immediately Invoked Function Expression)로 구성되어 있습니다. 모든 모듈, 지시문, 컨트롤러 자체는 IIFE이며 약 100 초입니다.AngularJS가있는 IIFE의 함정
앱에 많은 IIFE가있는 경우 성능 저하가 무엇인지 알고 싶습니다.
AngularJS에서 IIFE를 사용할 수 있습니까?
의존성을 관리하기 위해 browserify와 requirejs와 같은 libs를 AngularJS와 얼마나 잘 사용하고 있습니까?
여기에 대해 좀 알려 주실 수 있습니까?
먼저 묻는 질문은 글로벌 범위에 노출하고 싶지 않은 IIFE 내에 내부 부품이 있는지 여부입니다.
이러한 방식으로 클로저를 만드는 요점은 캡슐화를 모방하고 전역 범위를 오염시키지 않는 것입니다.
성능 저하는 측정하기 쉽지 않습니다. 저는 IIFE를 만들 때 성능 문제가 무시할 수 있다고 생각합니다. (단지 함수를 만드는 것임을 잊지 마십시오.) 내가 생각할 수있는 성능 문제 중 하나는 함수 변수를 내부 함수로 참조 할 때 범위 체인을 통과하여 클로저 개체에서 가져와야한다는 것입니다.
모듈 패턴, 공개 모듈 패턴 등의 패턴을 살펴 보는 것이 좋습니다. 개인적으로 공개 모듈 패턴을 사용합니다.
Browserify 및 requireJS는 두 가지 다른 사양을 구현하는 두 개의 라이브러리입니다. commonJS와 AMD 각각. 이 두 사양은 ES3 또는 ES5에서 지원하지 않는 기능을 지원하려고 시도합니다. 모듈을 정의한 다음 지정된 위치에 모듈을로드하는 방법입니다.
nodeJS 호스와 비슷한 방식으로 모듈을 정의하고 동 기적으로로드하려는 경우 Browserify를 사용할 수 있습니다. 또한 Browserify는 (nodeJS를 사용하는 한) 클라이언트 측과 서버 측 모두 동일한 모듈을 사용할 수 있습니다.
반면에 모듈을 비동기 적으로로드하려면 AMD 및 requireJS와 함께 갈 수 있지만 백엔드에서 다시 사용할 수는 없습니다.
마지막으로 언급 한 모든 것이 angularJS에 직접 연결되어 있지 않다는 점에 유의하십시오. 그것들은 언어 자체의 몇 가지 문제를 극복하기위한 좋은 JavaScript 실습입니다. 당신이 각도로 작업하든하지 않든 상관없이 잘 사용할 수 있습니다.
나는 browserify 또는 requireJS를 사용하는 것이 좋습니다. 그것은 장기적으로 당신에게 도움이 될 것입니다. 100 개의 JS 파일이 있다고 상상해보십시오. 의존성 그래프를 기반으로 올바른 순서로 html로 수동으로 출력해야합니다. 한 파일이 다른 파일보다 먼저 삽입되어야하는 경쟁 조건과 같은 문제를 쉽게 발견 할 수 있습니다.
IIFE의 성능 오버 헤드에 관해서는 심각한 문제가 없어야합니다.
다른 답변으로, IIFE는 AngularJS와는 별개로 좋은 일반적인 관행입니다.당신이 IIFEs의 성능이 염려되는 경우
, 가서 JSPerf에서 이러한 성능 테스트를 체크 아웃 (또는 직접 작성) :
동안 IIFE 작성의 몇 가지 방법은 분명히 다른 것보다 훨씬 느립니다. 큰 반복을하지 않는 한 IIFE의 성능에 대해 걱정하지 않아도됩니다.
, 전 IIFEs를 사용하는 동안 전 세계적인 범위 문제를 발견, 나머지는 괜찮습니다. 전역 범위에서 많은 것을 첨부하거나 너무 많은 클로저를 만드는 것은 GC를 어렵게 만듭니다. 크롬 개발자 도구에 따라 GC 루트에서 멀어 질수록 더 나은 GC가됩니다. – rishinarang
루트와의 거리와 GC 간의 관계에 대한 합리적인 주장입니다. 당신은 그것을위한 표창장이 있습니까? –
의견을 보내 주셔서 감사합니다. angularjs와 함께 angularjs로 requirejs를 찾았습니다. DI는 자체 DI를 소유하고 있으며, requirejs는 backbonejs와 같은 libs에서 어떤 함수를 호출해야 하는지를 알지 못하는 것이 좋습니다. angularjs 들어, 나는 browserify 좋은 찾으십시오. 귀하의 의견을 주셔서 감사합니다 – rishinarang