웹 사이트 로딩 속도를 향상시키기 위해 headjs를 사용하여 js를 관리하고 로드하세요.

requirejs 및 seajs와 같은 성숙한 js 모듈 로더가 많이 있지만 일부 소규모 프로젝트의 경우 해당 기능이 너무 "강력"할 수 있습니다. 아마도 js 함수를 동적으로 로드할 수 있는 모듈을 원할 수도 있고 그냥 그런 척하고 싶을 수도 있습니다. 우리가 작성하는 페이지에는 와 같은 내용이 많지 않습니다. 앞서 언급한 두 가지 js 로더는 모듈성, 즉 js 파일의 구성 및 관리를 강조하며 대규모 프로젝트에 더 적합합니다.

방금 말했듯이 js 파일 로더만 갖고 싶은데 js 파일 주소만 제공하면 되나요? 그런 다음 테마를 입력하고 headjs를 사용하세요. headjs는 실제로 도구 세트이지만 제가 소개하고 싶은 것은 Javascript Loader 기능입니다. 기본 사용법은 다음과 같습니다.

head.js("/path/to/file.js");

가장 간단한 사용법은 js 파일의 주소를 다음과 같이 제공하는 것입니다. 매개변수를 지정하면 뒤에서 자동으로 차단되지 않고 로드됩니다. 언제 로드되어 사용 가능한지는 아무도 모릅니다.

head.js("/path/to/file.js", function() {
 /*js加载完成*/
});

가장 기본적인 사용법은 주소 매개변수 제공 외에 두 번째 매개변수로 콜백 함수도 제공하는 것입니다. js가 로드된 후 콜백 함수가 호출됩니다. 콜백 함수에서 js에 의존하는 코드를 작성할 수 있습니다.

head.js("file1.js", "file2.js", ... "fileN.js");

여러 js 파일 주소를 제공하세요. 이러한 js는 다음 위치에서 실행됩니다. 병렬 로딩이지만, 이 파일들은 매개변수에 지정된 순서대로 실행됩니다. 예를 들어 file1.js보다 먼저 file2.js가 로드되더라도 file1.js가 로드되어 실행될 때까지 대기합니다.

head.js("file1.js", "file2.js", function() {
  
});

여러 j를 병렬로 로드하여 매개변수 순서대로 실행합니다. 모든 j가 준비되면 콜백 함수가 실행됩니다.

head.js("file1.js");
head.js("file2.js");
head.js("file3.js");

여러 js가 병렬로 로드되며, 이를 먼저 로드하는 사람이 먼저 실행됩니다.

head.js("file1. js ").js("file1.js").js("file3.js");

이전 메소드의 체인 호출 메소드

이 경우 headjs를 사용하여 로드합니다. js 파일 기본적으로는 충분하고 종속성도 처리할 수 있습니다. 모든 특수 효과를 사용하기를 희망하면서 B를 계속 설치하고 웹 사이트를 구축한다면 여기에서 jquery 플러그인을 찾고 거기에서 다른 플러그인을 찾으면 간단히 말해서 복잡한 종속성을 가진 많은 파일을 생성하게 될 것입니다. 어떻게 될까요? 관리하다? 위에서 언급한 사용법으로 완전히 해결할 수 있는지 물어볼 필요가 있습니까? 그런데 생각해보니 B를 설치했으니 끝까지 설치하자. 지금은 대중적인 모듈이 아니어서 모듈 전체를 설치하자. 하지만 commonJS 말처럼 복잡하지는 않다. 즉, 모듈을 정의한다. 그런 다음 이 모듈에는 js 파일이 무엇으로 구성되어 있는지, 파일 간의 종속성은 무엇인지 등이 포함되어 있다고 규정합니다. 그럼 해보겠습니다. headjs는 MTI 프로토콜을 사용하므로 수정해도 문제가 없습니다. Diaosi는 다시 키가 크고, 부자이고, 잘 생긴 척하고 있습니다. 실제로는 수정 사항이지만 몇 가지 코드를 추가하고 종속성 로드와 같은 기능을 headjs API를 사용하여 완전히 구현한다고 말하는 것이 좋습니다. .

여기서 headjs에 두 가지 새로운 메소드를 추가했는데, 하나는 모듈을 추가하는 add(name, file, preload)입니다. 매개변수 이름은 모듈 이름이고, file은 사용할 js 파일 주소입니다. 여러 개의 파일이 있고 종속성이 있는 경우 file은 배열일 수 있습니다. 이 배열의 요소는 사용된 파일 주소이며, 배열 요소의 순서대로 종속성이 수행됩니다. 세 번째 매개변수 preload는 모듈 파일을 미리 로드할지 여부를 지정하는 데 사용됩니다. false인 경우 모듈이 사용될 때 파일이 로드됩니다. true인 경우 모듈이 정의되는 즉시 사용되는 파일이 로드됩니다. 기본값은 false

다른 하나는 use(name, callback)이며, 이 메서드는 모듈을 사용하는 데 사용됩니다. name은 add() 메서드를 사용하여 정의된 모듈 이름이고, callback은 모듈이 로드된 후 호출되는 콜백 함수입니다.

그래서 headjs를 다음과 같이 사용할 수 있습니다:

head.add('jqueryui',[jquery.js,jqueryui.js]);//定义模块
head.use('jqueryui',function(){
 //可以使用jqueryui啦
});

모듈이 많은 경우 모듈 정의 코드를 별도로 작성할 수 있습니다. 파일에서 headjs를 도입한 후 모듈 정의 파일이 즉시 로드됩니다. 이 프로세스는 다음과 같이 쉽게 구현할 수 있습니다.

init 속성 보기 아니요, I 이를 초기화 속성이라고 부릅니다. init 값은 파일 이름을 나타냅니다. 예를 들어 위의 init는 headjs와 동일한 디렉터리에 있는 init.js 파일을 나타냅니다. 소위 초기화는 use()를 사용하기 전에 init 파일이 로드되어야 함을 의미합니다. 따라서 초기화 파일에 모듈 정의를 작성할 수 있습니다.

니마, 이게 무슨 문제야? 또 다른 주요 속성은 좋아요. 다른 사람이 이걸 가지고 있는 것을 봤다는 걸 인정합니다. 그래서 나도 따라해서 하나를 얻었습니다. main 속성은 모듈 이름을 나타냅니다. 즉, head.js 및 init.js 파일이 로드된 후 main 속성에 지정된 모듈이 자동으로 실행됩니다(물론 모듈은 init에서 먼저 정의되어야 합니다). 따라서 이 두 가지를 사용하면 페이지에 단일 js 코드 없이도 매우 복잡한 코드를 실행할 수 있습니다(headjs를 소개하는 태그 제외).

또 설명해야 할 점이 있는데, 바로 모듈 파일의 저장 위치입니다. 모듈 파일은 head.add('a','a.js')와 같이 head.js와 동일한 디렉터리에 저장되어야 합니다. 여기서 a.js의 경로는 head.js와 동일합니다. 모듈 파일의 경로입니다. 이는 head.js가 저장된 경로에 상대적이며 위로는 갈 수 없고 아래로만 갈 수 있습니다. 예:

head.add('a','a/a. js')//맞습니다

head.add('a','../a.js')//오류, 위쪽으로 배치할 수 없습니다

마지막으로 수정된 헤드를 넣습니다. Node.js 소스 파일은 압축된 버전이 아니며, 변경 사항에 대한 설명이 있습니다.

위 내용은 이 글의 전체 내용입니다. 저도 PHP 중국어 웹사이트를 지원하는 것이 모든 분들께 도움이 되기를 바랍니다.

headjs를 사용하여 js를 관리 및 로드하고 웹사이트 로딩 속도를 향상시키는 방법에 대한 더 많은 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!