jQuery項目代碼結構劃分

一般使用jQuery結合js進行項目開發前，需要將項目的邏輯代碼結構進行整理和劃分，以此避免開發後期代碼結構混亂。

我一般的代碼結構劃分如下：

整個js以對象的形式進行封裝，數據和方法劃分得很清晰，初始化應該做什麼都很明白。

而其他功能性的方法也可以定義在對象裏面，在其他方法體裏調用。

這裏對主要的三部分進行說明。

1、獲取頁面DOM元素和初始化數據

應該在項目初始化時講用到的DOM都獲取和定義好，爲下面的調用做好準備。而數據也是一開始就應該請求和初始化好。

var myTab = {
    initData:{},
    getDomAndData: function () {
        // 獲取需要操作的DOM
        this.$tabs = $(".tabs");
        this.$tabLeft = $(".tab-left");
        this.$tabRight = $(".tab-right");
        this.$contentLeft = $(".content-left");
        this.$contentRight = $(".content-right");

        // 初始化請求數據
        dataRequest.request({
            key: "getData",
            type: "POST",
            callback: function (dd) {
                if (dd.resultCode !== "Y") {
                    PublicPopup.messageBox({ text: "數據請求出錯！" });
                    return;
                }
                myTab.initData = dd.list;
            }
        });
    }
}

2、數據和DOM渲染

到這一部分應該將第一步的初始化獲取的數據結合DOM進行渲染。

setDom: function () {
        this.$contentRight.html(this.showTemplate(this.initData));
    }

3、對公共的方法進行定義，比如模板方法等等

對一些公共的方法進行定義，可以減少項目代碼的冗餘。

// 模板展示
showTemplate: function (data) {
        // 如果是數組形式，則返回多個模板對象
        if (data && data.length) {
            return data.map(function (d, i) {
                return myTab.myTemplate(d);
            }).join("");
        }
        // 否則返回單個模板對象
        return this.myTemplate(data);
    },
// 公共模板定義
myTemplate: function (initData) {
        if (!initData) {
            return "";
        }
        return `<div class="item">
                    <div class="up-content">
                        <div class="item-one">${initData.PRODUCTNAME}</div>
                        <div class="item-two">${initData.POLICYNO}</div>
                    </div>
                    <div class="down-content">
                        <div class="left">
                            <span class="date">生效時間</span>
                            <span class="time">${initData.INSIDNOVALIDITYDATE}</span>
                        </div>
                        <div class="right">
                            <span class="date">上傳時間</span>
                            <span class="time">${initData.EFFECTDATE}</span>
                        </div>
                    </div>
                </div>`
    }