Jquery Object 의 경우 변수 모호성을 명확하게 하기 위해 변수명 앞에 "$ + 변수명" 으로 처리 한다.
// Bad case Before Code var name = $("#Name"); // Good case var $name = $("#Name"); var name = $("#Name").val();
범위를 한정할수록 JQuery Selecter의 성능이 향상된다.
// class 검색시 임의의 class btn 을 찾는다. var active = $(".Active") // 이 경우 모든 항목에서 Active class 를 찾아서 결과를 return 한다. // 개선된 방법 var active = $("li.Active"); // 이 경우 li tag 항목중 Active class 를 찾아준다.
<body> <ul id="menu"> <li> <input type="text"> </input> <div> </div> </li> </ul> <script> $(function(){ var menu = $("$menu"); // 검색 범위를 한정하고 menu 범위에서 하위를 검색 var input = menu.find("li"); // 명시적인 접근으로 성능을 더 향상 시킨다. var input = menu.find("li div"); }) </script> </body>
한 객체의 연속적인 값을 설정할때의 주의 사항
// Bad case Before Code $("#spnVendorName").attr("readonly", true); $("#spnVendorName").css("cursor", "default"); $("#spnVendorName").css("color", "black"); // Good case After Code $("#spnVendorName").attr("readonly", true) .css("cursor", "default") .css("color", "black");
한 객체의 하위 Child 에 대한 접근을 할 경우 처리 방법
// Bad case Before Code $("#spnTable").find(".selected").attr("readonly" , true); $("#spnTable").find(".nonselected").attr("readonly" , false); // Good case After Code $("#spnTable").find(".selected").attr("readonly" , true).end() .find(".nonselected").attr("readonly" , false);
end Method는 최초 object 를 return 한다
Form 에 속한 input 접근시 해당 Form 에 대한 값에 대해 serialize()를 통해 json 포맷의 값을 얻을 수 있다.
// "Form" 안의 값을 Ajax parameter 등으로 사용할때에는 serialize() 를 활용한다. var str = $("#form").serialize(); // Javascript Array 형식으로 Form의 용을 serialize 하는방법 var arrayObj = $("#form").serializeArray(); <form id="form"> <input id="name" type="text" /> </form>
참고 - http://api.jquery.com/serialize/ - http://api.jquery.com/serializeArray/
$.each 나 for문 작성시 loop 문 안에서 $(".menu") 라든지 selector 는 하지 않는다. selector 안에서도 loop가 동작하게 되어 성능을 저하 시킨다.
var catType = ['Tiger' , 'Lion' , 'Cat']; var content; $.each(catType , function() { var text = this; // 배열의 각각 항목 content += "<li>" + this + "</li>"; } );
$("btnSearch").onclick 을 사용하지 않는다. onclick 이 아닌 on 을 사용한다.
// bad case $("btnSearch").onclick(function () {}); //good case $("btnSearch").on("click" , function (){} );
gracieabrams
gummygunk
2087
izzy806
turnnoffyourmind
areudirty