>웹 프론트엔드 >JS 튜토리얼 >ocLazyLoad를 사용하여 js 지연 로딩을 구현하는 방법은 무엇입니까?

ocLazyLoad를 사용하여 js 지연 로딩을 구현하는 방법은 무엇입니까?

零下一度
零下一度원래의
2017-07-18 17:48:291294검색

OcLazyLoad 설명

1.ocLazyLoad는 모듈, 컨트롤러 및 기타 종속성의 동적 로딩/주문형 로딩을 실현할 수 있는 AngularJS의 타사 라이브러리입니다.

2.$ocLazyLoad.load()는 여러 파일과 자동으로 로드할 수 있음 지정된 파일 유형을 정의하고 클라이언트에서 캐시할지 여부를 사용자 정의할 수 있습니다

3. $ocLazyLoad.load()가 동적 유형 $$state를 반환하는데 관련이 없습니다. 존재하지 않거나 로드에 실패한 js 파일을 처리하기 위한 API입니다.

최근 각도를 사용하여 HTML 조각을 라우팅하는 시스템을 개발할 때 서식 있는 텍스트를 구현하기 위해 js 플러그인을 사용해야 하는 문제가 발생했습니다. 편집자. 핵심 문제는 프래그먼트가 로드된 후 js를 통해 dom 요소에 바인딩되어야 한다는 것입니다. 처음에는 코드 조각에 JS 코드를 직접 작성하면 괜찮을 것이라고 생각했습니다. 그러나 실험 후에 라우팅이 HTML 조각을 페이지에 삽입하면 CSS만 읽을 수 있고 JS 코드를 구문 분석하고 실행할 수는 없습니다. .

 오랜 시간 동안 Google을 검색한 후 많은 Angular+requireJs 솔루션을 찾았지만 requirejs는 기본적으로 모듈 로더이고 주문형 로딩은 부업이기 때문에 내 시나리오에는 적합하지 않다고 생각합니다. 주로 사용해야 합니다 모듈식으로 설계되었습니다. 순전히 주문형 로딩을 위해 코드를 래핑(정의)하기 위해 모듈식 구문을 사용하면 모기를 죽이기 위해 대포를 사용하는 것과 같은 느낌이 듭니다. .

 결국 이를 처리하기 위해 ocLazyLoad를 사용하기로 결정했습니다. 왜냐하면 이 솔루션의 장점은 간단하고 구현하기 쉽고 방해가 되지 않는다는 것입니다. 동시에 이 솔루션에는 몇 가지 단점이 있습니다. 예를 들어 스크립트 및 템플릿 리소스의 각 동적 로드에 대해 불필요한 네트워크 오버헤드가 많이 발생합니다. 라우팅 정의는 상대적으로 복잡합니다(일부 추가 구성 항목이 있지만 실제로는 그렇지 않습니다). 복잡하지만 번거롭다) 규모가 크고 복잡한 경우에는 비즈니스 애플리케이션과 경로가 많고 소비되는 에너지도 무시할 수 없습니다. 하지만 내 상황에는 딱 맞아요. 그래서 저는 github에서 js를 포크하여 프로젝트에 도입했습니다.

 <script src="js/ocLazyLoad.js?1.1.11"></script>

사용해야 하는 각도 모듈에서 구성하세요

var app = angular.module('formCtrlParts', ['oc.lazyLoad']);

그런 다음 요청 시 js 파일을 로드하기 위해 라우팅에 사용해야 하는 컨트롤러에서 이 서비스를 사용하세요


app.controller('addNewBlogCtrl',function($scope,$http,$ocLazyLoad){
    $ocLazyLoad.load('../html/ckeditorjs/ckeditor.js');
   
})

이는 기본적으로 수행됩니다. ocLazyLoad에는 다양한 로딩 방법이 있으며 라우팅 및 지침을 사용하여 로드할 수도 있습니다.  

위 내용은 ocLazyLoad를 사용하여 js 지연 로딩을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.