javascript-干-如何筑巢

Question

我是编码新手，但一直在阅读有关DRY（请勿重复自己的代码）的信息。

我有一个不适合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

将您的代码分解为一个单独的函数。

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;
}

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

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);
}

Answer 2

您可以使用descritption作为键将链接移动到对象中，并检查描述是否存在，并使用所需链接创建一个新对象。

var description = response.weather[0].description,
    links = {
        VIDEO: "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"
    };

if (description in links) {
    const v1 = document.createElement('VIDEO');
    v1.setAttribute("src", links[description]);
    v1.setAttribute("class", "v1")
    document.body.appendChild(v1)
    v1.autoplay = true;
    v1.load();
}

Answer 3

您可以为您的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 4

您需要在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 5

如果仅要检查两个条件，则可以只使用三元运算符。如果您有2个以上的支票，则可以使用switch。

const { description } = response.weather[0];

const clearSkyUrl =
  "https://static.videezy.com/system/resources/previews/000/011/710/original/Clouds_Timelapse_21_-_60s_-_4k_res.mp4";

const cloudSkyUrl =
  "https://static.videezy.com/system/resources/previews/000/003/501/original/cloudysky.mp4";

const v1 = document.createElement("VIDEO");
v1.setAttribute("src", description === "clear sky" ? clearSkyUrl : cloudSkyUrl);
v1.setAttribute("class", "v1");
document.body.appendChild(v1);
v1.autoplay = true;
v1.load();

Answer 6

我的改进代码

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