更短的OOP编写的JavaScript代码

Question

我在javascript / jQuery编码方面有一点经验，但仍然在＆＃34;正常＆＃34;有时最大的方式。我有一些代码，我已经在我的表单中复制了2个单独的组。这个javascript代码可以构建动态输入字段（添加输入字段或删除）。我只是认为我可以用更动态的方式（两组相同的代码）来做，所以我的代码可以更短。我正在学习fase，可以用这个较短的写作手。我给自己买了一本OOP书，但我不能在我的例子中真正理解我必须打电话给我的实例？所以我的问题是谁可以在途中帮助我？

原始javascript代码：

var MAX_OPTIONS = 10;
//  Add button click handler on Location 
        .on('click', '.addLocation', function() {
            var $template = $('#optionLocation'),
                $clone    = $template
                                .clone()
                                .removeClass('hide')
                                .removeAttr('id')
                                .insertBefore($template),
                $option   = $clone.find('[name="locatie[]"]');

            // Add new field
            $('#surveyForm').bootstrapValidator('addField', $option);
        })

        // Remove button click handler
        .on('click', '.removeLocation', function() {
            var $row    = $(this).parents('.form-group'),
                $option = $row.find('[name="locatie[]"]');

            // Remove element containing the option
            $row.remove();

            // Remove field
            $('#surveyForm').bootstrapValidator('removeField', $option);
        })

        // Called after adding new field
        .on('added.field.bv', function(e, data) {
            // data.field   --> The field name
            // data.element --> The new field element
            // data.options --> The new field options

            if (data.field === 'locatie[]') {
                if ($('#surveyForm').find(':visible[name="locatie[]"]').length >= MAX_OPTIONS) {
                    $('#surveyForm').find('.addLocation').attr('disabled', 'disabled');
                }
            }
        })

        // Called after removing the field
        .on('removed.field.bv', function(e, data) {
           if (data.field === 'locatie[]') {
                if ($('#surveyForm').find(':visible[name="locatie[]"]').length < MAX_OPTIONS) {
                    $('#surveyForm').find('.addLocation').removeAttr('disabled');
                }
            }
        })


// Add button click handler on Reason 
        .on('click', '.addReason', function() {
            var $template = $('#optionReason'),
                $clone    = $template
                                .clone()
                                .removeClass('hide')
                                .removeAttr('id')
                                .insertBefore($template),
                $option   = $clone.find('[name="reden[]"]');

            // Add new field
            $('#surveyForm').bootstrapValidator('addField', $option);
        })

        // Remove button click handler
        .on('click', '.removeReason', function() {
            var $row    = $(this).parents('.form-group'),
                $option = $row.find('[name="reden[]"]');

            // Remove element containing the option
            $row.remove();

            // Remove field
            $('#surveyForm').bootstrapValidator('removeField', $option);
        })

        // Called after adding new field
        .on('added.field.bv', function(e, data) {
            // data.field   --> The field name
            // data.element --> The new field element
            // data.options --> The new field options

            if (data.field === 'reden[]') {
                if ($('#surveyForm').find(':visible[name="reden[]"]').length >= MAX_OPTIONS) {
                    $('#surveyForm').find('.addReason').attr('disabled', 'disabled');
                }
            }
        })

        // Called after removing the field
        .on('removed.field.bv', function(e, data) {
           if (data.field === 'reden[]') {
                if ($('#surveyForm').find(':visible[name="reden[]"]').length < MAX_OPTIONS) {
                    $('#surveyForm').find('.addReason').removeAttr('disabled');
                }
            }
        });                
});

我的表单位置组：

                <div class="form-group">
                    <div class="row">
                        <div class="col-lg-11">
                            <input type="text" class="form-control" name="locatie[]" placeholder="Aanmeldpunt" />
                        </div>
                        <div class="col-lg-1">
                            <button type="button" class="btn btn-default addLocation">
                                <i class="fa fa-plus"></i>
                            </button>
                        </div>                    
                    </div>
                </div>
                <div class="form-group hide" id="optionLocation">
                    <div class="row">
                        <div class="col-lg-11">
                            <input type="text" class="form-control" name="locatie[]" placeholder="Aanmeldpunt" />
                        </div>
                        <div class="col-lg-1">
                            <button type="button" class="btn btn-default removeLocation">
                                <i class="fa fa-minus"></i>
                            </button>
                        </div>
                    </div>
                </div>

我的原因形式组：

            <div class="form-group">
                <div class="row">
                    <div class="col-lg-3">
                        <input type="text" class="form-control reason1" name="reden[]" id="reason1" placeholder="Reden" />
                    </div>
                    <div class="col-lg-3">
                        <input type="file" name="redenafb[]" id="reasonImg1">
                    </div>
                    <div class="col-lg-3">
                        <input type="time" class="form-control reasonTime1" name="readentijd[]" id="reasonTime1" placeholder="480" />
                    </div>
                    <div class="col-lg-3">
                        <button type="button" class="btn btn-default addReason">
                            <i class="fa fa-plus"></i>
                        </button>
                    </div>                            
                </div>
            </div>
            <div class="form-group hide" id="optionReason">
                <div class="row">
                    <div class="col-lg-3">
                        <input type="text" class="form-control reason2" name="reden[]" id="reason2" placeholder="Reden" />
                    </div>
                    <div class="col-lg-3">
                        <input type="file" name="readenafb[]" id="reasonImg2">
                    </div>
                    <div class="col-lg-3">
                        <input type="time" class="form-control reasonTime2" name="readentijd[]" id="reasonTime2" placeholder="480" />
                    </div> 
                    <div class="col-lg-3">
                        <button type="button" class="btn btn-default removeReason">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>                            
                </div>                    
            </div>