JQuery 스크립트끼리 통신하기 (function 호출하기)

일반적으로 스크립트를 작성하다 보면 공통적으로 상용되는 스크립트는 별도의 공통 함수로 빼서 작업을 하는 게 일반적입니다. 

그래야 관리 이슈도 적고 해당 함수를 호출하게 될 때에도 쉽게 파악하여 스크립트를 사용할 수 있습니다. 

 

이 방식은 정의되어 있는 스크립트를 화면에서 호출할 때에는 아무런 문제가 발생하지 않습니다. 

그렇다면 공통 함수를 별도의 다른 스크립트에서 사용해야만 하는 상황이 발생하게 된다면 어떻게 될까요?

 

위의 상황을 조금 더 쉽게 예시를 들어서 이야기 해 보겠습니다. 

우리는 공통 스크립트 "common.js"라는 파일을 만들었습니다. 그리고 특수한 페이지에서만 사용하는 "others.js"  스크립트도 만들어서 사용하고 있습니다.  그런데 작업을 진행하다 보니 별도의 함수에서만 사용하는 스크립트에서 공통 함수의 "commonAction"이라는 이름의 function 함수를 호출해서 사용해야 하는 경우가 발생하게 되었다고 가정합니다. 이 때 바로 공통 함수의 "commonAction"를 호출하게 되면 에러를 발생시킵니다.

 

"others.js"에는 "commonAction"이라는 함수가 정의 되어 있지 않기 때문입니다. 

 

그렇지만 방법이 없는것은 아닙니다. (영화의 명대사처럼 "우리는 답을 찾을 것이다. 늘 그랬듯이")

우선 부모 script (호출될 함수가 있는 js)에서 호출될 함수를 변경시켜줘야 합니다. 

 

우리의 예시에서는 "common.js"에서 선언해 놓은 "commonAction" 함수이겠죠.

 

- 기존의 함수

function commonAction(){    // 기존의 함수명
    clearInterval(time);
    time = setInterval( function () { slideAni() }, 1000 );
}

 

- 호출이 되게 변경시킨 함수

jQuery.timeAction = function(){   // 바뀌게 되는 부분
    clearInterval(time);
    time = setInterval( function () { slideAni() }, 1000 );
}

 

부모의 함수를 변경하였으면 이제는 함수를 호출할 자식 script (호출 함수를 부를 js)에서 변경된 이름으로 호출하면 됩니다. 우리의 예시에서는 "others.js"가 되겠네요.

 

- 함수를 호출하는 JS

jQuery.timeAction();

 

지금까지 JS끼리 함수를 서로 호출(통신)해서  사용하는 방법을 알아보았습니다. 

모두들 즐거운 코딩 하세요.

 

감사합니다.