Question

我想优化我的Js代码，目前我正在重写相同的功能以在弹出窗口中启动游戏。函数（open_web_client，open_web_client_2）之间的唯一区别是openPopup大小

我想在弹出的两个游戏中使用相同的功能，我如何只为两者使用一个函数以避免重复所有代码？

这是代码

$(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

这两个函数之间的唯一区别是传递给openpopup的值。因此，创建一个公共函数并将维度传递给事件处理程序。

  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);
    }
  };

然后修改处理程序代码以唯一传递维

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

以这种方式传递给处理程序的参数可以通过事件对象中的data属性进行访问。

Answer 2

函数（open_web_client，open_web_client_2）之间的唯一区别是openPopup大小

这基本上是 begging 成为你职能的参数：

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');
});

更先进的技术是使用closure，使用创建侦听器的函数：

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'));

迷你重构Javascript代码

2 个答案: