jQuery的鏈式編程風格

時間 2021-07-25

標籤 javascript java 編程 ide 動畫 this spa code 對象 blog 欄目 JQuery 简体版

原文原文鏈接

jQuery的鏈式編程風格javascript

首先本人經過一個案例來展現jQuery的鏈式編程風格。先寫一個頁面，展現一個列表，代碼以下：java

<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對象後，後面的全部方法、屬性的調用都經過「.」進行連續調用便可，這種模式就是鏈式操做。ide

爲了增長代碼的可讀性和可維護性，咱們將上面的鏈式代碼格式的修改以下：動畫

<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>

通過規範格式的調整後，增長了代碼的易讀性，更加方便後期的維護。this

與此同時，咱們對於同一個jQuery對象進行鏈式操做時，主要遵循下面3條格式規範。spa

（1）對於同一個對象不超過3個操做，能夠直接寫成一行，代碼以下：code

<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）對於多個對象的少許操做，能夠每一個對象寫一行，若是涉及子元素，能夠考慮適當的縮進。代碼以下：blog

<script type="text/javascript">
    $(function() {
        $(this).addClass("highLight")
            .children("a").show().end()
            .siblings().removeClass("highLight")
            .children("a").hide();
    });
</script>