Question

我创建了一个看起来像红绿灯的HTTP响应跟踪器。目前，如果响应不是“200”响应，则交通信号灯闪烁红色。每10秒发生一次特定URL的请求，并且交通灯将相应地改变，例如，成功的绿色，错误的红色闪烁。

以上工作很好，但我现在遇到了一个问题，如果我想在同一页面上监控多个交通信号灯的多个URL，我很不幸，因为我只能传递一个URL参数，它将针对所有。 cp_trafficLight components。

我需要找到一种方法来构造我的代码，我可以在初始化程序上传递一个额外的参数来定位特定的.cp_trafficLight组件。

    var requestResponses = {

    greenLight: $('.cp_trafficLight_Light--greenDimmed'),
    redLight: $('.cp_trafficLight_Light--redDimmed'),
    greenBright: 'cp_trafficLight_Light--greenBright',
    redBright: 'cp_trafficLight_Light--redBright',

    settings: {
        flashError: 400,
        requestTime: 10000
    },

    init: function (url) {
        requestResponses.url = url;
        requestResponses.getResponse(requestResponses.url);
        setInterval(function () {
            if (requestResponses.errorCode === true) {
                requestResponses.redLight.toggleClass(requestResponses.redBright);
            }
        }, requestResponses.settings.flashError);
    },

    successResponse: function () {
        requestResponses.errorCode = false;
        requestResponses.redLight.removeClass(requestResponses.redBright);
        requestResponses.greenLight.addClass(requestResponses.greenBright);
    },

    errorResponse: function () {
        requestResponses.greenLight.removeClass(requestResponses.greenBright);
    },

    getResponse: function (serverURL) {
        $.ajax(serverURL, {
            success: function () {
                requestResponses.errorCode = false;
                requestResponses.successResponse();
            },
            error: function () {
                requestResponses.errorCode = true;
                requestResponses.errorResponse();
            },
            complete: function () {
                setTimeout(function () {
                    requestResponses.getResponse(requestResponses.url);
                }, requestResponses.settings.requestTime);
            }
        });
    },

    errorCode: false
}

requestResponses.init('/status');

https://jsfiddle.net/73tex200/1/

我的代码如下。任何帮助将不胜感激！

Answer 1

制作工厂功能：

function flashlight(el){
   //your code using el, instead of the green/yellow/red static identifiers thing
   return init;
}

现在你可以做到：

var url1=flashlight("test");
url(1"/testurl");

但是，您需要修改手电筒，以便通过使用类似document.createElement ...

的方式将其轻松附加到对象上。

Answer 2

向init添加第二个参数并将其设置为包含灯光的html元素。然后，将greenLight / redLight等选择器更改为对象，这样您就可以保存多个版本，每个版本对应一个灯光。有一个功能来获得这个div内的4个灯。

然后，编辑您的所有功能，以便您可以传递名称，并将代表requestResponses.colorLight的所有代码更改为this.instances[name].colorLight。

为此创建一个类也是一个很好的解决方案，但是如果你不喜欢使用原型，那么这样的东西就足够了。

这段代码不是强制性的，但它展示了这种解决方案的基础知识。

<html>
<head></head>
<body>
<section>
    <div class="container">
        <div class="cp_trafficLight" id="one">
            <div class="in">
                <div class="cp_trafficLight_Light cp_trafficLight_Light--greenDimmed"></div>
                <div class="cp_trafficLight_Light cp_trafficLight_Light--redDimmed"></div>
            </div>
        </div><div class="cp_trafficLight" id="two">
            <div class="in">
                <div class="cp_trafficLight_Light cp_trafficLight_Light--greenDimmed"></div>
                <div class="cp_trafficLight_Light cp_trafficLight_Light--redDimmed"></div>
            </div>
        </div>
    </div>
</section>
<script>
var requestResponses = {
    instances : {},
    settings : {
        flashError: 400,
        requestTime: 10000
    },
    gather : function gather( container, url ) {
        var name = container.id;
        this.instances[name] = {
            callInterval: null,
            blinkInterval: null,
            url : url,
            errorCode: false,
            greenLight: $('#' + name + ' .cp_trafficLight_Light--greenDimmed'),
            redLight: $('#' + name + ' .cp_trafficLight_Light--redDimmed')     
        };
        return this.instances[name];
    },
    init : function ( url, container ) {
        var instance = this.gather( container, url );
        this.getResponse( instance );
    },
    successResponse : function ( instance ) {
        instance.errorCode = false;
        instance.redLight.removeClass( 'redBright' );
        instance.greenLight.addClass( 'greenBright' );
        if (instance.blinkInterval) {
            clearInterval( instance.blinkInterval );
        }
    },
    errorResponse : function ( instance ) {
        instance.errorCode = true;
        instance.greenLight.removeClass( 'greenBright' );
        instance.blinkInterval = setInterval( function () {
            console.log( instance.redLight );
            if (instance.redLight.hasClass( 'redBright' )) {
                instance.redLight.removeClass( 'redBright' );
                instance.redLight.addClass( 'redDimmed ');
            }
            else {
                instance.redLight.removeClass( 'redDimmed' );
                instance.redLight.addClass( 'redBright ');          
            }
        }.bind( instance ), this.settings.flashError );
    },
    getResponse : function ( instance ) {
        var module = this;
        setInterval(function() {
            $.ajax(instance.url, {
                success: function() {
                    module.successResponse( instance );
                },
                error: function() {
                    module.errorResponse( instance );
                }
            });     
        }, this.settings.requestTime);
    }
}
requestResponses.init('/status1', $('#one') );
requestResponses.init('/status2', $('#two') );
</script>
</body>
</html>

使我的代码更加模块化，一次运行多个组件

2 个答案: