jQuery的鏈式編程風格
- 2021 年 5 月 29 日
- 筆記
- Jquery, jQuery編程風格
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 > a").click(function() { // 給當前的元素添加current樣式 $(this).addClass("current") // 下一個元素顯示 .next().show() // 父元素的同輩元素的子元素a移除current樣式 .parent.siblings().children("a").removeClass("current") // 他們的下一個元素隱藏 .next().hide(); return false; }); }); </script>
經過規範格式的調整後，增加了程式碼的易讀性，更加方便後期的維護。
與此同時，我們對於同一個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的鏈式編程風格。
