How to split the code into several parts?

Question

JavaScript

Greetings friends! We really need your help! I put together a file loader from several different loaders for my needs. Here is his code:

$(document).ready(function() {
        var dropZone = $('#dropZone');
        var inputFile = $('#uploadInput');
        var uploadForm = $('#uploadForm');
        var dataArray = [];
        maxFileSize = 1024*1024; // максимальный размер файла - 1 мб.
        maxFiles = 0;
        allowedTypes = 'image/*';
        extFilter = 'jpg;png;';
        if (typeof(window.FileReader) == 'undefined') {
            dropZone.text('Не поддерживается браузером!');
            dropZone.addClass('error');
        }
        dropZone[0].ondragover = function() {
            dropZone.addClass('hover');
            return false;
        };
        dropZone[0].ondragleave = function() {
            dropZone.removeClass('hover');
            return false;
        };
        dropZone[0].ondrop = function(event) {
            event.preventDefault();
            dropZone.removeClass('hover');
            dropZone.addClass('drop');
            var files = event.dataTransfer.files;
            checkFiles(files);
        };
        inputFile.on('change', function() {
            var files = $(this)[0].files;
            checkFiles(files);
            $(this).val('');
        });

        function checkFiles(files) {
            for (var i= 0; i < files.length; i++) {
                var file = files[i];
                // Check file size
                if((maxFileSize > 0) && (file.size > maxFileSize)) {
                    dropZone.text('Файл слишком большой!');
                    dropZone.removeClass('drop');
                    dropZone.addClass('error');
                    return false;
                }
                // Check file type
                if((allowedTypes != '*') && (!file.type.match(allowedTypes))) {
                    dropZone.text('Этот тип файла нельзя загружать!');
                    dropZone.removeClass('drop');
                    dropZone.addClass('error');
                    return false;
                }
                // Check file extension
                if(extFilter != null) {
                    var extList = extFilter.toLowerCase().split(';');
                    var ext = file.name.toLowerCase().split('.').pop();
                    if($.inArray(ext, extList) < 0){
                        dropZone.text('Файл с этим расширением нельзя загружать!');
                        dropZone.removeClass('drop');
                        dropZone.addClass('error');
                        return false;
                    }
                }
                // Check max files
                if ((maxFiles > 0) && (files.length > maxFiles)) {
                    dropZone.text('Можно загружать файлов не более: ' + maxFiles);
                    dropZone.removeClass('drop');
                    dropZone.addClass('error');
                    return false;
                }

                // Создаем новый экземпляра FileReader
                var fileReader = new FileReader();
                // Инициируем функцию FileReader
                fileReader.onload = (function(file) {
                    return function() {
                        // Помещаем URI изображения в массив
                        dataArray.push({name: file.name,
                            value: this.result,
                            cloth: "<?php echo $clothData ?>",
                            product: null});
                        loadPreview((dataArray.length-1));
                    };
                })(files[i]);
                // Производим чтение картинки по URI
                fileReader.readAsDataURL(file);
            }
        }
        
        function loadPreview(index) {
            uploadForm.show();
            if (index < 0 ) {
                start = 0; end = dataArray.length;
            } else {
                // иначе только определенное изображение
                start = index; end = index+1; }
            if(dataArray.length == 0) {
                // Если пустой массив скрываем кнопки и всю область
                uploadForm.hide();
            }
            for (i = start; i < end; i++) {
                $('#uploadList').append(
                '<div id="item-'+i+'" class="col-sm-6 col-md-3 uploadItem">' +
                '<div class="thumbnail">' +
                '<img src="'+dataArray[i].value+'" alt="...">' +
                '<div class="caption">' +
                 <?php function view_cat ($dataset) { ?>
                 <?php foreach ($dataset as $menu) {
                 if (!isset($menu['childs']) && $menu['class'] == 'type') {?>
                 '<option style="margin-left: 10px" value="<?php
                 echo $menu['id'].'_'.$menu['parent_id'].'_'.$menu['subclass'];?>"><?php
                 echo $menu['title'];?></option>' +
                    <?php }
                    if (!isset($menu['childs']) && $menu['class'] != 'type') { ?>
                    '<option style="margin: 5px 0" value="<?php
                    echo $menu['id'].'_'.$menu['parent_id'].'_'.$menu['class'];?>"><?php
                    echo $menu['title'];?></option>' +
                    <?php }
                    if(isset($menu['childs'])) { ?>
                    '<option style="font-weight: bold;" disabled><?php echo $menu['title'];?></option>' +
                    <?php view_cat($menu['childs']); } } }?>
                    '<p><select id="selectProduct-'+i+'" name="cloth_group" class="form-control" required>' +
                    '<option value="">Выберите товар</option>' +
                    <?php view_cat($catalogData);?>
                    '</select></p>' +
                    '<a href="#" id="deleteItem-'+i+'" class="btn btn-default" role="button">Удалить</a>' +
                    '</div>' +
                    '</div>' +
                    '</div>');
            }
            return false;
        }

        // Функция удаления всех изображений
        function deletePreview() {
            $('.progress-bar').css({'width' : '0%'});
            $('.load-container').hide();
            $('.uploadItem').remove();
            $(uploadForm).hide();
            // Очищаем массив
            dataArray.length = 0;
            return false;
        }
        $('.delete').click(deletePreview);

        // Удаление только выбранного изображения
        $("#uploadList").on("click","a[id^='deleteItem']", function(e) {
            e.preventDefault();
            // получаем название id
            var delItem = $(this).attr('id');
            // создаем массив для разделенных строк
            var temp = new Array();
            // делим строку id на 2 части
            temp = delItem.split('-');
            // получаем значение после тире тоесть индекс изображения в массиве
            dataArray.splice(temp[1],1);
            // Удаляем старые эскизы
            $('.uploadItem').remove();
            // Обновляем эскизи в соответсвии с обновленным массивом
            loadPreview(-1);
        });
        // Загрузка изображений на сервер
.............. ТУТ AJAX ЗАПРОС НЕ ВЛЕЗ(((
    });

The thing is that most of the code will not change, only some of it will change:

$('#uploadList').append(
                '<div id="item-'+i+'" class="col-sm-6 col-md-3 uploadItem">' +
                '<div class="thumbnail">' +
                '<img src="'+dataArray[i].value+'" alt="...">' +
                '<div class="caption">' +
                 <?php function view_cat ($dataset) { ?>
                 <?php foreach ($dataset as $menu) {
                 if (!isset($menu['childs']) && $menu['class'] == 'type') {?>
                 '<option style="margin-left: 10px" value="<?php
                 echo $menu['id'].'_'.$menu['parent_id'].'_'.$menu['subclass'];?>"><?php
                 echo $menu['title'];?></option>' +
                    <?php }
                    if (!isset($menu['childs']) && $menu['class'] != 'type') { ?>
                    '<option style="margin: 5px 0" value="<?php
                    echo $menu['id'].'_'.$menu['parent_id'].'_'.$menu['class'];?>"><?php
                    echo $menu['title'];?></option>' +
                    <?php }
                    if(isset($menu['childs'])) { ?>
                    '<option style="font-weight: bold;" disabled><?php echo $menu['title'];?></option>' +
                    <?php view_cat($menu['childs']); } } }?>
                    '<p><select id="selectProduct-'+i+'" name="cloth_group" class="form-control" required>' +
                    '<option value="">Выберите товар</option>' +
                    <?php view_cat($catalogData);?>
                    '</select></p>' +
                    '<a href="#" id="deleteItem-'+i+'" class="btn btn-default" role="button">Удалить</a>' +
                    '</div>' +
                    '</div>' +
                    '</div>');

This refers to the image preview area, under each image there is a select list to select their category. But if I need to replace select with input on other pages, I have to copy all the code and rewrite that part.

Please help me to break the code so that this variable part is displayed separately from the rest of the code, which will be the basis and be among the plugins, and I will insert this part on the desired page and change the tags inside it if necessary. Thank you in advance for your help!

Answer 1

try splitting the elements into objects and scatter the objects across the files. For example: content.js, menu.js, window.js.