Javascript 모듈러 프로그래밍(3) require.js의 사용법과 기능 소개_기본지식

본 시리즈의 1부와 2부에서는 Javascript 모듈 프로토타입과 이론적 개념을 소개했으며, 오늘은 이를 실제로 사용하는 방법을 소개합니다.
저는 매우 인기 있는 라이브러리 require.js를 사용합니다.

1. require.js를 사용하는 이유는 무엇인가요?
초창기에는 모든 Javascript 코드가 하나의 파일에 작성되어 있었는데, 이 파일 하나만 로드하면 충분했습니다. 나중에는 코드가 점점 많아져서 하나의 파일로는 더 이상 부족해 여러 파일로 나누어 순차적으로 로드해야 했습니다. 많은 분들이 아래 웹페이지 코드를 보셨으리라 믿습니다.

코드 복사 코드는 다음과 같습니다.

　
　
　
　
　

이 코드는 여러 js 파일을 순차적으로 로드합니다.
이런 글쓰기 방식에는 큰 단점이 있습니다. 우선, 로드할 때 브라우저는 웹 페이지 렌더링을 중지합니다. 더 많은 파일이 로드될수록 웹 페이지의 응답이 길어집니다. 둘째, js 파일 간의 종속성으로 인해 로드 순서가 엄격하게 보장되어야 합니다. 위의 예처럼) 1.js가 2.js 앞에 와야 하며, 의존성이 가장 큰 모듈을 마지막에 로드해야 합니다. 의존성이 복잡하면 코드 작성 및 유지 관리가 어려워집니다.
require.js는 이 두 가지 문제를 해결하기 위해 탄생했습니다 :

(1) 웹페이지 응답 손실을 방지하기 위해 js 파일의 비동기 로딩을 구현합니다.
( 2) 코드 작성 및 유지 관리를 용이하게 하기 위해 모듈 간의 종속성을 관리합니다.
2. require.js 로딩
require.js를 사용하기 위한 첫 번째 단계는 공식 홈페이지에서 최신 버전을 다운로드하는 것입니다.
다운로드 후 js 하위 디렉토리에 위치하여 로딩이 가능한 것으로 가정합니다.

코드 복사 코드는 다음과 같습니다.

　

어떤 사람들은 이 파일을 로드하면 웹페이지가 응답하지 않을 수도 있다고 생각할 수도 있습니다. 두 가지 해결책이 있습니다. 하나는 웹 페이지 하단에 로드하는 것이고, 다른 하나는 다음과 같이 작성하는 것입니다.

코드 복사 코드는 다음과 같습니다.

　

async 속성은 이 파일을 나타냅니다. 웹 페이지가 응답하지 않는 것을 방지하려면 비동기식으로 로드되어야 합니다. IE는 이 속성을 지원하지 않고 defer만 지원하므로 defer도 작성합니다.

require.js를 로드한 후 다음 단계는 자체 코드를 로드하는 것입니다. 우리 자신의 코드 파일이 main.js이고 js 디렉터리에도 있다고 가정합니다. 그럼 다음과 같이 작성하시면 됩니다.

코드 복사 코드는 다음과 같습니다.

　< ; script src="js/require.js" data-main="js/main">

data-main 속성은 웹 프로그램. 위의 예에서는 js 디렉터리 아래의 main.js입니다. 이 파일은 require.js에 의해 먼저 로드됩니다. require.js의 기본 파일 확장자는 js이므로 main.js를 main으로 축약할 수 있습니다.
3. 메인 모듈 작성 방법
이전 섹션에서는 main.js를 "메인 모듈"이라고 부르는데, 이는 전체 웹 페이지의 진입 코드를 의미합니다. C 언어의 main() 함수와 약간 비슷하며 모든 코드가 여기에서 실행되기 시작합니다.
main.js를 작성하는 방법을 살펴보겠습니다.
우리 코드가 다른 모듈에 의존하지 않는다면 자바스크립트 코드를 직접 작성할 수 있습니다.
　 // main.js

코드 복사 코드는 다음과 같습니다.

경고 ("로드 성공!")

그러나 이 경우 require.js를 사용할 필요가 없습니다. 매우 일반적인 상황은 메인 모듈이 다른 모듈에 의존하는 경우이며, 이 경우 AMD 사양에 정의된 require() 함수를 사용해야 합니다.
　 // main.js

코드 복사 코드는 다음과 같습니다.

require ([' moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
　　　 // 여기에 일부 코드
　})

require() 함수는 두 개의 매개변수를 허용합니다. 첫 번째 매개변수는 의존하는 모듈을 나타내는 배열입니다. 위의 예는 ['moduleA', 'moduleB', 'moduleC']입니다. 즉, 주 모듈은 이 세 가지 모듈에 의존합니다. 두 번째 매개변수는 콜백입니다. 현재는 위에 지정된 모든 모듈이 성공적으로 로드된 후에 호출됩니다. 로드된 모듈은 이 함수에 매개변수로 전달되므로 이러한 모듈은 콜백 함수 내에서 사용할 수 있습니다.

require()는 moduleA, moduleB 및 moduleC를 비동기식으로 로드하며 브라우저는 응답을 잃지 않습니다. 지정된 콜백 함수는 이전 모듈이 성공적으로 로드된 후에만 실행되어 종속성 문제를 해결합니다.

아래에서는 실제 사례를 살펴보겠습니다.
메인 모듈이 jquery, 밑줄, 백본의 세 가지 모듈에 의존한다고 가정하면 main.js는 다음과 같이 작성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
　　 // 여기에 일부 코드
　} );

require.js는 먼저 jQuery, 밑줄 및 백본을 로드한 다음 콜백 함수를 실행합니다. 콜백 함수에는 메인 모듈의 코드가 작성되어 있습니다.
4. 모듈 로딩
이전 섹션의 마지막 예에서 메인 모듈의 종속 모듈은 ['jquery', 'underscore', 'backbone']입니다. 기본적으로 require.js는 이 세 가지 모듈이 main.js와 동일한 디렉터리에 있고 파일 이름은 jquery.js, underscore.js 및 backbone.js라고 가정하고 자동으로 로드합니다.

require.config() 메소드를 사용하여 모듈의 로딩 동작을 사용자 정의할 수 있습니다. require.config()는 메인 모듈(main.js)의 선두에 작성됩니다. 매개변수는 객체이고, 이 객체의 paths 속성은 각 모듈의 로딩 경로를 지정합니다.

코드 복사 코드는 다음과 같습니다.

require.config({
경로 : {
"jquery": "jquery.min",
"underscore": "underscore.min",
"backbone": "backbone.min"
　})

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

코드 복사 코드는 다음과 같습니다.

require.config({
경로 : {
"jquery": "lib/jquery.min",
"밑줄": "lib/underscore.min",
"backbone": "lib/backbone.min"
}
});

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

코드 복사 코드는 다음과 같습니다.

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

모듈이 다른 호스트에 있는 경우 다음과 같이 URL을 직접 지정할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

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


require.js에서는 각 모듈이 별도의 js 파일이어야 합니다. 이 경우 여러 모듈이 로드되면 여러 HTTP 요청이 발행되며 이는 웹 페이지 로딩 속도에 영향을 미칩니다. 따라서 require.js는 모듈이 배포된 후 이 도구를 사용하여 여러 모듈을 하나의 파일로 병합하여 HTTP 요청 수를 줄일 수 있습니다.
5. AMD 모듈 작성 방법
require.js가 로드하는 모듈은 AMD 사양을 채택합니다. 즉, 모듈은 AMD 규정에 따라 작성되어야 합니다.
구체적으로 모듈은 특정 정의() 함수를 사용하여 정의해야 합니다. 모듈이 다른 모듈에 의존하지 않는 경우에는 Define() 함수에서 직접 정의할 수 있습니다.

수학 모듈을 정의하는 math.js 파일이 있다고 가정합니다. 그러면 math.js는 이렇게 작성해야 합니다.
　 // 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));
　}) ;

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

코드 복사 코드는 다음과 같습니다.

define(['myLib'], function (myLib) {
Function foo(){
myLib.doSomething();
return {
return { foo : foo
})
require() 함수가 위 모듈을 로드하면 myLib.js 파일이 먼저 로드됩니다.

6. 비표준 모듈 로딩

이론적으로 require.js가 로딩하는 모듈은 AMD 사양에 따라 Define() 함수로 정의된 모듈이어야 합니다. 그러나 실제로 일부 인기 있는 함수 라이브러리(예: jQuery)는 이미 AMD 사양을 준수하지만 더 많은 라이브러리는 그렇지 않습니다.
그러면 require.js가 비표준 모듈을 로드할 수 있나요?
답은 '그렇다'입니다. require()를 사용하여 이러한 모듈을 로드하기 전에 먼저 require.config() 메서드를 사용하여 일부 특성을 정의해야 합니다.
예를 들어 밑줄과 백본 두 라이브러리는 AMD 사양을 사용하여 작성되지 않았습니다. 이를 로드하려면 먼저 해당 특성을 정의해야 합니다.


코드 복사

코드는 다음과 같습니다. require.config({ shim : { | '밑줄': {

내보내기: '_'

},
'백본': {
'jquery'],
뼈 }
　　}
　});


require.config()는 앞서 언급한 paths 속성 외에도 shim 속성을 특별히 사용합니다. 호환되지 않는 모듈을 구성합니다. 특히 각 모듈은 (1) 외부에서 호출될 때 모듈의 이름을 나타내는 내보내기 값(출력 변수 이름), (2) 모듈의 종속성을 나타내는 deps 배열을 정의해야 합니다.
예를 들어 jQuery 플러그인은 다음과 같이 정의할 수 있습니다.

코드 복사

코드는 다음과 같습니다. shim: { 　 'jquery.scroll': { 　　 deps: ['jquery'], 　 내보내기: 'jQuery.fn.scroll'

　　}

　}



7. require.js 플러그인

require.js는 특정 기능을 구현하는 일련의 플러그인도 제공합니다.
domready 플러그인을 사용하면 페이지 DOM 구조가 로드된 후 콜백 기능을 실행할 수 있습니다.

코드 복사

코드는 다음과 같습니다. 　require(['domready!'], function (doc ){ 　　 // DOM이 준비되면 호출됩니다 　})

텍스트 및 이미지 플러그인을 사용하면 require.js가 텍스트 및 이미지 파일을 로드할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

define([
　text!review .txt ',
　'image!cat.jpg'
　　],
　　function(review,cat){
　　　 console.log(review)
　　document.body.appendChild(cat) ;
　　}
　)

유사한 플러그인에는 json 파일과 마크다운 파일을 로드하는 데 사용되는 json 및 mdown이 포함됩니다.
(끝)