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

Я могу легко объяснить, что с точки зрения объекта:

const dress = {
color: "Red",
fabric: "silk",
length: "100m",
size: "medium"
}

Мы знаем, что мы можем создавать классы из этих объектов и манипулировать им в соответствии с нашей программой, вы можете более подробно прочитать о основных концепциях ориентированного на объект программирования здесь: https://developer.mozilla.org/en-us/docs/learn/javascript/objects/object-oriented_js Однако в этой статье я буду обсуждать практическую упречую/проекту, где мы фактически используем классы и методы (внутри классов) и узнаем, как мы можем упростить наш код с помощью части JavaScript, а также вы получите Знайте, что, как только вы понимаете практический подход объектов, они станут вашими лучшими друзьями в программировании.

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

Прежде всего создайте новый файл index.html. Я буду использовать BootSwatch и Stone Awesome (для значков). Основная структура нашего файла индекса выглядит так:

    
    
    


     MoviesDatabaseList


    

     Title
     
    
    

     Director
     
    
    

     Year
     
    
    


    

       

         
Title
         
Director
         
Year
         

        
    
    



   

После того, как мы закончили с файлом index.html, теперь мы перейдем к файлу Script.js и сделайте все логику JavaScript там. Сначала мы создадим класс кино, который позволит нам добавлять фильмы позже, этот класс будет иметь функцию конструктора, которая используется для определения и инициализации объектов и их функций, этот конструктор будет состоять в том, чтобы название, директор и год, в котором Фильм был выпущен:

class Movie {
  constructor(title, director, year) {
    this.title = title
    this.director = director
    this.year = year
    }
}

Для начала мы создали массив по умолчанию, чтобы у нас есть что-то отображать, прежде чем пользователь начнет добавлять его/ее записи:

const defaultMovies = [
    {
    title: 'Jurassic Park',
    director: 'John Doe',
    year: '1990'
    },
    {
    title: 'The Dead Pool',
    director: 'Mathew Albison',
    year: '2014'
    }
]

Далее мы создадим класс пользовательского интерфейса, где мы будем обрабатывать дисплей, добавлять и удалять функции фильмов в DOM:

class UI{

static displayMovies = () =>{
    defaultMovies.forEach(movie=>UI.addMovieToList(movie))
    }

static addMovieToList = (movie) => {
const list = document.getElementById('movie-list');
const row = document.createElement('tr')
row.innerHTML=`
${movie.title}
    ${movie.director}
    ${movie.year}
    X`

    list.appendChild(row)
    }

static deleteMovie(movie){
if(movie.classList.contains('delete')){
movie.parentElement.parentElement.remove()
}
}
}

UI.displayMovies()

Теперь мы будем иметь дело с кнопкой «Добавить movie», когда пользователь вводит значения входных данных, и нажимает кнопку «Добавить», то будет называться следующая дополнительная функция Addamovie, которая будет хранить входные значения в соответствующих переменных и создать новый объект фильма и будет Добавьте объект фильма в класс UI:

// Event: Add a Movie
document.querySelector('#movie-form').addEventListener('submit', addAMovie, false)

function addAMovie(e) {
// prevent actual submission
e.preventDefault()
// Get Form Values
   const title =document.querySelector('#title').value;
   const director =document.querySelector('#director').value;
   const year =document.querySelector('#year').value;

// Instantiate a new Book object
const movie = new Movie(title,director,year)
// Add book object to UI
  UI.addMovieToList(movie)
  UI.showAlert("Movie Added", 'success')
  UI.clearFields();
}

Теперь мы должны позаботиться о очистке поля после того, как пользователь добавил запись, это делается путем определения метода Clearfields в классе UI:

static clearFields(){
    document.querySelector('#title').value="";
    document.querySelector('#director').value="";
    document.querySelector('#year').value="";
}

Мы покажем сообщения о предупреждении о добавлении, удалении и недопустимых значениях входных данных через метод Showalert в классе UI, который займет два аргумента в качестве ввода, сначала сообщение, которое будет показано на основе действий пользователя и класса, который будет добавлен в оповещении.

static showAlert(message,className){
const div = document.createElement('div')
      div.innerText = message
      div.className = `alert alert-${className}`
      document.getElementById('movie-form').prepend(div)
  setTimeout(()=>document.querySelector('.alert').remove(),2000)
}

Мы также можем добавить проверку в методе Addamovie, если пользователь вводит любую запись с пустыми входными значениями:

if(!title || !director || !year){
UI.showAlert("Please enter correct details", "danger")
return
} 

Это приводит нас к концу этого простого приложения, которое демонстрирует использование классов и методов ооом. Я надеюсь, что вы найдете это приложение полезно.

Качается кодирование и хорошего дня.

Отказ от ответственности: Я знаю, что это не может быть лучшим подходом для этой проблемы, но здесь цель – только продемонстрировать использование объектов и классов, поэтому я взял этот раствор. Вы всегда можете привлекать к вашим решениям и масштабировать приложение столько, сколько хотите.

Оригинал: “https://dev.to/nasreenkhalid/javascript-objects-and-the-practical-use-of-them-ga9”