尽量避免重复，简化......创建全局变量并简化我的javascript——纯js没有jquery答案

【问题标题】：Trying to avoid repetition, simplify ... create global variables and simplify my javascript -- pure js no jquery尽量避免重复，简化......创建全局变量并简化我的javascript——纯js没有jquery
【发布时间】：2014-01-08 19:09:17
【问题描述】：

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;

//我想把上面的内容变成全局的……或者如果有另一种写法，我很乐意看到。 $('col_text').style.color = newColor;

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

//这需要简化，但我正在为如何做而苦苦挣扎。

【问题讨论】：

只要将它们移到你的函数之外，它们就会是全局的？
@JoeRinehart - 不完全是......执行 OP 在这里所做的事情是完全合理的，并使用 $ 作为类似功能的不同方法的简写。我并不是说这是一个好主意，因为它可能会使其他查看您的代码的人感到困惑，但它肯定不是不允许的。
嘿，我编辑了我的评论 - 我最初评论时没有看到 $ 的分配。
旁注：完全是迂腐的：jquery 是纯 javascript。
关于 jquery 的事情我只是说没有捷径。我拼命地试图掌握复杂的 OOP Javasript 编程，并且多年来我一直使用 Jquery 作为拐杖。我真的只是想深入了解并充分了解如何构建强大的对象......所以这是我学习的。感谢你们的帮助，我非常需要它。

标签： javascript function oop object

【解决方案1】：

var $ = document.getElementById;

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

getElementById 期望 this 为 document（当您执行 document.getElementById 时设置）。当你只是调用$ 时，没有上下文，所以getElementById 不起作用（this 将是window）。

试试这个：

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

这将强制 this 成为 document。

【讨论】：

太好了，谢谢。另一个问题。我怎样才能使这些变量对这两个函数都是全局的，以及当我尝试用 ct.innerHTML 替换 document.getElementById('col_text').innerHTML 时它不起作用？？？
要使其全局化，只需将var $ = document.getElementById.bind(document); 行移出函数即可。
它是如何“不工作”的？ $('col_text').innerHTML 应该可以正常工作。
当我尝试将变量移出第一个函数并移到顶部以同时为这两个函数工作时，它们停止工作。知道为什么吗？
您是否在控制台中看到任何错误？您确定 $ 变量在正确的范围内吗？

【解决方案2】：

就我个人而言，我不会使用 $，您只是在询问正在使用什么库的混淆。

你可以只拥有一个函数，而不是绑定

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

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

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

而且当你应用它时，没有ifs，只是根据对象设置

function changeColor() {
    var newColor = byId('colorPicker').value;
    var data = colorSettings[newColor];
    byId('col_text').innerHTML = data.col_text;
    byId('colorPicker_back').value = data.colorPicker_back;
    byId('colorMsg').style.background = data.colorMsg;
    byId('wrap').style.background = data.wrap;
}

【讨论】：

用这个例子......它怎么知道 colorMsg 是一个 id。还有它怎么知道一个是 id 而一个是十六进制。我喜欢这样的思维方式……看起来像json我就是不明白怎么填补空白？
一秒钟。在我问愚蠢的问题之前让我试试吧。
我只是使用元素的id作为对象中的属性名称。它可以是你想要的任何东西，它只是最简单的。
嗯。试图理解，我很感激帮助。这是你得到的格式吗？ function byId (id) { return document.getElementById(id); } var 数据 = colorSettings[newColor]; byId('col_text').innerHTML = data.col_text; byId('colorPicker_back').value = data.colorPicker_back; byId('colorMsg').style.background = data.colorMsg; byId('wrap').style.background = data.wrap; var colorSettings = {“none”：{“col_text”：“选择”，“colorPicker_back”：“salmon”，“colorMsg”：“#fff”，“wrap”：“#fff”； }, "黄色" : { ... }, }
我想我说的是对象的总体结构是我正在努力解决的问题。