Require.js 사용법 공유

이 글은 주로 Require.js 사용법(요약)을 바탕으로 한 글입니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리도록 하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

1. require.js를 사용하는 이유

우선, 페이지에 여러 개의 js 파일이 로드되면 브라우저가 웹 페이지 렌더링을 중지합니다. js 파일 간의 종속성이므로 로딩 순서가 엄격하게 보장되어야 합니다. 종속성이 복잡하면 코드 작성 및 유지 관리가 어려워집니다.

require.js는 다음 두 가지 문제를 해결합니다.

1. 웹 페이지의 응답 손실을 방지하기 위해 js 파일의 비동기 로딩을 구현합니다.
2. 코드 작성 및 유지 관리를 용이하게 하기 위해 모듈 간의 종속성을 관리합니다.

2. require.js 로드

첫 번째 단계는 공식 웹사이트에서 최신 버전을 다운로드하여 페이지에 직접 올려 로드하는 것입니다.

<script src="js/require.js"></script>

이 파일을 로드하면 웹페이지가 응답하지 않을 수 있습니다. 페이지 하단에 이와 같이

<script src="js/require.js" defer async="true" ></script>

async 속성을 작성하여 웹 페이지가 응답하지 않는 것을 방지하려면 이 파일을 비동기식으로 로드해야 함을 나타낼 수도 있습니다. IE는 이 속성을 지원하지 않고 defer만 지원하므로 defer도 작성합니다.

require.js를 로드한 후 다음 단계는 입구인 자체 코드를 로드하는 것입니다. 파일 이름이 main.js인 경우 다음과 같이 작성할 수 있습니다. 3. 메인 모듈 작성 방법

메인 모듈이 jQuery에 의존하는 경우 이렇게 작성하면 됩니다

<script src="js/require.js" data-main="js/main"></script>  .js后缀可以省略

4.require.config() 메소드

require(['jquery'], function ($){ 
　　　alert($); 
});

위 코드는 세 모듈의 파일 이름을 제공하며, 경로는 기본적으로 main.js와 동일한 디렉터리(js 하위 디렉터리)입니다. 이러한 모듈이 js/lib 디렉토리와 같은 다른 디렉토리에 있는 경우 이를 작성하는 방법에는 두 가지가 있습니다.

• 하나는 경로를 하나씩 지정하는 것입니다.

require.config({ 
　　paths: { 
　　　　"jquery": "jquery.min", 
　　　　"underscore": "underscore.min", 
　　　　"backbone": "backbone.min"
　　} 
});

• 다른 하나는 기본 디렉터리(baseUrl)를 직접 변경하는 것입니다.

require.config({ 
　　paths: { 
　　　　"jquery": "lib/jquery.min", 
　　　　"underscore": "lib/underscore.min", 
　　　　"backbone": "lib/backbone.min"
　　} 
});

• 모듈이 다른 호스트에 있는 경우

require.config({ 
　　baseUrl: "js/lib", 
　　paths: { 
　　　　"jquery": "jquery.min", 
　　　　"underscor: "underscore.min", 
　　　　"backbone": "backbone.min" 
　　} 
});

와 같이 해당 URL을 직접 지정할 수도 있습니다. 5. AMD 모듈 작성 방법

require.js require.js에 의해 로드되는 모듈은 AMD 사양을 채택합니다. 즉, 모듈은 AMD 규정에 따라 작성되어야 합니다.

구체적으로는 특정 정의() 함수를 사용하여 모듈을 정의해야 합니다. 모듈이 다른 모듈에 의존하지 않는 경우에는 Define() 함수에서 직접 정의할 수 있습니다.

require.config({ 
　　paths: { 
　　　　"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
　　} 
});

로드 방법은 다음과 같습니다.

// math.js 
define(function (){ 
　　var add = function (x,y){ 
　　　　return x+y; 
　　}; 
　　return { 
　　　　add: add 
　　}; 
});

이 모듈이 다른 모듈에도 의존하는 경우, 정의() 함수의 첫 번째 매개변수는 모듈의 종속성을 나타내는 배열이어야 합니다.

 // main.js 
require(['math'], function (math){ 
　　alert(math.add(1,1)); 
});

require() 함수가 위 모듈을 로드하면 myLib.js 파일이 먼저 로드됩니다.

6. 비표준 모듈 로딩(심 사용 방법)

define(['myLib'], function(myLib){ 
　　function foo(){ 
　　　　myLib.doSomething(); 
　　} 
　　return {  //返回模块中的函数 
　　　　foo : foo 
　　}; 
});

// app.js 
 function sayHello(name){ 
 　alert('Hi '+name); 
}

함수를 내보내면 자바스크립트 클래스가 생성됩니다

하지만 my.js에 함수를 많이 작성하면 통합하기가 좀 번거롭습니다. 하나의 함수로 직접 내보내고 싶으신가요? 방법은 다음과 같습니다.

// main.js 
require.config({ 
　　shim: { 
　　　　'app': { //这个键名为要载入的目标文件的文件名，不能随便命名。 
　　　　　　exports: 'sayHello' //exports的值为my.js提供的 对外接口的名称 
　　　　} 
　　} 
}); 
 
require(['app'], function(sayHello) { 
 alert(sayHello()) 
})

//　app.js 
function sayHi(name){ 
 alert('Hi '+name); 
} 
function sayHello(name){ 
 alert('Hiello '+name); 
}

shim

// main.js 
　　require.config({ 
　　　　shim: { 
　　　　　　app: { 
　　　　　　　　init: function() { //这里使用init将2个接口返回 
　　　　　　　　　　return { 
　　　　　　　　　　　　sayHi: sayHi, 
　　　　　　　　　　　　sayHello: sayHello 
　　　　　　　　　　} 
　　　　　　　　} 
　　　　　　} 
　　　　} 
　　}); 
 
　　require(['app'], function(a) { 
　　　　a.sayHi('zhangsan'); 
　　　　a.sayHello('lisi'); 
　　});

을 순서대로 가져옵니다. 관련 권장 사항:

JavaScript에서 고급 모듈형 require.js의 구체적인 사용 방법 공유

고급 모듈형 require의 구체적인 사용 방법입니다. JavaScript의 Node.js 메소드에 대한 자세한 설명

Require.js 사용 방법 요약

위 내용은 Require.js 사용법 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!