Нормальный ли это подход к организации JS код?

Question

[alx1987]

Просьба помочь с грамотной организацией js кода, сейчас использую такой подход:
Подскажите на сколько это корректно и как можно улучшить, либо вообще переделать. Спасибо.

var MY = {};

MY.form = (function() {
	
	$(document).on('submit', 'form, function(e) {
		...
	});
	
	return {
		submit: function() {
			...
		}
	}
})();

MY.example = {
	append: function(id) {
		...
	},
	save: {
		reply: function(id) {
			...
		}
	}
}

Дополню. Хотелось добиться некоего подобия модульности, но сейчас начал сомневаться в правильности такого подхода и думаю перевести это все дело на отдельные функции.

Answer 1

[Владислав Килин]

Этот подход "псевдоооп", хотя у вас и есть какие-то объекты, вы лишаете себя целой кучи полезных вещей - наследования, полиморфизма, не очень оптимально работаете с памятью.

В JS ооп принято варить через прототипы. Например, вот так:

(function (my) {
my.Form = function () {
  $(document).on('submit', 'form', function (evt) {
    // это же просто пример, так?
  });
};
my.Form.prototype.submit = function () {
  // ...
};
})(MY);

В дальнейшем, если вам понадобится не просто форма, а, например, валидируемая форма, или даже AJAX-форма, вы сможете без проблем отнаследоваться от этой формы и добавить ништяков. Например.

(function (my) {
my.ValidatedForm = function () {
  // something
};
my.ValidatedForm.prototype = new my.Form();
my.ValidatedForm.prototype.isValid = function () {
  // ...
};
})(MY);

Также у вас появится доступ к состоянию инстанса через ключевое слово this: для этого потребуется создавать экземпляры через оператор new. Будет выглядеть как-то так:

var myForm = new MY.Form();
myForm.submit();

Это не всегда нужно делать именно так, но все зависит только от того, чего вы в конечном счете пытаетесь достичь. Я очень советую почитать статьи Ильи Кантора, автора сайта javascript.ru про ООП в JS. Он прилично пишет и хорошо разбирается в предметной области.

Comments

[alx1987]

Большое спасибо

Answer 2

[Super User]

Имена переменных пишут с маленькой буквы:
var myVar = 5;
С большой буквы принято писать имена классов и функций-конструкторов:

class Animal {
  name = '';
  constructor(_name){
    this.name = _name;
  }
}
var doggy = new Animal('Rex');

Все прописные буквы означает константу:
const PI = 3.14;