SeaJS 입문 튜토리얼 시리즈에서 SeaJS 소개(1)_Seajs

머리말
SeaJS는 CommonJS 사양을 따르는 JavaScript 모듈 로딩 프레임워크로, JavaScript의 모듈 개발 및 로딩 메커니즘을 구현할 수 있습니다. jQuery와 같은 JavaScript 프레임워크와 달리 SeaJS는 캡슐화된 언어 기능을 확장하지 않고 JavaScript 모듈화 및 모듈 로딩만 구현합니다. SeaJS의 주요 목적은 JavaScript 개발을 모듈식으로 만들고 쉽게 로드할 수 있도록 하여 프런트엔드 엔지니어가 JavaScript 파일 및 개체 종속성에 대한 과도한 처리에서 벗어나 코드 자체의 논리에 집중할 수 있도록 하는 것입니다. SeaJS는 jQuery와 같은 프레임워크와 완벽하게 통합될 수 있습니다. SeaJS를 사용하면 JavaScript 코드의 가독성과 명확성이 향상되고, 현재 JavaScript 프로그래밍의 종속성 혼란 및 코드 얽힘과 같은 일반적인 문제를 해결하며, 코드 작성 및 유지 관리가 용이해집니다.
SeaJS의 저자는 Taobao 프론트엔드 엔지니어 Yu Bo입니다.
SeaJS 자체는 KISS(Keep It Simple, Stupid) 개념에 따라 개발되었으며 한 자리 수의 API만 포함하므로 학습에 대한 부담이 없습니다. SeaJS를 배우는 과정에서 KISS 원칙의 본질을 곳곳에서 느낄 수 있습니다. 한 가지만 하고, 한 가지만 잘하면 됩니다.
이 기사에서는 먼저 예제를 통해 전통적인 JavaScript 프로그래밍과 SeaJS를 사용한 모듈식 JavaScript 프로그래밍을 시각적으로 비교한 다음 SeaJS의 사용법을 자세히 논의하고 마지막으로 SeaJS와 관련된 몇 가지 정보를 제공합니다.

기존 모드 vs SeaJS 모듈식
지금 웹 애플리케이션 TinyApp을 개발 중이고 TinyApp에서 jQuery 프레임워크를 사용하기로 결정했다고 가정해 보겠습니다. TinyApp의 홈페이지는 module1.js를 사용하고, module1.js는 module2.js와 module3.js에 의존하며, module3.js는 module4.js에 의존합니다.
전통적인 개발
전통적인 개발 방식을 사용하여 각 js 파일의 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

//module1.js
var module1 = {
run: function() {
return $.merge(['module1' ], $.merge( module2.run(), module3.run()));
}
}

//module2.js
var module2 = {
실행 : function() {
                                           . merge(['module3'], module4.run());
}
}

//module4.js
var module4 = {
실행: function() {
           return ['module4']


코드 복사


코드는 다음과 같습니다.

;TinyApp

  ; /head> 

  <script><div class="codebody" id="code91210">   $('.content').html(module1 . run());<br> </script>



프로젝트가 진행됨에 따라 점점 더 많은 js 파일이 생성됩니다. 또한 점점 더 복잡해져서 js 코드와 html의 스크립트 목록을 유지하기가 어려워지는 경우가 많습니다.

SeaJS 모듈식 개발

SeaJS를 사용하여 동일한 기능을 구현하는 방법을 살펴보겠습니다.
첫 번째는 index.html입니다.




코드를 복사하세요.

코드는 다음과 같습니다.

 

 



html 페이지가 없는 것을 볼 수 있습니다. 더 이상 모든 종속 js 파일을 도입해야 하지만 sea.js만 도입하면 sea.js가 모든 종속성을 처리하고 해당 js 파일을 로드합니다. 로딩 전략은 페이지를 렌더링할 때 모든 js 파일을 한 번에 로드하거나 로드하도록 선택할 수 있습니다. 요청 시(사용할 때만 응답 js 로드) 로딩 전략의 구체적인 사용법은 아래에 설명되어 있습니다.
index.html은 init 모듈을 로드하고 이 모듈의 initPage 메소드를 사용하여 페이지 데이터를 초기화합니다. 여기서는 코드 세부사항을 논의하지 않습니다.
모듈화 후 JavaScript가 어떻게 작성되는지 살펴보겠습니다:




코드 복사

코드는 다음과 같습니다.

// jquery.js

define(function(require,exports, module) = { //원본 jquery.js 코드... module.exports = $.noConflect(true) ;});

//init.js

define(function(require,exports, module) = {
var $ = require('jquery' );
var m1 = require('module1');

imports.initPage = function() {
$('.content').html(m1.run()); 🎜> }
});

//module1.js
define(function(require,exports, module) = {
var $ = require('jquery');
var m2 = require( 'module2');
var m3 = require('module3');

imports.run = function() {
return $.merge(['module1' ], $.merge( m2.run(), m3.run())); 
 }
});

//module2.js
define(function(require, 내보내기, 모듈) = {
내보내기.run = function() {
return ['module2'];
}
});

//module3.js
define(function(require ,exports, module) = {
var $ = require('jquery');
var m4 = require('module4');

exports.run = 함수 () {
return $.merge(['module3'], m4.run());
}
});

//module4.js
define( function(require,exports,module) = {
exports.run = function() {
return ['module4'];
}
});

얼핏 보면 , 코드가 바뀌는 것 같습니다. 이 예제는 너무 간단하기 때문에 복잡합니다. 대규모 프로젝트라면 SeaJS 코드의 장점이 드러날 것입니다. 그러나 여기에서 SeaJS의 일부 기능을 엿볼 수 있습니다.
첫째, HTML 페이지는 더 이상 긴 스크립트 태그 목록을 유지할 필요가 없으며 sea.js만 도입하면 됩니다.
둘째, js 코드는 모듈로 구성되어 있습니다. 각 모듈은 require를 통해 종속 모듈을 소개하며 코드가 명확하고 명확합니다.
이 예를 통해 친구들은 SeaJS에 대한 직관적인 인상을 받아야 합니다. 다음 기사에서는 SeaJS의 사용에 대해 자세히 설명합니다.