JavaScript 모듈러 프로그래밍(참고)_javascript 기술

저는 JS에 대한 지식이 거의 없었기 때문에 최근에 이 문제를 접했습니다. 그래서 아직 완전히 이해하지 못해서 먼저 글을 올립니다.

1장 JavaScript 모듈러 프로그래밍

(1): 모듈 작성 방법

원작 1개
// 모듈은 특정 기능을 구현하는 메서드 집합입니다. 다양한 기능(및 상태를 기록하는 변수)을 간단히 모아두면 모듈입니다. 함수 m1(){
               // ...
}
함수 m2(){
               // ...
}
// 위의 함수 m1()과 m2()는 모듈을 구성합니다. 사용 시 직접 호출하면 됩니다.
// 단점: "오염된" 전역 변수; 변수 이름이 다른 모듈과 충돌하지 않는다는 보장이 없으며 모듈 멤버 간에 직접적인 관계가 없습니다.

2가지 객체 작성 방법

// 把模块写成一个对象,所有的模块成员都放到这个对象里面;
  var module = new Object({
    _count:0,
    m1:function(){
      // ...
    },
    m2:function(){
      // ...
    }
  });
// 上面的函数m1()和m2(),都封装在module对象里;使用时直接调用这个对象的属性;
  module.m1();
// 但是,这样的写法会暴露所有模块成员,内部状态可以被外部改写;
  module._count = 4;

3 즉시실행 함수 작성 방법

  var module = (function(){
    var _count = 0;
    var m1 = function(){
      // ...
    };
    var m2 = function(){

    };
    return {
      m1:m1,
      m2:m2
    };
  })();
// 使用上面的写法,外部代码无法读取内部的_count变量;
  console.info(module._count); // undefined;
// 上面的写法就是JavaScript模块的基本写法;

4가지 확대/축소 모드

// 如果模块很大,必须分成几个部分,或者一个模块需要继承另一个模块,这时就有必要采用"放大模式";
  var module = (function(mod){
    mod.m3 = function(){
      // ...
    };
    return mod;
  })(module);
// 上面的代码为module模块添加了一个新方法m3(),然后返回新的module模块;

5가지 와이드 줌 모드

// 在浏览器环境中,模块的各个部分通常都是从网上获取的,有时无法知道哪个部分会先加载;
// 如果采用上一节的写法,第一个执行的部分有可能加载一个不存在的空对象,这时就要采用"宽放大模式";
  var module = (function(mod){
    // ...
    return mod;
  })(window.module || {});
// 与"放大模式"相比,"宽放大模式"就是"立即执行函数"的参数可以是空对象;

6 전역 변수 입력

2장 JavaScript 모듈형 프로그래밍(2): AMD 사양

1개 모듈 사양
// 현재 널리 사용되는 JavaScript 모듈 사양은 CommonJS와 AMD 두 가지가 있습니다.

2개의 CommonJS
// node.js는 서버 측 프로그래밍에 JavaScript 언어를 사용하며, 이는 "JavaScript 모듈형 프로그래밍"의 공식적인 탄생을 의미합니다.
// node.js의 모듈 시스템은 CommonJS 사양을 참조하여 구현됩니다.
CommonJS에는 모듈 로딩을 위한 전역 메소드 require()가 있습니다. var math = require('math'); var math = require('math'); // 모듈 로드;
Math.add(2,3); // 모듈 메소드 호출 =>5;

3 브라우저 환경

// 이전 섹션의 코드는 브라우저에서 실행할 때 큰 문제가 있습니다.
var 수학 = require('math');
Math.add(2,3);
// 문제: math.add(2,3) 전에 math.js가 require('math')에 로드될 때까지 기다려야 합니다.
// 따라서 브라우저 모듈은 "동기 로딩"을 사용할 수 없으며 "비동기 로딩"만 사용할 수 있습니다;==>AMD;

AMD 4개

AMD(Asynchronous Module Definition) 비동기 모듈 정의;
// 비동기식 모듈 로딩을 사용합니다. 모듈 로딩은 후속 명령문의 실행에 영향을 주지 않습니다. 이 모듈에 의존하는 모든 명령문은 콜백 함수
에 정의되어 있습니다. // 이 콜백 함수는 로딩이 완료될 때까지 실행되지 않습니다.
// AMD는 또한 require() 문을 사용하여 모듈을 로드하지만 두 개의 매개변수가 필요합니다:
​ require([모듈],콜백);
// 모듈: 배열이며, 내부 멤버는 로드할 모듈입니다.
// 콜백: 로드 성공 후의 콜백 함수입니다.
​ require(['math'],function(math){
Math.add(2,3);
});
// math.add()와 수학 모듈 로딩이 동기화되지 않아 브라우저가 정지되지 않으므로 AMD가 브라우저 환경에 더 적합합니다.
3장 JavaScript 모듈형 프로그래밍(3): require.js 사용법

1. require.js를 사용하는 이유

// 여러 개의 js 파일을 순서대로 로드해야 합니다.
// 단점:
// 1. 로드할 때 브라우저는 웹 페이지 렌더링을 중지합니다. 더 많은 파일을 로드할수록 웹 페이지의 응답이 길어집니다.
// 2. js 파일 간의 종속성으로 인해 로딩 순서가 엄격하게 보장되어야 합니다. 종속성이 복잡하면 코드 작성 및 유지 관리가 어려워집니다.
// 따라서 require.js는 다음 두 가지 문제를 해결합니다.
// 1. 웹페이지의 응답 손실을 방지하기 위해 js 파일의 비동기 로딩을 구현합니다.
// 2. 코드 작성 및 유지 관리를 용이하게 하기 위해 모듈 간의 종속성을 관리합니다.

2 require.js 로딩

1. require.js를 로드하세요
// async 속성은 웹 페이지의 응답 손실을 방지하기 위해 이 파일을 비동기적으로 로드해야 함을 나타냅니다. IE는 이 속성을 지원하지 않으므로 defer도 작성하세요. 2. main.js 로드
// data-main 속성의 기능은 웹 프로그램의 기본 모듈을 지정하는 것입니다. => 이 파일은 require.js에 의해 가장 먼저 로드됩니다. // require.js의 기본 파일 접미사는 js이므로 main.js는 main으로 축약할 수 있습니다.


3 메인 모듈 main.js 작성 방법

1. main.js가 다른 모듈에 의존하지 않는 경우 JavaScript 코드를 직접 작성할 수 있습니다. //메인.js

Alert('로드 성공!');

2. main.js가 모듈에 의존하는 경우 AMD 사양에 정의된 require() 함수를 사용해야 합니다. //메인.js
​ require(['moduleA','moduleB','moduleC'],function(moduleA,moduleB,moduleC){                // ...
})
// require() 함수는 두 개의 매개변수를 받습니다:
// 매개변수 1: 배열, 의존하는 모듈, 즉 메인 모듈이 의존하는 세 개의 모듈을 나타냅니다.
//매개변수 2: 이전에 지정한 모든 모듈이 성공적으로 로드된 후 호출되는 콜백 함수는 로드된 모듈이 함수에 매개변수로 전달되므로 이러한 모듈을 콜백 함수 내에서 사용할 수 있습니다. // require()는 모듈을 비동기적으로 로드하며 브라우저는 응답을 잃지 않습니다. 지정된 콜백 함수는 이전 모듈이 성공적으로 로드된 후에만 실행되어 종속성 문제를 해결합니다. 예:
​ require(['jquery','underscore','backbone'],function($,_,Backbone){
               // ...
});

4개의 모듈 로딩
//require.config() 메소드를 사용하여 모듈의 로딩 동작을 사용자 정의하세요.
// require.config()는 메인 모듈(main.js)의 선두에 작성됩니다.
// 매개변수는 객체이며, 이 객체의 paths 속성은 각 모듈의 로딩 경로를 지정합니다.
// 기본적으로 main.js와 동일한 디렉터리를 사용하도록 다음 세 모듈의 파일을 설정합니다. ​ require.config({
        경로:{
"jquery":"jquery.min",
"밑줄":"underscore.min",
"백본":"backbone.min"
}
});

// 로드된 모듈과 메인 모듈이 같은 디렉토리에 있지 않다면 경로를 하나씩 지정해야 합니다.

​ require.config({
        경로:{
"jquery":"lib/jquery.min",
"밑줄":"lib/underscore.min",
"백본":"lib/backbone.min"
}
});
// 또는 기본 디렉터리(baseUrl)를 직접 변경합니다
​ require.config({
        baseUrl:"js/lib",
        경로:{
"jquery":"jquery.min",
"밑줄":"underscore.min",
"백본":"backbone.min"
}
});

// 모듈이 다른 호스트에 있는 경우 해당 URL을 직접 지정할 수도 있습니다

​ require.config({
        경로:{
"jquery":"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
}
});
// require.js에서는 각 모듈이 별도의 js 파일이어야 합니다. 이 경우 여러 모듈이 로드되면 여러 HTTP 요청이 실행되어 웹페이지 로딩 속도에 영향을 미칩니다. // 따라서 require.js는 모듈이 배포된 후 이 도구를 사용하여 여러 모듈을 하나의 파일로 병합하여 HTTP 요청 수를 줄일 수 있습니다.

5개의 AMD 모듈 작성 방법

// require.js에 의해 로드되는 모듈은 AMD 사양을 채택합니다. 즉, 모듈은 AMD 규정에 따라 작성되어야 합니다. // 구체적으로 모듈은 특정 정의() 함수를 사용하여 정의해야 합니다. 모듈이 다른 모듈에 종속되지 않으면 정의() 함수에서 직접 정의할 수 있습니다. // math.js에 수학 모듈을 정의합니다

// math.js

정의(함수(){
        var add = 함수(x,y){
               x y 반환;
        };
         반품 {
              추가:추가
        };
});
//main.js에 수학 모듈을 로드합니다
​ require(['math'],function(math){
경고(math.add(1,1));
});
// 이 모듈이 다른 모듈에도 의존하는 경우, 정의() 함수의 첫 번째 매개변수는 모듈의 종속성을 나타내는 배열이어야 합니다.
// math.js
정의(['myLib'],함수(myLib){
         기능 foo(){
myLib.doSomething();
}
         반품 {
foo:foo
        };
});
// require() 함수가 위 모듈을 로드하면 myLib.js 파일이 먼저 로드됩니다.


6 비표준 모듈 로딩

// 비표준 모듈을 로드하려면 require()를 사용하여 로드하기 전에 먼저 require.config() 메서드를 사용하여 일부 특성을 정의해야 합니다.
​ require.config({
심:{
             '밑줄':{
                   내보내기:'_'
            },
            '백본':{
               deps:['underscore','jquery'],
내보내기:'백본'
            }
}
});
// require.config()는 앞서 언급한 paths 속성 외에도 특히 호환되지 않는 모듈을 구성하는 데 사용되는 shim 속성을 받습니다. // (1) 모듈의 종속성을 나타내기 위해 deps 배열을 정의합니다. // (2) 외부에서 호출될 때 이 모듈의 이름을 나타내는 내보내기 값(출력 변수 이름)을 정의합니다. 예: jQuery 플러그인
심:{
          'jquery.scroll':{
           deps:['jquery'],
내보내기:'jQuery.fn.scroll'
}
};

7가지 require.js 플러그인

1.domready: 페이지 DOM 구조가 로드된 후 콜백 함수를 실행할 수 있습니다.

​ require(['domready!'],function(doc){

               // DOM이 준비되면 호출됩니다.

})  
2.텍스트 및 이미지: require.js가 텍스트 및 이미지 파일을 로드하도록 허용합니다.
Define(['text!review.txt','image!cat.jpg'],function(review,cat){
console.log(검토);
           document.body.appendChild(cat);
});