How to dry my jQuery code and make it more readable / maintanable?

Question

I'm starting a lot of jQuery programming. I found that my code is becoming a bit more difficult to maintain and not all of this is readable. My javascript is included on every page of our web application, although it is used on only one page. This has the advantage of javascript caching over page loading, but I'm worried about accidentally creating functions with identical names (created by other programmers on my team).

I am new to javascript, so there may be some basics that I am missing. What are some methods that I can apply to the next code, as well as to other code in the future, to make jQuery code more readable and readable?

<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. , , . DRY .

Answer 1

:

• , . , Javascript , .

`

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

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

• javascript- ( ) , combres, , . , javascript .

Answer 2

jQuery , jQuery, . . , . , .

Answer 3

, , , var , :

var $tr = $(this).closest('tr'),
    originalText = jQuery.trim($tr.find('.contact-data').text()),
    newText = jQuery.trim($tr.find('.registration-data').text());

, , . , var .

, .

Answer 4

...

- jsunit.

. . .

.

.

: [ ] . ()

Answer 5

YUI, ( ) var STW = {};

STW.namespace = function () {
            var a = arguments, o = null, i, j, d;
            for (i = 0; i < a.length; i = i + 1) {
                d = ("" + a[i]).split(".");
                o = STW;
                for (j = (d[0] == "STW") ? 1 : 0; j < d.length; j = j + 1) {
                    o[d[j]] = o[d[j]] || {};
                    o = o[d[j]];
                }
            }
            return o;
        }

STW.namespace( "STW.namespace1" );  STW.Namespace1.class1 = () {

// } STW.namespace( "STW.namespace1.namespace2" ); STW.namespace1.namespace2.class2 = () {

// }

Answer 6

$.ajax parens - , c-.

{} JS- . , {}, :

    options = {
        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();
        }
    }

:

$.ajax(options);

, ajax:

# 1 - URL- google

options.url = "http://www.google.com";
$.ajax(options);

# 2 - id ( )

options.data.id = "newID";

JQuery. ID. IE ( getByClassName, ). , , , (getElementsByTagName ).

, .copy-, :

$('#registration-information input.copy-button')

,

$('#registration-information input.copy-button, #registration-information a.copy-button')

IE 6 , , 7, # HTML-. , , , , JQuery.

, :

$('.copy-button')

IE 6 html-, . , var. , , .