5

我是那种喜欢做很多项目的人，特别是如果它只涉及 JavaScript，因为这是我的强项。

我想到了一个有趣的想法。用 JavaScript 编写小段 CSS。然后这些 CSS 片段可以在 Blob 中使用或以其他方式实现到网页中。

Most of the time, I do projects just for FUN and for build up in experience.

让我们更多地了解我们正在使用的东西。这些 JavaScript 样式表之一可能如下所示：

var sheet = {
    "h1": {
        "font-size": "24px",
            "color": "blue",
        children: {
            "a": {
                "font-size": "15px"
            }
        }
    },
    "a": {
        color: "red"
    }
};

这将返回：

h1{font-size:24px;color:blue}h1 a{font-size:15px}a{color:red}

注意元素children中的属性。h1

这是我的嵌套方式，制作h1 a.

然而，我的问题是，我怎样才能进行连续嵌套，以便最终得到类似的结果：

“h1 div 跨度 a”

这意味着每个嵌套的孩子都需要能够使用该children属性。

我到目前为止的脚本如下（属于变量sheet）。

var to = "";
for (var el in sheet) {
    var props = [];
    for (var prop in sheet[el]) {
        if(prop != "children") {
            props.push(prop + ":" + sheet[el][prop]);
        }
    }
    to += el + "{" + props.join(";") + "}";
    //----
    if (sheet[el].children) {
        for (var el2 in sheet[el].children) {
            var props = [];
            for (var prop in sheet[el].children[el2]) {
                props.push(prop + ":" + sheet[el].children[el2][prop]);
            }
            to += el + " " + el2 + "{" + props.join(";") + "}"
        }
    }
    //----
}

注释之间的部分是我用于 1 次嵌套的代码。

我不确定这将是多么困难。但我知道这可能并不容易。

我的完整示例在这里：http: //jsfiddle.net/shawn31313/2tfnz/1

4

3 回答 3

2

你可以很容易地让你的代码递归：

function buildCSS(stub, node){
    var to = "";
    for (var el in node) {
        var rule = stub + " " + el;
        var props = [];
        for (var prop in node[el]) {          
            if(prop != "children") {
                props.push(prop + ":" + node[el][prop]);
            }
        }
        to += rule + "{" + props.join(";") + "}";
        if (node[el].children) {
            to += buildCSS(rule, node[el].children);
        }
    }

    return to;
}

var to = buildCSS("", sheet);

这绝对可以清理，但它说明了这个想法。

http://jsfiddle.net/2tfnz/3/

您还可以考虑调整对象结构以使代码更简洁：

var sheet = {
    "h1": {
        rules: {
            "font-size": "24px",
            "color": "blue"
        },
        children: {
            "a": {
                rules: {
                    "font-size": "15px"
                }
            }
        }
    },
    "a": {
        rules: {
            color: "red"
        }
    }
};

这样，您就不需要区分已命名children的属性和未命名的属性。

于 2013-04-10T03:49:40.087 回答
1

http://jsfiddle.net/2tfnz/6/

将代码放在一个方法中，这样它就可以在找到孩子时递归地调用自己。这一个允许children和descendant属性并输出格式良好的 CSS。

var sheet = {
    "h1": {
        "font-size": "24px",
        "color": "blue",
        children: {
            "a": {
                "font-size": "15px",
                descendants: {
                    "span": {
                        "font-weight": "bold"
                    }
                }
            }
        }
    },
    "a": {
        color: "red"
    }
};

function toCSS(obj, pre) {
    var str = '', pre = pre || '';

    for (var selector in obj) {
        str += pre + selector + ' {\n';

        var rules = obj[selector];
        for (var ruleKey in rules) {
            if (['descendants', 'children'].indexOf(ruleKey) > -1) continue;
            str += '  ' + ruleKey + ': ' + rules[ruleKey] + ';\n';
        }

        str += '}\n\n';

        if ('descendants' in rules) str += toCSS(rules.descendants, pre + selector + ' ');
        if ('children' in rules) str += toCSS(rules.children, pre + selector + ' > ');
    }

    return str;
}


console.log(toCSS(sheet));
于 2013-04-10T03:55:36.610 回答
0

我喜欢你们所有的代码。但是，我告诉了让我的代码递归的想法。

所以我做了：

        var to = "";
        for (var el in sheet) {
            var props = [];
            var nest = [el];
            var nestLookUp = {
                    "children": ">", 
                    "desendents": ""
            };
            var nests = /children|desendents/;
            var addNest = function (shh) {
                for (var found in nestLookUp) {
                    if (shh.hasOwnProperty(found)) {
                        for (var el2 in shh[found]) {
                            var props = [];
                            nest.push(nestLookUp[found]);
                            nest.push(el2);
                            for (var prop in shh[found][el2]) {
                                if (!prop.match(nests)) {
                                    props.push(prop + ":" + shh[found][el2][prop]);
                                }
                            }
                            if (props.length > 0) {
                                to += nest.join(" ").replace(/\s{2}/, " ") + "{" + props.join(";") + "}";
                            }
                            addNest(shh[found][el2]);
                            nest.pop();
                            nest.pop();
                        };
                    }
                }
            };
            for (var prop in sheet[el]) {
                if (prop != "children") {
                    props.push(prop + ":" + sheet[el][prop]);
                }
            }
            to += el + "{" + props.join(";") + "}";
            addNest(sheet[el]);
        }

@Trevor - 你的descendants, 想法很好:)

我的代码比 Trevors 长一点，但我个人更易于管理。（他的 39 行是 20）

我通常喜欢编写自己的代码，因为我通常了解代码的工作原理。

哈，看着你们的代码，我有点困惑。

于 2013-04-10T04:19:44.480 回答