[jquery]사용자 정의 함수 메소드(플러그인) 만들기 - $.fn 사용(공통 팝업 띄우기 예제)

개요 

자바스크립트를 사용하다 보면 여러 페이지에서 사용할 수 있는 공통 함수를 만들고 싶을때가 많다.

 

여러 상황이 있겠지만 예를 들면 프로젝트를 진행하면서 여러 군데에서 같은 팝업 창을 띄울 상황이 있을 때가 있다.

 

그래서 이 때 fn을 이용하여 사용자 정의 함수를 만들고 공통 자바스크립트 파일에 저장한 후 필요한 곳에서 불러서 써보는 예제를 통해 fn의 사용법에 대해 알아보고자 작성했다.

 

fn?

https://learn.jquery.com/plugins/basic-plugin-creation/

How to Create a Basic Plugin | jQuery Learning Center

fn은 재사용이 가능한 제이쿼리에 플러그인을 만드는 작업이라고 할 수 있다. 우리는 보통 jquey에서 어떤 함수를 사용할 때 셀렉터($)를 통해 사용하고자 하는 위치를 지정한다. 이때 jquery는 $.fn객체로부터 필요한 jquery기본 메소드들을 가져오게 된다.

 

때문에 우리는 $.fn 객체에서 사용하고자 하는 사용자 정의 메소드를 추가할 수 있다.(이것은 플러그인을 만드는 작업이라고도 할 수 있다.)

 

이 사용자 정의 메소드에서 모든 jquery 함수들을 상속받아 사용할 수 있다.

 

간단한 예제를 통해 살펴보면 

// 사용자 정의 메소드 정의
$.fn.ex1 = function() {
	this.css("color", "blue");
};​

$.fn.함수이름을 통해 선언한 뒤 jquery의 css()함수를 사용하여 ex1이라는 사용자 정의 메소드를 만들었다.

 

공통 팝업 띄우기

먼저 해당 예제는 ex_common.js(사용자 정의 메소드를 선언하는곳), ex_use.jsp(선언한 메소드를 사용하는곳), ex_popup.jsp(팝업창)으로 이루어져 있다.

//excommon.js
$.fn.commonExPopup = function(callback, option) { 
//callback변수를 통해 부모창에서 수행하는 동작, 혹은 파라미터를 전달한다.
//option 변수에서 공통팝업에서 추가적인 옵션값을 부여할 수 있다.(해당 예제에서는 checkbox라는 옵션을 부여함)
  var ex_popup;
  var checkbox = option && option.checkbox ? option.checkbox : null;
  var url = '/common/popup/exPopup' + (checkbox ? '?checkbox=Y' : '');
  var popup_option = checkbox ? 'width=800,height=920' : 'width=800,height=810'

  $(this).on('click', function() { //클릭 시 해당 url의 팝업을 호출한다.
  //cp는 기본 경로로써 전역변수로 선언했다. (해당 예제에서는 제외함)
    ex_popup = window.open(cp + url, "ex_popup", popup_option);
  });
  window.callbackExPopup = callback;
  return function() {
    return ex_popup;
  };
}

사용자 메소드를 부여한 버튼을 클릭했을 때 해당 팝업이 열리게 구현하였다.

 

그리고 팝업창과 부모창에서 데이터를 교환하는 부분은 callback변수를 사용해 값을 주고받을 수 있다.

 

추가적으로 option변수를 하나 더 만들어서 checkbox를 true로 주었을 시 checkbox가 들어가는 기능을 추가하였다. checkbox는 url을 통해 checkbox=Y로 값을 전달하고 해당 팝업의 jsp페이지에서 queryObject를 통해 값을 가져와 사용할 수 있다.

var displayChk = queryObject.checkbox;
//checkbox가 Y일 경우 해당 페이지 내에서 분기처리하여 사용할 수 있음.​

 

다음은 commonExPopup을 사용하는 부모 창의 스크립트 예제이다.

//ex_use.jsp
var ex_popup = $('button[name=btnOpenExPop]').commonExPopup(function(data){
//해당 버튼의 이름을 통해 commonExPopup 메소드를 호출함
	
	if(data.length > 0){
    //
    //해당 팝업 창에서 동작했을 시 부모창에서 수행할 동작을 정의하는 부분
    //
	}

	ex_popup().close(); //팝업 닫아줌.
}, {checkbox:true});

버튼 이름을 통해 호출한 뒤 callback받은 데이터에 대한 값들을 가지고 코딩할 수 있다. checkbox:true 로 option 값을 부여해 주었다.

 

마지막으로 callback변수에 데이터를 넣는 부분은 해당 팝업페이지에서

//ex_popup.jsp
window.opener.callbackExPopup(data);

을 통해 data를 던지면 된다. 이 data는 excommon.js에서 callback 파라미터로 받아서 사용할 수 있다.

 

마무리

프로젝트의 크기가 커지고 사용하는 스크립트들이 많아질수록 공통으로 처리할 것들이 많아질 때 해당 사용자 정의 메소드가 유용하게 쓰인다는 점을 알았다.

 

특히 해당 callback변수를 사용하는 부분에서 데이터를 어떻게 가져오는지, 또 어떻게 사용하는지에 대해 조금 더 익숙해져야할 필요성을 느꼈다.