Помимо анализа присоединения заглушки на новые запросы и присоединений


Есть вещи, которые я знаю о JavaScript и jQuery, и вещи, которые я не. Я знаю, что это работает, получает и хранит то, что я хочу так, что когда мне нужно что-то делать, я не должен ждать его. Функционально, мне нравится. Но я только JavaScript парня в моем магазине, и поэтому я не вижу в JavaScript я не пишу все, что часто.

Я недавно слышала, что это считается неправильным, чтобы заполнить пространство имен, так что вы использовать объекты, чтобы держать все. Я думаю, я делаю это прямо сейчас, но я не уверен.

И при добавлении вещи в дом, я считаю, что я немного более многословным, чем мне нужно, но я не знаю, что менять.

Какие-либо комментарии?

// This uses Javascript, jQuery and jQuery-UI to allow for the addition of accession analysis stubs
// to new requests and accessions

var aa_stub = {

    // variables
    ajax : 'MY URL HERE' ,

    // data storage
    data : {} ,
    references      : {} ,
    reference_order : [] ,
    analysis        : {} ,
    analysis_order  : [] ,

    // functions

    // ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
    // dialog popped up when "Add AA Stub' button is pressed
    do_dialog  : function ( sample_num ) {
        $( '<div/>' )
            .attr( 'id' , 'add_new_stub' )
            .attr( 'title' , 'Add Stub' )
            .dialog()
        $('.ui-icon-closethick').text( 'X' )
        $('.ui-dialog-titlebar-close')
            .click( function () {
                $( '#add_new_stub' ).remove()
                } )
        $( '<div/>' )
            .appendTo( '#add_new_stub' )
            .attr( 'id' , 'instructions' )
            .text( 'Enter a reference, an analysis, any extra parameters, then click Go' )

        $( '<fieldset/>' )
            .appendTo( '#add_new_stub' )
            .attr( 'id' , 'ref_box' )
        $( '<legend/>' )
            .appendTo( '#ref_box' )
            .text( 'Reference Species' )
        $( '<select/>' )
            .appendTo( '#ref_box' )
            .attr('id' ,'reference')
        for ( i in aa_stub.reference_order ) {
            var j = aa_stub.reference_order[i]
            var ref = aa_stub.references[j]
            $( '<option/>' )
                .text( ref )
                .val( j )
                .appendTo( '#reference' )
            }

        $( '<fieldset/>' )
            .appendTo( '#add_new_stub' )
            .attr( 'id' , 'anal_box' )
        $( '<legend/>' )
            .appendTo( '#anal_box' )
            .text( 'Analysis Type' )
        $( '<select/>' )
            .appendTo( '#anal_box' )
            .attr('id' ,'analysis')
        for ( i in aa_stub.analysis_order ) {
            var j = aa_stub.analysis_order[i]
            var analysis = aa_stub.analysis[j]
            $( '<option/>' )
                .text( analysis )
                .val( j )
                .appendTo( '#analysis' )
            }

        $( '<fieldset/>' )
            .appendTo( '#add_new_stub' )
            .attr( 'id' , 'param_box' )
        $( '<legend/>' )
            .appendTo( '#param_box' )
            .text( 'Extra Parameters' )
        $( '<input type="text"/>' )
            .appendTo( '#param_box' )
            .attr('id' ,'extra_parameters')
        $( '<input type="hidden"/>' )
            .appendTo( '#param_box' )
            .attr('id' ,'sample')
            .val( sample_num )

        $( '<div/>' )
            .attr( 'id' , 'stub_go' )
            .text( 'Go' )
            .appendTo( '#add_new_stub' )
            .click( function () {
                var reference  = $( '#reference' ).val()
                var analysis   = $( '#analysis' ).val()
                var parameters = $( '#extra_parameters' ).val()
                var sample     = $( '#sample' ).val()
                $('.ui-icon-closethick').click( )
                if ( sample === '' ) {
                    $( '.stub_bucket' ).each( function () {
                        var sample = $( this ).attr( 'sample' )
                        aa_stub.add_to_bucket( sample , reference , analysis , parameters )
                        } )
                    }
                else {
                    aa_stub.add_to_bucket( sample , reference , analysis , parameters )
                    }
                } )
        } ,

    // ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
    // adding AA stubs to the form
    add_to_bucket : function ( sample , reference , analysis , parameters ) {
        var bucket = '#stub_bucket_' + sample
        var ref_text = aa_stub.references[ reference ]
        var a_text = aa_stub.analysis[ analysis ]

        var number = 1
        $( bucket ).children( 'span' ).each( function () {
            var num = parseInt( $( this ).attr( 'number' ) )
            if ( number <= num ) { number = 1 + num }
            } )
        var id =  [ 'span' , sample , number ].join('_')
        $( '<span/>' )
            .addClass( 'stub' )
            .attr( 'number' , number )
            .attr( 'id' , id )
            .appendTo( bucket )
            .text( [ ref_text , a_text ].join( ' - ' ) )
            .attr( 'title' , 'Click to delete' )
            .click( function () {
                $(this).remove()
                } )
        $( '<input type="hidden">' )
            .attr( 'name' ,  [ 'reference' , sample , number ].join('_') )
            .val( reference )
            .appendTo( '#' + id )
        $( '<input type="hidden">' )
            .attr( 'name' ,  [ 'analysis' , sample , number ].join('_') )
            .val( analysis )
            .appendTo( '#' + id )
        $( '<input type="hidden">' )
            .attr( 'name' ,  [ 'parameters' , sample , number ].join('_') )
            .val( parameters )
            .appendTo( '#' + id )
        } ,

    // ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
    // the startup part
    initialize : function ( ) {
        aa_stub.data.flag = 1
        // fill data
        var url = aa_stub.ajax
        $.post( url , function ( data ) {
            for ( i in data.references ) {
                var ref = data.references[ i ]
                aa_stub.references[ i ] = ref
                }
            for ( i in data.analysis ) {
                var ref = data.analysis[ i ]
                aa_stub.analysis[ i ] = ref
                }

            for ( i in data.references_order ) {
                var j = data.references_order[ i ]
                aa_stub.reference_order.push( j )
                }
            for ( i in data.analysis_order ) {
                var j = data.analysis_order[ i ]
                aa_stub.analysis_order.push( j )
                }
            } , 'json' )
        // get all
        $( '#add_stubs_to_all' )
            .click( function () {
                aa_stub.do_dialog( '' )
                } )
        // get one
        $( '.stub_add' )
            .click( function () {
                var sample = $( this ).attr('sample')
                aa_stub.do_dialog( sample )
                } )
        }

    }

$( function() {
    aa_stub.initialize()
    } )


471
3
задан 25 августа 2011 в 03:08 Источник Поделиться
Комментарии
1 ответ

Позвольте мне начать с нескольких общих замечаний.

Лучше создать полный элемент DOM, прежде чем прикрепить его к DOM-дереву (добавить страницу) если вы можете, потому что он имеет тенденцию быть быстрее. Например, создание своего текста после может спровоцировать очередную оплавления. Делайте это достаточно часто, и это стало важно. Не каждое изменение стоит дорого (например, параметр ИД раньше или позже не имеет большого значения), но я думаю, она тоже читает лучше (Шаг 1.: построить узел, Шаг 2: Прикрепите его).

При построении более сложных HTML (дом поддерево), это также лучше, чтобы создать фрагмент документа, добавить в него элементы и затем добавить этот фрагмент на странице, чтобы избежать дорогостоящих верстка.

Это хорошая практика, чтобы объявить все переменные в верхней части функции. Они существуют с тех пор, даже если объявить их в самом низу. Не делаю откроется вам к тонким ошибкам.

Не каждая переменная должна иметь собственное оператор var перед. Е. Г. это ОК, чтобы сделать ВАР а = 5, Б = 3, чтобы объявить A и B;

Так на конкретных примерах:

$( '<div/>' )
.attr( 'id' , 'add_new_stub' )
.attr( 'title' , 'Add Stub' )
.dialog()

Вы могли бы сделать то же самое двумя способами:

$('<div id="add_new_stup" title="Add Stub"></div>').dialog();

или

$('<div />', { id: 'add_new_stub', title: 'Add Stub })
.dialog()

Лично я бы выбрал первый вариант, когда имеешь дело с элементами, которые имеют фиксированные значения атрибута, поскольку это самый очевидный и второй, когда значения переменных. Узнать больше.

Вместо для() цикл по массиву, вы можете использовать

$.each(array, function (i, el) {
... your code ...
});

Таким образом можно локализовать переменные лучше.

Я не понимаю цели этой части:

    var number = 1
$( bucket ).children( 'span' ).each( function () {
var num = parseInt( $( this ).attr( 'number' ) )
if ( number <= num ) { number = 1 + num }
} )
var id = [ 'span' , sample , number ].join('_')
$( '<span/>' )
.addClass( 'stub' )
.attr( 'number' , number )

Поправьте меня, если я ошибаюсь, но вы пытаетесь установить номер 1 выше, чем высокий, верно? Если да, то это очень дорогой способ, чтобы сделать это. Вы могли бы улучшить это двумя способами. Либо вы храните текущим максимумом или с нового фрагмента с наибольшим числом всегда добавляется в конец списка, просто выберите то, что один ("пядь:последний") и почитайте, что максимум в настоящее время.

Вы не используете aa_stub.данных.флаг в любом месте.

Кстати, я не люблю за двоеточия в конце строки и закрытия } на ту же глубину, как конец блока, но это уже личный выбор.

В любом случае, что быстро выходят из вашего кода. Я надеюсь, что это помогло.

6
ответ дан 27 августа 2011 в 08:08 Источник Поделиться