[TOC] ## 前言 我們在一些陳舊或者傳統mvc的項目中還是會經常使用jq，但是由于對jq api或者核心思想不熟悉，導致我們的某些寫法并不是特別好，這里會摘錄一些并給出大家更好的寫法建議。 ## 選擇元素 ### 選擇器使用 盡量使用綜合查詢效率最高的，一般id以及元素選擇是最高效的，其實是class,最差的是屬性選擇器以及偽類選擇器。 所以最終建議如果dom較多的話，最優先使用id選擇器固定最小范圍。 ### 循環篩選目標元素耗時 如果你有需要判定某列表中的元素是否具有某特點，盡量用選擇器去實現，不要用循環 ~~~javascript //不建議 $("li").each(function(index){ if($(this).hasClass("active")){ } }) //建議,注意這里用到了同時篩選的語法，可以同時符合li以及.active原則 $("li.active") ~~~ ### 相關元素比全局查詢效率高 ~~~javascript //不建議 $(".list li") $(".list") //建議 var $li=$(".list li") $li $li.parent() ~~~ ## jq的鏈式操作 ### 理解鏈式操作的原理 首先我們知道jq對原生對象是有一次封裝的，兩者支持的方法以及屬性調用是完全不同的，一個屬于原生語法，一個屬于jq-api。并且兩者可以互相轉換，這里提下兩者轉換的語法，雖然比較冷門，但作為常識要清楚。 ~~~javascript //從jq對象轉為原生對象 var oriDom=$("sel")[0] var oriDom=$("sel").get(0) //從原生對象轉為jq對象 var oriDom=document.getElmentById("sel") var $dom=$(oriDom) ~~~ 那么重點來了，jq是如何支持鏈式操作的呢？原理也很簡單，在任何一個jq方法結束其操作之后都會重新返回其jq對象。我們找到源碼部分：jq的show(),hide()方法，可以看到其最后會把原生對象重新返回。 ~~~javascript function showHide( elements, show ) { //功能代碼 return elements; } jQuery.fn.extend( { show: function() { return showHide( this, true ); }, hide: function() { return showHide( this ); } } ~~~ ### 基于鏈式思想的寫法建議 - 同一操作對象的多個方法并列 ~~~javascript //不建議 $(target).addClass('class1') $(target).html('文本內容') //建議,不超過四個操作寫在同一行，超過四個可以考慮每四個換行 $(target).addClass('class1').html('文本內容') ~~~ - 相關元素的操作，經典場景:過濾tab元素添加active,其他元素去除active ~~~javascript //不建議,一者寫麻煩，二者前面為全量移除樣式當前元素可能不需要 $(".tab").removeClass('active') $(this).addClass('active') //建議,使用siblings() $(this).addClass('active').siblings().removeClass("active") ~~~ - 同一元素相關元素的操作。可以使用end返回上一級 ~~~javascript //不建議,、 $(".target").prev().removeClass('active') $(".target").next().addClass('active') //建議,使用siblings() $(".target").prev().removeClass('active').end().next().addClass('active') ~~~ ## 認識漏洞 ### 選擇多元素操作 ~~~javascript //不建議 $(".demo1").addClass('class1') $(".demo2").addClass('class1') //建議,同一類操作可以同時篩選并進行 $(".demo1,.demo2").addClass('class1') ~~~ ### 添加與移除樣式 ~~~javascript //不建議 $(".demo1").addClass('class1').addClass('class2') //建議,添加以及移除樣式可以支持多個，空格隔開即可 $(".demo1").addClass('class1 class2').removeClass("class1 class2") ~~~ ### 數據存儲與使用 我們都知道jq封裝了針對數據使用的.data(key,value)方法，也知道其有工具方法$.data(ele,key,value),建議使用工具函數因為其定義在原生對象原型鏈，操作效率更高 ~~~javascript //不建議 $(target).data(key,value) //建議 $.data($(target),key,value) ~~~ ## 合理使用緩存 ~~~javascript //不建議 $(".demo1").addClass('class1') $(".demo1").click(fn) //建議,超過兩次就可以考慮定為變量，除非這個元素在方法進行時會發生變化需要重新獲取 var $demo1=$(".demo1") ~~~ ## 多次操作dom合并 ~~~javascript //不建議 $(".demo1").append('<div></div>') $(".demo1").append('<div></div>') //js操作進行很快，dom部分邏輯完成后一次賦值 var htmlStr="<div></div><div></div>" $(".demo1").append(htmlStr) ~~~ ## 關于事件 ### 事件委托 我們知道元素的時間會向上冒泡成為父元素的事件，在大多數人針對列表項的事件可能是同時綁定子元素事件。 ~~~javascript //不建議 $("ul li").click(fn) //針對父元素綁定一次即可 $("ul").on("click","li",fn) ~~~ ### 事件觸發 如果需要觸發多個其他事件，建議寫成trigger(),尤其是某些全局性、常用的工具函數事件建議這樣寫。 ~~~javascript //不建議 $("li").click(function(){ fn1(), fn2() }) //建議,注意這里用到了同時篩選的語法，可以同時符合li以及.active原則 $("li").click(function(){ $.trigger("FN1") }) $(document).on("FN1",function(){ fn1() }) ~~~ ### 綁定多個事件類型 ~~~javascript //不建議 $(target).click(fn) $(target).focus(fn) //建議 $(target).on("click focus",fn) ~~~ ### 合成事件 某類事件其相關事件可以直接定義在其后,這類的有hover與toogle，鼠標的移入與移出等 ~~~javascript //建議 $(target).toogle(func1,func2,func3,…) $(target).hover(enter,leave) ~~~ ## 參考文檔 - 《鋒利的jQuery 第二版》