Javascript 创建一个非常长的字符串比这更有效

所以，我对这个游戏还很陌生，我试图比现在更好地理解javaScript。我有这段代码，如果太长而无法阅读，那么直接跳到底部的问题

    function createCSSRule(selectorName, necessaryProperties){
    //add class to control all divs
    var propertyNameBases, propertyPrefixes, propertyValues, propertySuffixes;
    var cssString = selectorName + "{\n";
    for (var i9 = 0; i9 < necessaryProperties.length; ++i9){
        switch (selectorName){
            case "."+options.allPictures:
                switch(necessaryProperties[i9]){
                    case "position":
                        propertyNameBases = ["position"];
                        propertyPrefixes    = [""],
                        propertyValues      = ["absolute"],
                        propertySuffixes    = [""];
                        break;
                    case "height":
                        propertyNameBases = ["height"];
                        propertyPrefixes    = [""],
                        propertyValues      = ["100%"],
                        propertySuffixes    = [""];
                        break;
                    case "width":
                        propertyNameBases = ["width"];
                        propertyPrefixes    = [""],
                        propertyValues      = ["100%"],
                        propertySuffixes    = [""];
                        break;
                    case "background":
                        propertyNameBases = ["background"];
                        propertyPrefixes    = [""],
                        propertyValues      = ["scroll","#fff","50% 50%","no-repeat","cover"],
                        propertySuffixes    = ["-attachment","-color","-position","-repeat","-size"];
                        break;
                    case "transform":
                        propertyNameBases   = ["transform"],
                        propertyPrefixes    = ["", "-moz-", "-webkit-"],
                        propertyValues      = [options.threeDOrigin,options.threeDStyle,"translate3d("+options.translate3dpx+")"],
                        propertySuffixes    = ["-origin","-style",""];
                        break;
                    case "transition":
                        propertyNameBases = ["transition"],
                        propertyPrefixes    = ["", "-webkit-"],
                        propertyValues      = [options.transitionLength + "ms", options.transitionPath, "all"],
                        propertySuffixes    = ["-duration","-timing-function","-property"]; //-delay"];                 
                        break;
                    default:
                        console.log("missing");
                        propertyNameBases   = null;
                        propertyPrefixes    = null;
                        propertyValues      = null;
                        propertySuffixes    = null;
                        break;
                }
                break;
        case "."+options.currentPic:
            switch(necessaryProperties[i9]){
                    case "transform":
                        propertyNameBases   = ["transform"],
                        propertyPrefixes    = ["", "-moz-", "-webkit-"],
                        propertyValues      = [options.threeDOrigin,"translate3d(0px, 0px, 0px)"],
                        propertySuffixes    = ["-origin",""];
                        break;
                    default:
                        console.log("missing");
                        propertyNameBases   = null;
                        propertyPrefixes    = null;
                        propertyValues      = null;
                        propertySuffixes    = null;
                        break;
                }
                break;
        case "."+options.currentPic+"."+options.picAfterCurrent:
            switch(necessaryProperties[i9]){
                    case "transform":
                        propertyNameBases   = ["transform"],
                        propertyPrefixes    = ["", "-moz-", "-webkit-"],
                        propertyValues      = [options.threeDOrigin,"translate3d("+options.negativeTranslate3dpx+")"],
                        propertySuffixes    = ["-origin",""];
                        break;
                    default:
                        console.log("missing");
                        propertyNameBases   = null;
                        propertyPrefixes    = null;
                        propertyValues      = null;
                        propertySuffixes    = null;
                        break;
                }
                break;
            default:
                console.log("wait a second");
                break;
        }
        //name the selector
        //iterate through properties
        for (i10 = 0; i10 < propertyNameBases.length; i10++){
            //iterate through suffixes and value pairs
            for (var i11 = 0; i11 < propertyValues.length; i11++){
                //iterate through prefixes
                if(propertyValues !== false){
                    for (var i12 = 0; i12 < propertyPrefixes.length; i12++){
                        cssString = cssString+" "+propertyPrefixes[i12]+propertyNameBases[i10]+propertySuffixes[i11]+": "+propertyValues[i11]+";\n"
                    }
                }
            }
        }
    }
var forAllPictures = ["position","height","width","background","transition","transform"];   
var forCurrentPic = ["transform"];
var forpicAfterCurrent = ["transform"];
createCSSRule("."+options.allPictures, forAllPictures);
createCSSRule("."+options.currentPic, forCurrentPic);
createCSSRule("."+options.currentPic+"."+options.picAfterCurrent, forpicAfterCurrent);

我希望有人能提出一个更简单的方法

我觉得我没有正确地使用这种语言。如果有人有一个比我现在使用的更好的想法，我很乐意听到

就像我说的，我还在学习

---

我觉得我应该可以用一个物体来做这件事，我只是不知道我在用物体做什么。如果任何人有任何用干净的日常语言写的文章，或者至少有一些非常好的例子，我将不胜感激，否则你自己的例子/解释将不胜感激。当然，如果我能够用一个对象来实现这一点…

听起来你可能正在重新发明轮子——为什么不使用jQuery或zeptojs，然后呢

---

$（'your css selector here'）.css（{property:value，property:value…}）

已经有了一个javascript库来完成您试图完成的任务

就个人而言，我更喜欢sass-lang（而不是javascript）

对于对象，则可以简单如下：

// An object with css properties
var css = {
    background: "#FF0099",
    position: "absolute",
    height: "100%",
    width: "100%"
    //etc...
};

// You could also write it as such:
var css = {};
css["background"] = "#FF0099";
css["position"]   = "absolute";
css["height"]     = "100%";
css["width"]      = "100%";

// Parse the object into valid css using a string and a for in loop
var style = '.myClass{';
for (var i in css) {
    style += i + ':' + css[i] + ';';
}
style += '}';

---

对不起，我真的不明白结果应该是什么样子，但这也表明。。。不要使用

开关

结构。当然，每个规则都有例外，但实际上，JavaScript中存在

switch

，原因与它有特殊的中缀运算符来处理32位整数的位（而一开始就没有32位整数）相同。也就是说，这是C语言的一个黑暗遗产，在这里这些操作非常有意义。出于市场考虑，JavaScript被设计成类似于C。开发人员被认为喜欢C语言，而使一种语言与之相似将使它更受欢迎

为什么不呢？ 因为

switch

比not更频繁，这会使您编写无法重用的重复代码。 以代码的这一部分为例：

case "height":
    propertyNameBases = ["height"];
    propertyPrefixes    = [""],
    propertyValues      = ["100%"],
    propertySuffixes    = [""];
    break;
case "width":
    propertyNameBases = ["width"];
    propertyPrefixes    = [""],
    propertyValues      = ["100%"],
    propertySuffixes    = [""];
    break;

它在第二个块中重复第一个块的90%。但是如果你还需要一个，你能重复使用它吗没有

那怎么办？ 使用多态性。它在JavaScript中很便宜，很容易编写。下面是一个如何减少上述内容冗长的示例：

function rules() {
    function propertyTemplate(property) {
        return function (template, defalutValue) {
            return function (value) {
                return template.replace("%v", value || defalutValue);
            };
        }("%p:%v".replace("%p", property));
    }
    return {
        width: propertyTemplate("width", "100%"),
        height: propertyTemplate("height", "200%")
    };
}
// examples:
console.log(rules().width());
// width:100%

var text = [], ruleset = rules();
for (var rule in ruleset)
    text.push(ruleset[rule]((Math.random() * 100) | 0) + "%");
console.log(text.join(";"));
// width:47%;height:65%

---

当然，这只是一个例子，由您来决定如何让它实现您想要的功能。

如果您想优化代码，请选择：。非常感谢您的建议。如果可能的话，我真的不想少用，因为我需要将其作为文本字符串。任何想法都会很有帮助。我确实需要一根绳子。因为我将它保存在一个样式标记中，该标记通过一个文档片段进入dom。还有其他想法吗？不幸的是，这迫使我重写每一个对象，对吗？如果可能的话，我真的不想少用，因为我需要它作为文本字符串。任何其他想法都会有帮助。是的，对不起。我甚至从未听说过javascript中的多态性。请用一个链接评论一篇很棒的文章。。。我有Oriely的javascript书，所以我可能也会打开它。但是，是的，我绝对不喜欢使用switch语句。我最终为我想要创建的每个代码块创建了一个多维数组，并用3个for语句对其进行迭代。@MichaelMcLaughlin您会感到惊讶的。。。有很多关于JavaScript多态性的文章，但大多数都来自“不可靠”的来源。。。传统似乎是将多态性与原型继承联系起来（这只是一种方法）。这里有一篇关于参数多态性的有趣文章：但这也不是我想的：）我查阅了Crochford、Eich和Horwat的出版物，但没有雪茄。。。。。。我可以考虑的一件事是：Scheme，它在概念上与JavaScript非常相似，SICP中给出的多态性描述在这里也非常有用。这大概是我能想到的最好的了：）

function rules() {
    function propertyTemplate(property) {
        return function (template, defalutValue) {
            return function (value) {
                return template.replace("%v", value || defalutValue);
            };
        }("%p:%v".replace("%p", property));
    }
    return {
        width: propertyTemplate("width", "100%"),
        height: propertyTemplate("height", "200%")
    };
}
// examples:
console.log(rules().width());
// width:100%

var text = [], ruleset = rules();
for (var rule in ruleset)
    text.push(ruleset[rule]((Math.random() * 100) | 0) + "%");
console.log(text.join(";"));
// width:47%;height:65%