码迷,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
迷上了代码!