如何避免在JavaScript中重复？

Question

如何避免此重复代码？ 我是javascript新手。 我需要使用不同的参数（例如100次）调用同一函数，并且还需要使用100种不同的getElementBys

(function() {

    var ok, publicSessionID, sms, a, b, c, d, e, f, g, h, i, j;

    var pubnub = PUBNUB.init({
        subscribe_key: '',
        publish_key: ''
    });


    function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
            results = regex.exec(location.search);
        return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    };

    var publicSessionID = getParameterByName('tv') || 'default';
    var sms = getParameterByName('sms') || 'default';
    var a = document.getElementById("channel1");
    var b = document.getElementById("channel2");
    var c = document.getElementById("channel3");


    d.onclick = function() {
        pubnub.publish({
            channel: publicSessionID,
            message: {
                "action": "tv.new.channel.4"
            }
            uuid: sms,
            callback: function(info) {
                console.log(JSON.stringify(info));
            }
        })
        return false;
    };

    e.onclick = function() {
        pubnub.publish({
            channel: publicSessionID,
            message: {
                "action": "tv.new.channel.5"
            }
            uuid: sms,
            callback: function(info) {
                console.log(JSON.stringify(info));
            }
        });
        return false;
    };

    f.onclick = function() {
        pubnub.publish({
            channel: publicSessionID,
            message: {
                "action": "tv.new.channel.6"
            }
            uuid: sms,
            callback: function(info) {
                console.log(JSON.stringify(info));
            }
        });
        return false;
    };
})()

var a，通过z会重复，而a.onclick = function（）{}会重复，在js中有什么更有效的方法吗？

谢谢

Answer 1

function pubnub (channel) {
    pubnub.publish({
        channel : publicSessionID,
        message : {"action": "tv.new.channel.5"} //use channel here
            uuid : sms ,
            callback : function(info) {
            console.log(JSON.stringify(info));
        }           
    });     
    return false;
}; 

只需将其设为带有通道参数的函数，然后像调用它一样

e.onclick = function() { pubnub(5); }

请注意， onclick仅允许一个事件，因此请考虑使用addEventListener

Answer 2

编写一个函数生成器，

function generatorFunction(channel) {
    return function() {
        pubnub.publish({
            channel: publicSessionID,
            message: {
                "action": channel
            }
            uuid: sms,
            callback: function(info) {
                console.log(JSON.stringify(info));
            }
        });
        return false;
    }
};

并以channel作为参数调用它，以使用指定的channel获得新功能

for (var i = 1; i <= 26; i += 1) {
    var currentChannel = document.getElementById("channel" + i);
    currentChannel.onclick = generatorFunction("tv.new.channel." + i);
}

Answer 3

您似乎可以利用此处的命名约定来避免对getElementById键入100个调用。

var elements = [];
for(var i = 0; i < 100; i++){
  var e = document.getElementById("channel" + i);
  elements.push(e); 
}

Answer 4

您可以在元素上使用类，例如您添加class='channels' 。 你可以做这样的事情，

var channels = document.querySelectorAll(".channels");

for (var i = 0;  i < channels.length; i++) {
    var ch = channels[i]
    , ch_num = i

    ch.addEventListener('click', function () {
        pubnub.publish({
            channel: publicSessionID,
            message: {
                "action": "tv.new.channel." + i
            } //use channel here
            uuid: sms,
            callback: function (info) {
                console.log(JSON.stringify(info));
            }
        });
        return false;
    });
}