如何降低此函数的复杂性，该函数根据数据类型进行回调

How can I decrease the complexity of this function that calls back depending on data-type?

本文关键字：函数 数据类型 回调 何降低 复杂性      更新时间：2023-09-26

我正在调整我的身份验证JavaScript模块，这样我就可以使用一个JavaScript类挂钩.js-auth-ui来处理我的web应用程序的身份验证，同时使用数据类型属性来引用正确的函数。

在扫描DOM中的js钩子后，我将通过如下所示的init函数运行它，该函数反过来运行一个exec函数，该函数调用回正确的函数。

我想知道是否有一种更有效的方法可以在没有其他if的情况下编写execAuthUi函数，根据我的linting规则，这会增加它的"复杂性"评级。

const execAuthUi = function ( $element ) {
    const data = $element.data();
    if (data.type === "account-login-form") {
        authLoginEmail( $element, data );
    } else if (data.type === "account-logout") {
        authLogout( $element );
    } else if (data.type === "account-reset") {
        authReset( $element );
    } else if (data.type === "account-signup-form") {
        authSignup( $element );
    }
};
const initAuthUi = function ( ) {
    const $notLoaded = $_jsElements.not( ".is-initialized" );
    let $element = null;
    let i = $notLoaded.length;
    for ( i; i--; ) {
        $element = $_jsElements.eq( i );
        $element.addClass( "is-initialized" );
        execAuthUi( $element );
    }
};

使用对象映射类型回调：

var callbackMap = {
    'account-login-form': authLoginEmail.bind(null, $element, data),
    'account-logout': authLogout.bind(null, $element),
    ...
};
callbackMap[data.type] && callbackMap[data.type]();

您可以在"Switch"语句中编写它，而不是使用多个elseif。

我会做一些类似的事情

switch(data.type) {
  case "account-login-form": 
      authLoginEmail( $element, data );
      break;  
  case "account-logout": 
      authLogout( $element );
      break;
  case "account-reset":
      authReset( $element );
      break;
  case "account-signup-form":
      authSignup( $element );
      break;
}

如果您的方法不满足任何这些要求，也可以使用"默认"情况。

您可以进行切换并将检查移到可重用的位置。

const dataTypeAccountLoginForm = "account-login-form";
const dataTypeAccountLogout = "account-logout";
const dataTypeAccountReset = "account-reset";
const dataTypeAccountSignupForm = "account-signup-form";
const execAuthUi = function(ele){
  var data = ele.data();
  switch(data.type) {
    case dataTypeAccountLoginForm:
      authLoginEmail(ele, data);
      break;
    case dataTypeAccountLogout:
      authLogout(ele);
      break;
    case dataTypeAccountReset:
      authReset(ele);
      break;
    case dataTypeAccountSignupForm:
      authSignup(ele);
      break;
  }
}

另一种选择是抽象逻辑abit。就个人而言，我认为这样做有点过头了。

var dataTypeAccountLoginForm = "account-login-form";
var dataTypeAccountLogout = "account-logout";
var dataTypeAccountReset = "account-reset";
var dataTypeAccountSignupForm = "account-signup-form";
var uiFunctions = [{ 
    key : dataTypeAccountLoginForm,
    func : authLoginEmail
  },
  { 
    key : dataTypeAccountLogout,
    func : authLogout
  },
  { 
    key : dataTypeAccountReset,
    func : authReset
  },
  { 
    key : dataTypeAccountSignupForm,
    func :  authSignup
}];
var execAuthUi = function(ele){
  var data = ele.data();
  for (var i = 0; i < uiFunctions.length; i++) {
    if (uiFunctions[i].key === data.type){
      uiFunctions[i].func(ele,data);
      return;
    }
  }
};

或者你可以使用地图功能。

var dataTypeAccountLoginForm = "account-login-form";
var dataTypeAccountLogout = "account-logout";
var dataTypeAccountReset = "account-reset";
var dataTypeAccountSignupForm = "account-signup-form";
var uiFunctions = [
  { 
    key : dataTypeAccountLoginForm,
    func : authLoginEmail
  },
  { 
    key : dataTypeAccountLogout,
    func : authLogout
  },
  { 
    key : dataTypeAccountReset,
    func : authReset
  },
  { 
    key : dataTypeAccountSignupForm,
    func :  authSignup
  }
];
var execAuthUi = function(ele){
  var data = ele.data();
  uiFunctions.map(function(obj){
    if (obj.key === data.type)
      obj.func(ele,data);
  });
};
相关文章：