Création d'une propriété à l'intérieur d'un objet qui peut être utilisée en permanence

Question

Je suis le type de personne qui aime faire beaucoup de projets surtout si cela implique seulement JavaScript puisque c'est mon point fort.

J'ai pensé à une petite idée amusante. Écrire des petits morceaux de CSS avec JavaScript. Ces éléments CSS pourraient ensuite être utilisés dans un Blob ou implémentés dans la page web d'une autre manière.

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

Essayons de nous faire une idée plus précise de ce avec quoi nous travaillons. L'une de ces feuilles de style JavaScript pourrait ressembler à ceci :

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

Cela reviendrait :

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

Notez que les children dans le cadre de la h1 élément.

C'est ma façon d'imbriquer, en faisant du h1 a .

Ma question est cependant la suivante : comment puis-je créer une imbrication continue afin d'obtenir quelque chose comme.. :

"h1 div span a"

Cela signifie que chaque enfant imbriqué devra être en mesure d'utiliser la fonction children propriété.

Le script que j'ai jusqu'à présent est le suivant (appartient à la variable 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(";") + "}"
        }
    }
    //----
}

Les sections entre les commentaires sont le code que j'utilise pour l'imbrication en une seule fois.

Je ne suis pas sûr qu'il soit très difficile de l'ajouter. Mais je comprends que ce ne serait probablement pas facile.

Mon exemple complet est ici : http://jsfiddle.net/shawn31313/2tfnz/1

Answer 1

Vous pouvez facilement rendre votre code récursif :

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

Cela peut certainement être amélioré, mais cela illustre l'idée.

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

---

Vous pouvez également envisager de modifier votre structure d'objets pour rendre le code un peu plus propre :

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

De cette manière, il n'est pas nécessaire de faire la distinction entre les propriétés nommées children et ceux qui ne le sont pas.

Answer 2

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

Placez le code dans une méthode afin qu'il puisse s'appeler lui-même de manière récursive lorsqu'il trouve des enfants. Cette méthode permet à la fois children y descendant et produit des feuilles de style CSS bien formatées.

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

Answer 3

J'aime tous vos codes. Cependant, j'ai dit l'idée de rendre mon code récursif.

C'est ce que j'ai fait :

        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 - Votre idée avec la descendants est un bon exemple :)

Mon code est un peu plus long que celui de Trevors, mais il est personnellement plus facile à gérer. (39 lignes, il en fait 20)

J'aime généralement créer mon propre code parce que je comprends généralement comment il fonctionne.

Ha, j'étais un peu confus en regardant votre code.