JS 모듈식 쓰기

 
1. 원시 기법
모듈은 바로 특정한 기능을 실현하는 한 조의 방법이다.서로 다른 함수(상태를 기록하는 변수)를 간단하게 합치면 모듈이라도 된다.　　

function m1(){ 　　　　//... 　　} 　　

function m2(){ 　　　　//... 　　} 

 
위의 함수 m1()과 m2()로 모듈을 구성합니다.사용할 때 바로 호출하면 됩니다.이런 방법의 단점은 매우 뚜렷하다. 전역 변수를 오염시켜 다른 모듈과 변수명 충돌이 발생하지 않도록 보장할 수 없고 모듈 구성원 간에 직접적인 관계가 보이지 않는다.
2. 대상 쓰기
위의 단점을 해결하기 위해 모듈을 하나의 대상으로 쓰고 모든 모듈 구성원을 이 대상에 넣을 수 있다.　　

var module1 = new Object({ 　　　　
    _count : 0, 　　　　
    m1 : function (){ 　　　　　　//... 　　　　},
    m2 : function (){ 　　　　　　//... 　　　　}
}); 

 
 
위의 함수 m1()과 m2()는 모두module1 대상에 봉인됩니다.사용할 때 이 대상의 속성을 호출합니다.　　
module1.m1();
그러나 이런 작법은 모든 모듈 구성원을 폭로하고 내부 상태는 외부에서 개작할 수 있다.
예를 들어 외부 코드는 내부 계수기의 값을 직접 바꿀 수 있다.　　

module1._count = 5;

 
3. 함수 쓰기 즉시 실행
즉시 실행 함수(Immediately-Invoked Function Expression, IIFE)를 사용하여
개인 구성원을 폭로하지 않는 목적을 달성할 수 있다.　　

var module1 = (function(){ 　　　　
   var _count = 0; 　　　　
   var m1 = function(){ 　　　　　　//... 　　　　}; 　　
   var m2 = function(){ 　　　　　　//... 　　　　}; 　　
   return { 　　　　　　
       m1 : m1, 　　　　　　
       m2 : m2 　　　　
    }; 　
})(); 

 
위의 쓰기 방법을 사용하면 외부 코드에서 내부의 _ 을 읽을 수 없습니다.count 변수.　　

console.info(module1._count); //undefined 

module1은 Javascript 모듈의 기본 쓰기 방법입니다.다음은 이런 작법을 가공한다.
4. 확대 모드
만약 한 모듈이 매우 크다면 반드시 몇 부분으로 나누어야 하거나 한 모듈이 다른 모듈을 계승해야 할 때'증폭 모드'(augmentation) 를 사용할 필요가 있다.

　　var module1 = (function (mod){ 　　　　
       mod.m3 = function () { 　　　　　　//... 　　　　}; 　　　　
       return mod; 　　
    })(module1); 

위의 코드는module1 모듈에 새로운 방법 m3()를 추가한 다음 새로운module1 모듈로 돌아갑니다.
5. 폭 확대 모드(Loose augmentation)
브라우저 환경에서 모듈의 각 부분은 통상적으로 인터넷에서 얻을 수 있으며, 때로는 어느 부분이 먼저 불러올지 알 수 없다.
이전 절의 쓰기를 사용하면 첫 번째 실행 부분에 빈 대상이 존재하지 않는 대상을 불러올 수 있습니다. 이때'넓이 확대 모드'를 사용해야 합니다.　　

var module1 = ( function (mod){ 　　　
    　//... 　　　　
     return mod; 　　

})(window.module1 || {});

[확대 모드]에 비해 [확대 모드]는 [즉시 실행 함수]의 매개 변수로 빈 객체가 될 수 있습니다.
 
6. 전역 변수 입력
독립성은 모듈의 중요한 특징으로 모듈 내부는 프로그램의 다른 부분과 직접 상호작용하지 않는 것이 가장 좋다.모듈 내부에서 전역 변수를 호출하기 위해서는 다른 변수를 모듈에 현저하게 입력해야 한다.
　　

var module1 = (function ($, YAHOO) { 　　　　//... 　　})(jQuery, YAHOO);

 
위의 모듈1 모듈은 jQuery 라이브러리와 YUI 라이브러리를 사용해야 합니다. 이 두 라이브러리(사실은 두 모듈)를 매개 변수로 모듈1을 입력하십시오.이렇게 하면 모듈의 독립성을 확보하는 것 외에 모듈 간의 의존 관계도 뚜렷해진다.이 방면에 대한 더 많은 토론은 Ben Cherry의 유명한 글인 을 참고하십시오.
 
 
고맙습니다부천 제공된 원문 주소!(나는 인터넷에서 얼마나 많은 손이 돌아갔는지 모르는 글을 보고 엉망진창으로 줄을 서서 마지막에 정리를 했다 -_-/)
http://www.ruanyifeng.com/blog/2012/10/javascript_module.html