SEAJS는 Yubo가 개발 한 모듈로드 프레임 워크로 CommonJS 사양을 따릅니다. 이는 JavaScript 모듈 및 CSS 모듈 스타일을 쉽고 행복하게로드하는 데 사용할 수 있습니다. 압축 후 볼륨과 GZIP가 4K에 불과하고 인터페이스와 방법도 매우 작기 때문에 SEAJS는 매우 작습니다. SEAJS에는 모듈 정의 및 모듈로드 및 종속성의 두 가지 코어가 있습니다. Seajs는 매우 강력합니다. SEAJS는 JavaScript 모듈 및 CSS 모듈 스타일을로드 할 수 있습니다. SEAJS는 모듈을 사용하면 스크립트 실행 환경에 의존하는 다른 모듈을로드했는지 확인합니다. Yu Bo는 SEAJS가 문제 로딩에 대해 걱정하지 않고 코드 작성의 재미를 즐길 수 있다고 말했다. 당신은 너무 많은 JS와 CSS 참조에 지쳤습니까? 회사 웹 사이트의 홈페이지에서 39 CSS 및 JS 참조를 세 었습니다. 그것이 미치는 영향은 상상할 수 있습니다.
1. 유지 보수에 도움이되지 않으면 프론트 엔드 및 백엔드가 동일합니다.
2. HTTP 요청이 너무 많습니다. 물론 이것은 합병을 통해 해결할 수 있지만, 백엔드 병합이 직접 합병되지 않으면 노동 비용이 매우 높습니다. 백엔드가 병합되어 유지 되더라도 그러한 긴 문자열은 분명히 그것을 볼 것입니다.
Seajs를 사용하면 이러한 문제를 잘 해결할 수 있습니다.
모듈의 정의
모듈 정의가 더 간단합니다. 예를 들어, Sayhello 모듈 정의 및 Sayhello.js 문서 작성 :
코드 사본은 다음과 같습니다.
정의 (함수 (요구, 내보내기, 모듈) {
Exports.SayHello = 함수 (Eleid, Text) {
document.getElementById (eleid) .innerhtml = 텍스트;
};
});
먼저 내보내기 매개 변수를 살펴 보겠습니다. 내보내기 매개 변수는 모듈 API를 제공하는 데 사용됩니다. 즉,이 수출의 다른 모듈은 Sayhello 방법에 액세스 할 수 있습니다.
모듈로드 사용
예를 들어, 우리 페이지에는 ID "Out"이있는 요소가 있으며 "Hello Seajs!"를 출력하고 싶습니다.
그런 다음 Sea.js를 먼저 소개 할 수 있습니다
그런 다음 Sayhello 모듈을 사용하십시오.
코드 사본은 다음과 같습니다.
seajs.use ( "Sayhello/Sayhello", function (say) {
Say.sayhello ( "Out", "Hello Seajs!");
});
여기서 사용은 모듈을 사용하는 방법입니다.
첫 번째 매개 변수는 모듈 표현이며, 이는 SEA.JS에 대한 상대 경로로 표시됩니다. sayhello.js 후 ".js"접미사를 생략 할 수 있습니다. 물론이 모듈을 식별하는 방법에는 여러 가지가 있습니다. 자세한 내용은 공식 설명을 확인하십시오 : http://seajs.com/docs/zh-cn/module-identifier.html
첫 번째 매개 변수는 콜백 함수입니다. Say.sayhello ()는 Sayhello 모듈의 Exports.sayhello 메소드를 호출합니다. 물론이 콜백 함수에는 매개 변수가 있습니다.
모듈 종속성
모듈 종속성은 실제로 모듈이 정의 될 때 존재해야합니다. 예를 들어, 위의 Sayhello 모듈을 다시 작성하십시오. 요소 획득, 스타일 설정 등과 같은 일부 방법과 같은 일반적인 DOM 모듈이 이미 DOM 모듈과 같은 방법과 같은 일반적인 DOM 모듈이 있다고 가정합니다.
코드 사본은 다음과 같습니다.
정의 (함수 (요구, 내보내기, 모듈) {
var dom = {
/**
* 요소의 ID 속성, 매개 변수는 문자열 또는 다중 문자열을 통해 DOM 객체를 가져옵니다.
* @id getbyid
* @method getbyid
* @param {string} id id 속성입니다
* @return {htmlelement | Object} id가있는 htmlelement 또는 찾을 수없는 경우 NULL.
*/
GetByid : function () {
var els = [];
for (var i = 0; i <arguments.length; i ++) {
var el = 인수 [i];
if (EL == "String") {
el = document.getElementById (el);
}
if (arguments.length == 1) {
el el;
}
els.push (el);
}
귀환 els;
},
/**
* 객체를 얻으면 객체 나 문자열을 전달할 수 있습니다. 문자열이 전달되면 객체는 document.getElementByid () 형식으로 얻습니다.
* @Id Get
* @param {String} el html 요소
* @return {object} htmlElement 객체.
*/
get : function (el) {
if (el & amp; amp; & amp; amp; (el.tagname || el.item)) {
el el;
}
getByid (el);
}
};
반환 dom;
});
그런 다음 Sayhello 모듈을 이렇게 작성할 수 있습니다. 원래 데모 페이지에 영향을 미치지 않기 위해 새로운 Sayhelloa 모듈을 설정했습니다. 우리는 다음과 같이 sayhelloa.js를 쓸 수 있습니다.
코드 사본은 다음과 같습니다.
정의 (함수 (요구, 내보내기, 모듈) {
var dom = 요구 사항 ( "dom/dom");
요구 사항 ( "Sayhelloa/sayhello.css");
Exports.SayHello = 함수 (Eleid, Text) {
dom.get (eleid) .innerhtml = 텍스트;
};
});
요구 함수는 모듈의 종속성을 설정하는 데 사용됩니다. 예를 들어, 위의 Sayhelloa 모듈은 DOM 모듈의 Get 메소드가 사용되기 때문에 DOM 모듈에 따라 다릅니다.
var dom = 요구 사항 ( "dom/dom")은 여기에서,이 문장은 적용된 DOM 모듈을 DOM에 할당합니다. require ( "sayhelloa/sayhello.css")는 sayhello.css css 모듈 또는 파일을 직접 적용합니다. 이것은 페이지의 CSS 파일을 참조합니다.
나는 최근에 Seajs와 문제를 일으켰습니다. 더 많은 문제를 일으킬수록 더 좋아합니다. 감사합니다 Yu Bo! 감사합니다 Seajs! 물론 당신은 그러한 간단한 예로 이것을 할 필요가 없다고 생각할 수도 있습니다. 실제로 JS 파일이 적은 소규모 프로젝트가 모듈 식 장점에 대해 기분이 좋지만 JS 파일의 수 또는 중간 이상의 프로젝트에 더 많은 모듈 식 이점이 반영됩니다.