Bagaimana Menghuraikan CSS dengan Cekap dalam JavaScript?

Menghuraikan CSS dalam JavaScript: Panduan Terperinci

Menghuraikan CSS dalam JavaScript boleh menjadi teknik yang berguna untuk mengekstrak dan memanipulasi gaya daripada kod CSS. Walau bagaimanapun, ia boleh menjadi tugas yang rumit untuk dilaksanakan.

Menggunakan JavaScript dan Perpustakaan jQuery

Terdapat perpustakaan JavaScript dan jQuery khusus tersedia untuk menghuraikan CSS. Satu perpustakaan yang popular ialah [jQuery CSS](https://learn.jquery.com/using-jquery-core/other-topics/advanced-selectors/#css-manipulation), yang menyediakan kaedah untuk mengekstrak dan mengubah suai gaya CSS.

Pendekatan Ganti

Jika anda ingin melaksanakan penghuraian CSS anda sendiri kefungsian, anda boleh menggunakan kaedah alternatif untuk memisahkan pasangan nilai harta. Sebagai contoh, anda boleh menggunakan ungkapan biasa untuk menangkap padanan berdasarkan corak tertentu. Selain itu, anda boleh mempertimbangkan untuk menggunakan penjana parser seperti [PEG.js](https://pegjs.org/) atau [JISON](https://zaach.github.io/jison/) untuk menjana secara automatik berdasarkan parser pada definisi tatabahasa.

Mengelakkan Pemisahan pada Titik Bertitik

Untuk mengelakkan perpecahan nilai harta berpasangan pada koma bertitik dalam nilai, anda boleh menggunakan ungkapan biasa yang melangkau padanan yang menyertakan koma bertitik selepas bertindih. Contohnya:

/(?:[^;|)]*:.*?;)|(?:[^;|)]*?;)|(?:[;|]{1})/g

Ungkapan biasa ini memadankan pasangan nilai sifat dengan menangkap aksara bukan koma bertitik diikuti dengan titik bertindih, atau koma bertitik solo atau koma bertindih individu.

Contoh Pelaksanaan

Berikut ialah pelaksanaan yang lebih baik bagi kod penghuraian CSS anda menggunakan pendekatan alternatif yang dinyatakan di atas:

parseCSS: function(css) {
    var rules = {};
    css = this.removeComments(css);
    var blocks = css.split('}');
    blocks.pop();
    var len = blocks.length;
    for (var i = 0; i < len; i++) {
        var pair = blocks[i].split('{');
        rules[$.trim(pair[0])] = this.parseCSSBlock(pair[1]);
    }
    return rules;
},

parseCSSBlock: function(css) {
    var rule = {};
    var declarations = css.match(/(?:[^;|)]*:.*?;)|(?:[^;|)]*?;)|(?:[;|]{1})/g);
    declarations.pop();
    var len = declarations.length;
    for (var i = 0; i < len; i++) {
        var loc = declarations[i].indexOf(':');
        var property = $.trim(declarations[i].substring(0, loc));
        var value = $.trim(declarations[i].substring(loc + 1));

        if (property != "" &amp;&amp; value != "")
            rule[property] = value;
    }
    return rule;
},

removeComments: function(css) {
    return css.replace(/\/\*(\r|\n|.)*\*\//g,"");
}

Menggunakan CSSOM Penyemak Imbas

Anda juga boleh memanfaatkan Model Objek CSS (CSSOM) terbina dalam penyemak imbas untuk menghuraikan CSS. Berikut ialah contoh:

var rulesForCssText = function (styleContent) {
    var doc = document.implementation.createHTMLDocument(""),
        styleElement = document.createElement("style");

   styleElement.textContent = styleContent;
    doc.body.appendChild(styleElement);

    return styleElement.sheet.cssRules;
};

Atas ialah kandungan terperinci Bagaimana Menghuraikan CSS dengan Cekap dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!