SeaJS 입문 튜토리얼 시리즈: SeaJS 사용(2)_Seajs

다운로드 및 설치

프로젝트에서 SeaJS를 사용하려면 sea.js를 다운로드하여 프로젝트 어딘가에 넣기만 하면 됩니다. SeaJS 프로젝트는 현재 GitHub에서 호스팅되고 있으며, 홈페이지는 https://github.com/seajs/seajs/입니다. git 라이브러리의 빌드 디렉터리에서 sea.js(압축) 또는 sea-debug.js(압축되지 않음)를 다운로드할 수 있습니다. 다운로드 후 프로젝트의 해당 위치에 배치한 후 페이지의 태그를 통해 소개하시면 SeaJS를 사용하실 수 있습니다.

SeaJS 기본 개발 원리

SeaJS의 구체적인 사용법을 논의하기 전에 먼저 SeaJS의 모듈 개념과 개발 원칙을 소개하겠습니다. SeaJS를 사용하여 JavaScript를 개발하는 기본 원칙은 모든 것이 모듈이라는 것입니다. SeaJS가 도입된 후 JavaScript 코드 작성은 차례로 모듈 작성이 됩니다. SeaJS의 모듈 개념은 객체 지향의 클래스와 다소 유사합니다. 모듈은 데이터와 메소드를 가질 수 있으며 데이터와 메소드는 공개 또는 비공개로 정의될 수 있습니다. . 공용 데이터 및 메소드는 다른 모듈에서 호출될 수 있습니다. 또한 각 모듈은 별도의 js 파일에 정의되어야 합니다. 즉, 하나는 하나의 모듈에 해당합니다. 모듈 작성 및 호출 방법은 아래와 같습니다.

모듈 정의 및 작성

모듈 정의 함수 정의 "define" 함수는 SeaJS에서 모듈을 정의하는 데 사용됩니다. SeaJS 문서에는 정의에 대한 완전한 참조가 없기 때문에 SeaJS 소스 코드를 읽었으며 정의가 세 가지 매개변수를 받을 수 있다는 것을 알았습니다:

코드 복사 코드는 다음과 같습니다. /** * 모듈을 정의합니다. * @param {string=} id 모듈 ID입니다. * @param {Array.|string=} deps 모듈 종속성입니다. * @param {function( )|Object} Factory 모듈 팩토리 함수입니다. */ fn.define = function(id, deps, Factory) { //함수 코드… } 위는 SeaJS 소스코드에서 추출한 내용입니다. 정의할 수 있는 매개변수는 모듈 ID, 종속 모듈 배열, 팩토리 함수입니다. 소스 코드를 읽은 후 다양한 매개변수 수에 대한 정의의 구문 분석 규칙이 다음과 같다는 것을 알았습니다. 매개변수가 하나만 있는 경우 이를 공장에 할당합니다. 두 개의 매개변수가 있는 경우 두 번째 매개변수는 Factory에 할당되고, 첫 번째 매개변수가 배열이면 deps에 할당되고 그렇지 않으면 id에 할당됩니다. 3개의 매개변수가 있는 경우 각각 id, deps, Factory에 할당합니다. 그러나 SeaJS의 공식 예제를 포함하여 정의가 사용되는 거의 모든 곳에서는 다음 코드와 유사한 팩토리 함수만 전달합니다.

복사 code 코드는 다음과 같습니다. define(function(require,exports, module) { //모듈의 코드... }); 개인적으로는 SeaJS 공식 예제의 표준을 따르고 매개변수 정의로 모듈을 정의하는 것이 좋습니다. 그렇다면 id와 deps는 어떻게 될까요? id는 모듈의 식별 문자열입니다. 정의에 매개변수가 하나만 있는 경우 id에는 기본적으로 이 js 파일의 절대 경로가 할당됩니다. example.com 아래의 a.js 파일에서 모듈을 정의하기 위해 정의가 사용되는 경우 이 모듈의 ID는 http://example.com/a.js에 할당됩니다. 특별한 필요가 있습니다. 일반적으로 deps는 전달할 필요가 없습니다. 사용해야 하는 모듈은 require를 사용하여 로드할 수 있습니다.

공장 기능 공장 분석

팩토리 기능은 모듈의 본체이자 초점입니다. 정의에 하나의 매개변수만 전달되는 경우(권장 작성 방법), 이 매개변수는 팩토리 함수입니다. 이때 팩토리 함수의 세 매개변수는 다음과 같습니다. 1.require - 모듈 로딩 함수, 종속 모듈을 기록하는 데 사용됩니다. . 2.exports - 데이터나 메서드를 정의하는 인터페이스 지점은 외부 호출에 노출됩니다. 3.module——모듈 메타데이터. 필요에 따라 이 세 가지 매개변수를 표시하고 지정할 수 있습니다. 모듈에 대해 이야기해보겠습니다. 모듈은 다음과 같이 모듈의 메타정보를 저장하는 객체입니다. 1.module.id - 모듈의 ID입니다. 2.module.dependent - 이 모듈이 의존하는 모든 모듈의 ID 목록을 저장하는 배열입니다. 3.module.exports - 내보내기와 동일한 개체를 가리킵니다.

3가지 쓰기 모듈 모드

모듈 정의의 첫 번째 모드는 내보내기를 기반으로 합니다.

코드 복사 코드는 다음과 같습니다. define(function(require,exports, module) { var a = require('a'); //모듈 소개 var b = require('b'); // b 모듈 소개

var data1 = 1; //프라이빗 데이터

var func1 = function() { //프라이빗 메서드

exports.data2 = 2; //공개 데이터

imports.func2 = function() { //공개 메소드 return 'hello'; } } );

위는 비교적 "진정한" 모듈 정의 패턴입니다. 내보내기에 공개 데이터 및 메소드를 첨부하는 것 외에도 객체 표현 모듈을 직접 반환할 수도 있습니다. 예를 들어 다음 코드는 위 코드와 동일한 기능을 갖습니다.

코드 복사 코드는 다음과 같습니다. define(function(require) { var a = require('a'); //모듈 소개 var b = require(' b'); //b 모듈 소개

var data1 = 1; //개인 데이터

var func1 = function() { //개인 메서드 return a.run(data1 ); }

return { data2: 2, func2: function() { return 'hello'; } }; }); 모듈 정의에 다른 코드가 없고 객체만 반환하는 경우 다음과 같이 단순화할 수도 있습니다.

코드 복사 코드는 다음과 같습니다: define({ data: 1, func: function() { return 'hello'; } }) ; 세 번째 방법은 순수 JSON 데이터를 정의하는 모듈에 매우 적합합니다. 모듈 로딩 및 참조

모듈 주소 지정 알고리즘 위에서 언급한 것처럼 모듈은 js 파일에 해당하며, 모듈을 로드할 때 일반적으로 문자열 매개변수가 제공되어 로딩 함수에 필요한 모듈을 알려주므로 문자열 식별자부터 실제 모듈이 위치한 파일 경로까지 구문 분석 알고리즘이 필요합니다. SeaJS는 다음 식별자를 지원합니다. 절대 주소 - js 파일에 대한 절대 경로를 제공합니다.

예:

코드 복사 코드는 다음과 같습니다. require("http:/ /example/js /a"); 은 http://example/js/a.js를 로드하는 것을 의미합니다. 상대 주소 - 로딩 함수가 위치한 js 파일의 상대 주소를 이용하여 모듈을 찾으려면 상대 호출을 사용합니다. 예를 들어 http://example/js/b.js에서

을 로드합니다. 코드를 복사합니다. 코드는 다음과 같습니다. 다음: require("./c"); 는 http://example/js/c.js를 로드합니다. 기본 주소 - 로딩 문자열 식별자가 절대 경로가 아니고 "./"로 시작하지 않는 경우 SeaJS 전역 구성의 "기본"을 기준으로 주소가 지정됩니다. 이 방법은 나중에 설명합니다. 위 모듈을 로드할 때 접미사 ".js"를 전달할 필요가 없으며 SeaJS가 자동으로 ".js"를 추가합니다. 단, 다음 세 가지 상황에서는 추가되지 않습니다. css를 로드할 때

코드 복사 코드는 다음과 같습니다: require("./module1-style.css"); 경로에 "?"가 포함된 경우(예:

) 코드 복사 코드는 다음과 같습니다. require( http://example /js/a.json?cb=func ); 다음과 같이 경로가 "#"으로 끝나는 경우:

코드 복사 코드는 다음과 같습니다. require("http://example/js/a.json#"); 다양한 애플리케이션 시나리오에 따라 SeaJS는 모듈 로딩을 위한 세 가지 API, 즉 seajs.use, require 및 require.async를 제공합니다. 이에 대해서는 아래에 소개되어 있습니다. seajs.use

seajs.use는 주로 항목 모듈을 로드하는 데 사용됩니다. 엔트리 모듈은 C 프로그램의 주요 기능과 동일하며 전체 모듈 종속성 트리의 루트이기도 합니다. 위의 TinyApp 예에서는 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는 페이지에 항목 모듈을 로드하는 데에만 사용됩니다. , SeaJS는 항목 모듈을 따라 모든 종속 모듈을 구문 분석하고 로드합니다. 입력 모듈이 하나만 있는 경우 sea.js를 소개하는 스크립트 태그에 "data-main" 속성을 추가하여 seajs.use를 생략할 수 있습니다. 예를 들어 위의 TinyApp의 index.html도 다음과 같이 변경할 수 있습니다. 쓰기: 코드 복사 코드는 다음과 같습니다. TinyApp &lt ;body>

이렇게 작성하면 HTML이 더 간결해집니다. 요구

require는 SeaJS의 주요 모듈 로딩 방법입니다. 모듈에 다른 모듈이 필요할 때 일반적으로 require를 사용하여 로드합니다.

코드 복사 코드는 다음과 같습니다. var m = require('/path/to/module/file'); 자동 로딩 메커니즘에 대한 간략한 소개는 다음과 같습니다. SeaJS의. 위에서 언급했듯이 SeaJS를 사용한 후 html에는 sea.js만 포함하면 됩니다. 그러면 다른 js 파일은 어떻게 로드됩니까? SeaJS는 먼저 항목 모듈을 다운로드한 다음 항목 모듈을 따라 정규식을 사용하여 코드의 모든 요구 사항을 일치시킨 다음 요구 사항의 파일 경로 식별자에 따라 해당 js 파일을 다운로드한 다음 비슷한 작업을 반복하고 수행합니다. js 파일을 다운로드했습니다. 전체 프로세스는 그래프 순회 작업과 유사합니다(교차 순환 종속성이 있을 수 있으므로 전체 종속성 데이터 구조는 트리가 아닌 그래프입니다). 위 사항을 이해하면 다음 규칙을 쉽게 이해할 수 있습니다. require에 전달된 경로 식별자는 표현식이 아닌 문자열 리터럴이어야 합니다. 예를 들어 다음 require 사용 방법은 잘못되었습니다. 코드 복사 코드는 다음과 같습니다. require('module' '1'); require (' Module'.toLowerCase()); 이로 인해 SeaJS가 해당 js 파일을 다운로드하기 위한 올바른 정규 매칭을 수행할 수 없게 됩니다. require.async

위에서 언급했듯이 SeaJS는 html 페이지가 열릴 때 정적 분석을 통해 필요한 모든 js 파일을 한 번에 기록합니다. 특정 js 파일이 사용될 때만 다운로드되도록 하려면 require.async를 사용하면 됩니다. 🎜>

코드 복사 코드는 다음과 같습니다. require.async('/path/to/module/file ', function(m) { //콜백 코드... }); 이렇게 하면 이 모듈을 사용할 때만 해당 js 파일이 다운로드되므로 JavaScript 코드의 누르기를 실현하려면 로드가 필요합니다. SeaJS의 전역 구성 SeaJS는 전역 구성을 설정하고 전역 구성을 나타내는 구성 개체를 수신하는 seajs.config 메서드를 제공합니다. 구체적인 사용법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. seajs.config({ 기본: 'path/to/jslib/', 별칭: { 'app': 'path/to/app/' }, 문자 집합: 'utf-8' , 시간 초과: 20000, 디버그: false });

여기서 base는 기본 주소 지정 시 기본 주소 경로를 나타냅니다. 예를 들어 base가 http://example.com/js/3-party/로 설정된 경우 코드 복사 코드는 다음과 같습니다. var $ = require('jquery'); 는 http://example.com/js/3-party/jquery.js를 로드합니다. 별칭은 긴 공통 경로에 대한 약어를 설정할 수 있습니다. charset은 js를 다운로드할 때 스크립트 태그의 charset 속성을 나타냅니다. timeout은 파일을 다운로드하는 최대 시간(밀리초)을 나타냅니다. debug는 디버그 모드에서 작동할지 여부를 나타냅니다. SeaJS가 기존 JS 라이브러리와 작동하는 방식

SeaJS에서 jQuery와 같은 기존 JS 라이브러리를 사용하려면 SeaJS의 모듈 정의 규칙에 따라 기존 라이브러리를 캡슐화하기만 하면 됩니다. 예를 들어 jQuery의 encapsulation 방식은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. define(function() {

//{{{jQuery 원본 코드 시작 /*! * jQuery JavaScript Library v1.6.1 * http://jquery.com/ * * Copyright 2011, John Resig * MIT 또는 GPL 버전 2 라이센스에 따라 이중 라이센스가 부여되었습니다. * http://jquery.org/license * * 포함 Sizzle.js * http://sizzlejs.com/ * 저작권 2011, The Dojo Foundation * MIT, BSD 및 GPL 라이선스에 따라 출시되었습니다. * * 날짜: 5월 12일 15일 목요일: 04:36 2011 -0400 */ //... //}}}jQuery 원본 코드 종료

return $.noContribute(); }) ; SeaJS 프로젝트 패키징 및 배포

SeaJS는 원래 패키징 및 배포 도구인 spm을 통합했습니다. 나중에 저자는 KISS에 더 가깝도록 하기 위해 SeaJS에서 spm을 분리하여 별도의 프로젝트로 전환했습니다. spm의 핵심 아이디어는 모든 모듈의 코드를 병합, 압축하여 엔트리 모듈에 병합하는 것입니다. SeaJS 자체의 특성상 HTML을 아무런 변경 없이 개발 환경과 프로덕션 환경 간에 쉽게 전환할 수 있습니다. . 하지만 spm은 아직 정식 버전이 나오지 않았기 때문에 이 글에서는 자세히 소개할 생각은 없습니다. 관심 있는 분들은 github 프로젝트 홈페이지 https://github.com/seajs/spm/을 참고하시기 바랍니다. 사실 프로젝트마다 사용하는 JS 병합 및 압축 도구가 다르기 때문에 spm이 모든 프로젝트에 완전히 적합하지는 않을 수 있습니다. SeaJS의 원리를 이해한 후에는 자신의 프로젝트 특성에 맞는 병합 및 패키지 스크립트를 작성할 수 있습니다.