真实项目中,模块化javascript

为了和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;
    }
};
时间: 2024-08-11 01:23:13

真实项目中,模块化javascript的相关文章

Java算法之递归打破及在真实项目中的使用实例

开心一笑 刚才领导问开发:"你觉得这个项目的最大风险是什么",开发说:"加班猝死" , 气氛尴尬了一分钟!!! 提出问题 1.递归算法简单复习 2.如何实现递归算法与真实项目接口??? 3.如何打破递归算法??? 解决问题 1.首先练习下网上一些递归经典题 1 package com.hwy.test; 2 3 /** 4 * 递归函数测试 5 * Created by Ay on 2016/7/2. 6 */ 7 public class RecursionTes

Android省市区三级联动滚轮选择(真实项目中提取出来的组件)

最近项目要做一个,类似淘宝手机客户端的,选择收货地址的三级联动滚动选择组件,下面是它的大致界面截图: 在IOS中有个叫UIPickerView的选择器,并且在dataSource中定义了UIPickerView的数据源和定制内容,所以用只要熟悉它的基本用法,要实现这么个三级联动滑动选择是挺简单的. 言归正传,今天讨论的是在Android里面如何来实现这么个效果,那么如何实现呢??? 相信部分童鞋首先想到的是android.widget.DatePicker和android.widget.Time

轨迹系列——记某真实项目中轨迹存储改造方案

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.    方案目标 该方案需要满足以下几点: 支持人员当天轨迹快速获取(查询). 支持轨迹高并发读.写(实际项目中轨迹高并发读情况很少). 保证所有(历史)轨迹数据的完整性.不丢失. 2.方案探讨详细描述 2.1支持轨迹快速查询--轨迹日志文件方案 海量数据高效存储.查询,这个场景本身是比较适合NoSQL数据库运用的,但是考虑到该方案实施的难度(对工程实施.维护.研发

从真实项目中抠出来的设计模式——第三篇:责任链模式

一:现实场景 有时候在开发的过程中,我们经常会根据某个状态的值,写出很多的ifelse逻辑,比如拿项目里面的案例来说,如果当前发送的是彩信,此种状态需要如何给 实体赋值,如果是短信,邮件又是其他方式的赋值,等等此类,这种情况下一般会写出如下if判断,对吧,真实代码如下: 1 if (leaflet.CommunicationtypeEnum.HasFlag(CommunicationTypeEnum.邮件)) 2 { 3 //第三步:动态生成邮件模板 4 var styleInfo = Cach

真实项目中VS2015中自建T4模板生成文件的使用

有可能许多小伙伴们发现,vs2015和2012的自带T4模板中的.tt文件改变非常之多,如果仅仅copyEF系统自己生成的模板文件,那可累了.以下是我自己整理的在2012和2015中都可以试用的代码. <#@ template language="C#" debug="false" hostspecific="true"#> <#@ include file="EF.Utility.CS.ttinclude"

从真实项目中抠出来的设计模式——第二篇:过滤器模式

一:实际场景介绍 我们在给用户做订单催付通知的时候,会有这样的一种场景,用户在系统后台设置一组可以催付的规则,比如说订单金额大于xx元,非黑名单用户,来自 哪个地区,已购买过某个商品,指定某个营销活动的人等等这样的条件,如果这时用户在淘宝上下了一个订单,那程序要判断的就是看一下此订单是否满足这 些规则中的某一个,如果满足,我们给他发送催付通知,这种场景是很多做CRM的同学都会遇到的问题,那针对这种场景,如何更好的规划业务逻辑呢? 二:普通的编程代码 在这里我们就不考虑多筛选条件下的性能,而只从代

真实项目中 ThreadLocal 的妙用

一.什么是 ThreadLocal ThreadLocal 提供了线程的局部变量,每个线程都可以通过 set() 和 get() 来对这个局部变量进行操作,但不会和其他线程的局部变量冲突,实现了线程间的据隔离. 简单讲:一个获取用户的请求线程 A,如果向 ThreadLocal 填充变量 AValue(只能被线程 A 操作),该变量对其他获取用户的请求线程 B.C...是隔离的. 最简单的使用方式: 类似一次 HTTP 请求线程中,利用 ThreadLocal 存储 Cookie 对象,进行状态

VUE真实项目中常用的生命周期和参数

<template> <div class="first-app"> {{msg}} <br/> {{msg1}} <Confin text='注册' @message="getMeaasge"></Confin> </div> </template> <script> import Confin from '@/components/sub/Confin'; expor

大型验证项目中的数据管理

? Eduardo Lluna拥有巴伦西亚大学的物理学位和巴伦西亚大学理工学院电子工程系的博士学位.他一向对于软件测试,电子测量设备和感测网路方面的研究都很积极.Lluna有20多年的关于交通控制,公众视野,支付,电信系统领域的即时嵌入系统的软件的专业经验.他曾在SICE, Telvent还有 Design of Systems on Silicon (DS2)公司任过职.他是巴伦西亚大学计算机科学部的副教授,且自2011年1月起,就已在ITI公司的软件质量部担任协助不同研发项目的项目经理.更多