Verschönern Sie Ihren jQuery -Code mit verschönig.js

Dieser Leitfaden zeigt, wie beautify.js zum Aufräumen des chaotischen JQuery -Codes und zur Verbesserung der Lesbarkeit und Wartbarkeit verwendet wird. Dynamisch erzeugt JavaScript/JQuery fehlt häufig die Formatierung, wodurch es schwierig ist, mit ihnen zu arbeiten. beautify.js löst dies, indem der Code automatisch formatiert wird. Dies ist besonders nützlich für Funktionsdemos, bei denen der Code präsentabel sein muss. Die Schaltfläche "Code anzeigen" auf Beispielseiten zeigt dies in Aktion.

Live -Demo & Download: [Link zur Demo] [Link zum Download]

Implementierungsschritte:

1. Download: Erhalten Sie das beautify.js -Paket von GitHub. Entfernen Sie unnötige Komponenten wie die Auszahlung der Verschleierung, um den Code zu optimieren.

2. Ändern Sie: den Code an Ihr Projekt anpassen. Das Beispiel enthält einen Parameter, um bestimmte Elemente zu zielen, die Elemente mit der Klasse "RAW" iteriert, die den Jquery -Code enthält.

3. Integration: Fügen Sie den Verschiebungsaufruf in eine DOM -Ready -Funktion ein. Integrieren Sie optional einen Syntax -Highlighter (viele sind verfügbar) zur verbesserten Lesbarkeit.

Code Beispiel:

Fügen Sie diese Skripte ein:

Wickeln Sie Ihren jQuery -Code in <code><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></pre><div class="contentsignin">Nach dem Login kopieren</div></div> tags with the class "raw":

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

The modified beautify() ein mybeautifier.js Die modifizierte verschönig () (befindet sich in

):

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) ...
}

Rufen Sie schließlich den Verschönerer innerhalb einer DOM -Ready -Funktion an:

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

JS verschönern FAQ:

JS Beautify Dieser Abschnitt beantwortet gemeinsame Fragen zu

, seine Funktionalität und Verwendung innerhalb eines jQuery -Entwicklungs -Workflows. (Der ursprüngliche FAQ -Abschnitt wird mit geringfügigen Phrasenanpassungen für einen verbesserten Fluss und die Selbstverständlichkeit zurückgehalten.) Die Antworten bleiben weitgehend gleich und konzentrieren sich auf Klarheit und Lesbarkeit.

Das obige ist der detaillierte Inhalt vonVerschönern Sie Ihren jQuery -Code mit verschönig.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!