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

 

 



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




코드 복사

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의 사용에 대해 자세히 설명합니다.