码迷,mamicode.com
首页 > 编程语言 > 详细

真实项目中,模块化javascript

时间:2016-07-11 19:15:10      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:

为了和10年前的老项目在技术上和逻辑上完全抽离,可以通过模块化js的方式和老项目进行衔接;

 

//竞品车系相关js
//JS 模块

var jingpinMain = {
    //下拉框数量
    selectCount : 1,

    //相关使用api
    URL: {
        //获取全部品牌
        getCarBrandUrl: function () {
            return "/NewPost/GetCarBrand/";
        },
        //品牌获取车系url
        getCarSericesUrl: function () {
            return "/NewPost/GetCarSeries/";
        }
    },
    //模块初始化
    initMain: {
        init: function () {
            var brandSel = $(#tr_jingpin).find(.brandSel);
            var seriesSel = $(#tr_jingpin).find(.seriesSel);
            jingpinMain.getAllBrand(brandSel);
        }
    },
    //获取品牌
    getAllBrand:function(brandSel){
        $.ajax({
            type: "get",
            url: jingpinMain.URL.getCarBrandUrl(),
            data: { brandId: jingpinMain.brandId },
            dataType: "json",
            success: function (data) {
                if (data.length > 0) {
                    for (var i = 0; i < data.length; i++) {
                        brandSel.append(<option value=" + data[i].ItemId + "> + data[i].ItemName + </option>);
                    }
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(err);
            }
        });
    },
    //获取品牌车系
    getAllSeries: function (brandId, obj) {
        $.ajax({
            type: "get",
            url: jingpinMain.URL.getCarSericesUrl(),
            data: { id: brandId },
            dataType: "json",
            success: function (data) {
                if (data.length > 0) {
                    var bb = $(obj).next(.seriesSel);
                    for (var i = 0; i < data.length; i++) {
                        bb.append(<option value=" + data[i].ItemId + "> + data[i].ItemName + </option>);
                    }
                    bb.removeAttr("disabled");
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(err);
            }
        });
    },
    //增加一行竞品车系
    addSelect: function (trEle) {
        var tr = $(# + trEle);

        if (parseInt(jingpinMain.selectCount) < 5) {
            var ele = $(<tr></tr>);

            var doc = <th></th>;
            doc += <td>;
            doc += <p style="clear: both;">;
            doc += <select class="sel_series brandSel" name="fctboxEx" title="点击下拉按钮选择厂商" onchange="jingpinMain.getAllSeries(this.value,this);">;
            doc += <option value="0">选择厂商</option>;
            doc += </select>;
            doc += <select class="sel_series seriesSel" name="brboxEx" title="点击下拉按钮选择车系" disabled>;
            doc += <option value="-1">选择车系</option>;
            doc += </select>;
            doc += <a style="display: inline-block;" class="cancel" href="javascript:void(0)" onclick="jingpinMain.removeSelect(this);" title="点击x可以移除厂商车系"></a>;
            doc += </p>;
            doc += </td>;

            $(ele).append(doc);
            $(tr).after(ele);
            jingpinMain.selectCount += 1;

            //绑定厂商/车系
            var brandSel = $(ele).find(.brandSel);
            jingpinMain.getAllBrand(brandSel);
        }
    },
    //删除当前选项下拉框
    removeSelect: function (obj) {
        var tr = $(obj).parent(p).parent(td).parent(tr);
        $(tr).remove();
        jingpinMain.selectCount -= 1;
    }
};

 

真实项目中,模块化javascript

标签:

原文地址:http://www.cnblogs.com/xiguain/p/5661225.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!