봉봉의 개인 블로그
2017-07-19-T(JQuery 플러그인 제작 및 콜백함수 및 바로호출 본문
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR"> <title>Insert title here</title> <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> --> <script src="<%=request.getContextPath()%>/js/jquery-3.2.1.js"></script> </head> <body> <button type="button" id="ex" name="extest"> 추가 </button> <span>1</span><span>2</span><span>3</span> <script type="text/javascript"> //플러그인제작하기 (function($){ $.fn.mySpanSearch = function(myfn){ return this.each(function(){ $(this).click(myfn) }); } })(jQuery); $(document).ready(function(){ $('span').mySpanSearch(function(){ console.log($(this).text()); alert($(this).text()); }); }); //콜백함수 var myfn = function(fn){ fn('콜백함수호출'); } myfn(function(msg){ alert(msg) }); $('#ex').click(function(e1,e2,e3){ console.log(e1,e2,e3) }); //함수명 없이 바로 실행시키기 (function(msg){ alert(msg) })('저는 함수 입니다.'); //위와 같은 실행을 보임 = 간략한 바로 실행을 위해선 위의 실행방법 추천 var callFn = function(msg){ alert(msg); } callFn('함수함수 우왕함수'); </script> </body> </html> | cs |
플로그인을 제작할때 16~22번문 같이 적어주게 된다.
설명을 조금 하면 먼저 16번줄에서 매개변수 값으로 $를 받는 함수를 만들고 그 함수의 내용은 17~21번째 줄까지 적혀있고 22번째 줄에서 매개변수 값으로 제이쿼리를 넣어준것이다. 지금은 클릭이벤트를 만든것이다.
클릭이벤트롤 mySpanSearch 에 담았기에 이제 23번째줄에서 28번째 줄과 같이 적어주게 되고
24번줄과같이 하게 되면 span이라는 태그를 가진것을 눌렀을때 클릭이벤트가 발생하게 되는것이다.
그리고 클릭했을때 그안에 function 안에 있는 것들이 또 실행되게 되는것이다.
다음은 콜백함수에 대해서 설명하겠다.
먼저 31번줄과 같이 myfn이라는 함수를 만들어줍니다 이 함수는 fn을 매개변수로 가지게 되는데 그 fn안에는 콜백함수 호출이라는 text 가 들어있다 그리고 34번줄에서 myfn함수를 호출하게 되고 그 안에는 매개변수 값으로 받는 fn의 text 가 있게 되고 그 text를 받아서 뒤에 msg안에 들어가서 alert창이 뜨게 되는것이다. 그와마찬가지로 37번줄~39번줄까지의 문장을 통해 클릭이벤트에 관해 어떤 정보값이 들어왔는지 콜백함수를 이용하여서 확인할수도 있게 된다.
다음으로는 바로호출에 관련해서 알아보겠다.
먼저 40~43번째 줄까지를 먼저 보면
(function(msg){
alert(msg)
}) 부분까지가 바로 메서드 부분처럼 생각하면되고 뒤에 ('저는 함수입니다'); 이부분이 메서드에 들어가는 매개변수라고 생각하면 내용이 어느정도는 이해가 될것이다.
44~48번째줄까지도 같은 실행 방법이다 그렇지만 하나는 함수명 없이 그냥 호출한것이고 하나는 함수명에 따라서 호출한게 되어버린것이다.
'학원에서 배운것들 > TEA - T' 카테고리의 다른 글
| 2017-07-12-Entity Relationship Diagram (0) | 2017.07.12 |
|---|---|
| 2017-07-11-T(게시판 editor)이미지 업로드 가능 (0) | 2017.07.11 |
| 2017-07-10-T(mock up) (0) | 2017.07.10 |
| 2017-06-30-T (0) | 2017.06.30 |
| 2017-06-29-T (0) | 2017.06.29 |
