어떻게하면 자바 스크립트 응용 프로그램을 여러 파일로 나눌 수 있습니까?

모든 코드가 하나의 파일에 포함 된 자바 스크립트 애플리케이션을 만들었습니다. 응용 프로그램이 꽤 많이 자랐고 여러 파일로 분할 할 때가되었다고 생각하지만이 작업을 수행하는 방법을 파악하는 데 어려움을 겪고 있습니다. 나는 문제가 나는 다음과 같은 템플릿을 사용하는 응용 프로그램을 구축하기로 결정 방법에있다 생각 :어떻게하면 자바 스크립트 응용 프로그램을 여러 파일로 나눌 수 있습니까?

var myApp = function(){ 

    //there are several global variables that all of the modules use; 
    var global1, global2, module1, module2; 

    global1 = { 
     prop1:1 
    }; 

    //There are also several functions that are shared between modules 
    function globalFunction(){ 

    } 

    var ModuleOne = function(){ 

     function doSomething(){ 
      //using the global function 
      globalFunction(); 
     } 

     return{ 
      doSomething:doSomething 
     } 
    }; 

    var ModuleTwo = function(){ 

     function doSomething(){ 
      //module 2 also needs the global function 
      globalFunction(); 

      //Use the functionality in module 1 
      //I can refactor this part to be loosely coupled/event driven 
      module1.doSomething(); 
     } 
    }; 

    module1 = new ModuleOne(); 
    module2 = new ModuleTwo(); 
};

모든 모듈이 느슨하게 결합 및 이벤트 구동, 난 아직도 모르는했다하더라도 어떻게 것 이것을 공유 함수/변수에 대한 각 모듈의 의존성을 고려하여 여러 파일로 분할하십시오. 누구 제안이 있습니까?

출처

2012-01-06 Mark Brown

[module8]과 같은 도구는 심각하지만, (https://github.com/clux/modul8) 문제를 해결하십시오 – Raynos

이 기사의 디자인 패턴을보십시오 : http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In- 깊이 - 너 공통 속성을 공유 할 수있는 방법으로 여러 파일에 모듈 정의를 분할 할 수 있지만 특정 파일에 대해 비공개 인 변수 또는 메소드를 만들 수도 있습니다. – nnnnnn

@nnnnnn 감사합니다. 나는 그것을 지금 점검 할 것이다. –

이 문서의 디자인 패턴을 살펴 보자 :

var myApp = function(){ 
    [% INCLUDE lib/module1.js %] 
    [% INCLUDE lib/module2.js %] 
    [% INCLUDE lib/module3.js %] 
}

또는 PHP : 예를 들어, 펄의 템플릿 Toolkit을 사용하여 http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth을 - 당신은 방법으로 여러 파일에 걸쳐 모듈 정의를 분할 할 수 있습니다 공통 속성을 공유 할 수있게 해주지 만 특정 파일에 대해 비공개 인 변수 나 메소드를 만들 수도 있습니다.

기본 개념은 개별 JS 파일과 같은 코드와 동일한 모듈에 추가 할 것입니다 :

이

var MODULE = (function (my) { 
    var privateToThisFile = "something"; 

    // add capabilities... 

    my.publicProperty = "something"; 

    return my; 
}(MODULE || {}));

경우 각 JS 파일에 MODULE 이미 (다른 JS 파일에서) 정의되어있는 경우 당신이 그것을에 추가 그렇지 않으면 생성합니다. 당신은 다양한 파일이 어떤 순서로 포함되어 있는지 (대부분) 문제가되지 않도록 설정할 수 있습니다.

기사에 여러 변형이 있으며, 물론 당신은 자신의 개조를 생각해 낼 것입니다 ...

출처

2012-01-10 23:36:21 nnnnnn

require.js에게 기회를주십시오. http://requirejs.org/

예 :

require(["dir/file"], function() { 
    // Called when file.js loads 
});

출처

2012-01-06 02:20:08

네, 그걸 들여다 보았지만, 공유 된 함수의 문제를 어떻게 해결할 수 있을지 아직 모르겠습니다 ... –

하지만 어떻게하면 현재 상호 의존적 인 코드의 큰 파일을 나눌 수 있습니까? – nnnnnn

클래스별로 파일을 만들면 (따라서 OOP 태그) 실행되는 스크립트가 해당 클래스를 사용하기 만하면됩니다. 코드를 보여 주면 파일을 통해 코드를 배포하는 데 도움이 될 수 있습니다. –

그들이 전역 네임 스페이스를 오염하지 않는,하지만 같은 폐쇄 내부없이 어디서나 액세스 할 수 있도록 당신은을 myApp 객체의 공유 기능 및 공유 모듈을 넣을 수 있습니다.

myApp.moduleOne = function() {...} 
myApp.moduleTwo = function() {...} 
myApp.globalFunction = function() {...}

그런 다음 임의의 파일에 정의하여 모든 파일에서 사용할 수 있습니다.

파일을 여러 파일로 나눌 수도 있지만 파일을 폐쇄 순서를 유지하는 특정 순서로 포함시켜야합니다. 실용적인 편집을 위해 파일을 분해하지만 실제 배포를 위해 파일을 재조합하고 최소화하면 코드를 작성하는 방법이나 배포 방법에 관해 비용이 들지는 않지만 작은 파일을 많이 줄 것입니다 편집 편의성.

출처

2012-01-06 02:32:06 jfriend00

myApp은 실제 이름이 아니며 예제 용으로 사용했습니다. 귀하의 제안을 감안할 때 globalFunction에 대한 각 호출을 myApp.globalFunction()으로 변경해야합니다. –

@MarkBrown - 정확함. 코드 작성시 다소 바람직하지 않지만 코드를 훨씬 더 독립적 인 완전히 분리 된 파일로 구분할 수있는 유연성을 제공합니다. 내 대답에 또 다른 옵션을 추가했습니다. – jfriend00

내 가장 좋아하는 해결책은 내 "기본"파일에 다른 파일을 포함하는 서버 측 스크립팅을 사용하는 것입니다.

var myApp = function(){ 
    <?php 
    include 'lib/module1.js'; 
    include 'lib/module2.js'; 
    ?> 
}

출처

2012-01-06 02:50:36 slebetman

동적으로 자바 스크립트를 작성합니다. 이것은 동적 인 포함보다는 정적 인 컴파일을 선호하여 피해야합니다. – Raynos

정적 컴파일을 원할 경우 빌드 스크립트를 쉽게 작성할 수 있도록 TT 및 PHP를 콘솔에서 실행할 수 있습니다. 아, 더하기 TT는 파일을 캐시하도록 구성되어 컴파일이 한 번만 수행되어야합니다. – slebetman

혼란에 추가 할 수 없지만 C++ 배경에서 오는 것으로, 아래에 설명 된 방식으로 C++ 네임 스페이스와 비슷한 것을 만들려고했습니다. 그것은 작동하지만, 이것이 OP를위한 수용 가능한 패턴인지 알고 싶습니다.

-------------------------------- 파일 메인.js : ----------------

var namespacename = function(){} 

namespacename.mainvalue = 5; 

namespacename.maintest = function() { 
    var cm = new namespacename.game(); 
    cm.callme(); 
}

------------------------- ------- file game.js : ----------------

namespacename.gamevalue = 15; 

namespacename.game = function(){ 
    this.callme = function(){ 
     console.log("callme"); 
    } 
} 

namespacename.gametest = function() { 
    console.log("gametest:gamevalue:" + this.gamevalue); 
    console.log("gametest:mainvalue:" + this.mainvalue); 
}

--------------- ----------------- file index.html : --------------

<html> 
    <head> 
     <title>testbed</title> 
    </head> 

    <body onload="init();"> 
    </body> 

    <script type="text/javascript" src="main.js"></script> 
    <script type="text/javascript" src="game.js"></script> 

    <script type="text/javascript"> 

     init = function() 
     { 
      namespacename.maintest(); 
      namespacename.gametest(); 

      console.log("html main:" + namespacename.mainvalue); 
      console.log("html game:" + namespacename.gamevalue); 
     } 

    </script> 
</html>

출처

2012-11-20 12:41:13

_namespacename_을 호출하지 않는 빈 함수로 선언하는 이유는 무엇입니까? _var namespacename = {} _이있는 빈 객체로 선언 할 수 있으며 나머지 코드는 변경하지 않아도됩니다. – nnnnnn

이 솔루션은 나를 위해 작동합니다! –

어떻게하면 자바 스크립트 응용 프로그램을 여러 파일로 나눌 수 있습니까?

답변

관련 문제