小型重构Javascript代码

Question

I want to optimize my Js code, at the moment i am rewriting the same function to launch a game in a popup. The only difference between the functions (open_web_client, open_web_client_2) is the openPopup size

I would like to use the same function for both games launched in the pop up, how can i use just a function for both in order to avoid repeating all the code?

This is the code

$(document).ready(function() {

  web_client();

});

var web_client = function() {
  var open_web_client = function(e) {
    e.preventDefault();
    if (!app.userIsLoggedIn()) {
      app.showLoginPopup(translate.login_required_to_play_for_real);
    } else {
      if (Utils.analytics_enabled()) {
        Utils.analytics_track_click('Play', $(this).attr("data-game-name"));
      }
      new GameWindow($(this).attr('href'), 'LOBBY').openPopup('1100x800');
    }
  }

  var open_web_client_2 = function(e){
    e.preventDefault();
    if(!app.userIsLoggedIn()){
      app.showLoginPopup(translate.login_required_to_play_for_real);
    } else {
      if(Utils.analytics_enabled()){
        Utils.analytics_track_click('Play', $(this).attr("data-game-name"));
      }
      new GameWindow($(this).attr('href'), 'LOBBY').openPopup('1024x768');
    }
  } 

  if ($("a.ea_client").size() > 0) {
    $('a.ea_client').on("click", open_web_client);
    $('a.oneworks_client').on("click", open_web_client_2);
  }
};

Answer 1

The only difference between the two functions is the value that is passed to openpopup . So create a common function and pass the dimensions to the event handler.

  var open_web_client = function(e) {
    e.preventDefault();
    if (!app.userIsLoggedIn()) {
      app.showLoginPopup(translate.login_required_to_play_for_real);
    } else {
      if (Utils.analytics_enabled()) {
        Utils.analytics_track_click('Play', $(this).attr("data-game-name"));
      }
      //here the hardcoded value is replaced with e.data.dim
      new GameWindow($(this).attr('href'), 'LOBBY').openPopup(e.data.dim);
    }
  };

then modify the handler code to pass the dimensions uniquely

 $('a.ea_client').on("click",{dim:'1100x800'}, open_web_client);
 $('a.oneworks_client').on("click",{dim:'1024x768'}, open_web_client);

arguments passed this way to handlers can be accessed through data property present in the event object.

Answer 2

The only difference between the functions (open_web_client, open_web_client_2) is the openPopup size

That is basically begging to become a parameter of your function:

function open_web_client(e, size) {
  e.preventDefault();
  if (!app.userIsLoggedIn()) {
    app.showLoginPopup(translate.login_required_to_play_for_real);
  } else {
    if (Utils.analytics_enabled()) {
      Utils.analytics_track_click('Play', $(this).attr("data-game-name"));
    }
    new GameWindow($(this).attr('href'), 'LOBBY').openPopup(size);
  }
}

$('a.ea_client').on("click", function(e) {
  open_web_client(e, '1100x800');
});
$('a.oneworks_client').on("click", function(e) {
  open_web_client(e, '1024x768');
});

A littlebit more advanced technique is to use a closure , with a function that creates the listener:

function make_web_client_opener(size) {
  return function open_web_client(e) {
    e.preventDefault();
    if (!app.userIsLoggedIn()) {
      app.showLoginPopup(translate.login_required_to_play_for_real);
    } else {
      if (Utils.analytics_enabled()) {
        Utils.analytics_track_click('Play', $(this).attr("data-game-name"));
      }
      new GameWindow($(this).attr('href'), 'LOBBY').openPopup(size);
    }
  };
}

$('a.ea_client').on("click", make_web_client_opener('1100x800'));
$('a.oneworks_client').on("click", make_web_client_opener('1024x768'));