尽量避免重复，简化。。。创建全局变量并简化我的javascript——纯js无jquery

//我想让以上的全球。。。或者，如果有其他方式来写这篇文章，我很想看看。 $（'col_text'）.style.color=newColor

function changeColor() {
    var $ = document.getElementById.bind(document);
    var cp = $('colorPicker');
    var ct = $('col_text');
    var cmess = $('colorMsg');
    var cpback = $('colorPicker_back');
    var rap = $('wrap');
    var newColor = cp.value;

//这需要简化，但我正在努力解决如何做到这一点

    if (newColor == "none") {
        ct.innerHTML = "choose";
        cpback.value = "salmon";
        cmess.style.background = "#fff";
        rap.style.background = "#ddd";
        return this;
    } else if (newColor == "yellow") {
        ct.innerHTML = "yellow";
        cpback.value = "salmon";
        cmess.style.background = "salmon";
        rap.style.background = "#ccc";

        return this;
    } else if (newColor == "red") {
        ct.innerHTML = "red";
        cpback.value = "yellow";
        cmess.style.background = "yellow";
        rap.style.background = "#eee";
        return this;
    } else if (newColor == "white") {
        ct.innerHTML = "white";
        cpback.value = "violet";
        cmess.style.background = "violet";
        rap.style.background = "#ea0";
        return this;
    }
}

function changeBack() {

    var backgrnd = document.getElementById('colorPicker_back').value;
    document.getElementById('colorMsg').style.background = backgrnd;

    if (backgrnd == "none")

    {
        document.getElementById('col_text').style.color = "#000";
        document.getElementById('col_text').innerHTML = "choose";
        //document.getElementById('col_text').style.color="white";
        return this;
    } else if (backgrnd == "yellow")

    {

        document.getElementById('col_text').style.color = "red";
        //document.getElementById('col_text').style.color="white";
        return this;
    } else {
        document.getElementById('col_text').innerHTML = "choose";
        return this;
    }
}

问题在于如何保存/调用此函数。调用函数时，

this

的值根据调用方式进行设置

getElementById

期望

此
为
文档
（在执行
document.getElementById
时设置）。当您只调用
$
时，没有上下文，因此
getElementById
不起作用（
此
将是
窗口
）

请尝试以下方法：

var $ = document.getElementById;

这将强制
此
成为
文档

问题在于如何保存/调用此函数。调用函数时，
this
的值根据调用方式进行设置

getElementById
期望
此
为
文档
（在执行
document.getElementById
时设置）。当您只调用
$
时，没有上下文，因此
getElementById
不起作用（
此
将是
窗口
）

请尝试以下方法：

var $ = document.getElementById;

这将迫使
此
成为
文档
就个人而言，我不会使用$，您只是想弄清楚正在使用的库是什么

您可以只使用一个函数，而不是绑定

var $ = document.getElementById.bind(document);

对象是保存数据和避免嵌套的朋友。简单查找并应用这些值

function byId (id) {
    return document.getElementById(id);
}

应用它时，没有ifs，只是根据对象进行设置

var colorSettings = {
    "none" : {
        "col_text" : "choose",
        "colorPicker_back" : "salmon",
        "colorMsg" : "#fff",
        "wrap" : "#fff"
    },    
    "yellow" : {
        "col_text" : "XXX",
        "colorPicker_back" : "XXX",
        "colorMsg" : "#XXX",
        "wrap" : "#XXX"
    },
    "red" : {
        "col_text" : "YYY",
        "colorPicker_back" : "YYY",
        "colorMsg" : "#YYY",
        "wrap" : "#YYY"
    }    
};

就我个人而言，我不会使用$，你们只是想弄清楚图书馆在使用什么

您可以只使用一个函数，而不是绑定

var $ = document.getElementById.bind(document);

对象是保存数据和避免嵌套的朋友。简单查找并应用这些值

function byId (id) {
    return document.getElementById(id);
}

应用它时，没有ifs，只是根据对象进行设置

var colorSettings = {
    "none" : {
        "col_text" : "choose",
        "colorPicker_back" : "salmon",
        "colorMsg" : "#fff",
        "wrap" : "#fff"
    },    
    "yellow" : {
        "col_text" : "XXX",
        "colorPicker_back" : "XXX",
        "colorMsg" : "#XXX",
        "wrap" : "#XXX"
    },
    "red" : {
        "col_text" : "YYY",
        "colorPicker_back" : "YYY",
        "colorMsg" : "#YYY",
        "wrap" : "#YYY"
    }    
};

只要把它们移到你的职能范围之外，它们就会是全球性的？@JoeRinehart-不完全是。。。在这里做OP的工作是完全合理的，并使用
$
作为类似功能的不同方法的简写。我并不是说这是一个好主意，因为它可能会让其他看你的代码的人感到困惑，但这肯定是不允许的。呵呵，我编辑了我的评论-我最初发表评论时没有看到$的赋值。旁注：完全是学究式的：jquery是纯javascript。在jquery方面，我的意思是没有捷径。我拼命地试图掌握复杂的OOP Javasript编程，多年来我一直将Jquery作为拐杖。我真的只是想深入研究并完全理解如何构建强大的对象…所以这是我的学习。谢谢你们的帮助，我需要很多。只要把他们移到你的职能范围之外，他们就会是全球性的？@JoeRinehart-不完全是。。。在这里做OP的工作是完全合理的，并使用
$
作为类似功能的不同方法的简写。我并不是说这是一个好主意，因为它可能会让其他看你的代码的人感到困惑，但这肯定是不允许的。呵呵，我编辑了我的评论-我最初发表评论时没有看到$的赋值。旁注：完全是学究式的：jquery是纯javascript。在jquery方面，我的意思是没有捷径。我拼命地试图掌握复杂的OOP Javasript编程，多年来我一直将Jquery作为拐杖。我真的只是想深入研究并完全理解如何构建强大的对象…所以这是我的学习。谢谢你们的帮助，我需要很多。太好了，谢谢。另一个问题。如何使这些变量对这两个函数都是全局的，以及当我尝试用ct.innerHTML替换document.getElementById（'col_text'）.innerHTML时是如何实现的？如果要使其全局化，只需移动
var$=document.getElementById.bind（document）函数外部的行。它如何“不工作”<代码>$（'col_text'）。innerHTML
应该可以正常工作。当我尝试将变量移出第一个函数并移到顶部以对这两个函数工作时，它们停止工作。你知道为什么吗？你看到你的控制台有错误吗？您确定
$
变量在正确的范围内吗？太好了，谢谢。另一个问题。如何使这些变量对这两个函数都是全局的，以及当我尝试用ct.innerHTML替换document.getElementById（'col_text'）.innerHTML时是如何实现的？如果要使其全局化，只需移动
var$=document.getElementById.bind（document）函数外部的行。它如何“不工作”<代码>$（'col_text'）。innerHTML
应该可以正常工作。当我尝试将变量移出第一个函数并移到顶部以对这两个函数工作时，它们停止工作。你知道为什么吗？你看到你的控制台有错误吗？您确定
$
变量在正确的范围内吗？在本例中。。。它如何知道colorMsg是一个id，又如何知道一个是id，一个是十六进制。我喜欢这种思维方式…看起来像json我只是不知道如何填补空白？一秒钟。在我问愚蠢的问题之前，让我先试试。我只是使用元素的ID作为对象中属性的名称。它可以是你想要的任何东西，它只是最简单的。努力理解，我感谢你的帮助。这就是你想要的格式吗？函数byId（id）{return document.getElementById（id）；}var data=colorSettings[newColor]；byId（'col_text'）。innerHTML=data.col_text；byId（'colorPicker\u back'）。value=data.colorPicker\u back；byId（'colorMsg'）.style.background=data.colorMsg；byId（'wrap'）.style.background=data.wrap；var colorSettings={“none”：{“col_text”：“choose”，“colorPicker_back”：“salmon”，“colorMsg”：“#fff”，“wrap”：“#f”