例項詳解jQuery的鏈式程式設計風格
阿新 • • 發佈:2021-06-03
鏈式程式設計的實現原理
jquery可以讓我們開發者一直使用點語法呼叫自身方法的原理,主要原因是jQuery內部利用了js的物件來實現。
在jQuery中,如果一直對同一個元素或元素的其他關係元素(兄弟元素,父子元素)進行操作,那麼可以使用 .語法(點語法),一直寫下去。
$("#box").css("background","pink").css("font-size":"29px"); $("#box").siblings().css("background","");
可以寫成:
$("#box").css("background","pink").siblings().css("background","red");
實現鏈式程式設計jQuery選擇器本身是一個jquery物件。jQuery內部利用this返回了自己本身。
//js中,宣告一個物件 var obj = { name:"姓名",desc: function(){ console.log(this); // 列印當前自身物件 console.log(this.name); // 呼叫自身物件的屬性 return this; // 實現鏈式程式設計的原理,就是在呼叫方法後,方法本身返回物件。 },read: function(){ console.log("hello!"); return this; }}
jQuery的鏈式程式設計風格例項
首先本人通過一個案例來展示jQuery的鏈式程式設計風格。先寫一個頁面,展示一個列表,程式碼如下:
<body> <div> <ul class="menu"> <li class="level1"> <a href=程式設計客棧"#">水果</a> <ul class="level2"> <li><a href="#">蘋果</a></li> <li><a href="#">菠蘿</a></li> <li><a href="#">香瓜</a></li> </ul> </li> <li class="level1"> <a href="#">主食</a> <ul class="level2"> <li><a href="#">麵條</a></li> <li><a href="#">饅頭</a></li> <li><a href="#">米飯</a></li> </ul> </li> </ul> </div> </body> <script type="text/javascript"> $(function() { $(".level1 > a").click(function() { $(this).addClass("current").next().show().parent.siblings().children("a").removeClass("current").next().hide(); return false; }); }); </script>
程式碼執行後的效果如下圖所示:
上述程式碼的擴充套件效果就是通過jQuery的鏈式操作實現的,所有增加current類的操作、查詢子元素的方法呼叫、動畫方法的呼叫等都是對同一個元素進行的,所以在開始獲取到一個jQuery物件後,後面的所有方法、屬性的呼叫都通過 “.” 進行連續呼叫即可,這種模式就是鏈式操作。
為了增加程式碼的可讀性和可維護性,我們將上面的鏈式程式碼格式的修改如下:
<script type="text/javascript"> $(function() { $(".level1 LdHdIT> a").click(function() { // 給當前的元素新增current樣式 $(this).addClass("current") // 下一個元素顯示 .next().show() // 父元素的同輩元素的子元素a移除current樣式 .parent.siblings().children("a").removeClass("current") LdHdIT // 他們的下一個元素隱藏 .next().hide(); return false; }); }); </script>www.cppcns.com
經過規範格式的調整後,增加了程式碼的易讀性,更加方便後期的維護。
與此同時,我們對於同一個jQuery物件進行鏈式操作時,程式設計客棧主要遵循下面3條格式規範。
(1)對於同一個物件不超過3個操作,可以直接寫成一行,程式碼如下:
<script type="text/javascript"> $(function() { $("li").show().unbind("click"); }); </script>
(2)對於同一個物件的較多操作,建議每行寫一個操作,程式碼如下:
<script type="text/javascript"> $(function() { $(this).removeClass("mouseout") .addClass("mouseover") .stop() .fadeTo("fast",0.5) .fadeTo("fast",1) .unbind("click") .click(function() { ....... }); }); </script>
(3)對於多個物件的少量操作,可以每個物件寫一行,如果涉及子元素,可以考慮適當的縮排。程式碼如下:
<script type="text/javascript"> $(function() { $(this).addClass("highLight") .children("a").show().end() .siblings().removeClass("highLight") .children("a").hide(); }); </script>
以上就是有關jQuery的鏈式程式設計風格。
總結
到此這篇關於jQuery鏈式程式設計風格的文章就介紹到這了,更多相關jQuery鏈式程式設計內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!