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