jQuery的鏈式程式設計風格

阿新 • • 發佈：2021-07-14

首先本人通過一個案例來展示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條格式規範。

http://www.ssnd.com.cn 化妝品OEM代加工

（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的鏈式程式設計風格。