Ứng dụng Prototype trong JavaScript viết Slideshow

Giới thiệu Nguyên mẫu

Chắc hẳn ai cũng đã từng nghe đến khái niệm Nguyên mẫu trong JavaScript không phải nó?

Nếu bạn chưa biết về khái niệm này, bạn có thể tham khảo các tài liệu sau:

• https://toidicodedao.com/2016/02/02/series-javascript-sida-po-ro-to-tai-prototype-la-cai-gi/

• https://kipalog.com/posts/prototype-la-khi-gi/

Tóm lại, Prototype là một cách để thực hiện kế thừa của một Object trong JavaScript. Tất cả chúng ta đều hiểu về OOP, nhưng áp dụng OOP cho JS thì khá khó khăn, lạ lẫm, bởi vì ngôn ngữ JS rất “oái oăm” (theo Phạm Huy Hoàng – toidicodedao.com), đúng là mọi người viết JS theo hướng FP (Lập trình hàm) như một thói quen lâu đời khó phá bỏ.
Vì vậy, bài viết này giúp bạn vận dụng kiến ​​thức về Prototype để tự mình viết một Image Slideshow đơn giản nhằm có cái nhìn thực tế hơn về OOP trong JS.
Bài viết gồm 2 phần:
Phần 1 – viết thanh trượt theo hướng chức năng – cách tiếp cận phổ biến cho mọi người
Phần 2 – Tối ưu hóa thanh trượt hướng tới OOP – sử dụng nguyên mẫu.
Ứng dụng nguyên mẫu trong JavaScript viết Trình chiếu

Viết thanh trượt hàm

Thanh trượt của chúng ta là một trình chiếu hình ảnh rất quen thuộc trong các trang web. Có 2 nút để chuyển đổi hình ảnh.
Đầu tiên là phần HTML:

Nhúng thư viện jQuery giúp viết mã dễ dàng hơn Chia mã thanh trượt của chúng tôi thành File riêng biệt.

– Phần JavaScript / jQuery: http://jsfiddle.net/a0Luphbk/6/

Phân tích đoạn mã JS ở trên: Đầu tiên, bao bọc mã của chúng tôi là một hàm ẩn danh để ngăn chặn xung đột với các thư viện sử dụng dấu $ không phải jQuery như Mootools hoặc PrototypeJS.
Sau đó, chúng ta khai báo các biến cần thiết cho thanh trượt.
Khi nhấp vào nút Tiếp theo, chúng tôi nhận ra rằng nhờ data-dir = “next”, chúng tôi sẽ tăng biến vị trí hiện tại lên 1.
Chức năng Transition có tác dụng di chuyển hình ảnh số 1 sang trái 200px (imgWidth) – sẽ hiển thị hình ảnh số 2.

Mình nghĩ bạn cần xem =>  Doanh thu là gì? Tìm hiểu tất tần tật về Doanh Thu

Tối ưu hóa nguyên mẫu

Bây giờ chúng ta sẽ viết Hàm trên dưới dạng Thanh trượt lớp OOP thuần túy
Constructor. Thay vì Chọn Phần tử trong hàm như phần 1, tôi sẽ truyền Khối lệnh của Thanh trượt lớp:

Trong đó Vùng chứa là $ (‘. Slider’). Trẻ em (‘ul’)
Và điều hướng là $ (‘# slider-nav’). Tìm (‘nút’)
Vẫn là imgs biến và kích thước của nó.
Hiện tại lúc này chúng ta chọn root = 0
this.events.click.call (this) – chúng tôi sử dụng lệnh gọi để đảm bảo rằng chúng tôi luôn chuyển lớp Slider this trong phương thức events.click.
Xây dựng xong, chúng tôi sẽ tiếp tục viết event.click

Ở đây chúng tôi đã áp dụng kiến ​​thức Nguyên mẫu đã học, xác định một Phương thức cho Lớp trượt hiện có.
Sự kiện ở đây thực chất là một Đối tượng có Phương thức nhấp chuột (nếu chúng ta gọi hàm nhấp chuột trong hàm tạo mà không sử dụng lệnh gọi thì đây sẽ được hiểu là hàm nhấp chuột).
Sự kiện nhấp chuột này thực hiện hai việc: setCurrent và hiệu ứng Transition. Tính ra, tác phẩm giống hệt cái bấm khi viết bằng Hàm, nhưng trông sáng và rõ hơn rất nhiều.

Tiếp theo, chúng tôi xác định phương pháp setCurrent

Dòng mã đặt lại this. Dòng điện nếu nó <0 nếu không dòng điện sẽ là modulo cho 4.

Tiếp theo, chúng ta xác định Phương thức chuyển đổi:

Phương pháp này cũng ngắn hơn so với phiên bản đầu tiên.
Tương ứng với hình thứ 3, dòng điện sẽ là 2 (bắt đầu từ 0), 2 * 400 = 800 => margin-left:

Mình nghĩ bạn cần xem =>  Tất tần tật AJAX là gì, hoạt động như thế nào và được sử dụng để làm gì?

Khác với phương thức Hàm, phương thức OOP chúng ta phải khởi tạo Instance từ Object Slider và truyền vào 2 tham số:

Bạn có thể tham khảo bộ mã Slider được tối ưu hóa với Prototype này tại đây: https://jsfiddle.net/r6x3sLb1/2/

Như vậy là chúng ta đã viết được một bài trình chiếu ảnh đơn giản, áp dụng kiến ​​thức nguyên mẫu đã học.
Phải thừa nhận rằng Code j được viết theo OOP trông gọn gàng và dễ hiểu hơn rất nhiều so với Function, đặc biệt là các hàm phức tạp.
Học đi đôi với hành, hy vọng các bạn sẽ cải thiện được Object Slider này để nó linh hoạt hơn, nhiều Options hơn, cũng như viết được nhiều Object j theo hướng OOP.

Qua bài viết Prototype này, có một câu hỏi dành cho bạn: tại sao Slider nên viết Chuyển đổi phương thức, setCurrent, sự kiện ... Bên ngoài thông qua Nguyên mẫu? Tại sao không viết ngay bên trong Đối tượng như:

Nhưng khi chúng ta sử dụng Prototype, các Method này không được tạo ra khi khởi tạo Instance, nó tồn tại trong Prototype, tức là Slider.prototype. Và chỉ khi Instance gọi this.events.click.call (this) Phương pháp này có thể được sử dụng, tương ứng với thanh trượt var.
Thứ hai, các Phương thức này được chia sẻ với tất cả các Phiên bản được tạo từ Object Slider
Ở đây chúng ta đang nói về lợi thế của việc sử dụng Prototype là sử dụng bộ nhớ – Hiệu suất. Chúng tôi chỉ viết một Phương thức bên trong Hàm tạo khi và chỉ khi Phương thức đó truy cập các biến cục bộ (Riêng) và là độc quyền cho mỗi trường hợp.

Mình nghĩ bạn cần xem =>  Các lệnh SSH cơ bản bạn không thể không biết

Nguồn: kipalog.com

✤ Top 20 bài viết Tổng Hợp mới nhất :

Xem thêm nhiều Tổng Hợp mới hay

Leave A Reply

Your email address will not be published.