머리말
SEAJS는 JavaScript의 모듈 식 개발 및 로딩 메커니즘을 구현할 수있는 CommonJS 사양을 따르는 JavaScript 모듈로드 프레임 워크입니다. JQuery와 같은 JavaScript 프레임 워크와 달리 SEAJS는 캡슐화 언어 기능을 확장하지 않지만 모듈 별 모듈화 및로드 만 구현합니다. SEAJS의 주요 목적은 JavaScript 개발 모듈화를 만들고 쉽고 행복하게로드하고 Heavy JavaScript 파일 및 객체 종속성 처리에서 무료 프론트 엔드 엔지니어를 쉽게로드하고 코드 자체의 논리에 중점을 둘 수 있습니다. SEAJS는 jQuery와 같은 프레임 워크와 완벽하게 통합 될 수 있습니다. SEAJS를 사용하면 JavaScript 코드의 가독성과 명확성을 향상시키고, JavaScript 프로그래밍에서 흔히 볼 수있는 종속성 혼란 및 코드 얽힘 문제를 해결하고 코드의 쓰기 및 유지 보수를 용이하게 할 수 있습니다.
Seajs의 저자는 Taobao 프론트 엔드 엔지니어 인 Yu Bo입니다.
Seajs 자체는 키스 (단순하고 어리석은) 개념을 따르며 단일 자릿수 API 만 있으므로 배울 압력이 없습니다. Seajs를 배우는 과정에서, 당신은 모든 곳에서 키스 원리의 본질을 느낄 수 있습니다. 한 가지만하고 한 가지 일을 잘합니다.
이 기사는 먼저 예제를 사용하여 SEAJS를 사용하여 기존의 JavaScript 프로그래밍 및 모듈 식 JavaScript 프로그래밍을 직관적으로 비교 한 다음 SEAJS의 사용 방법에 대해 자세히 설명하고 SEAJS와 관련된 정보를 제공합니다.
전통적인 모드 대 SEAJS 모듈성
우리가 지금 웹 응용 프로그램 TinyApp을 개발하고 있다고 가정하고 TinyApp에서 jQuery 프레임 워크를 사용하기로 결정했습니다. TinyApp의 홈페이지는 module2.js 및 module3.js에 의존하는 Module1.js를 사용하고 Module3.js는 module4.js에 따라 다릅니다.
전통적인 개발
기존 개발 방법을 사용하여 각 JS 파일의 코드는 다음과 같습니다.
다음과 같이 코드를 복사하십시오 : //module1.js
var module1 = {
실행 : function () {
return $ .merge ([ 'module1'], $ .merge (module2.run (), module3.run ());
}
}
//module2.js
var module2 = {
실행 : function () {
반환 [ 'module2'];
}
}
//module3.js
var module3 = {
실행 : function () {
return $ .merge ([ 'module3'], module4.run ());
}
}
//module4.js
var module4 = {
실행 : function () {
반환 [ 'module4'];
}
}
현재 Index.html은 Module1.js 및 모든 기본 종속성 (순서 참고)을 참조해야합니다.
다음과 같이 코드를 복사하십시오. <! doctype html>
<html lang = "zh-cn">
<헤드>
<meta charset = "utf-8">
<title> tinyapp </title>
<script src = "./ jquery-min.js"> </script>
<script src = "./ module4.js"> </script>
<script src = "./ module2.js"> </script>
<script src = "./ module3.js"> </script>
<script src = "./ module1.js"> </script>
</head>
<body>
<p> </p>
<cript>
$ ( '. content'). html (module1.run ());
</스크립트>
</body>
</html>
프로젝트가 진행됨에 따라 점점 더 많은 JS 파일과 종속성이 점점 더 복잡해 지므로 HTML의 JS 코드 및 스크립트 목록이 종종 유지하기가 어렵습니다.
SEAJS 모듈 식 개발
SEAJS를 사용하여 동일한 기능을 구현하는 방법을 살펴 보겠습니다.
첫 번째는 index.html입니다.
다음과 같이 코드를 복사하십시오. <! doctype html>
<html lang = "zh-cn">
<헤드>
<meta charset = "utf-8">
<title> tinyapp </title>
</head>
<body>
<p> </p>
<script src = "./ sea.js"> </script>
<cript>
seajs.use ( './ init', function (init) {
init.initpage ();
});
</스크립트>
</body>
</html>
HTML 페이지는 더 이상 모든 종속성 JS 파일을 소개 할 필요가 없지만 Sea.js는 모든 종속성을 처리하고 해당 JS 파일을로드 할 수 있습니다. 페이지를 렌더링 할 때 필요한 경우 파일을로드 할 수 있습니다 (응답 JS는 사용될 때만로드됩니다).
index.html init 모듈을로드 하고이 모듈의 initpage 메소드를 사용하여 페이지 데이터를 초기화합니다.
다음 모듈 식 자바 스크립트 작성을 살펴 보겠습니다.
다음과 같이 코드를 복사하십시오 : //jquery.js
정의 (함수 (요구, 내보내기, 모듈) = {
// 원래 jQuery.js 코드 ...
module.exports = $ .noconflict (true);
});
//init.js
정의 (함수 (요구, 내보내기, 모듈) = {
var $ = 요구 사항 ( 'jQuery');
var m1 = 요구 ( 'module1');
Exports.initPage = function () {
$ ( '. content'). html (m1.run ());
}
});
//module1.js
정의 (함수 (요구, 내보내기, 모듈) = {
var $ = 요구 사항 ( 'jQuery');
var m2 = 요구 ( 'module2');
var m3 = 요구 ( 'module3');
Exports.run = function () {
return $ .merge ([ 'module1'], $ .merge (m2.run (), m3.run ());
}
});
//module2.js
정의 (함수 (요구, 내보내기, 모듈) = {
Exports.run = function () {
반환 [ 'module2'];
}
});
//module3.js
정의 (함수 (요구, 내보내기, 모듈) = {
var $ = 요구 사항 ( 'jQuery');
var m4 = 요구 ( 'module4');
Exports.run = function () {
return $ .merge ([ 'module3'], m4.run ());
}
});
//module4.js
정의 (함수 (요구, 내보내기, 모듈) = {
Exports.run = function () {
반환 [ 'module4'];
}
});
언뜻보기 에이 코드는 더욱 복잡해 보입니다.이 예는 너무 단순하기 때문에 Seajs 코드의 장점이 나타납니다. 그러나 이것으로부터 우리는 여전히 Seajs의 일부 기능을 볼 수 있습니다.
첫째, HTML 페이지는 긴 스크립트 태그 목록을 유지할 필요가 없으며 Sea.js를 소개합니다.
두 번째는 JS 코드가 모듈로 구성되어 있으며 요구를 통해 자체 종속성을 도입하고 코드가 명확합니다.
이 예를 통해 친구들은 SEAJS에 대한 직관적 인 인상을 가져야합니다.