所以，我对这个游戏很陌生，并且我试图比现在更好地理解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);
基本上，将要发生的是我要将一个字符串（它是变量的组合）传递给第一个参数，将一个数组传递给第二个参数。第一个参数用作我的类名，第二个参数用作必要的css属性数组。我已经包含了下面的输出，因此您可以简单地了解我的目标。 if语句中的每个数组都由i在每个for循环中用于输出字符串。
每个switch语句设置一个特定的变量，然后3个for循环接管连接一个非常长的字符串，恰好是下面的css
.slideShowPics{
position: absolute;
height: 100%;
width: 100%;
background-attachment: scroll;
background-color: #fff;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
transition-duration: 5000ms;
-webkit-transition-duration: 5000ms;
transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
transition-property: all;
-webkit-transition-property: all;
transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
transform-style: flat;
-moz-transform-style: flat;
-webkit-transform-style: flat;
transform: translate3d(-640px, 0px, 0px);
-moz-transform: translate3d(-640px, 0px, 0px);
-webkit-transform: translate3d(-640px, 0px, 0px);
}
.currentSlideShowPic{
transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
transform: translate3d(0px, 0px, 0px);
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
}
.currentSlideShowPic.movingOut{
transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
transform: translate3d(640px, 0px, 0px);
-moz-transform: translate3d(640px, 0px, 0px);
-webkit-transform: translate3d(640px, 0px, 0px);
}
我希望有人建议一种更简单的方法来做到这一点。
我觉得我没有正确使用这种语言。如果有人比我目前使用的想法更好，我很乐意听到。
像我说的那样，我还在学习。我觉得我应该能够用一个物体做到这一点，我只是不知道在对象时我在做什么。如果有人有任何用干净的日常用语写的文章，或者至少是一些非常好的例子，我将不胜感激，否则你自己的例子/解释将是最受欢迎的。当然，如果我能用对象做到这一点......
答案 0 :(得分：2)
抱歉，我真的不明白结果应该是什么样子，但这也表明...不要使用switch结构。当然，每个规则都有例外，但JavaScript中存在switch，原因与它具有操作32位整数位的特殊中缀运算符相同（尽管开始时甚至没有32位整数）。即这是C的黑暗遗产，这些操作非常有意义。由于营销方面的考虑，JavaScript被设计为类似于C语言。开发人员被认为喜欢C，并且使一种类似的语言会使它更受欢迎。
因为switch更频繁，所以不会让您编写无法重复使用的重复代码。
以你的代码为例：
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%
这当然只是一个例子，你可以按照自己的意愿去做。
答案 1 :(得分：0)
听起来你可能正在重新发明轮子 - 为什么不使用jQuery或zeptojs，并且
$（＆＃39;你的css选择器在这里＆＃39;）。css（{property：value，property：value ...}）
答案 2 :(得分：0)
已经有一个javascript库可用于完成您要完成的任务。 http://lesscss.org/
我个人更喜欢sass-lang（不是javascript）http://sass-lang.com/
对于对象，它可以像这样简单：
// 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 += '}';