[英]How can I turn this else if statement into a switch statement?
I created a function to check the current url of a website each second & change the meta tag images in the HTML element according to a certain value string. 我创建了一个函数,用于每秒检查网站的当前url,并根据某个值字符串更改HTML元素中的meta标签图像。 My code was perfectly, however I want to make my code more readable 7 optimized...so I want to turn this code into switch statement instead, but I am not able to figure it out by myself at this point.
我的代码完美,但是我想使代码更具可读性7优化...所以我想将这段代码转换为switch语句,但是我现在无法自己弄清楚。 Any help will be really appreciate.
任何帮助将不胜感激。 Here is the code:
这是代码:
// 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);
}
}
Since all the if
conditions have the same code, you could use some
like this. 由于所有的
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);
}
}
You could take an object for python
, java
and php
with imgOgSrc
and twitterImgSrc
properties amd use a null
property for not matching URL. 您可以使用
imgOgSrc
和twitterImgSrc
属性为python
, java
和php
获取对象,并使用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'));
Try this: 尝试这个:
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;
}
}
instead of switch/case
, you can store the images in an object, see if the currentUrl
has the keyword, extract it then use it to get the values from that object : 您可以将图像存储在一个对象中,而不是
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);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.