javascript - 如何干燥我的 jQuery 代码并使其更具可读性/可维护性？

Question

我开始做很多 jQuery 编程。我发现我的代码变得有点难以维护并且可读性不强。我的 javascript 被包含在我们的网络应用程序的每个页面上，即使它只在一个页面上使用。这有在加载页面之前缓存 javascript 的好处，但我担心不小心创建具有相同名称的函数(由我团队中的其他程序员创建)。

我是 javascript 的新手，所以可能缺少一些基础知识。我可以将哪些技术应用于以下代码以及将来的其他代码，以使我的 jQuery 代码更易于维护和易于阅读？

<script type="text/javascript">

$(document).ready(function(){
    $('#registration-information .copy-button').click(copyField);
});

function copyField(e) {

    e.preventDefault();

    var $tr = $(this).closest('tr');
    var originalText = jQuery.trim($tr.find('.contact-data').text());
    var newText = jQuery.trim($tr.find('.registration-data').text());
    var $button = $tr.find('.copy-button');
    var $loadingIcon = $('<span class="loading-icon"></span>').hide().insertAfter($button);
    var $undoLink = $('<a class="undo-link" href="#">Undo</a>').hide().insertAfter($button);
    var field = $button.attr('id');

    $undoLink.click(function(e){
        e.preventDefault();
        undoCopyField($tr, originalText);
    });

    $button.hide();
    $loadingIcon.show();

    $.ajax({
        url: '/registrations/copy-field-to-contact',
        data: {
            id: '<?php echo $registration->ID ?>',
            field: field,
            data: newText
        },
        success: function(data){
            if (data.success) {
                $loadingIcon.hide();
                $tr.find('.contact-data').html(newText);
                $tr.find('td.form_field_label').removeClass('mismatched');
                $tr.effect('highlight', 1000, function(){
                    $undoLink.fadeIn();
                });
            } else {
                displayErrorMessage(data.error);
                $loadingIcon.hide();
                $button.show();
            }
        },
        error: function(){
            displayErrorMessage('Unknown reason');
            $loadingIcon.hide();
            $button.show();
        }
    });
}

function undoCopyField($tr, originalText) {

    var $button = $tr.find('.copy-button');
    var $loadingIcon = $tr.find('.loading-icon');
    var $undoLink = $tr.find('.undo-link');
    var field = $button.attr('id');

    $undoLink.hide();
    $loadingIcon.show();

    $.ajax({
        url: '/registrations/copy-field-to-contact',
        data: {
            id: '<?php echo $registration->ID ?>',
            field: field,
            data: originalText
        },
        success: function(data){
            if (data.success) {
                $undoLink.remove();
                $loadingIcon.hide();
                $tr.find('.contact-data').html(originalText);
                $tr.find('td.form_field_label').addClass('mismatched');
                $tr.effect('highlight', 1000, function(){
                    $tr.find('.copy-button').fadeIn();
                });
            } else {
                displayErrorMessage(data.error);
                $loadingIcon.hide();
                $undoLink.show();
            }
        },
        error: function(){
            displayErrorMessage('Unknown reason');
            $loadingIcon.hide();
            $undoLink.show();
        }
    });
}

function displayErrorMessage(message) {
    alert('Sorry, there was an error while trying to save your changes: ' + message);
}
</script>

更新:此代码示例的许多部分包含几乎相同的代码块。特别是 AJAX 调用。这两个 block 本质上是相同的，除了调用完成后发生的操作。我真的很想找出一种方法来干燥这些部分。

Answer 1

两个提示:

• 为您的代码使用 namespace 以避免名称冲突。 Javascript 中当然没有真正的 namespace ，但您可以使用对象伪造它们。

`

var MyCode=MyCode||{
        copyField:function (e){
    },
        someOtherFunction:function(){
    }
};

    $(document).ready(function(){
        MyCode.copyField(...);
    });

• 将您的 javascript 代码放在一个或多个单独的文件中(每个命名空间一个)，并使用第三方库，如 combres将它们合并到一个文件中，缩小它们并进行适当的缓存处理。它节省了大量带宽，并且比在不同页面上分布各种 javascript 函数更干净。