다운로드 및 설치
프로젝트에서 Seajs를 사용하려면 Sea.js를 다운로드하여 프로젝트 어딘가에 넣는 것입니다.
SEAJS 프로젝트는 현재 GitHub에서 개최되며 홈페이지는 https://github.com/seajs/seajs/입니다. GIT 라이브러리의 빌드 디렉토리에서 Sea.js (압축) 또는 Sea-Debug.js (비 압축)를 다운로드 할 수 있습니다.
다운로드가 완료된 후 프로젝트의 해당 위치에 놓은 다음 페이지의 <cript> 태그를 통해 소개하면 SEAJS를 사용할 수 있습니다.
SEAJS 기본 개발 원칙
SEAJS의 특정 사용에 대해 논의하기 전에 먼저 SEAJS의 모듈 식 개념 및 개발 원칙을 소개하겠습니다.
JavaScript를 개발하기 위해 SEAJS를 사용하는 기본 원칙은 모든 것이 모듈입니다. SEAJS가 소개 된 후 JavaScript 코드를 작성하면 SEAJS의 모듈 개념이 객체 지향 클래스와 다소 유사합니다. 공개 데이터 및 메소드는 다른 모듈에서 호출 할 수 있습니다.
또한 각 모듈은 별도의 JS 파일, 즉 하나의 모듈에 해당하는 파일로 정의되어야합니다.
다음은 모듈의 쓰기 및 호출에 대해 설명합니다.
모듈의 정의 및 쓰기
모듈 정의 함수 정의
SEAJS에서는 "정의"기능을 사용하여 모듈을 정의하십시오. SEAJS 문서는 정의에 대한 완전한 참조가 없기 때문에 SEAJS 소스 코드를 읽고 Define이 세 가지 매개 변수를받을 수 있음을 발견했습니다.
다음과 같이 코드를 복사하십시오 :/**
* 모듈을 정의합니다.
* @param {string =} id 모듈 ID입니다.
* @param {array. | string =} 모듈 종속성을 DEP합니다.
* @param {function () | Object} Factory 모듈 팩토리 기능.
*/
fn.define = function (id, deps, factory) {
// 함수 코드…
}
위의는 SEAJS 소스 코드에서 발췌 한 내용입니다. 소스 코드를 읽은 후 Define의 다른 매개 변수 수에 대한 구문 분석 규칙은 다음과 같습니다.
매개 변수가 하나만 있으면 값을 공장에 할당하십시오.
두 개의 매개 변수가있는 경우 두 번째 매개 변수는 공장에 할당됩니다. 첫 번째는 DEPS에 할당됩니다. 그렇지 않으면 ID에 할당됩니다.
세 가지 매개 변수가있는 경우 각각 ID, DEPS 및 공장에 할당됩니다.
그러나 SEAJS의 공식 예를 포함하여 Define이 사용되는 거의 모든 장소는 다음 코드와 유사하게 하나의 공장 기능 만 전달됩니다.
코드 사본은 다음과 같습니다.
정의 (함수 (요구, 내보내기, 모듈) {
// 모듈 코드 ...
});
개인적으로 SEAJS 공식 예제의 표준을 따르고 매개 변수 정의로 모듈을 정의하는 것이 좋습니다. 그렇다면 ID와 DEP로 무엇을 할 것인가?
ID는 모듈의 식별 문자열입니다. Define은 하나의 매개 변수 만 있으면 기본적으로 ID 가이 JS 파일의 절대 경로에 할당됩니다. Define을 사용하여 example.com의 A.JS 파일에서 모듈을 정의하면이 모듈의 ID가 http://example.com/a.js에 할당됩니다. ID. DEP는 일반적으로 통과 할 필요가 없으며 필요한 모듈에 요구 사항을로드 할 수 있습니다.
공장 기능 공장 분석
공장 기능은 모듈의 본체와 초점입니다. 하나의 매개 변수 만 정의 (권장 쓰기)로 전달되면이 매개 변수는 공장 함수입니다.
1. 종속 모듈을 기록하는 데 사용되는 수용 모듈 로딩 기능.
2. 데이터 또는 메소드를 정의 할 때 Exports-Interface Point는 외부 통화에 노출됩니다.
3. 모듈-모듈의 메타 데이터.
이 세 가지 매개 변수는 사양을 표시하기 위해 필요에 따라 선택할 수 있습니다.
아래 모듈에 대해 이야기 해 봅시다. 모듈은 다음과 같이 모듈의 메타 정보를 저장하는 객체입니다.
1.module.id- 모듈 ID.
2.module.dependencies -이 모듈에 의존하는 모든 모듈의 ID 목록을 저장하는 배열.
3.module.exports-수출과 동일한 개체에 대한 포인트.
작성 모듈을위한 세 가지 모드
모듈을 정의하는 첫 번째 모드는 내보내기 기반 모드입니다.
코드 사본은 다음과 같습니다.
정의 (함수 (요구, 내보내기, 모듈) {
var a = 요구 사항 ( 'a');
var b = 요구 사항 ( 'b');
var data1 = 1; // 개인 데이터
var func1 = function () {// 개인 메소드
return a.run (data1);
}
Exports.data2 = 2;
Exports.func2 = function () {// public method
'안녕하세요'를 반환합니다.
}
});
위는 비교적 "정통"모듈 정의 모델입니다. 공개 데이터 및 내보내기 방법을 추가하는 것 외에도 다음 코드가 위의 코드와 동일한 기능을 갖는 것과 같이 모듈을 나타 내기 위해 객체를 직접 반환 할 수도 있습니다.
다음과 같이 코드를 복사하십시오. 정의 (function (require) {
var a = 요구 사항 ( 'a');
var b = 요구 사항 ( 'b');
var data1 = 1; // 개인 데이터
var func1 = function () {// 개인 메소드
return a.run (data1);
}
반품 {
data2 : 2,
func2 : function () {
'안녕하세요'를 반환합니다.
}
};
});
모듈 정의에 다른 코드가없고 하나의 객체 만 반환하는 경우 다음과 같은 단순화 된 쓰기 방법을 찾을 수 있습니다.
다음과 같이 코드를 복사하십시오. 정의 ({{
데이터 : 1,
func : function () {
'안녕하세요'를 반환합니다.
}
});
세 번째 방법은 순수한 JSON 데이터를 정의하는 모듈에 매우 적합합니다.
모듈의로드 및 참조
모듈 주소 지정 알고리즘
위에서 언급 한 바와 같이, 모듈은 JS 파일에 해당합니다. 로딩 기능에 필요한 모듈을 알려 주므로 문자열 식별에서 파일 경로에 대한 구문 분석이 있습니다. 실제 모듈이있는 곳. SEAJS는 다음 식별자를 지원합니다.
절대 주소 - JS 파일에 대한 절대 경로를 제공합니다.
좋다:
코드 사본은 다음과 같습니다. 요구 사항 ( "http : // example/js/a");
그것은 http : //example/js/a.js를로드하는 것을 의미합니다.
상대 주소 - 상대 호출을 사용하여 모듈을 찾아로드 함수가있는 JS 파일의 상대 주소를 찾으십시오.
예를 들어 http : //example/js/b.js에로드하십시오
코드 사본은 다음과 같습니다. 요구 사항 ( "./ C");
그런 다음 http : //example/js/c.js를로드하십시오.
기본 주소 - 로딩 문자열 식별자가 절대 경로가 아니거나 "./"로 시작하지 않으면 SEAJS의 글로벌 구성에서 "기본"에 비해 다루어집니다.
위의 모듈을로드 할 때는 접미사 이름 ".js"를 전달할 필요가 없으며 Seajs는 자동으로 ".js"를 추가합니다. 그러나 다음 세 가지 사례는 추가되지 않습니다.
다음과 같은 CSS를로드 할 때
코드 사본은 다음과 같습니다. 요구 사항 ( "./ Module1-Style.css");
경로에 "?"가 포함 된 경우 :
코드 사본은 다음과 같습니다. require (<a href = "http : //example/js/a.json? cb = func"> http : //example/js/a.json? cb = func </a> );
경로가 "#"로 끝나면 :
코드 사본은 다음과 같습니다. 요구 사항 ( "http : //example/js/a.json#");
다른 응용 프로그램 시나리오에 따르면, SEAJS는 모듈 로딩에 대한 세 가지 API, 즉 Seajs.use, 요구 및 요구 사항을 제공합니다.
seajs.use
Seajs.use는 주로 입력 모듈을로드하는 데 사용됩니다. 입력 모듈은 C 프로그램의 주요 함수와 동일하며 전체 모듈 종속성 트리의 루트이기도합니다. 위의 작은 예제에서 init는 입력 모듈입니다. seajs.use의 사용은 다음과 같습니다.
코드 사본은 다음과 같습니다.
// 단일 모드
seajs.use ( './ a');
// 콜백 모드
seajs.use ( './ a', function (a) {
a.run ();
});
// 다중 모드 모드
seajs.use ([ './ a', './b'], function (a, b) {
a.run ();
b.run ();
});
일반적으로 Seajs.use는 페이지에 입력 모듈을로드하는 데 사용됩니다. 입력 모듈이 하나만 있으면 SEA.JS를 소개하는 스크립트 태그에 "Data-Main"속성을 추가하여 Seajs.use를 생략 할 수 있습니다. 다음 글쓰기 방법 :
코드 사본은 다음과 같습니다.
<! doctype html>
<html lang = "zh-cn">
<헤드>
<meta charset = "utf-8">
<title> tinyapp </title>
</head>
<body>
<p> </p>
<script src = "./ sea.js"data-main = "./ init"> </script>
</body>
</html>
이러한 글쓰기 방식은 HTML을 더 간결하게 만듭니다.
필요하다
필수는 SEAJS의 기본 모듈 로딩 방법입니다. 하나의 모듈에 필요한 경우 일반적으로 요구 사항이 있습니다.
코드 사본은 다음과 같습니다. var m = require ( '/path/to/module/file');
다음은 SEAJS의 자동 로딩 메커니즘에 대한 간략한 소개입니다. 위에서 언급했듯이 Seajs를 사용한 후 Sea.js를 포함하십시오. Seajs는 먼저 항목 모듈을 다운로드 한 다음 일반 표현식을 사용하여 입력 모듈을 따라 코드의 모든 요구 사항을 일치시킨 다음 요구 사항의 파일 경로 식별에 따라 해당 JS 파일을 다운로드 한 다음 다운로드 된 JS 파일을 반복합니다. 전체 프로세스는 그래프의 트래버스 작동과 유사합니다 (교차 사이클 종속성이있을 수 있기 때문에 전체 종속성 데이터 구조는 트리가 아닌 그래프입니다).
위의 요점을 이해하면 다음 규칙을 이해하기 쉽습니다.
요구 사항으로 전달 된 경로 식별자는 예를 들어 요구 사항이 아닌 문자열 문자 여야합니다.
코드 사본은 다음과 같습니다. 요구 사항 ( '모듈' + '1');
require ( 'module'.tolowercase ());
SEAJS는 해당 JS 파일을 다운로드하기 위해 올바른 정규 경기를 수행하지 못하게됩니다.
필요합니다
위에서 언급했듯이 SEAJS는 HTML 페이지를 열면 정적 분석을 통해 필요한 모든 JS 파일을 한 번에 기록합니다.
다음과 같이 코드를 복사하십시오. require.async ( '/path/to/module/file', function (m) {
// 콜백 코드 ...
});
이러한 방식 으로이 모듈을 사용하는 경우에만 해당 JS 파일이 다운로드되어 JavaScript 코드의 주문형로드를 실현합니다.
SEAJS의 글로벌 구성
SEAJS는 전역 구성을 설정하고 전역 구성을 나타내는 구성 객체를 수신 할 수있는 Seajs.config 메소드를 제공합니다. 특정 사용 방법은 다음과 같습니다.
다음과 같이 코드를 복사하십시오 : seajs.config ({{
기본 : 'Path/to/jslib/',
별칭 : {
'앱': '경로/to/app/'
},
숯불 : 'UTF-8',
타임 아웃 : 20000,
디버그 : 거짓
});
여기서베이스는 기본 주소 지정 동안 기본 주소 경로를 나타냅니다. 예를 들어, Base는 http://example.com/js/3-party/로 설정됩니다.
코드 사본은 다음과 같습니다. var $ = require ( 'jquery');
http://example.com/js/3-party/jquery.js가로드됩니다.
별칭은 더 긴 공통 경로에 대한 약어를 설정할 수 있습니다.
charset은 JS를 다운로드 할 때 스크립트 태그의 charset 속성을 나타냅니다.
타임 아웃은 파일을 밀리 초로 다운로드하는 최대 시간을 나타냅니다.
디버그는 디버그 모드에서 작동하는지 여부를 나타냅니다.
SEAJS가 기존 JS 라이브러리와 어떻게 작동하는지
SEAJS가있는 jQuery와 같은 기존 JS 라이브러리를 사용하려면 SEAJS의 모듈 정의 규칙에 따라 기존 라이브러리를 캡슐화하십시오. 예를 들어, 다음은 jQuery의 캡슐화 방법입니다.
다음과 같이 코드를 복사합니다. 정의 (function () {
// {{{jQuery 원본 코드가 시작됩니다
/*!
* JQuery JavaScript 라이브러리 v1.6.1
* http://jquery.com/
*
* Copyright 2011, John Resig
* MIT 또는 GPL 버전 2 라이센스에 따라 이중 라이센스.
* http://jquery.org/license
*
* sizzle.js 포함
* http://sizzlejs.com/
* Copyright 2011, Dojo Foundation
* MIT, BSD 및 GPL 라이센스에 따라 출시되었습니다.
*
* 날짜 : 5 월 12 일 15:04:36 2011-0400
*/
// ...
//}}} jQuery 원본 코드가 끝납니다
return $ .noconflict ();
});
SEAJS 프로젝트 포장 및 배포
Seajs는 원래 포장 된 배포 도구 SM을 통합하여 키스를 조금 더 키스로 만들었습니다. SPM의 핵심 아이디어는 모든 모듈의 코드를 병합하고 압축 한 다음 SEAJS 자체의 특성으로 인해 항목 모듈로 병합하는 것입니다. . 그러나 SPM은 공식 버전에 대해 출시되지 않았 으므로이 기사는 관심있는 친구가 Github 프로젝트 https.com/seajs/spm/을 참조 할 수 없습니다.
실제로, JS 병합 및 각 프로젝트에 사용되는 압축 도구가 다르기 때문에 SPM은 각 프로젝트에 완전히 적합하지 않을 수 있습니다. SEAJS의 원리를 이해 한 후 프로젝트의 특성과 일치하는 병합 및 포장 스크립트를 작성할 수 있습니다.