seaJs_Seajs의 모듈 정의 및 모듈 로딩에 대한 간략한 분석

SeaJS는 CommonJS 사양을 따르며 Yubo에서 개발한 모듈 로딩 프레임워크로, 모든 JavaScript 모듈과 CSS 모듈 스타일을 쉽고 즐겁게 로드하는 데 사용할 수 있습니다. SeaJS는 매우 작습니다. 압축 및 gzip 이후의 크기가 4K에 불과하고 SeaJS에는 모듈 정의와 모듈 로딩 및 종속성의 두 가지 코어가 있다는 사실에 있습니다. SeaJS는 매우 강력합니다. SeaJS는 모든 JavaScript 모듈을 로드할 수 있으며 SeaJS는 모듈을 사용할 때 해당 모듈이 의존하는 다른 모듈이 스크립트 실행 환경에 로드되도록 합니다. Yu 삼촌에 따르면 SeaJS를 사용하면 로딩 문제에 대해 걱정할 필요 없이 코드 작성의 즐거움을 누릴 수 있습니다. 너무 많은 js 및 css 참조에 지치셨나요? 저희 회사 웹사이트의 개인 홈페이지에서 39개의 css 및 js 참조를 확인했습니다.

1. 프론트엔드와 백엔드가 동일합니다.
2. 물론 병합으로 해결될 수는 있지만 직접 병합하지 않는 경우에는 문제가 됩니다. 백엔드를 병합하더라도 인건비가 매우 높을 것입니다. 유지 관리, 이렇게 긴 문자열은 눈에 헷갈릴 것입니다

SeaJS는 이러한 문제를 매우 잘 해결할 수 있습니다.

모듈 정의 정의

모듈을 정의하는 것은 상대적으로 간단합니다. 예를 들어, sayHello 모듈을 정의하고 sayHello.js 문서를 생성합니다.

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

define(function(require,exports,module){
imports.sayHello = function(eleID,text) {
document.getElementById (eleID).innerHTML=text;
};
});

먼저 내보내기 매개변수를 살펴보겠습니다. 내보내기 매개변수는 모듈의 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 모듈의 imports.sayHello 메소드를 호출하는 것입니다. 물론 콜백 함수에는 say 매개변수가 있습니다.

모듈 종속성

모듈 종속성은 모듈이 정의될 때 실제로 존재해야 합니다. 예를 들어 위의 sayHello 모듈을 다시 작성해 보겠습니다. 요소를 가져오고 스타일을 설정하는 등의 일부 메소드와 같은 일반 DOM 모듈이 이미 있다고 가정합니다. 예를 들어 이러한 DOM 모듈의 경우 다음과 같이 DOM.js를 작성합니다.

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

define(함수(요구, 내보내기, 모듈) {
    var DOM = {
        /**
* 요소의 id 속성을 통해 DOM 객체를 가져옵니다. 매개변수는 문자열이거나 여러 문자열입니다.
* @id getById
* @method getById
* @param {String} id the id 속성
* @return {HTMLElement | Object} ID가 있는 HTMLElement 또는 아무것도 발견되지 않은 경우 null입니다.
*/
        getById: function() {
            var els = [];
            for (var i = 0; i < 인수.길이; i ) {
               var el = 인수[i];
               if (typeof el == "string") {
> 🎜>                }
                els.push(el);
}
            return els;
        },
        /**
* get이 객체를 가져옵니다. 객체나 문자열을 전달할 수 있습니다. 문자열이 전달되면 document.getElementById()를 통해 객체를 얻습니다.
* @id get
* @param { String} el html 요소
* @return {Object} HTMLElement 개체.
*/
        get: function(el) {
            if (el & amp; amp; & amp; amp ; amp; (el.tagName || el.item)) {
               return el;
            return this.getById(el);
        }
    };
    DOM 반환 ;
});


那么sayHello模块可以这样编写，为了不影响原来的데모페이지，所以我定一个新的sayHelloA模块，我们可这样编写sayHelloA.js:

复aze代码

代码如下:define(함수(요구, 내보내기, 모듈) { var DOM = require("DOM/DOM");    require("sayHelloA/sayHello.css");

   exports.sayHello = function(eleID, text) {

        DOM.get(eleID). innerHTML = text;
    };
});


函数就是用来建立模块的依赖关系，比如上面sayHelloA模块，就是依赖DOM模块，因为용到了DOM模块的get방법.
注意这里的var DOM=require("DOM/DOM")，这句是将应用进来的DOM模块赋值给DOM;require("sayHelloA/sayHello.css")是直接应用sayHello .css css模块或者说文件。这样页面上会引用这个css文件。

最近这几天一直捣腾SeaJS, 越捣腾越喜欢,感谢玉伯!感谢SeaJS!例没必要这么做。确实如果js文件少的小项目感觉不错模块化优势，但是，更多更了更势就体现来了。