關於jQuery的程式碼，以前都是直接取節點，綁事件一把梭，但是這樣子會使程式碼很亂不方便維護。

今天介紹一個新的程式碼組織形式

實現看原始碼

    $(function () {
        //切換bananer
        $('.bar-item').click(function () {
            $(this).attr('class', "bar-item bar-cur").siblings().attr('class', "bar-item")
            $(".banner a").eq($(this).attr("index")).fadeIn(1800).siblings().fadeOut();
        })
    })
 

原始碼就是很簡單的這樣一個操作，這樣看起來也沒什麼問題，但是當我們的頁面有很多個DOM節點需要操作時，如果程式碼還是這樣寫就會顯得很亂，下面進行程式碼組織優化

var index = {
    // 初始化
    init: function () {
        var me = this
        me.target()
        me.created()
        me.render()
    },

    // 相關DOM節點儲存
    target: function () {
        var me = this;
        me.barItem = $('.bar-item') // banner切換按鈕 
    },

    // 頁面初始化資料獲取
    created: function () {
        var me = this;
    },

    // 事件繫結
    render: function () {
        var me = this
        // 切換banner事件
        me.barItem.click(function () {
            $(this).attr('class', "bar-item bar-cur").siblings().attr('class', "bar-item")
            $(".banner a").eq($(this).attr("index")).fadeIn(1800).siblings().fadeOut();
        })
    }
}

$(function () {
    index.init();
});
 

這種寫法大家應該都是不陌生髮，防止了變數汙染，而且集中管理變數、事件方便後期維護