JQuery최종-부록c( )

Transcription

1 C P r o g r a m m i n g j Q u e r y jquery 1.3 의변경사항 이책의원서는 jquery 1.2.1을기반으로작성되었고, 번역서인 프로그래밍 jquery 의 1쇄는 jquery 1.2.6의변경사항까지설명했다. 번역서의 2쇄가나오는현시점에서 jquery는 1.3.2가되었으며, 1쇄에서설명하는내용에서크고작은변화가있었다. 기능변화외에도큰성능향상이있었기에실제프로젝트에서 jquery를쓰려한다면, 가능한한최신버전을이용하는편이좋다. 하여 jquery를최신버전으로사용할때도움이되고자 jquery 1.3의주요변경사항을부록으로정리하였다. C.1 C.1.1 사용자측에서는중요한변화로인식되지않을수있지만 jquery 1.3에서가장큰변경사항은바로 CSS 셀렉터를새로운셀렉터엔진인 Sizzle로변경했다는점이다. 셀렉터엔진을바꿈으로써 jquery 1.3은성능면에서비약적으로향상되었다. Sizzle 엔진은독립적으로배포하므로 jquery가아닌다른자바스크립트라이브러리의셀렉터엔진으로도활용할수있다. 셀렉터엔진의변경으로기존 jquery 셀렉터보다 50% 에가까운성능향상이있었고, 다른자바스크립트라이브러리에서

2 사용하는셀렉터와비교해서도성능이월등하다. 더정확한성능평가는 jquery 1.3 릴리스노트의성능영역 ( 을참조하자. 1 C 위임필터링 (Delegation Filtering) 은엘리먼트가셀렉터에매치되는지를확인하는작업이다. 특히 Live Event를적용할경우셀렉터의성능에가장영향을많이끼치는부분이기도하다. Sizzle 엔진설계의주된목적이위임필터링의성능향상이었으며, 거의 30배정도빠르게동작한다. jquery 로작성된애플리케이션을분석한결과 append, prepend, before, after 와같 1 출처는다음과같다. 2 성능개선에관련된자세한사항은다음의 URL을참고하자

3 은엘리먼트삽입에관련된커맨드가가장성능이취약한부분으로드러났다. 따라서성능향상을위해모든코드를재작성했으며그결과이전보다약 6배빠르게동작한다. offset 커맨드는설계부터다시하여재작성되었다. 크로스브라우저에관련된처리를비롯하여성능또한 3배가량빨라졌다. 빈번하게사용하는커맨드중하나인 show() 와 hide() 커맨드역시재작성되었고약 2.5배가량성능이개선되었다. :visible 와 :hidden 셀렉터의구현로직을변경하여성능이크게향상되었다. height(), width(), innerheight(), innerwidth(), outerheight(), outerwidth() 같은엘리먼트의크기를구하는커맨드가모두재작성되었다. 모든브라우저에서실행속도가개선되었다. C.1.3 jquery가 Live Event를지원한다. Live Event는현재존재하는엘리먼트를포함하여미래에추가될엘리먼트에도모두바인딩될수있는이벤트를의미한다. 이는이벤트위임방식을이용하여구현되며, 자세한사항은다음 URL을참조하자. Live Event를지원하기위해 jquery 1.3은새롭게 live() 와 die() 커맨드를추가하였다. 이는 9장에서설명한 LiveQuery 플러그인과유사한기능을지원한다. LiveQuery 플러그인에, 현재페이지내에있는엘리먼트만이아니라앞으로추가되는엘리먼트에도이벤트핸들러가자동으로바인딩되는기능이있었던것처럼 live() 커맨드도이와비슷한기능을제공한다.

4 // 코어 DOM 조작메서드등록 $.livequery.registerplugin('append', 'prepend', 'after', 'before', 'wrap', 'attr', 'removeattr', 'addclass', 'removeclass', 'toggleclass', 'empty', 'remove'); registerplugin: function() { $.each( arguments, function(i,n) { // 메서드가없다면이후처리하지않음 if (!$.fn[n]) return; // 원본메서드의참조저장 var old = $.fn[n]; // 새로운메서드생성 $.fn[n] = function() { // 원본메서드호출 var r = old.apply(this, arguments); // Live Query 실행요청 $.livequery.run(); // 원본메서드결과반환 return r; } },... 그러나유사한기능을제공하지만실제로는몇가지차이점이있다. LiveQuery 플러그인에는추가되는엘리먼트에자동으로이벤트를바인딩하려고 jquery DOM 조작커맨드를약간변형시킨다. 다음은 LiveQuery 플러그인소스의일부분이다. 3 LiveQuery 플러그인은 jquery 커맨드중실제 DOM을조작하는몇몇커맨드를실행한다음 LiveQuery의 $.livequery.run 커맨드를실행하도록소스를살짝변형했다. 이러한방식으로 LiveQuery 플러그인은추가되는 ( 혹은수정되거나삭제되는 ) 엘리먼트에직접이벤트를바인딩한다. 3 출처는다음과같다 a332ec8d/jquery.livequery.js

5 하지만 live 커맨드는 4장에서설명한이벤트버블링방식을사용한다. 4장에서설명했던것처럼브라우저에서발생하는모든이벤트는버블링되어문서의최상위까지전파된다. live 커맨드는이러한특성을이용하여모든이벤트핸들러를 document에바인딩시키는것이다. 이벤트가발생하고 document에도달하면이벤트가발생한엘리먼트와바인딩할때의셀렉터를비교하여조건에맞으면이벤트를실행시키는방식이다. 다음예제에서는 p 엘리먼트에 click 이벤트를바인딩해놓았다. $("p").live("click", function(){ $(this).after("<p>another paragraph!</p>"); 앞으로문서의어딘가에있는 p 엘리먼트에 click 이벤트가발생하면이벤트는버블링을통해 document까지전달된다. 그런다음실제이벤트가발생한엘리먼트와셀렉터 ( p ) 를비교하여조건이맞으면이벤트가발생하고, 그렇지않으면이벤트는발생되지않는다. 이러한차이점으로인해 LiveQuery 플러그인이항상 jquery의 DOM 조작커맨드를사용하여엘리먼트를추가한경우에만 ( 혹은수정하거나삭제한경우 ) 이벤트가자동으로바인딩되는반면 live 커맨드는어떤방식으로엘리먼트를추가해도셀렉터와조건이일치하기만한다면이벤트는발생한다. 더상세한차이점과커맨드정보를알고싶다면다음 URL에서얻을수있다. C.1.4 jquery 1.3부터는더는브라우저스니핑 (Browser Sniffing) 을사용하지않는다. 현재자바스크립트개발환경에서는필연적으로브라우저에의존하는코드를많이생산할수밖에없다. jquery 역시이러한이유로 jquery.browser 플래그를이용해현재실행중인브라우저의정보를제공하며, jquery도이플래그를사용하여개발했었다. 브라우저를구분하여개발하면새로운브라우저가출연하거나동일한브라우

6 저라도다양한버전을지원하거나, 패치나새버전으로인해기능이변경되면코드를일일이바꿔줘야한다. 그러므로이에따른변경비용이많이발생한다. jquery 1.3은이러한문제점을해결하려고기능탐지 (feature detection) 를사용해단순히브라우저를구분하는방식이아니라, 실제로기능을지원하는지여부를확인하여코드를작성하도록제안한다. 이는객체탐지와유사한방식이다. 기존에는다음과같이브라우저를확인하여코드를작성하였다면, $( div#view ).style[ jquery.browser.msie? stylefloat : cssfloat ] = left ; 1.3.2에서는새롭게추가된 jquery.support 객체를사용하여다음과같이작성한다. $( div#view ).style[ jquery.support.cssfloat? cssfloat : stylefloat ] = left ; 예제자체로는차이점이크게느껴지지않을수있다. 하지만만약새롭게크롬이라는브라우저가출시되었고크롬이 stylefloat 방식을지원한다면코드는어떻게수정해야할까? 기존방식이라면다음과같이새로운브라우저에대한확인코드를추가해야한다. $( div#view ).style[ jquery.browser.msie jquery.browser.chrome? stylefloat : cssfloat ] = left ; 하지만변경된방식으로 jquery.support 객체를사용하면코드를바꿀필요가없다. $( div#view ).style[ jquery.support.cssfloat? cssfloat : stylefloat ] = left ; jquery 내부에서기능을지원하는지여부를확인하기때문에가능한결과다. 즉, 이전같았으면코드를수정해야될부분이 jquery 내부로흡수된것이다. 결론적으로 jquery 1.3부터는다음과같은이전플래그사용을권장하지않는다. jquery.browser jquery.browser.version jquery.boxmodel

7 C.2 C 에는애니메이션큐 (queue) 처럼기존에있는큐를관리하거나새로운큐를생성해서워크플로단위로관리할수있는커맨드가추가되었다. 공식사이트에서 queue() 예제를보자. 전체소스는 queue에서확인할수있다. $( #show ).click(function () { var n = $( div ).queue( fx ); $( span ).text( Queue length is: + n.length); function runit() { $( div ).show( slow ); $( div ).animate({left: +=200 },2000); $( div ).slidetoggle(1000); $( div ).slidetoggle( fast ); $( div ).animate({left: -=200 },1500); $( div ).hide( slow ); $( div ).show(1200); $( div ).slideup( normal, runit); } runit(); 이예제는큐에애니메이션을여덟개쌓고, 마지막여덟번째 slideup의콜백으로다시 runit() 을호출하여애니메이션을계속해서반복한다. 애니메이션을실행하는도중에사용자가버튼을클릭하면, 실행되는시점에서 fx 큐의크기를보여준다. 버튼을누를때마다실행중인애니메이션에따라큐크기가바뀌는것을알수있다. queue() 의매개변수로큐의이름을지정하지않으면기본큐인 fx 큐에쌓인다. 그리고애니메이션은기본큐에쌓인다는사실을기억하자. 다음으로공식사이트에있는 dequeue() 예제를보자. 전체소스는 jquery.com/core/dequeue에서확인할수있다.

8 $( button ).click(function () { $( div ).animate({left: +=200px }, 2000); $( div ).animate({top: 0px }, 600); $( div ).queue(function () { $(this).toggleclass( red ); $(this).dequeue(); $( div ).animate({left: 10px, top: 30px }, 700); 이예제는큐에동작을다섯개넣는다. 여기서 toggleclass는애니메이션이아니기때문에기본적으로큐에추가되지않는다. 따라서순서대로동작이실행되도록 queue() 를이용해순서를지켜넣어주고, 클래스를토글한후큐의다음내용을계속해서실행하도록 dequeue() 를호출한다. dequeue() 를호출하면큐에서큐의다음구성요소를꺼내오고 (pop), 이를실행한다. 예제에서는 dequeue() 가실행되면마지막 animate() 함수가실행된다. C.2.2 W3C 셀렉터 API 표준에따라서셀렉터를이용해가져온엘리먼트가문서에정의된엘리먼트순서대로유지된다. 다음예제를보자. 이를 jquery 이전에서실행하면 h1h1h2h2h2h3 을보여주지만 jquery 1.3.2에서는문서에정의된순서대로 h1h2h1h2h3h2 를보여준다. <html> <head> <script type= text/javascript src=../scripts/jquery js /> <script> $(document).ready(function(){ alert($( h1, h2, h3 ).text()); </script> </head>

9 <body> <h1>h1</h1> <h2>h2</h2> <h1>h1</h1> <h2>h2</h2> <h3>h3</h3> <h2>h2</h2> </body> </html> 이미 jquery 연산자를이용할수는있었다 에서는 img[@src] 같은형식의셀렉터가권장되지않았을뿐유효는했지만 jquery 1.3부터는이와같은방식을더는지원하지않는다. 를제외한 img[src] 와같은형식을이용하자. 이책의 34쪽에서 $(< script/ >) 와같은방식은안정성을보장하지않는다고설명했다. 하지만 jquery 1.3부터는 $(< script/ >) 를 $(document.createelement( script )) 와동일하게취급한다. 다시말해 $(< script/ >) 방식으로 <script> 엘리먼트를생성할수있다. 셀렉터와일치하는가장가까운부모엘리먼트를찾아오는 closest( selector ) 가새롭게추가되었다. 이벤트가발생한엘리먼트에서부모엘리먼트로이벤트를위임할때유용하다. 예를들어, 다음코드를보자. 이벤트가발생한엘리먼트에서자신을포함해서가장가까운부모 li 엘리먼트를찾아서 hilight 클래스를추가한다. 자신부터하나씩위로올라가면서평가한다. $(document).bind( click, function (e) { $(e.target).closest( li ).toggleclass( hilight );

10 예제의전체소스코드는 를참조한다. 이전에는 is() 커맨드 (49쪽) 와 :not() 필터 (31쪽) 에서전달되는복잡한형태의셀렉터를사용할수없었지만 1.3부터는사용이가능해졌다. 예를들면특정클래스로한정하고그중원하지않는 element를제거할때다음과같이쓸수있다. $(.myclass:not(div h1) ) 예제 7에서이셀렉터문법을이용하여사용자가클릭하면, div 엘리먼트하위에있는 h1 엘리먼트를제외한헤더의배경색을노란색으로강조한다. 기존에는 $(.myclass:not(h1) ) 같은표현은가능했지만이렇게복잡한형태로셀렉터문법을이용할수없었다. <html> <head> <script type= text/javascript src=../scripts/jquery js /> <script> $(document).bind( click, function (e) { $(.myclass:not(div h1) ).addclass( hilight ); </script> <style>.hilight { background: yellow; } </style> </head> <body> <h1 class= myclass >h1</h1> <h2 class= myclass >h2</h2> <h3 class= myclass >h3</h3> <div> <h1 class= myclass >h1</h1> <h2 class= myclass >h2</h2> <h3 class= myclass >h3</h3> </div> </body> </html>

11 C.2.3 기존의애니메이션방식은높이, 너비, 불투명도만조정했지만 jquery 1.3에서는마진과패딩도함께조정할수있어더부드러운애니메이션효과를나타낸다. animate 커맨드 (155쪽) 에서 duration 매개변수의값을 0으로지정하면애니메이션을수행하지않고바로최종상태가된다. 이에따라서 speed 매개변수를 0으로설정해도 150~153쪽에서설명한 fadeout, fadein, fadeto, slidedown, slideup, slidetoggle 커맨드의애니메이션이실행되지않고바로최종상태가되어버린다. 다음은 slideup 커맨드의 speed 매개변수를 0 으로지정하고실행하는예제다. jquery 1.2.6에서는애니메이션을실행하지만 jquery 1.3에서는애니메이션을실행하지않고바로최종상태가된다. <html> <head> <script type= text/javascript src=./jquery js /> <script> $(document).ready(function(){ $( button ).click(function () { $( div ).slideup(0); </script> </head> <body> <button>start</button> <div> <ul> <li>item1</li> <li>item2</li> </ul> </div> </body> </html>

12 145쪽에서설명한 toggle 커맨드에이제 Boolean 매개변수를이용하는커맨드가추가됐다. 조건문을이용해효과를적용할지여부를결정하지않고바로 switch 값을이용해서결정할수있다. 143쪽의예제 5-2로돌아가보자. 다음과같이코드를수정하면사용자이벤트와상관없이리스트는항상펼쳐진상태를유지한다. $(function(){ $( li:has(ul) ).click(function(event){ if (this == event.target) { $(this).children().toggle(true); $(this).css( list-style-image, ($(this).children().is( :hidden ))? url(plus.gif) : url(minus.gif) ); } return false; }).css( cursor, pointer ).click(); $( li:not(:has(ul)) ).css({ cursor: default, list-style-image : none 모든애니메이션이실행되지않도록꺼두는프로퍼티인 jquery.fx.off가새로이추가되었다. jquery.fx.off = true; 를설정하면모든애니메이션을실행하지않는다. 5장에있는 접을수있는리스트 - 4 예제에이코드를추가하면애니메이션이수행되지않고바로최종상태가됨을확인할수있다. 코드를어디에넣어야할지모르겠다면 <script type= text/javascript > 바로아래영역에넣어보자. 코드를넣기전과후, 그리고 jquery 1.3과 1.2일때의차이점을확인해보자. jquery 1.2.6에서는코드를넣어도애니메이션이실행된다.

13 C 쪽에서설명한 toggleclass 커맨드에 Boolean 매개변수를이용하는커맨드가추가됐다. 전달받은 state(boolean) 에따라 switch가 true면 classname을추가하고 false면 classname을제거한다. 3장에서소개한움직이는얼룩무늬예제로확인해보자. 다음과같이 emphasis 클래스를추가하고준비핸들러를변경한다. 테이블의행을클릭할때 1990년도이후에생산된모델만 emphasis 클래스로강조되는것을확인할수있다 (appendixc/ zebra.stripes.toggleclass.html). // 추가된스타일시트 tr.emphasis { background-color: red; color: yellow; } // 수정된코드 var count = 0; $( table tr:nth-child(even) ).addclass( striped ); $( tr ).click(function(){ var el = $(this).children()[0]; $(this).toggleclass( emphasis, ( count++ % 2 == 0 ) && ( $(el).html() >= 1990 )); 3.3.2절에서는엘리먼트를이동하거나복사하는데 appendto(), prependto(), insertbefore(), insertafter(), replaceall() 커맨드를쓴다고설명했다. 이커맨드들은커맨드를실행하기전의확장집합을반환했지만 1.3.2부터는삽입된전체확장집합을반환하게되었다. 예를들어이전까지는다음의예제를실행시키면,

14 <div></div> <div></div> <script> $( <p/> ).appendto( div ).addclass( test ); </script> appendto() 커맨드가 p 엘리먼트를 1 개만반환하므로실행결과는다음과같았다. <div><p class= test ></p></div> <div><p></p></div> 하지만 1.3.2부터는각 div 엘리먼트에삽입된 p 엘리먼트를 2개반환하므로실행결과는다음과같다. <div><p class= test ></p></div> <div><p class= test ></p></div> C 쪽에서설명한 trigger() 커맨드로발생시킨이벤트도일반이벤트와마찬가지로버블링을발생시키도록변경되었다. 단이전과마찬가지로 Event 인스턴스의프로퍼티중에서브라우저에종속된프로퍼티는여전히존재하지않는다. appendixc/dom.2.propagation.trigger.html 파일을로드하고 Start 버튼을클릭하면그림과같이이벤트가버블링되는결과가나타난다. 물론 Button 버튼을클릭해도동일한결과가나온다. 두버튼의차이를보자면 Start 버튼은다음과같이 trigger 커맨드를사용하여이벤트를발생시킨다는것이다. $( #start ).click(function(event){ $( #btnst ).trigger( click ); // 버튼클릭 event.stoppropagation();

15 11쪽에서알아본 ready() 커맨드로스크립트를로드할경우에는모든스타일시트가스크립트보다먼저로드되는것을보장할수없다. 특히문서를로드할때실행되는스크립트에서사용하는클래스가있다면주의해야한다. 예를들어특정엘리먼트의 position이스타일시트에서 absolute로설정되어있고 ready() 커맨드에할당된핸들러에서엘리먼트의위치를이동시키고자한다고하자. 스타일시트를제대로로드하지못했다면 position의기본값이 static이므로엉뚱한결과를얻을수있다. 따라서스타일시트가있다면반드시스크립트보다먼저문서에포함시켜야한다. C.2.6 jquery.isarray() 함수는매개변수로전달된객체가배열인지를판단한다. 다음과같은코드를실행하면브라우저는경고창에 true를표시한다. 만약매개변수가배열이아니라면경고창은 false를표시할것이다. var avalue = [1, 2, 3]; alert($.isarray(avalue)); // 경고창에 true 가표시된다.

16 jquery.isfunction() 함수는매개변수로전달된객체가함수인지판단한다. 1.3에서는복잡한예외처리기능을제거하고, 그대신내부코드를한층간결하게만들었으며, 성능을크게향상시켰다. 하지만그로인해인터넷익스플로러에서는 alert이나 getattribute와같은브라우저가제공하는함수를 jquery.isfunction() 함수에매개변수로전달하면함수로판단되지않으니, 주의해서사용해야한다. 다음의예제에서사파리 4 브라우저의경우 alert 함수를 true로판단하지만인터넷익스플로러 6에서는 false로판단한다.

17 ... function stub() {} var objs = [ function () {}, { x:15, y:20 }, stub, alert ];... jquery.each(objs, function (i) { var isfunc = jquery.isfunction(objs[i]); $( span ).eq(i).text(isfunc);... <div>jquery.isfunction(objs[0]) = <span></span></div> <div>jquery.isfunction(objs[1]) = <span></span></div> <div>jquery.isfunction(objs[2]) = <span></span></div> <div>jquery.isfunction(objs[3]) = <span></span></div>... jquery.param() 함수는매개변수로전달된객체나폼엘리먼트의객체를직렬화시킨다. 이전까지는전달된객체의프로퍼티가함수일때는이를단순히문자열로변환했지만 1.3부터는해당함수를실행한결과값으로직렬화한다. 다음예제에서는 in과 out에할당된함수가실행되어결과로 in에는 11로, out에는 20으로값이결정된다. 만약이전버전과같이함수를문자열로전달하고싶다면직접 URL을인코딩하면된다. var params = { in:function(){ return 11; }, // 함수 out:function(){ return 20; } // 함수 }; var str = jquery.param(params); alert(str); // 경고창에 in=11&out=20 이표시된다.

18 C.2.7 8장 265쪽에서설명한 jquery.ajax() 함수에전달되는옵션에 datafilter와 xhr이추가되었다. datafilter 옵션은응답결과를필터링하거나파싱하는함수다. 신뢰할수없는응답결과를걸러내는데유용하고, 응답결과가 json이나자바스크립트구문이면원하는동작을수행할수있다. datafilter 옵션에설정되는함수는 data와 type이라는두매개변수를가진다. data는서버에서반환된값이며, type은 datatype 옵션의값이다. appendixc/datafilter.1.3.html 파일을로드하고 Load 버튼을클릭하면그림처럼서버를통해문자열이표시된다. datafilter 함수가적용된문자열은다음과같은함수를이용하여문자열의결과를모두소문자로변환시켰다. 예제에서는간단한작업만해보았지만원하는어떠한작업도가능하다.

19 .. datafilter: function(data, type) { return data.tolowercase(); },.. xhr 옵션은 XMLHttpRequest 객체를생성하여반환하는콜백함수다. 일반적으로 jquery는브라우저에따라 ActiveX나 XMLHttpRequest 객체를생성하여 Ajax 통신에이용한다. 이콜백함수를쓰면 Ajax 호출에사용자가구현한 XMLHttpRequest 객체를적용할수있으며 XMLHttpRequest 객체를생성하는방식을사용자가원하는대로개선할수있다. 241쪽에서설명한 load() 커맨드에서 parameters 매개변수가 data로이름이변경되었으며데이터를문자열형태로전달할수있게되었다. 문자열을전달할때는 GET 메서드를사용하고, 객체를전달할때는 POST 메서드를사용한다. 즉다음과같이 load() 커맨드에 data 매개변수를문자열형태로전달할수있다... $(document).ready(function(){ $( #btn ).click(function(){ $( #rst ).load( load.jsp, val=10 );.. appendixc/load.1.3.html 파일을로드하고 Load 버튼을클릭하면, 매개변수로전달한데이터를이용하여서버에서처리된결과값이반환됨을확인할수있다. C 부터는 HTML 문서를표준모드 (standard mode) 로사용해야한다. 비표준모드

20 (quirks mode) 에서는올바르게동작하지않는메서드가있다. 1.3 부터는사파리 2 브라우저를지원하지않는다. jquery 1.3의배포와함께 jquery의 API 문서를편리하게찾아볼수있도록새로운 API 브라우저가공개됐다. 에서이용할수있으며 Adobe AIR 기반의설치형애플리케이션도제공한다. API의즐겨찾기기능을제공하므로자주사용하는 API에대한문서를쉽게볼수있다.