일반 JS 로딩의 단점
js가 로드된 후 인터페이스가 렌더링을 시작해야 합니다
js 간에 의존성이 있다면, 의존성에 따라 순서대로 로드해야 합니다. 의존성이 복잡하면 코드를 작성하고 유지하는 것이 더 번거롭습니다
그래서 require.js 대중의 목소리로 만들어졌습니다.
require.js의 역할
페이지 반응 없음을 피하기 위해 js의 비동기 로딩을 구현하세요
코드 작성과 유지보수를 용이하게 하기 위해 모듈 간 의존성을 관리하세요
require.js 로딩
먼저, [공식 웹사이트]에 가서 최신 버전을 다운로드하세요 http://requirejs.org/
다운로드하거나 복사한 require.js을 프로젝트 디렉터리에 보관하세요
원하는 페이지에 require.js 불러오세요
Direct load: write <scrip{filter}t src="js/require.js"></scrip{filter}t>
Asynchronous loading: <scrip{filter}t src="js/require.js" defer async="true" ></scrip{filter}t>
참고: 비동기란 웹페이지가 반응하지 않게 하려면 이 파일을 비동기적으로 로드해야 한다는 뜻입니다. IE는 비동기를 지원하지 않으므로, defer 속성을 로드합니다;
require.js가 로드되면 다음 단계는 자체 코드를 불러오는 것입니다. 예를 들어, 우리 자신의 코드 파일이 main.js되어 있고, 역시 js 디렉터리 아래에 위치해 있다고 가정해 봅시다. 그러니 다음과 같이 작성하세요: <scrip{filter}t src="js/require.js" data-main="js/main"></scrip{filter}t>
data-main 속성의 기능은 웹 프로그램의 메인 모듈을 지정하는 것입니다. 위 예시에서 이 파일은 js 디렉터리 require.js main.js 먼저 로드됩니다. 기본 파일 접미사require.js js이기 때문에 메인으로 약칭main.js 수 있습니다.
메인 모듈 작성법
앞 섹션의 main.js을 메인 모듈이라고 부릅니다. 즉, 전체 모듈의 진입 방식을 의미합니다.
글쓰기 방법 main.js
다른 모듈에 의존하지 않고 main.js에 직접 작성된 메서드
main.function()
메인 모듈은 다른 모듈에 의존하므로 require() 함수를 사용하세요
main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
여기 코드 좀 있어요
});
require() 함수는 두 가지 매개변수를 받아들입니다:
첫 번째 매개변수는 의존할 모듈을 나타내는 배열입니다
두 번째 매개변수는 앞에서 지정한 모든 모듈이 로드된 후 호출되는 콜백 함수입니다. 추가된 모듈들은 매개변수 형태로 전달되어 콜백 함수 내에서 사용할 수 있습니다.
모듈 부하
예시: 주 모듈(main.js)의 종속 모듈이 ['jquery', 'crypto-js', 'anything'이라면]
기본 로딩
이 세 종속 모듈의 파일이 같은 디렉터리에 jquery.js, crypto-js.js, anything.js, main.js 있다면 앞서 언급한 대로 자동으로 로드될 수 있습니다
구성 load require.config()
require.config()는 메인 모듈(main.js)의 머리에 작성됩니다.
AMD 모듈이 작성되는 방식
require.js AMD 사양을 적용한 로드된 모듈입니다. 즉, 모듈은 AMD의 규정에 따라 작성되어야 합니다.
구체적으로, 모듈은 특정 define() 함수로 정의되어야 합니다. 모듈이 다른 모듈에 의존하지 않는다면, define() 함수에서 직접 정의할 수 있습니다
이제 수학 모듈을 정의하는 math.js 파일이 있다고 가정해 봅시다. 그다음, math.js 이렇게 쓰세요:
로딩 방법은 다음과 같습니다:
모듈이 다른 모듈에도 의존한다면, define() 함수의 첫 번째 인자는 모듈의 의존성을 나타내는 배열이어야 합니다.
require() 함수가 위 모듈을 로드할 때, 먼저 파일을 로드myLib.js 것입니다.
비AMD 모듈 로드
시장에 나와 있는 많은 모듈이 AMD 규격을 충족하지 못하지만, require.js 로드할 수 있습니다
이 모듈들이 로드되기 전에, 몇 가지 특성을 정의하기 위해 require.config()로 설정해야 합니다
예를 들어, noamd.js와 noamddeps.js 두 모듈 모두 비AMD 모듈이며, 로드하려면 특성을 정의해야 합니다:
require.js 경로 속성 외에도, 비AMD 모듈을 구성하기 위한 shim 속성도 포함하는 구성 객체를 수용합니다.
구체적으로, 각 모듈은 다음을 정의합니다:
- exports 값(출력 변수 이름): 외부에서 호출될 때 모듈 이름을 나타냅니다
- DEPS 배열: 이 모듈의 종속성을 나타냅니다
예를 들어, jQuery 플러그인은 다음과 같이 정의할 수 있습니다:
require.js 플러그인
require.js 또한 특별 기능을 구현한 다양한 플러그인을 제공합니다
domready 플러그인은 페이지 DOM 구조가 로드된 후에도 콜백 함수가 실행되도록 허용합니다:
텍스트 및 이미지 플러그인으로, require.js가 텍스트와 이미지 파일을 불러올 수 있게 해줍니다:
유사한 플러그인으로는 JSON과 MDOWN이 JSON과 Markdown 파일을 불러오는 데 있습니다.
|
게시됨 2017. 10. 11. 오전 9:31:50
|
|
|
