Embellir votre code jQuery à l'aide d'embeltify.js

Ce guide montre comment utiliser beautify.js pour nettoyer le code jQuery désordonné, améliorer la lisibilité et la maintenabilité. JavaScript / jQuery généré dynamiquement manque souvent de formatage, ce qui rend difficile de travailler avec. beautify.js résout cela en formant automatiquement le code. Ceci est particulièrement utile pour les démos de fonction où le code doit être présentable. Le bouton "Afficher le code" sur les pages d'exemples présente cela en action.

Demo en direct et téléchargement: [lien vers la démo] [lien vers le téléchargement]

Étapes d'implémentation:

1. Télécharger: Obtenez le package beautify.js à partir de github. Supprimez des composants inutiles comme les déballages d'obscurcissement pour rationaliser le code.

2. Modifier: Adaptez le code à votre projet. L'exemple comprend un paramètre pour cibler des éléments spécifiques, itérant à travers des éléments avec la classe "brut" contenant le code jQuery.

3. Intégration: Incluez l'appel de l'emplacement beau dans une fonction DOM Prêt. Facultativement, intégrez un surligneur de syntaxe (beaucoup sont disponibles) pour une lisibilité accrue.

Exemple de code:

Inclure ces scripts:

Enveloppez votre code jQuery dans <code><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></pre><div class="contentsignin">Copier après la connexion</div></div> tags with the class "raw":

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

The modified beautify() mybeautifier.js la fonction modifiée embeltify () (située dans

):

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

Enfin, appelez l'embellissement dans une fonction DOM Prêt:

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

js embelliftifier FAQ:

JS Beautify Cette section répond aux questions courantes sur

, sa fonctionnalité et son utilisation dans un flux de travail de développement jQuery. (La section FAQ d'origine est conservée avec des ajustements de phrasé mineurs pour améliorer le flux et la concision.) Les réponses restent en grande partie les mêmes, en se concentrant sur la clarté et la lisibilité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!