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

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

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

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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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
1
2
3
4
5
6
7
8
9
( 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

Новые блоги и статьи Все статьи Все блоги /
Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .

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

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

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

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