RequireJS 용법 해석
19413 단어 작은 플러그 인
requirejs 에 대한 설명:
RequireJS 는 아주 작은 JavaScript 모듈 불 러 오 는 프레임 워 크 로 AMD 규범 의 가장 좋 은 실현 자 중 하나 입 니 다.최신 버 전의 RequireJS 압축 후 14K 에 불과 해 매우 가볍다 고 할 수 있다.또한 다른 프레임 워 크 와 협동 하여 작업 할 수 있 으 며, RequireJS 를 사용 하면 전단 코드 의 질 을 향상 시 킬 수 있다.
주요 특징:
2. define 과 require
전체 require 에서 주요 한 방법 은 require 와 define 이다.
(1) define 정의 모듈
함수 방법:
define(id?, dependencies?, factory)
모두 세 개의 인자 가 있 습 니 다. id 가 정의 하 는 모듈 이름 은 보통 config 에서 정의 합 니 다.dependencies 가 필요 한 의존 모듈;factory 를 정의 하 는 모듈 입 니 다.그 중에서 factory 는 필수 이 고, 다른 두 개 는 필수 항목 이 아니다.위의 매개 변수 설정 을 통 해 알 수 있 듯 이 define 는 모두 두 가지 로 나 뉘 는데 첫 번 째 는 독립 모듈 로 다른 모듈 에 의존 하지 않 습 니 다.두 번 째 는 비 독립 모듈 로 다른 모듈 에 의존 해 야 한다.주: define 정의 모듈 은 대상 에 국한 되 지 않 고 모든 값 을 되 돌려 줍 니 다.
독립 모듈
하나의 대상 을 통 해 간단 한 정의:
define({
name: "aimee",
method1: function() {},
method2: function() {}
})
* 주: 이렇게 정 의 된 대상 이 여러 곳 에서 인용 되면 인용 한 곳 은 이 대상 의 인용 을 공유 합 니 다.다른 하 나 는 하나의 함 수 를 통 해 던 전 대상 모듈 을 정의 합 니 다:
define(function () {
//Do setup work here
return {
name: "aimee",
method1: function() {},
method2: function() {}
}
})
이런 자유도 가 더욱 높 아서 함수 에서 다른 논 리 를 처리 할 수 있다.
비 독립 모듈 은 의존 모듈 을 도입 하여 다른 모듈 에 불 러 오고 자신의 모듈 을 정의 해 야 합 니 다. 이때 돌아 오 는 method 방법 에는 모듈 1 과 모듈 2 의 함수 호출 이 포함 되 어 있 습 니 다.
define(['module1', 'module2'], function(m1, m2) {
return {
method: function() {
m1.methodA();
m2.methodB();
}
}
})
여러 개 를 정의 할 때 function 함수 에서 require 기본 매개 변 수 를 받 아들 여 처리 할 수 있 습 니 다.
define(
[ 'dep1', 'dep2', 'dep3', 'dep4', 'dep5', 'dep6', 'dep7', 'dep8'],
function(dep1, dep2, dep3, dep4, dep5, dep6, dep7, dep8){
...
}
);
이렇게 써 도 돼 요.
define(
function (require) {
var dep1 = require('dep1'),
dep2 = require('dep2'),
dep3 = require('dep3'),
dep4 = require('dep4'),
dep5 = require('dep5'),
dep6 = require('dep6'),
dep7 = require('dep7'),
dep8 = require('dep8');
...
}
})
(2) require 호출 모듈
define 을 통 해 모듈 을 정의 한 후 require 를 사용 하여 모듈 을 호출 할 수 있 습 니 다.
require(dependencies?, factory, errorCallback)
require 의 매개 변 수 는 dependencies 가 모듈 에 의존 하기 때문에 필수 가 아 닙 니 다.factory 처리 함수, 필수;error Callback 은 잘못된 리 셋 입 니 다. 필요 하지 않 습 니 다.
require(
['foo', 'bar'],
function ( foo, bar ) {
foo.doSomething();
bar.doSomething();
}，
function(err){
console.log(err)
}
);
상기 예 를 들 어 foo 와 bar 모듈 로 딩 이 끝 난 후에 함수 에서 foo 와 bar 를 실행 하 는 방법 입 니 다. 오류 가 있 으 면 잘못된 리 셋 함수 에 가서 error 대상 을 매개 변수 로 받 아들 입 니 다.
전역 error 이벤트 감청, 위의 방법 으로 포착 되 지 않 은 모든 오류 가 이 감청 함 수 를 촉발 합 니 다.
requirejs.onError = function (err) {
// ...
};
define 에서 require 비동기 로드
예 를 들 어 define 은 모듈 을 정 의 했 습 니 다. 그 중에서 foobar 는 foo 와 bar 모듈 에 의존 하 는 방법 이 필요 합 니 다. require 는 비동기 이기 때문에 이때 return 의 결 과 는 isReady 를 통 해 불 러 올 지 여 부 를 판단 할 수 있 습 니 다.
define(function ( require ) {
var isReady = false, foobar;
require(['foo', 'bar'], function (foo, bar) {
isReady = true;
foobar = foo() + bar();
});
return {
isReady: isReady,
foobar: foobar
};
});
promise 로 이 루어 질 수 있어 요.
define(function ( require ) {
var obj;
require(['foo', 'bar'], function (foo, bar) {
isReady = true;
obj.resolve({foobar:foo() + bar()});
});
return obj.promise()
});
위의 코드 는 promise 대상 을 되 돌려 줍 니 다. 이 대상 의 then 방법 으로 다음 동작 을 지정 할 수 있 습 니 다.
소결 require 와 define 함수 내부 메커니즘 의 차이 가 많 지 않 습 니 다. 다른 점 은 define 의 리 턴 함수 입 니 다. return 문 구 를 모듈 대상 으로 되 돌려 야 define 가 정의 하 는 모듈 이 다른 모듈 에 의 해 인 용 될 수 있 습 니 다.require 의 반전 함 수 는 return 문 구 를 필요 로 하지 않 습 니 다.
3. requirejs config 설정
paths: 모듈 의 인용 경 로 를 설정 할 수 있 습 니 다. 로 컬 상대 경로 일 수도 있 고 외부 경로 일 수도 있 습 니 다. 여러 경 로 를 제공 할 수 있 습 니 다. 첫 번 째 가 실 패 했 을 때 두 번 째 경 로 를 사용 합 니 다.간단 한 설정 은 다음 과 같 습 니 다.
require.config({
paths: {
jquery: [
'//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js',
'lib/jquery'
]
}
});
baseUrl: baseUrl 에서 디 렉 터 리 를 지정 한 다음 requirejs 는 이 디 렉 터 리 를 기반 으로 의존 하 는 모듈 을 찾 습 니 다.config 를 통 해 설정 할 수도 있 고 requirejs 파일 의 data - main 속성 정 의 를 도입 할 수도 있 습 니 다.
shim: 스 크 립 트 / 모듈 밖 에 설정 할 때 RequireJS 함수 의존 을 사용 하지 않 고 함 수 를 초기 화 합 니 다.underscore 가 RequireJS 정 의 를 사용 하지 않 았 다 고 가정 하지만 RequireJS 를 통 해 사용 하려 면 설정 에서 shim 으로 정의 해 야 합 니 다.
<script src="js/require.js" data-main="js/main.js"></script>
혹은
requirejs.config({
baseUrl: 'js'
});
4. 플러그 인
requirejs 는 다양한 플러그 인 을 제공 합 니 다. 구체 적 인 플러그 인 정 보 는 문서 플러그 인 형식 을 볼 수 있 습 니 다.
define([
'backbone',
'text!templates.html'
], function( Backbone, template ){
// ...
});
이상 은 text 플러그 인 입 니 다. 모듈 이름 앞 에 text 를 추가 합 니 다!플러그 인 형식 을 지정 합 니 다. 리 셋 함수 에서 템 플 릿 을 통 해 템 플 릿 의 내용 을 가 져 올 수 있 습 니 다. 형식 은 문자열 입 니 다.
5. 최적화 기 r. js
requireJS 는 node. js 기반 명령 행 도구 r. js 를 제공 하여 여러 개의 js 파일 을 압축 합 니 다.웹 페이지 의 HTTP 요청 수 를 줄 이기 위해 여러 모듈 파일 을 하나의 스 크 립 트 파일 로 압축 하 는 것 이 주요 역할 이다.구체 적 실현 은 공식 문 서 를 참고 할 수 있다.
참고:
공식 문서 api: requirejs. org 공식 문서 git: requirejs - git
좋은 웹페이지 즐겨찾기
