Как понять этот код на JS?

@marrk · Регистрация: 01.12.2013

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

Код не мой, полностью рабочий, но для общего развития хочу понять как он работает:

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
var MouseCoords = {
    // X-координата
    getX: function(e)
    {
        if (e.pageX)
        {
      return e.pageX;
    }
    
        else if (e.clientX)
        {
            return e.clientX+(document.documentElement.scrollLeft || 
      document.body.scrollLeft) - document.documentElement.clientLeft;
        }
 
        return 0;
    },
 
    // Y-координата
    getY: function(e)
    {
        if (e.pageY)
        {
            return e.pageY;
        }
        else if (e.clientY)
        {
            return e.clientY+(document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
        }
 
        return 0;
    }
}
 
// Использую, например так:
a1 = MouseCoords.getY(e)+'px';
a2 = MouseCoords.getX(e)+'px';

1. Первый вопрос это объявление функции getX: function(e) { это как-то странно, я думал функции объявляются так: function NameFunc() {

2. Вот MouseCoords это переменная, clientX - координаты относительно окна, pageX - относительно документа. Даже не знаю как выразится что такое getX и getY? Это типа подпеременные переменной MouseCoords? (даже не знаю как назвать)

3. Далее scrollLeft - получение текущей прокрутки. Нафига нам она если в итоге мы имеем координаты от верхнего левого угла окна и прокрутка вроде бы вообще значения не имеет? То же самое со scrollTop...

@Web-ulyanov · 03.01.2016, 16:28

В данном случае - это методы объекта MouseCoords, те же самые функции, сгруппированные в один объект.
Функции можно объявлять и вызывать по разному:

JavaScript
1
2
3
4
5
function foo(a, b) {return a + b} -> foo(a, b)
var foo = function(a, b) {return a + b} -> foo(a, b)
function Foo(a, b) {} -> new Foo(a, b);
var foo = new Function("a", "b", "return a + b"); -> foo(a, b)
obj = {foo: function(a, b) {return a + b}} -> obj.foo(a, b)

@marrk · 03.01.2016, 17:10 **[ТС]**

А это объект, я думал он задаётся как-то сложнее типа ключевым словом object или obj или типа того. А зачем всего так много?, почему бы не сделать просто

JavaScript
1
2
a1 = e.clientX+'px';
a2 = e.clientY+'px';

@kalabuni · 03.01.2016, 18:01

объект можно определить разными способами
например, так -- var objA = new Object ();
или так -- var objA = {};

у объекта могут быть свойства (кто-то именует их "методами", но я привык к "свойствам")

и свойства объекта можно определить тоже по-разному
например, так -- objA.FirstProperty = 123;
или так -- objA ['SecondProperty'] = 'qwerty';

а можно эти записи сократить, совместив определение объекта с определением некоторых его свойств, например, вот так:
var objA = {'FirstProperty': 123, SecondProperty: 'qwerty'};

значение свойства может иметь любой тип данных:
может быть числом или строкой (как в моём примере выше),
но может быть и булевой величиной, и массивом, и объектом, и функцией (причем функция может быть именованной и определённой где-то в другом месте, но может быть и безымянной, определяемой тут же -- как в вашем коде в строке 3... впрочем, то же самое относится и к массивам, и к объектам)

@marrk · 03.01.2016, 20:15 **[ТС]**

Благодарю kalabuni
А по существу кода может кто-то что-то сказать, он хороший/плохой, избыточный/оптимальный?

@kalabuni · 03.01.2016, 21:04

код странноватый, писал либо не профи, либо профи, но в демонстрационно-учебных целях

в одном месте вполне оправдано использована стандартная конструкция с ||, а чуть ранее в другом -- точно таком же по сути месте -- почему-то применен оператор if () {} else {}

Новые блоги и статьи Все статьи Все блоги /
делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	03.01.2016, 18:01
	объект можно определить разными способами например, так -- var objA = new Object (); или так -- var objA = {}; у объекта могут быть свойства (кто-то именует их "методами", но я привык к "свойствам") и свойства объекта можно определить тоже по-разному например, так -- objA.FirstProperty = 123; или так -- objA ['SecondProperty'] = 'qwerty'; а можно эти записи сократить, совместив определение объекта с определением некоторых его свойств, например, вот так: var objA = {'FirstProperty': 123, SecondProperty: 'qwerty'}; значение свойства может иметь любой тип данных: может быть числом или строкой (как в моём примере выше), но может быть и булевой величиной, и массивом, и объектом, и функцией (причем функция может быть именованной и определённой где-то в другом месте, но может быть и безымянной, определяемой тут же -- как в вашем коде в строке 3... впрочем, то же самое относится и к массивам, и к объектам) 1

@marrk 129 / 50 / 8 Регистрация: 01.12.2013 Сообщений: 572
	03.01.2016, 20:15 [ТС]
	Благодарю kalabuni А по существу кода может кто-то что-то сказать, он хороший/плохой, избыточный/оптимальный? 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	03.01.2016, 21:04
	код странноватый, писал либо не профи, либо профи, но в демонстрационно-учебных целях в одном месте вполне оправдано использована стандартная конструкция с \|\|, а чуть ранее в другом -- точно таком же по сути месте -- почему-то применен оператор if () {} else {} 1