jquery 如何将else if语句转换为switch语句?

vnzz0bqm  于 2022-12-26  发布在  jQuery
关注(0)|答案(4)|浏览(183)

我创建了一个函数来检查当前网址的网站每一秒&改变元标记图像的<head> HTML元素根据一定的值字符串。我的代码是完美的,但我想使我的代码更可读7优化...所以我想把这个代码转换成开关语句,而不是,但我不能弄清楚自己在这一点上。
下面是代码:

// Variable declarations
var imgOgSrc = $('meta[property="og:image"]');
var twitterImgSrc = $('meta[name="twitter:image:src"]');
var currentUrl;

// Checks for current url & changes meta tags depending on slug value
function getCurrentUrl(){
    currentUrl = window.location.href;
    
    if(currentUrl.toLowerCase().indexOf('python') >= 0) {
            imgOgSrc.attr('content', 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg');
            twitterImgSrc.attr('content', 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg');
    }   else if (currentUrl.toLowerCase().indexOf('java') >= 0) {
            imgOgSrc.attr('content', 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg');
            twitterImgSrc.attr('content', 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg');
    }   else if (currentUrl.toLowerCase().indexOf('php') >= 0) {
            imgOgSrc.attr('content', 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg');
            twitterImgSrc.attr('content', 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg');
    }
        else {
            imgOgSrc.attr('content', currentUrl);
            twitterImgSrc.attr('content', currentUrl);
    }
}
3hvapo4f

3hvapo4f1#

因为所有if条件都有相同的代码,所以可以像这样使用some

function getCurrentUrl() {
  currentUrl = window.location.href;
  const customUrlNeeded = ['python', 'java', 'php'].some(a => currentUrl.toLowerCase().includes(a))

  if (customUrlNeeded) {
    imgOgSrc.attr('content', 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg');
    twitterImgSrc.attr('content', 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg');
  } else {
    imgOgSrc.attr('content', currentUrl);
    twitterImgSrc.attr('content', currentUrl);
  }

}
xqnpmsa8

xqnpmsa82#

您可以使用imgOgSrctwitterImgSrc属性获取pythonjavaphp的对象,并使用null属性表示不匹配的URL。

function getTarget(url) {
    const targets = { 
        python: {
            imgOgSrc: 'data1',
            twitterImgSrc: 'data2'
        },
        java: {
            imgOgSrc: 'data3',
            twitterImgSrc: 'data4'
        },
        php: {
            imgOgSrc: 'data5',
            twitterImgSrc: 'data6'
        },
        null: {                    // default values
            imgOgSrc: 'data7',
            twitterImgSrc: 'data8'
        }
    };
    return targets[url.toLowerCase().match(new RegExp(Object.keys(targets).join('|')))];
}

console.log(getTarget('blablajavabla'));
console.log(getTarget('blablabla'));
92vpleto

92vpleto3#

试试这个:

var currentUrl;

function getCurrentUrl() {
  currentUrl = window.location.href.toLowerCase();

  var langType = function(type) {
    return currentUrl.indexOf(type) > -1;
  }

  switch (true) {
    case langType('python'):
      imgOgSrc.attr('content', 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg');
      twitterImgSrc.attr('content', 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg');
      break;

    case langType('java'):
      // ...
      break;

    case langType('php'):
      // ...
      break;

    default:
      // ...
      break;
  }
}
olqngx59

olqngx594#

除了switch/case,你可以将图像存储在一个对象中,看看currentUrl是否有关键字,提取它,然后使用它从该对象中获取值:

// Variable declarations
var imgOgSrc = $('meta[property="og:image"]');
var twitterImgSrc = $('meta[name="twitter:image:src"]');
var currentUrl;

function getCurrentUrl(){
  currentUrl = window.location.href.toLowerCase();

  const obj = {
    python : {
      imgOgSrc : 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg',
      twitterImgSrc :  'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg'
    },
    java : {
      imgOgSrc : 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg',
      twitterImgSrc :  'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg'
    },
    php : {
      imgOgSrc : 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg',
      twitterImgSrc :  'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg'
    }
  }

  const word = currentUrl.match(/php | java | python /gi)[0];

  if(word){
    imgOgSrc.attr('content', obj[word].imgOgSrc);
    twitterImgSrc.attr('content', obj[word].twitterImgSrc);    
  }
  else {
    imgOgSrc.attr('content', currentUrl);
    twitterImgSrc.attr('content', currentUrl);
  }
}

相关问题