Question

我不想打扰，但我真的不知道该怎么做。这本身并不是一个真正的功能问题。该应用程序可以像这样工作，但更多的是清晰度问题。我有一个使用vis-network的脚本（您不必知道它，它将不会在那里）。在使用库之前，我正在运行一些关键功能。对它们进行了更多检查，以防止用户在无限负载之前等待。但是我发现我的代码非常重复，不是很漂亮，使用起来也不是很有用。这是对一个功能的测试：

var NWindow = {
    network_bg: null,
    network_title: null,
    network_close: null,
    init: function() {

        // Check if the window exist in the DOM.
        if (!this.insert()) {

            alert(Errors.alert.window_error);
            console.error(Errors.console.function_failed, "NWindow.init", "Nwindow.network_bg");
            return false;
        }

        // Get IDs.
        this.getIds(0);

        // Check if values has been found
        if (!this.hasOwnProperty("network_bg") || !Errors.check.isjQuery(this.network_bg)) {

            alert(Errors.alert.window_error);
            console.error(Errors.null_value, "NWindow.init", "Nwindow.network_bg");
            return false;
        }

        if (!this.hasOwnProperty("network_title") || !Errors.check.isjQuery(this.network_bg)) {

            console.warn(Errors.console.null_value, "NWindow.init", "Nwindow.network_title");
        }

        if (!this.hasOwnProperty("network_close") || !Errors.check.isjQuery(this.network_close)) {

            alert(Errors.alert.window_error);
            console.error(Errors.console.null_value, "NWindow.init", "Nwindow.network_close");
            return false;
        }

        // Vérifie que les éléments HTML nécessaires existent.
        if (!Errors.check.elementExist(this.network_bg)) {

            alert(Errors.alert.window_error);
            console.error(Errors.console.missing_html, "NWindow.init", "Nwindow.network_bg");
            return false;
        }

        if (!Errors.check.elementExist(this.network_title)) {

            console.warn(Errors.console.missing_html, "NWindow.init", "Nwindow.network_title");
        }

        if (!Errors.check.elementExist(this.network_close)) {

            alert(Errors.alert.window_error);
            console.error(Errors.console.missing_html, "NWindow.init", "Nwindow.network_close");
            return false;
        }

        return true;
    },
    [...]
}

var Errors = {
    check: {
        isjQuery: function(obj) {
            return (obj && (obj instanceof jQuery || obj.constructor.prototype.jquery));
        },
        elementExist: function($query) {
            return ($query && ($query.length > 0));
        }
    },
    alert: {
        window_error: "Erreur: Impossible d'ouvrir la fenêtre. Consultez la console pour plus d'informations."
    },
    console: {
        function_failed: "[%s] La fonction {%s} a renvoyée une erreur.",
        null_value: "[%s] La valeur de {%s} est nulle.",
        missing_html: "[%s] L'élément HTML {%s} n'existe pas."
    }
}

我们可以看到，init中的两个函数只有五十行。您是否知道如何改进代码？一些值仅使用“ console.warn”，另一些值使用“ console.error”和“ alert”。我曾考虑过将每个检查都放在一个函数中，但是仍然很丑陋。

提前谢谢

Answer 1

此功能：

        // Check if values has been found
    if (!this.hasOwnProperty("network_bg") || !Errors.check.isjQuery(this.network_bg)) {

        alert(Errors.alert.window_error);
        console.error(Errors.null_value, "NWindow.init", "Nwindow.network_bg");
        return false;
    }

    if (!this.hasOwnProperty("network_title") || !Errors.check.isjQuery(this.network_bg)) {

        console.warn(Errors.console.null_value, "NWindow.init", "Nwindow.network_title");
    }

    if (!this.hasOwnProperty("network_close") || !Errors.check.isjQuery(this.network_close)) {

        alert(Errors.alert.window_error);
        console.error(Errors.console.null_value, "NWindow.init", "Nwindow.network_close");
        return false;
    }

    // Vérifie que les éléments HTML nécessaires existent.
    if (!Errors.check.elementExist(this.network_bg)) {

        alert(Errors.alert.window_error);
        console.error(Errors.console.missing_html, "NWindow.init", "Nwindow.network_bg");
        return false;
    }

    if (!Errors.check.elementExist(this.network_title)) {

        console.warn(Errors.console.missing_html, "NWindow.init", "Nwindow.network_title");
    }

    if (!Errors.check.elementExist(this.network_close)) {

        alert(Errors.alert.window_error);
        console.error(Errors.console.missing_html, "NWindow.init", "Nwindow.network_close");
        return false;
    }

您可以替换为：

        const networks = ["network_bg", "network_close"]
    const warnNetworks = ["network_title"]
    networks.forEach(element => {
        if (!this.hasOwnProperty(element) || !Errors.check.isjQuery(this.network_bg)) {
            alert(Errors.alert.window_error);
            console.error(Errors.null_value, "NWindow.init", `Nwindow.${element}`);
            return false;
        }
        if (!Errors.check.elementExist(this[element])) {
            alert(Errors.alert.window_error);
            console.error(Errors.console.missing_html, "NWindow.init", `Nwindow${element}`);
            return false;
        }
    })
    warnNetworks.forEach(element => {
        if (!this.hasOwnProperty(element) || !Errors.check.isjQuery(this.network_bg)) {
            console.warn(Errors.console.null_value, "NWindow.init", `Nwindow.${element}`);
        }
        if (!Errors.check.elementExist(this[element])) {
            console.warn(Errors.console.missing_html, "NWindow.init", `Nwindow.${element}`);
        }
    })

代码一部分的语法更好，更漂亮

1 个答案: