Tại sao các đối tượng được sử dụng trong JavaScript?

Khi chúng tôi hoàn thành với tệp

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

4, chúng tôi sẽ chuyển sang tệp

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

5 và thực hiện tất cả logic JavaScript ở đó

Đầu tiên, chúng ta sẽ tạo một Movie lớp cho phép chúng ta thêm phim. Sau này, lớp này sẽ có một hàm khởi tạo sẽ được sử dụng để định nghĩa và khởi tạo các đối tượng cũng như các tính năng của chúng. Nhà xây dựng này sẽ bao gồm một tiêu đề, đạo diễn và năm mà bộ phim được phát hành

class Movie {
  constructor[title, director, year] {
	this.title = title
	this.director = director
	this.year = year
	}
}

Để bắt đầu, chúng tôi đã tạo một mảng

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

0 để chúng tôi có thứ gì đó để hiển thị trước khi người dùng bắt đầu thêm bản ghi của mình

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

Tiếp theo, chúng tôi sẽ tạo một lớp giao diện người dùng nơi chúng tôi sẽ xử lý các chức năng phim

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

1,

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

2 và

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

3 trong 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[]

Bây giờ, chúng ta sẽ xử lý nút 'Thêm phim'; . Hàm này sẽ lưu trữ các giá trị đầu vào trong các biến tương ứng của chúng và khởi tạo một đối tượng Phim mới sẽ thêm đối tượng phim vào lớp UI

________số 8

Tiếp theo, chúng ta phải xử lý việc xóa các trường sau khi người dùng đã thêm bản ghi;

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

Chúng tôi sẽ hiển thị các thông báo cảnh báo về việc thêm, xóa và các giá trị đầu vào không hợp lệ thông qua phương thức

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

5 trong lớp UI sẽ lấy hai đối số làm đầu vào [thông báo sẽ được hiển thị dựa trên hành động của người dùng và lớp sẽ được thêm vào cảnh báo]

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

1

Chúng tôi cũng có thể thêm xác thực trong phương thức

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

4 nếu người dùng nhập bất kỳ bản ghi nào có giá trị đầu vào trống

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

3

Điều này đưa chúng ta đến phần cuối của ứng dụng đơn giản thể hiện việc sử dụng các lớp và phương thức theo cách OOP. Tôi hy vọng bạn sẽ tìm thấy ứng dụng này hữu ích

Mã hóa vui vẻ và chúc một ngày tốt lành

từ chối trách nhiệm. Tôi biết đây có thể không phải là cách tiếp cận tốt nhất cho vấn đề này. Tuy nhiên, mục đích ở đây chỉ là để chứng minh việc sử dụng các đối tượng và các lớp; . Bạn luôn được chào đón để đưa ra ý tưởng của bạn

Các đối tượng được sử dụng trong JavaScript ở đâu?

Đối tượng trong JavaScript là tập hợp các cặp khóa/giá trị . Các giá trị có thể bao gồm các thuộc tính và phương thức và có thể chứa tất cả các loại dữ liệu JavaScript khác, chẳng hạn như chuỗi, số và Booleans. Tất cả các đối tượng trong JavaScript xuất phát từ hàm tạo Đối tượng gốc.

Tại sao các đối tượng hữu ích?

Các đối tượng có thể tồn tại như một phần của hệ sinh thái lớn hơn nhiều bao gồm các đối tượng khác. Trước các đối tượng, chỉ có một lệnh duy nhất có thể được thực thi tại bất kỳ thời điểm nào. Sau khi Đối tượng ra đời, nhiều đối tượng có thể thực thi các lệnh đồng thời, giao quyền điều khiển cho hệ điều hành để quản lý việc thực thi các tác vụ .