Cantikkan kod jQuery anda menggunakan cantik.js

Panduan ini menunjukkan cara menggunakan beautify.js untuk membersihkan kod jQuery yang berantakan, meningkatkan kebolehbacaan dan penyelenggaraan. JavaScript/jQuery yang dijana secara dinamik sering tidak mempunyai pemformatan, menjadikannya sukar untuk bekerja dengan. beautify.js menyelesaikan ini dengan memformat kod secara automatik. Ini amat berguna untuk demo fungsi di mana kod perlu dipandang rapi. Butang "Lihat Kod" pada halaman contoh mempamerkan ini dalam tindakan.

Demo Live & Muat turun: [Link to Demo] [Link to download]

Langkah -langkah pelaksanaan:

1. Muat turun: Dapatkan pakej beautify.js dari GitHub. Keluarkan komponen yang tidak perlu seperti pembongkaran Obfuscation untuk menyelaraskan kod.

2. Ubah suai: menyesuaikan kod ke projek anda. Contohnya termasuk parameter untuk menargetkan unsur -unsur tertentu, meleleh melalui unsur -unsur dengan kelas "mentah" yang mengandungi kod jQuery.

3. Integrasi: Sertakan panggilan cantik dalam fungsi siap dom. Secara opsyen, mengintegrasikan penyerlah sintaks (banyak yang tersedia) untuk kebolehbacaan yang dipertingkatkan.

Contoh kod:

Sertakan skrip ini:

bungkus kod jQuery anda dalam <code><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></pre><div class="contentsignin">Salin selepas log masuk</div></div> tags with the class "raw":

<pre class='brush:php;toolbar:false;'>
// Your jQuery code here...

The modified beautify() mybeautifier.js fungsi cantik () diubahsuai (terletak di

):

var the = {
    beautify_in_progress: false
};

// Chrome string handling optimization (if needed)
if (/chrome/.test(navigator.userAgent.toLowerCase())) {
    String.prototype.old_charAt = String.prototype.charAt;
    String.prototype.charAt = function (n) { return this.old_charAt(n); }
}

function unpacker_filter(source) {
    // ... (comment handling logic remains unchanged) ...
}

function beautify(elem) {
    if (the.beautify_in_progress) return;
    the.beautify_in_progress = true;
    var source = $(elem).html();
    // ... (settings and beautification logic remains largely unchanged) ...
}

Akhirnya, hubungi The Beautifier dalam fungsi siap Dom:

$(document).ready(function() {
    $('.raw').each(function() {
        beautify(this);
    });
});

JS Menghidupkan Soalan Lazim:

JS Beautify Bahagian ini menjawab soalan umum mengenai

, fungsinya, dan penggunaan dalam aliran kerja pembangunan jQuery. (Bahagian FAQ asal dikekalkan dengan pelarasan ungkapan kecil untuk aliran dan kesimpulan yang lebih baik.) Jawapannya tetap sama, dengan memberi tumpuan kepada kejelasan dan kebolehbacaan.

Atas ialah kandungan terperinci Cantikkan kod jQuery anda menggunakan cantik.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!