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

本指南演示瞭如何使用beautify.js清理混亂的雜音代碼，以提高可讀性和可維護性。 動態生成的JavaScript/jQuery通常缺乏格式，因此很難使用。 beautify.js>通過自動格式化代碼來解決此問題。 這對於需要顯示代碼的功能演示特別有用。 示例頁面上的“查看代碼”按鈕顯示了此操作。

>

>實時演示＆下載： [鏈接到demo] [鏈接下載]

實現步驟：

1. 下載：>從github獲取beautify.js軟件包。 刪除不必要的組件，例如混淆拆卸器以簡化代碼。 >

2. 修改：將代碼調整到您的項目中。該示例包括一個針對特定元素的參數，通過包含jQuery代碼的類“ RAW”元素迭代。 >

3. 集成：

   在DOM就緒功能中包含“美化調用”。 可選地，集成語法熒光筆（許多可用）以增強可讀性。

>代碼示例：

包括以下腳本：

>將您的jQuery代碼包裝在

中

修改後的 beautify（）函數（位於

>中）：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></pre><div class="contentsignin">登入後複製</div></div> tags with the class "raw":

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

The modified beautify()> mybeautifier.js

>最後，在DOM準備功能中調用美化機：

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

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

> JS Beautify常見問題：

本節回答了有關的常見問題，其功能和在jQuery開發工作流中的用法。 （原始的常見問題解答部分保留了較小的措辭調整，以改善流量和簡潔性。）答案基本上保持不變，重點是清晰和可讀性。

>

以上是使用beautify.js美化您的jQuery代碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！