我创建了一个函数来检查网站的当前URL每一秒和按一定值的字符串的HTML元素改变了元标记的图像。我的代码是完全,但是我想让我的代码7优化更具可读性,所以,我希望把这个代码放到switch语句来代替,但我不能够通过自己在这一点弄明白。任何帮助将非常感激。下面是代码:
// 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);
}
}
尝试这个:
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;
}
}
由于所有的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);
}
}
你可以采取python
,java
和php
对象与imgOgSrc
和twitterImgSrc
性能AMD使用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'));
而不是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);
}
}