迷你重构Javascript代码

Mini Refactoring Javascript Code

本文关键字：代码 Javascript 重构      更新时间：2023-09-26

我想优化我的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);
  }
};

这两个函数之间的唯一区别是传递给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属性进行访问。

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

这基本上是乞求成为您功能的参数：

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

一个更高级的技术是使用闭包，使用创建监听器的函数：

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'));
相关文章：