javascript - dry -如何嵌套

Question

我是编程新手，但一直在阅读DRY (不要重复自己)代码。

我有一个JavaScript if/else语句，它不适合干方法，但我无法解决如何编写它以使语句不重复。

我希望有比我更聪明的人能教我。

下面是我的代码：

if (response.weather[0].description == "clear sky") {
    const v1 = document.createElement('VIDEO');
    v1.setAttribute("src", "https://static.videezy.com/system/resources/previews/000/011/710/original/Clouds_Timelapse_21_-_60s_-_4k_res.mp4");
    v1.setAttribute("class", "v1")
    document.body.appendChild(v1)
    v1.autoplay = true;
    v1.load();
} else if (response.weather[0].description == "few clouds") {
    v1 = document.createElement('VIDEO');
    v1.setAttribute("src", "https://static.videezy.com/system/resources/previews/000/003/501/original/cloudysky.mp4");
    v1.setAttribute("class", "v1")
    document.body.appendChild(v1)
    v1.autoplay = true;
    v1.load();
}

Answer 1

您可以为URL声明一个urls配置以完全消除if/else语句的使用，还可以声明一个loadVideo函数以避免代码重复。

以下是解决方案：

// configure your URLs by weather (using the weather description in this case)
const urls = {
    'clear sky': 'https://static.videezy.com/system/resources/previews/000/011/710/original/Clouds_Timelapse_21_-_60s_-_4k_res.mp4',
    'few clouds': 'https://static.videezy.com/system/resources/previews/000/003/501/original/cloudysky.mp4'
};

// function that loads the video based on a URL
function loadVideo(url) {
    const v1 = document.createElement('VIDEO');
    v1.setAttribute('src', url);
    v1.setAttribute('class', 'v1');
    document.body.appendChild(v1);
    v1.autoplay = true;
    v1.load();
}

// call the function with the response from your API
loadVideo(urls[response.weather[0].description]);

Answer 2

您需要在if语句之外提取公共部分：

let v1 = document.createElement('VIDEO');
v1.setAttribute("class", "v1")

if (response.weather[0].description == "clear sky") {
    v1.setAttribute("src", "https://static.videezy.com/system/resources/previews/000/011/710/original/Clouds_Timelapse_21_-_60s_-_4k_res.mp4");
} else if (response.weather[0].description == "few clouds") {
    v1.setAttribute("src", "https://static.videezy.com/system/resources/previews/000/003/501/original/cloudysky.mp4");
}
document.body.appendChild(v1)
v1.autoplay = true;
v1.load();

Answer 3

将你的代码分解到一个单独的函数中。

function addVideo(url) {
    const v1 = document.createElement('VIDEO');
    v1.setAttribute("src", url);
    v1.setAttribute("class", "v1")
    document.body.appendChild(v1)
    v1.autoplay = true;
    v1.load();
}

switch (response.weather[0].description) {
    case "clear sky": 
        addVideo("https://static.videezy.com/system/resources/previews/000/011/710/original/Clouds_Timelapse_21_-_60s_-_4k_res.mp4");
        break;
    case "few clouds": 
        addVideo("https://static.videezy.com/system/resources/previews/000/003/501/original/cloudysky.mp4");
        break;
}

或者，您可以使用普通对象将描述值映射到switch，并消除URL。如果你有几个视频，这尤其可取，因为这将比第一种方法更DRYer。

function addVideo(url) {
    const v1 = document.createElement('VIDEO');
    v1.setAttribute("src", url);
    v1.setAttribute("class", "v1")
    document.body.appendChild(v1)
    v1.autoplay = true;
    v1.load();
}

var descriptionVideoMapping = {
    "clear sky": "https://static.videezy.com/system/resources/previews/000/011/710/original/Clouds_Timelapse_21_-_60s_-_4k_res.mp4",
    "few clouds": "https://static.videezy.com/system/resources/previews/000/003/501/original/cloudysky.mp4",
};

var url = descriptionVideoMapping[response.weather[0].description];

if (url) {
    addVideo(url);
}