2017-04-13 5 views
0

jQuery와 jQuery UI를 사용하여 DOM 요소를 조작하고 있습니다.큰 자바 스크립트 파일을 여러 개의 작은 파일로 나눕니다.

index.html을 :

<html> 
<head> 
<link href="dashboard.css" rel="stylesheet"> 
</head> 
<body> 
<script src="dashboard.js"></script> 
<body> 
</html> 

dashboard.js : 나는 단지 dashboard.js 파일이 시간이 더 크고 더 큰 성장을 그릴 수

function addAccordian() { 
    // some logic here 
} 

function addConnectedSortable() { 
    // more logic here 
} 

function addPiecharts() { 
    // a huge chunk of logic here 

    // for example, 

    // several ... 
    // hundred ... 
    // line ... 
    // of code 

} 

function readyFn(jQuery) { 
    addAccordian(); 
    addConnectedSortable(); 
    addPiecharts(); 
} 

$(document).ready(readyFn); 

.

질문 : 여러 개의 작은 자바 스크립트 파일로 분할하는 방법이 있나요, 어떻게 든 include/import 그들?

자바 배경에서 왔기 때문에 질문이별로 의미가 없으면 용서해주십시오.

나는이 프로젝트가 아직 초기 단계이고 우리가 사용하는 기술에 대해 융통성이 있기 때문에 어떤 제안이 있어도 좋습니다.

+0

넵. 그것은 종종 빌드 프로세스라고합니다. 예를 들어 webpack/gulp/grunt와 같은 것을 사용하여 수행 할 수 있습니다. –

+0

[이 기사] (http://ryanmorr.com/understanding-scope-and-context-in-javascript/)는 몇 가지 이름 충돌 문제를 해결합니다. "module pattern"을 검색하십시오 –

답변

0

필요한 파일을 만든 다음 페이지에 포함하기 만하면됩니다. 브라우저에서 동시에로드 할 수 있도록 head 요소에 포함시키는 것이 좋습니다.

<script src="file1.js" type="text/javascript"></script> 
 
<script src="file2.js" type="text/javascript"></script> 
 
<script src="file3.js" type="text/javascript"></script>

+0

이 답변을 수락합니다. 이름 충돌에 대한 해결책에 대한 질문에서 내 의견을 참조하십시오. –