使用beautify.js美化您的jQuery代码

使您的jQuery代码整洁可能非常耗时。 幸运的是，有一些在线工具和大量插件可以帮助我们自动完成此任务。 最近，我需要动态生成JavaScript / jQuery代码，因此会产生混乱和不可读的情况。 因此，我决定使用beautify.js整理jQuery代码，以使其统一，整洁，并且人们可以阅读它。 在博客的功能演示部分中，我已经广泛使用它来修饰jQuery代码。 只需单击“查看代码”即可在任何功能示例页面上查看它的运行情况。

带有语法荧光笔。

现场演示
下载演示包

使用说明

1. 从GitHub下载美化包 。
2. 修改代码以适合您的设置（即–我不需要混淆解包器，因此我删除了它们以减少未使用的代码，然后在参数中添加了一个参数到美化函数，以便可以将美化器应用于特定元素然后循环包含jQuery代码的class =“ raw”元素。
3. 准备好将beautifier调用包含在DOM中，然后再根据需要应用语法突出显示器。 您可以使用以下10种语法突出显示器之一 。

编码

包括脚本。

   
   

I have modified version of beautify() function and removed the code unpacker functions and put them into a new file called “mybeautifier.js”. The contents of this file:
var the = {

    beautify_in_progress: false

};
// this dummy function alleviates Chrome large string corruption by probably shoveling the corruption bug to some other area

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

    var trailing_comments = ”;

    var comment = ”;

    var found = false;
    do {

        found = false;

        if (/^s*/*/.test(source)) {

            found = true;

            comment = source.substr(0, source.indexOf(‘*/’) + 2);

            source = source.substr(comment.length).replace(/^s+/, ”);

            trailing_comments += comment + “n”;

        } else if (/^s*///.test(source)) {

            found = true;

            comment = source.match(/^s*//.*/)[0];

            source = source.substr(comment.length).replace(/^s+/, ”);

            trailing_comments += comment + “n”;

        }

    } while (found);
    return trailing_comments + source;

}
function beautify(elem) {

    if (the.beautify_in_progress) return;
    the.beautify_in_progress = true;

    var source = $(elem).html();
    var indent_size = $(‘#tabsize’).val();

    var indent_char = indent_size == 1 ? ‘t’ : ‘ ‘;

    var preserve_newlines = $(‘#preserve-newlines’).attr(‘checked’);

    var keep_array_indentation = $(‘#keep-array-indentation’).attr(‘checked’);

    var brace_style = $(‘#brace-style’).val();
    if ($(‘#detect-packers’).attr(‘checked’)) {

        source = unpacker_filter(source);

    }
    var comment_mark = ‘

From: https://www.sitepoint.com/beautify-jquery-code-js-beautify/