MVC Javascript (часть 3 - массив точек)

@Максим_М21 · Регистрация: 11.12.2013

Author24 — интернет-сервис помощи студентам

Доброе утро, всем.
Продолжаю писать учебную программу на JS и снова уперся в невидимую (для меня) стену. Суть такова:
на данном этапе я могу ставить точку на карте, при этом появляется окно, которое спрашивает - сохранить или нет. Если нажимаю "Да", координаты точки добавляются в массив(для дальнейшей отправки) и на карте в том месте, где сохранял, остается точка(так должно быть).
На самом деле, все так и происходит, кроме последнего. При сохранении, в массив добавляется точка под кнопкой "Да", то-есть, считывается последний клик. Но как это происходит, не пойму, так как обработчик стоит ка карте, а не на попапе.
Как всегда код:

Javascript

var e,
    point,
    pointPosX,
    pointPosY,
    pointX,
    pointY,
    correctPosition = 7,
    arrayPointers = [],
    createNewId,
    saveId,
    newPoint,
    newPointId,
    newPointPosX,
    newPointPosY,
    enterSave = document.getElementById( 'mxSave' ),
    mapField = document.getElementById( 'mapField' ),
    mxPopupSave = document.getElementsByClassName( 'mx-save_point_wrap' ),
    canceSave = document.getElementById( 'mxNoSave' );
 
/* -------------------------------- begin view -------------------------------------------- */
 
var view = {
 
    getFieldMap: function( pointX, pointY ){    
            
        var inputX = document.getElementById( 'coordinates_x' ),
        inputY = document.getElementById( 'coordinates_y' );
 
        inputX.value = pointX;
        inputY.value = pointY;
 
    },
 
    // Place a button on the map
    setPointInMap: function( pointX, pointY ){
        
        var pointInMap = document.getElementById( 'mxPoint' ),
            pointInMapX = pointInMap.style.left = pointX - correctPosition + 'px',
            pointInMapY = pointInMap.style.top = pointY - correctPosition + 'px';
 
    },
 
    // Save the location of point
    savePointInMap: function(){
        
        mxPopupSave[0].style.display = 'block';
 
        return{
            poupDisplay: mxPopupSave[0].style.display
        }
    },
 
    // Create new points
    createNewPoint: function( newPointId, newPointPosX, newPointPosY ){
 
        newPoint = document.createElement( 'div' );
        newPoint.setAttribute( 'class', 'mx-point' );
        newPoint.setAttribute( 'id', newPointId );
        newPoint.style.left = newPointPosX + 'px';
        newPoint.style.top = newPointPosY + 'px';
        mapField.appendChild( newPoint );
 
    },
 
    // Cance save
    canceSavePoint: function(){
 
        mxPopupSave[0].style.display = 'none';      
 
    }
 
};
 
/* -------------------------------- end view -------------------------------------------- */
 
 
/* ------------------------------- begin model ------------------------------------------ */
 
var model = {
 
    getPositionPoint: function( mxMap, event ){
 
        var blockMap = mxMap.getBoundingClientRect();
 
        return{
            pointPosX: ( event.clientX - blockMap.left ),
            pointPosY: ( event.clientY - blockMap.top )
        };
 
    },
 
    // create id
    createIdFromPoint: function(){
 
        var numberId = arrayPointers.length;
            
        return{             
            saveId: ('mxPoint' + numberId)
        };
 
    },
 
    // confirmation save
    confirmationSave: function( saveId, saveX, saveY ){
 
        var setArray = [saveId, saveX, saveY];
 
        arrayPointers.push(setArray);       
 
    }
    
};
 
/* ------------------------------- end model ------------------------------------------ */
 
 
/* --------------------------- begin controller ---------------------------------------- */
 
var controller = {
 
    getCoordinatesPoint: function(){
 
        point = model.getPositionPoint( mapField, event );
 
        pointX = point.pointPosX;
        pointY = point.pointPosY;
        view.getFieldMap( pointX, pointY );
 
    },
 
    // Place a button on the map (CONTR)
    setCoordinatesPointInMap: function(){           
 
        point = model.getPositionPoint( mapField, event );
 
        pointX = point.pointPosX;
        pointY = point.pointPosY;
 
        // set position
        view.setPointInMap( pointX, pointY );
 
        // call popup
        view.savePointInMap();
 
    },
 
    // attachment points
    attachmentPoints: function(){
 
        point = model.getPositionPoint( mapField, event );
 
        saveX = point.pointPosX;
        saveY = point.pointPosY;
 
        createNewId = model.createIdFromPoint();
        saveId = createNewId.saveId;
        model.confirmationSave( saveId, saveX, saveY );
        view.createNewPoint( saveId, saveX, saveY );
        view.canceSavePoint();
 
    }
 
};
 
/* ---------------------------- end controller ----------------------------------------- */
 
 
/* -------------------- anonymous initialize function ------------------------------------ */
 
( function(){
 
    var start = {
 
        init: function(){
 
            this.main();
            this.control();
            this.event();
 
        },
        main: function(){
            //options
        },
        control: function(){
            //controllers
        },
        event: function(){
 
            mapField.onclick = function(){
 
                controller.getCoordinatesPoint();
                controller.setCoordinatesPointInMap();      
                
            };          
 
            // Save poinrers
            enterSave.onclick = function(){
 
                controller.attachmentPoints();
 
            };
 
            // Cance save
            canceSave.onclick = function(){
 
                view.canceSavePoint();
                
            }   
 
        }
    };
 
    start.init();
 
} )();
 
/* -------------------- anonymous initialize function ------------------------------------ */

Понимаю, что так, на глаз не проверить, потому сбрасываю всю программу

@crackos · 04.09.2016, 19:24

Не по теме:

прям сериал целый :)

@Padimanskas · 05.09.2016, 20:47

Не по теме:

да :popcorn: а след. сезон будет?

@Максим_М21 · 15.09.2016, 11:49 **[ТС]**

Отвечаю сам себе)
Постоянно на вебинарах слышу: перед тем, как что-то начинать делать, нарисуйте на бумаге идею и ход выполнения – это ОЧЕНЬ верно.
В моем случае, я неправильно ход действие произвел.
Надо, при клике на карту, добавлять координаты в массив ( push() ), при отмене ( pop() ), и при подтверждении, просто создавать новый элемент, вытягивая последний вложенный массив.
Вот и все)

@cyb0rg_01 · 15.09.2016, 12:44

anonymous initialize function не нужен

@Максим_М21 · 15.09.2016, 14:37 **[ТС]**

Сообщение от pro_100_gram

anonymous initialize function

На счет этой части, у меня давно вопросы. Очень часто встречаю такую конструкцию в сети, но что с ней делать, не пойму. Я пользуюсь только этой частью "event: function(){".
Если Вы говорите, что это не нужно писать, то, скажите, пожалуйста, как правильно?

@cyb0rg_01 · 15.09.2016, 15:17

Максим_М21, конструкция (function(){})(); нужна тогда, когда требуется автоматически вызвать ф-цию при подключении js файла. В вашем случае происходит каша: вы объявляете множество глобальных переменных:

Javascript

var e,
    point,
    pointPosX,
    pointPosY,
    pointX,
    pointY,
    correctPosition = 7,
    arrayPointers = [],
    createNewId,
    saveId,
    newPoint,
    newPointId,
    newPointPosX,
    newPointPosY,
    enterSave = document.getElementById( 'mxSave' ),
    mapField = document.getElementById( 'mapField' ),
    mxPopupSave = document.getElementsByClassName( 'mx-save_point_wrap' ),
    canceSave = document.getElementById( 'mxNoSave' );

и используете их как через MVC объекты, так и через вот это:

Javascript

( function(){
 
    var start = {
 
    ....... //сократил
 
    start.init();
 
} )();

последнее где сократил должно делаться в контроллерах и во вьюхах, а не в глобальном контексте. Глобальный контекст должен ограничиваться использованием объектов: view, controller, возможно model. Все остальные объекты (точки, карта, прочее) инкапсулируются ими, и в глобальном контексте их не нужно использовать.

Добавлено через 15 минут
Максим_М21, и самое главное

Javascript

1	arrayPointers = [],

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

Смысл MVC:
1. вьюха - рисует и ничего не вычисляет, что ей дают то и ОТОБРАЖАЕТ и отправляет данные введенные пользователем!!!
2. контроллер - отправляет вьюхе, то что нужно рисовать предварительно получив данные из необходимого источника: бизнес сервис, игра, данные со спутника, эти данные он ТОЛЬКО ПОЛУЧАЕТ, ПАРСИТ, СОЗДАЕТ НА ИХ ОСНОВЕ МОДЕЛИ ДЛЯ ВЬЮХИ , но не вычисляет, также принимает данные от вьюхи, т.е. происходят обратные действия и модели создаются для БИЗНЕС-СЕРВИСА (ИГРЫ, СПУТНИКА).
3. Модель нужна для взаимодействия между контроллером и вьюхой и приложенией.
4. Самое важное у вас - это объект которого нет, а именно объекта для манипуляций с картой, где и находится вся ЛОГИКА.

В общем в целом все так, если все описывать уйдет книга. И неплохо было бы прочитать прежде чем делать

@Максим_М21 · 15.09.2016, 15:52 **[ТС]**

Сообщение от pro_100_gram

вы объявляете множество глобальных переменных

Согласен и много слышал, что глобальные переменные - это зло. Но в тоже время существует мнение, что сразу указывать все переменные - хороший тон. Тут у меня путаница.

Сообщение от pro_100_gram

конструкция (function(){})(); нужна тогда, когда требуется автоматически вызвать ф-цию при подключении js файла

То-есть, мне нужно просто контроллеры поместить в одну функцию и вызвать ее?

Сообщение от pro_100_gram

последнее где сократил должно делаться в контроллерах и во вьюхах, а не в глобальном контексте.

Я же сюда только контроллеры помещаю, это не правильно?

Сообщение от pro_100_gram

Максим_М21, и самое главное
JavascriptВыделить код
1
arrayPointers = [],

Глобально задал, потому, что, данные из массива использую в нескольких местах, а самое главное - ради этой информации и все работает, почему тогда глобально не можно?

Сообщение от pro_100_gram

4. Самое важное у вас - это объект которого нет, а именно объекта для манипуляций с картой, где и находится вся ЛОГИКА.

Ощущаю себя первоклассником) Значит в моем коде нет ни одного объекта? Ничего не понимаю.(

Сообщение от pro_100_gram

И неплохо было бы прочитать прежде чем делать

Посоветуйте, пожалуйста, литературу.

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

@cyb0rg_01 · 15.09.2016, 16:34

Сообщение от Максим_М21

Я же сюда только контроллеры помещаю, это не правильно?

Там помещается инициализация всей системы. контроллеров там нет

Сообщение от Максим_М21

Глобально задал, потому, что, данные из массива использую в нескольких местах,

Для чего тогда MVC? данные из массива должны использоваться в одном месте. а передаваться с помощью моделей.

Сообщение от Максим_М21

Ощущаю себя первоклассником) Значит в моем коде нет ни одного объекта? Ничего не понимаю.(

нет объекта, который инкапсулирует всю логику. контроллеры и вьюхи не для этого

Сообщение от Максим_М21

Посоветуйте, пожалуйста, литературу.

в гугле поищите, то что я читал под C# ASP.NET MVC

@crackos
	04.09.2016, 19:24 #2
	Не по теме: прям сериал целый :) 0

@Padimanskas
	05.09.2016, 20:47 #3
	Не по теме: да :popcorn: а след. сезон будет? 0

@Максим_М21 5 / 4 / 2 Регистрация: 11.12.2013 Сообщений: 168
	15.09.2016, 11:49 [ТС]	4
	Отвечаю сам себе) Постоянно на вебинарах слышу: перед тем, как что-то начинать делать, нарисуйте на бумаге идею и ход выполнения – это ОЧЕНЬ верно. В моем случае, я неправильно ход действие произвел. Надо, при клике на карту, добавлять координаты в массив ( push() ), при отмене ( pop() ), и при подтверждении, просто создавать новый элемент, вытягивая последний вложенный массив. Вот и все) 0

@cyb0rg_01 Фрилансер 735 / 352 / 96 Регистрация: 05.05.2014 Сообщений: 2,621
	15.09.2016, 12:44	5
	anonymous initialize function не нужен 0

@Максим_М21 5 / 4 / 2 Регистрация: 11.12.2013 Сообщений: 168
	15.09.2016, 14:37 [ТС]	6
	Сообщение от pro_100_gram anonymous initialize function На счет этой части, у меня давно вопросы. Очень часто встречаю такую конструкцию в сети, но что с ней делать, не пойму. Я пользуюсь только этой частью "event: function(){". Если Вы говорите, что это не нужно писать, то, скажите, пожалуйста, как правильно? 0

@Максим_М21 5 / 4 / 2 Регистрация: 11.12.2013 Сообщений: 168
	15.09.2016, 15:52 [ТС]	8
	Сообщение от pro_100_gram вы объявляете множество глобальных переменных Согласен и много слышал, что глобальные переменные - это зло. Но в тоже время существует мнение, что сразу указывать все переменные - хороший тон. Тут у меня путаница. Сообщение от pro_100_gram конструкция (function(){})(); нужна тогда, когда требуется автоматически вызвать ф-цию при подключении js файла То-есть, мне нужно просто контроллеры поместить в одну функцию и вызвать ее? Сообщение от pro_100_gram последнее где сократил должно делаться в контроллерах и во вьюхах, а не в глобальном контексте. Я же сюда только контроллеры помещаю, это не правильно? Сообщение от pro_100_gram Максим_М21, и самое главное JavascriptВыделить код 1 arrayPointers = [], Глобально задал, потому, что, данные из массива использую в нескольких местах, а самое главное - ради этой информации и все работает, почему тогда глобально не можно? Сообщение от pro_100_gram 4. Самое важное у вас - это объект которого нет, а именно объекта для манипуляций с картой, где и находится вся ЛОГИКА. Ощущаю себя первоклассником) Значит в моем коде нет ни одного объекта? Ничего не понимаю.( Сообщение от pro_100_gram И неплохо было бы прочитать прежде чем делать Посоветуйте, пожалуйста, литературу. Большое спасибо за Ваше потраченное время. Пытаюсь осмыслить, честное слово, но пока сделал вывод, что надо убрать переменные. 0

@cyb0rg_01 Фрилансер 735 / 352 / 96 Регистрация: 05.05.2014 Сообщений: 2,621
	15.09.2016, 16:34	9
	Сообщение от Максим_М21 Я же сюда только контроллеры помещаю, это не правильно? Там помещается инициализация всей системы. контроллеров там нет Сообщение от Максим_М21 Глобально задал, потому, что, данные из массива использую в нескольких местах, Для чего тогда MVC? данные из массива должны использоваться в одном месте. а передаваться с помощью моделей. Сообщение от Максим_М21 Ощущаю себя первоклассником) Значит в моем коде нет ни одного объекта? Ничего не понимаю.( нет объекта, который инкапсулирует всю логику. контроллеры и вьюхи не для этого Сообщение от Максим_М21 Посоветуйте, пожалуйста, литературу. в гугле поищите, то что я читал под C# ASP.NET MVC 1