Как обернуть мой код в класс?

Question

[AlexandrMa]

Сейчас весь код в глобальной области. Мне бы хотелось, чтобы все эти данные, прослушиватели и функции (методы) находились в какой-то одной сущности, модуле, классе. Не знаю как это назвать. Как это сделать?

document.addEventListener('DOMContentLoaded', function(){

  let table_items = document.getElementById('table_items');

  function getData(){
    let req = new XMLHttpRequest();
    req.open('POST', '/get_items.php');
    req.send();
    req.onreadystatechange = function(){
      if(req.readyState === 4 && req.status === 200){
        createTable(JSON.parse(req.responseText));
      }
    }
  }

  function createTable(els){

    let el = '';
    els.forEach(function(v, k){
      el += '<div class="item">';
      el += '<p>' + v.id + '</p>';
      el += '<p>' + v.date + '</p>';
      el += '</div>';
    });

    table_items.innerHTML = el;

  }


  document.addEventListener('click',function(e){
    if(e.target && e.target.className  === 'item'){
      alert('CHECK');
    }
  });

  getData(); //init

});

Comments

[Ярослав Иванов]

Зачем

[Евгений Палыч]

Сейчас весь код в глобальной области.

Это не глобальная область!

[AlexandrMa]

Евгений Палыч, а какая? например table_items доступен теперь везде.

[AlexandrMa]

Ярослав Иванов, ну например чтобы this использовать и вообще, чтобы функции были методами конкретного объекта, а не как сейчас, всё глобально.

[Евгений Палыч]

AlexandrMa, table_items виден только в анонимной функции в "DOMContentLoaded" - это не глобально, глобально это window.table_items

[AlexandrMa]

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

[Ярослав Иванов]

AlexandrMa, ну а цель то? Шило на мыло на данном примере.

[Олег]

Ярослав Иванов, учится человек структурировать код, чтобы потом в своей же "лапше" не запутаться.

[Ярослав Иванов]

Олег, ну так бы и написал)

[Олег]

Ярослав Иванов, в топике очень прозрачно написано: "Не знаю как это назвать. Как это сделать?" ))

Answer 1

[Олег]

Это называется создать объект JavaScript.

window.my_custom_object={
    init:function(){ 
         // ваши инструкции
         alert('Скрипт работает!') // для теста можете оставить
    },
    another_function:function(){
        // ещё один метод объекта с вашими инструкциями
        alert('Второй скрипт тоже работает!'); // для теста можете оставить
    },
    parameter_1: "abc",
    parameter_2: 1
}
// вызываем метод init, прописанный в объекте
my_custom_object.init();
// вызываем метод another_function, прописанный в объекте
my_custom_object.another_function();
// вызываем параметр parameter_1, хранимый в объекте
alert(my_custom_object.parameter_1) // покажет вам текст "abc"
// вызываем параметр parameter_2, хранимый в объекте
alert(my_custom_object.parameter_2) // покажет вам текст "1"

Правда от этого этот код из глобальной области никуда не денется.

Comments

[AlexandrMa]

спасибо, понял куда копать. Под фразой "создать объект JavaScript" чаще всего вылетает информация не как о классе.

[Олег]

AlexandrMa, в js не задумывался тип данных class, в js всё можно рассматривать, как object. Object нам и война, и мать родна. Я дополнил пример выводом внутренних параметров объекта.

Если понадобится перебирать параметры через цикл foreach не забудьте добавить условие на проверку типа данных оператором typeof(variable) - иначе будете выводить и функции на экран, и строки и цифры.
Типы в js следующие:
Undefined "undefined"
Null "object"
Boolean "boolean"
Number "number"
String "string"
Function "function"
Любой другой объект "object"

А при копировании параметров объекта - вы будете копировать ссылку на ячейку памяти в компьютере, храняющую этот параметр. Будьте осторожны.

[AlexandrMa]

По большому счету у меня всего 3 метода
1. получить данные getData
2. на основе их создать таблицу. createTable
3. Установить addEventListener на только что созданные элементы.

Мой код очень похож на разбросанные данные и функции, которые я никак не могу обернуть в одно целое)

[Олег]

AlexandrMa, вместо объекта можете просто написать 4 функции
Это будет уже функциональное программирование.

function init(){
    // тут навешиваем обработчики domContentLoaded    
    // и вызов getData()
    // и вызов onclick()
}
function onclick(){
   // тут навешиваем обработчики onClick
}
function getData(){
  // ваша уже написанная getData()
}
function createTable(els){
  // ваша уже написанная createTable()
}
// и делаем один раз Init()
init();

[AlexandrMa]

Олег, да в том и дело, что от него ухожу. Спасибо. Буду разбираться.

[Олег]

AlexandrMa, тогда успехов с объектами!
Тут всё классно разжёвано: https://learn.javascript.ru/object

[Alex]

Олег, Только для такого подхода, эти функции нужно вынести в отдельный файл и экспортировать.

[Alex]

AlexandrMa, https://learn.javascript.ru/class

[Олег]

Alex, да и создаваемый объект полезно вынести в отдельный файл. Главное задокументировать хорошечно откуда ноги растут у объекта и функций. О, вот и вы меня просветили. Спасибо)

[AlexandrMa]

Я верно сделал?) Есть какие-то замечания или в таком стиле можно программировать и дальше?

let my = {

  items: [],

  init: function() {
    this.getData();
  },

  getData: function(){
    this.items = this.getJson({'action': 'get_items'});
  },

  getJson: function (param = null){

    /*let req = new XMLHttpRequest();
    req.open('POST', '/json.php');
    if(param === null){
    req.send();
    }else{
    req.send(JSON.stringify(param));
    }
    req.onreadystatechange = function(){
    if(req.readyState === 4 && req.status === 200){
      return JSON.parse(req.responseText);
    }
    }*/

    return [1,2,3,4,5];
  }

}

my.init();
console.log(my);

[AlexandrMa]

Олег, ну вот сделал)

[Олег]

AlexandrMa, красавчик!)

[WbICHA]

AlexandrMa, только используй не это визуальное извращение:
init: function() {
а это:
init() {

А вообще непонятно почему тебе это советовали запихнуть в объект, когда в жс давным давно классы есть. Понятное дело, что класс ─ это сахар, но в данном случае смысла использовать объект я вообще не вижу.